Buttons: Add specificity for the editor #44731

scruffian · 2022-10-06T10:15:10Z

What?

In #44334 we added styles for buttons in classic themes, but the styles were added with a global scope, whereas editor styles are usually added with a .editor-styles-wrapper selector, which makes them more specific. This changes the way we add the classic theme styles so that they also get wrapped in an .editor-styles-wrapper selector, matching the specificity.

Why?

This ensures that the button styles for classic themes are maintained so they don't lose their styling.

Testing Instructions

Switch to a classic theme (like Twenty Ten)
Add a button in the editor
Check that the button looks the same as in the frontend (black background with white text and a pill shape in this case)
Switch to a block theme
Check that the classic theme styles don't load

Screenshots or screencast

ajlende

This is what I see in TwentyTen. It looks like the styles are applied correctly in the editor now and the frontend continues to look the same.

Editor

Before	After

Frontend

Before	After

It looks like there's still one doc comment error to fix, but once that's taken care of, this looks good to me.

* Button elements: Add specificity for the editor * only output on classic themes * lint fixes * add docblock * return the editor settings on a block theme

ockham · 2022-10-10T23:29:14Z

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: e2f4b7e

Package updates for bug and regression fixes: @wordpress/block-directory: 3.15.6 @wordpress/block-editor: 10.0.6 @wordpress/block-library: 7.14.6 @wordpress/components: 21.0.5 @wordpress/customize-widgets: 3.14.6 @wordpress/edit-post: 6.14.6 @wordpress/edit-site: 4.14.8 @wordpress/edit-widgets: 4.14.6 @wordpress/editor: 12.16.6 @wordpress/format-library: 3.15.6 @wordpress/interface: 4.16.5 @wordpress/list-reusable-blocks: 3.15.5 @wordpress/nux: 5.15.5 @wordpress/preferences: 2.9.5 @wordpress/reusable-blocks: 3.15.6 @wordpress/server-side-render: 3.15.5 @wordpress/widgets: 2.15.6 References: * [WordPress/gutenberg#43181 Gutenberg PR 43181] - Merge inner blocks if wrappers are equal * [WordPress/gutenberg#44098 Gutenberg PR 44098] - Fix content blocks with nested blocks always appear as top level * [WordPress/gutenberg#44150 Gutenberg PR 44150] - Refresh selection styles * [WordPress/gutenberg#44415 Gutenberg PR 44415] - Removes `__unstableMaxPages` attribute from Page List and Nav blocks * [WordPress/gutenberg#44463 Gutenberg PR 44463] - Follow discussion settings in the comments block edit * [WordPress/gutenberg#44584 Gutenberg PR 44584] - Avoid querying block templates during installation * [WordPress/gutenberg#44637 Gutenberg PR 44637] - Resizable editor: Fix height setting bug * [WordPress/gutenberg#44640 Gutenberg PR 44640] - Only include theme.css if the theme declares support for wp-block-styles * [WordPress/gutenberg#44650 Gutenberg PR 44650] - Fix empty links being created for the author's name comment * [WordPress/gutenberg#44652 Gutenberg PR 44652] - Block Editor: Fix block search for non-Latin characters * [WordPress/gutenberg#44660 Gutenberg PR 44660] - Legacy Group inner block wrapper should work with constrained layout * [WordPress/gutenberg#44676 Gutenberg PR 44676] - Hide list items from content area of content locked blocks * [WordPress/gutenberg#44718 Gutenberg PR 44718] - Margin visualizer: Apply negative value to margins with `calc()` * [WordPress/gutenberg#44721 Gutenberg PR 44721] - Remove anchor support from the navigation block * [WordPress/gutenberg#44731 Gutenberg PR 44731] - Buttons: Add specificity for the editor Follow-up to [54257], [54335], and [54383]. Props bernhard-reiter, czapla, annezazu, cbravobernal, ndiego, bjorsch, nendeb55. See #56467. Built from https://develop.svn.wordpress.org/trunk@54483 git-svn-id: http://core.svn.wordpress.org/trunk@54042 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Package updates for bug and regression fixes: @wordpress/block-directory: 3.15.6 @wordpress/block-editor: 10.0.6 @wordpress/block-library: 7.14.6 @wordpress/components: 21.0.5 @wordpress/customize-widgets: 3.14.6 @wordpress/edit-post: 6.14.6 @wordpress/edit-site: 4.14.8 @wordpress/edit-widgets: 4.14.6 @wordpress/editor: 12.16.6 @wordpress/format-library: 3.15.6 @wordpress/interface: 4.16.5 @wordpress/list-reusable-blocks: 3.15.5 @wordpress/nux: 5.15.5 @wordpress/preferences: 2.9.5 @wordpress/reusable-blocks: 3.15.6 @wordpress/server-side-render: 3.15.5 @wordpress/widgets: 2.15.6 References: * [WordPress/gutenberg#43181 Gutenberg PR 43181] - Merge inner blocks if wrappers are equal * [WordPress/gutenberg#44098 Gutenberg PR 44098] - Fix content blocks with nested blocks always appear as top level * [WordPress/gutenberg#44150 Gutenberg PR 44150] - Refresh selection styles * [WordPress/gutenberg#44415 Gutenberg PR 44415] - Removes `__unstableMaxPages` attribute from Page List and Nav blocks * [WordPress/gutenberg#44463 Gutenberg PR 44463] - Follow discussion settings in the comments block edit * [WordPress/gutenberg#44584 Gutenberg PR 44584] - Avoid querying block templates during installation * [WordPress/gutenberg#44637 Gutenberg PR 44637] - Resizable editor: Fix height setting bug * [WordPress/gutenberg#44640 Gutenberg PR 44640] - Only include theme.css if the theme declares support for wp-block-styles * [WordPress/gutenberg#44650 Gutenberg PR 44650] - Fix empty links being created for the author's name comment * [WordPress/gutenberg#44652 Gutenberg PR 44652] - Block Editor: Fix block search for non-Latin characters * [WordPress/gutenberg#44660 Gutenberg PR 44660] - Legacy Group inner block wrapper should work with constrained layout * [WordPress/gutenberg#44676 Gutenberg PR 44676] - Hide list items from content area of content locked blocks * [WordPress/gutenberg#44718 Gutenberg PR 44718] - Margin visualizer: Apply negative value to margins with `calc()` * [WordPress/gutenberg#44721 Gutenberg PR 44721] - Remove anchor support from the navigation block * [WordPress/gutenberg#44731 Gutenberg PR 44731] - Buttons: Add specificity for the editor Follow-up to [54257], [54335], and [54383]. Props bernhard-reiter, czapla, annezazu, cbravobernal, ndiego, bjorsch, nendeb55. See #56467. Built from https://develop.svn.wordpress.org/trunk@54483 git-svn-id: https://core.svn.wordpress.org/trunk@54042 1a063a9b-81f0-0310-95a4-ce76da25c4cd

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54687 602fd350-edb4-49c9-b593-d223f7449a82

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54687 git-svn-id: http://core.svn.wordpress.org/trunk@54239 1a063a9b-81f0-0310-95a4-ce76da25c4cd

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54687 git-svn-id: https://core.svn.wordpress.org/trunk@54239 1a063a9b-81f0-0310-95a4-ce76da25c4cd

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. Merges [54687] to the 6.1 branch. See #56467. git-svn-id: https://develop.svn.wordpress.org/branches/6.1@54688 602fd350-edb4-49c9-b593-d223f7449a82

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. Merges [54687] to the 6.1 branch. See #56467. Built from https://develop.svn.wordpress.org/branches/6.1@54688 git-svn-id: http://core.svn.wordpress.org/branches/6.1@54240 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Azragh · 2022-10-28T08:16:04Z

This change would actually break the look of all my websites backend developed in the last two years..

Before the update I had one default style declaration which I could overwrite easily with the class .wp-block-button__link:

After the update I have two default declarations, from which one overwrites my theme styles:

Is this intended or am I doing something wrong?

Package updates for bug and regression fixes: @wordpress/block-directory: 3.15.6 @wordpress/block-editor: 10.0.6 @wordpress/block-library: 7.14.6 @wordpress/components: 21.0.5 @wordpress/customize-widgets: 3.14.6 @wordpress/edit-post: 6.14.6 @wordpress/edit-site: 4.14.8 @wordpress/edit-widgets: 4.14.6 @wordpress/editor: 12.16.6 @wordpress/format-library: 3.15.6 @wordpress/interface: 4.16.5 @wordpress/list-reusable-blocks: 3.15.5 @wordpress/nux: 5.15.5 @wordpress/preferences: 2.9.5 @wordpress/reusable-blocks: 3.15.6 @wordpress/server-side-render: 3.15.5 @wordpress/widgets: 2.15.6 References: * [WordPress/gutenberg#43181 Gutenberg PR 43181] - Merge inner blocks if wrappers are equal * [WordPress/gutenberg#44098 Gutenberg PR 44098] - Fix content blocks with nested blocks always appear as top level * [WordPress/gutenberg#44150 Gutenberg PR 44150] - Refresh selection styles * [WordPress/gutenberg#44415 Gutenberg PR 44415] - Removes `__unstableMaxPages` attribute from Page List and Nav blocks * [WordPress/gutenberg#44463 Gutenberg PR 44463] - Follow discussion settings in the comments block edit * [WordPress/gutenberg#44584 Gutenberg PR 44584] - Avoid querying block templates during installation * [WordPress/gutenberg#44637 Gutenberg PR 44637] - Resizable editor: Fix height setting bug * [WordPress/gutenberg#44640 Gutenberg PR 44640] - Only include theme.css if the theme declares support for wp-block-styles * [WordPress/gutenberg#44650 Gutenberg PR 44650] - Fix empty links being created for the author's name comment * [WordPress/gutenberg#44652 Gutenberg PR 44652] - Block Editor: Fix block search for non-Latin characters * [WordPress/gutenberg#44660 Gutenberg PR 44660] - Legacy Group inner block wrapper should work with constrained layout * [WordPress/gutenberg#44676 Gutenberg PR 44676] - Hide list items from content area of content locked blocks * [WordPress/gutenberg#44718 Gutenberg PR 44718] - Margin visualizer: Apply negative value to margins with `calc()` * [WordPress/gutenberg#44721 Gutenberg PR 44721] - Remove anchor support from the navigation block * [WordPress/gutenberg#44731 Gutenberg PR 44731] - Buttons: Add specificity for the editor Follow-up to [54257], [54335], and [54383]. Props bernhard-reiter, czapla, annezazu, cbravobernal, ndiego, bjorsch, nendeb55. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54483 602fd350-edb4-49c9-b593-d223f7449a82

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54687 602fd350-edb4-49c9-b593-d223f7449a82

scruffian · 2022-11-15T13:52:59Z

If you're targeting .wp-block-button__link in your theme then when the CSS is loaded in the editor it should be wrapped with the .editor-styles-wrapper class, so it should have the same specificity as the default styles.

Azragh · 2022-11-15T14:57:31Z

@scruffian If you're looking at my last screenshot you can see that the class is present. The big ruleset in the middle is coming from my theme. The one above (which overrides my styles) came with this update. The one below was there since ever (except the new ".wp-element-button" class).

I load the block librarys CSS, so why do I get this "classic.css" file with only one declaration which is already present at all?

In the meantime I found out that I can dequeue "classic.css" from frontend, but this sadly doesn't work in the admin area cause it's inline there. Any advice to get rid of it?

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54687 git-svn-id: http://core.svn.wordpress.org/trunk@54239 1a063a9b-81f0-0310-95a4-ce76da25c4cd

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. Merges [54687] to the 6.1 branch. See #56467. Built from https://develop.svn.wordpress.org/branches/6.1@54688 git-svn-id: http://core.svn.wordpress.org/branches/6.1@54240 1a063a9b-81f0-0310-95a4-ce76da25c4cd

In [54358], styling for Button blocks that had been removed from classic themes was reintroduced. However, it was added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. This change modifies the way that classic theme styles are added so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity. Furthermore, adjust specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes. Merges [WordPress/gutenberg#44731 Gutenberg PR 44731] into trunk. Follow-up to [54358]. Props scruffian, cbravobernal, sabernhardt, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54687 git-svn-id: http://core.svn.wordpress.org/trunk@54239 1a063a9b-81f0-0310-95a4-ce76da25c4cd

scruffian added [Type] Bug An existing feature does not function as intended [Block] Buttons Affects the Buttons Block labels Oct 6, 2022

scruffian requested a review from spacedmonkey as a code owner October 6, 2022 10:15

scruffian self-assigned this Oct 6, 2022

scruffian mentioned this pull request Oct 6, 2022

WP6.1 Button block Themes based on block-library css will have a different style #44659

Closed

ajlende approved these changes Oct 7, 2022

View reviewed changes

ockham added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 7, 2022

scruffian added 4 commits October 7, 2022 14:29

Button elements: Add specificity for the editor

c464f19

only output on classic themes

b37d4d3

lint fixes

22b4e5d

add docblock

b4b1079

scruffian force-pushed the fix/44659 branch from b3a5ab7 to b4b1079 Compare October 7, 2022 13:29

return the editor settings on a block theme

ca5461c

scruffian merged commit d4fe76f into trunk Oct 7, 2022

scruffian deleted the fix/44659 branch October 7, 2022 17:05

github-actions bot added this to the Gutenberg 14.4 milestone Oct 7, 2022

ockham pushed a commit that referenced this pull request Oct 10, 2022

Buttons: Add specificity for the editor (#44731)

e2f4b7e

* Button elements: Add specificity for the editor * only output on classic themes * lint fixes * add docblock * return the editor settings on a block theme

ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 10, 2022

This was referenced Oct 11, 2022

Sync packages for WP 6.1 RC 1 WordPress/wordpress-develop#3434

Closed

Sync packages for WP 6.1 RC 1 (with Fluid Typography) WordPress/wordpress-develop#3437

Closed

scruffian mentioned this pull request Oct 17, 2022

Backport: Gutenberg 44731 WordPress/wordpress-develop#3481

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Buttons: Add specificity for the editor #44731

Buttons: Add specificity for the editor #44731

scruffian commented Oct 6, 2022

ajlende left a comment

ockham commented Oct 10, 2022

Azragh commented Oct 28, 2022

scruffian commented Nov 15, 2022

Azragh commented Nov 15, 2022

Buttons: Add specificity for the editor #44731

Buttons: Add specificity for the editor #44731

Conversation

scruffian commented Oct 6, 2022

What?

Why?

Testing Instructions

Screenshots or screencast

ajlende left a comment

Choose a reason for hiding this comment

Editor

Frontend

ockham commented Oct 10, 2022

Azragh commented Oct 28, 2022

scruffian commented Nov 15, 2022

Azragh commented Nov 15, 2022