-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Global Styles: Re-add styles that were removed, for classic themes #44334
Conversation
Size Change: +390 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
I like that this is targeted to only add the styles that are missing. One thing that gives me pause is this: how should we address the missing styles for any other block that uses the |
I think it would be better to look at that on a case by case basis. |
These are different because they are block styles, not element styles from the core theme.json. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This approach works for me, though I'd like to have another pair of eyes to look at this (style engine people, etc.).
The reasons this works for me:
- I've learned that we are already shipping the styles of blocks that use the
__experimentalStyle
API inblock.json
so we only need to address the issue of what to do with element styles that lived in the block-library before (see). - It does not seem that we'll need to add any more CSS here, as the remaining elements (captions, form elements, etc) do not suffer from the same conditions the block button has (it is also an element).
- Unlike 43981, the styles we add here for classic themes are explicit (I wonder if there're any more styles we can migrate here and remove elsewhere).
wp_enqueue_style( 'classic-theme-styles' ); | ||
} | ||
} | ||
add_action( 'after_setup_theme', 'gutenberg_enqueue_classic_theme_styles' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This hook throws the following notice for me:
Notice: Function wp_register_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the classic-theme-styles handle.
I've tested the following –
add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_classic_theme_styles' );
add_action( 'init', 'gutenberg_enqueue_classic_theme_styles' );
– and both work. Not sure which is better. I suppose I'd lean towards wp_enqueue_scripts
since it's how we enqueue the other styles?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure which is better. I suppose I'd lean towards wp_enqueue_scripts since it's how we enqueue the other styles?
Yes, wp_enqueue_scripts
would be the right hook to use in this scenario 👍
From the style engine perspective, I don't think there's much to add. In relation to elements, the style engine is only outputting links in elements.php. I've tested in numerous classic and block themes, and the buttons are appearing as I expected. I just had a question over the use of the hook
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good!
I'll go ahead and pre-approve the PR, pending the change from after_setup_theme
to wp_enqueue_scripts
as mentioned in an earlier comment 👍
The problem with |
In that case, maybe |
I don't feel strongly, but hooking to two actions seems ok to me. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work @scruffian, I think this is the best compromise of all the options, and as both you and @oandregal have mentioned, it ensures that we don't continue to add styles to theme.json
and accidentally cause issues for Classic themes. The other thing I really like about this approach is that for Classic themes that wish to disable this stylesheet, they can pretty simply dequeue it.
Tested with a range of Classic themes (TwentyTwentyOne, TwentyTwenty, TwentyNineteen, Canape, Dara, Sequential) and a couple of blocks-based themes to ensure it's all working correctly, and this LGTM! ✨
From the perspective of major core releases, I imagine this is a bug fix, so can make it into 6.1? I've added the Bug and Backport labels.
I think this needs to go into 6.1. I started a backport here: WordPress/wordpress-develop#3331 |
…44334) * Global Styles: Readd styles that were removed, for classic themes * change the action on which to run the hook * Add an explanatory comments * update comment
I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 75786cd |
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54335 git-svn-id: http://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54335 git-svn-id: https://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
After block CSS was merged with `theme.json` styles in [WordPress/gutenberg#34180 Gutenberg PR #34180], this removed some existing, default styling for some elements, including buttons. This change re-adds the removed styles by enqueueing `classic.css` for classic themes. Merges [WordPress/gutenberg#44334 Gutenberg PR #44334] into trunk. Follow-up to [54257]. Props scruffian, oandregal, ramonopoly, aristath, andrewserong, get_dave, bernhard-reiter. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54358 602fd350-edb4-49c9-b593-d223f7449a82
After block CSS was merged with `theme.json` styles in [WordPress/gutenberg#34180 Gutenberg PR #34180], this removed some existing, default styling for some elements, including buttons. This change re-adds the removed styles by enqueueing `classic.css` for classic themes. Merges [WordPress/gutenberg#44334 Gutenberg PR #44334] into trunk. Follow-up to [54257]. Props scruffian, oandregal, ramonopoly, aristath, andrewserong, get_dave, bernhard-reiter. See #56467. Built from https://develop.svn.wordpress.org/trunk@54358 git-svn-id: http://core.svn.wordpress.org/trunk@53917 1a063a9b-81f0-0310-95a4-ce76da25c4cd
After block CSS was merged with `theme.json` styles in [WordPress/gutenberg#34180 Gutenberg PR #34180], this removed some existing, default styling for some elements, including buttons. This change re-adds the removed styles by enqueueing `classic.css` for classic themes. Merges [WordPress/gutenberg#44334 Gutenberg PR #44334] into trunk. Follow-up to [54257]. Props scruffian, oandregal, ramonopoly, aristath, andrewserong, get_dave, bernhard-reiter. See #56467. Built from https://develop.svn.wordpress.org/trunk@54358 git-svn-id: https://core.svn.wordpress.org/trunk@53917 1a063a9b-81f0-0310-95a4-ce76da25c4cd
I'm not sure if this is a note for this or for #43981 but I have a "classic theme" with a
And a subset of these styles are being overridden by the Seems to me this is still not working quite as it should, unless the expectation is that I, as a theme author, explicitly dequeue the classic styles. WP 6.0.2 |
@ethanclevenger91 Thanks, that's a great spot. I have a fix over here: #45063 |
There's a follow-up in core to remove this stylesheet https://core.trac.wordpress.org/ticket/56990 |
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
After block CSS was merged with `theme.json` styles in [WordPress/gutenberg#34180 Gutenberg PR #34180], this removed some existing, default styling for some elements, including buttons. This change re-adds the removed styles by enqueueing `classic.css` for classic themes. Merges [WordPress/gutenberg#44334 Gutenberg PR #44334] into trunk. Follow-up to [54257]. Props scruffian, oandregal, ramonopoly, aristath, andrewserong, get_dave, bernhard-reiter. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54358 602fd350-edb4-49c9-b593-d223f7449a82
What?
This is another attempt at #43981.
In classic themes we don't output the styles for elements, which we rely on for button styles. This adds a classic.scss file that will be output in all classic themes to ensure that those styles are preserved.
Fixes Automattic/wp-calypso#64917
We might decide in the future to create one file per block, but I don't anticipate this being a common problem, so for now I think this solution is sufficient.
Why?
These styles were removed in #34180. We explored adding them to all themes in #43981 but this seems impossible because every theme handles buttons differently.
Testing Instructions
Screenshots or screencast