New form controls CSS rules conflict with the metaboxes and custom fields areas

[afercia]

Splitting this out from #14509 (comment)

With the change made on #14509, the Gutenberg CSS rules for its form controls now target also any form controls within the metaboxes area and the custom fields area.

See for example Yoast/wordpress-seo#13316

The reason is simple:

• before: all the input rules were scoped to specific parts of the Gutenberg UI:

.editor-post-permalink,
.edit-post-sidebar,
.editor-post-publish-panel,
.block-editor-block-list__block,
.components-popover,
.components-modal__content 

• after: they're in the new mixin which is scoped to .block-editor and .block-editor is the Gutenberg main container, which includes both the metaboxes and custom fields areas.

In other words, this is a breaking change because it will likely break User Interfaces provided by plugins. It should either be communicated to plugin authors well in advance so they can adjust their CSS or (preferably) the new mixin should be better scoped.

[paaljoachim]

Is this issue still valid?

@joedolson Joe. I am pinging you in again. Thanks.

[joedolson]

This is outside of the accessibility scope, so I'm not going to do a lot of investigation; but given that this is an issue with a breaking change that appears to be 18 months old, I would assume that developers will have worked around it by now. Might be closed by #16856

[paaljoachim]

I'll also ping @tellthemachines Isabel as well. Just to be sure.

[tellthemachines]

Yup, #16856 fixed the issue. Closing.