Skip to content
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

Merged
merged 4 commits into from
Sep 26, 2022

Conversation

scruffian
Copy link
Contributor

@scruffian scruffian commented Sep 21, 2022

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

  • Check the visual appearance of buttons blocks in both the frontend and the editor, in both classic and block themes.
  • It's worth testing various different themes as they all handle buttons differently!

Screenshots or screencast

Screenshot 2022-09-21 at 17 20 09

Screenshot 2022-09-21 at 17 19 50

Screenshot 2022-09-21 at 17 19 16

Screenshot 2022-09-21 at 17 18 47

@scruffian scruffian added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Sep 21, 2022
@scruffian scruffian self-assigned this Sep 21, 2022
@github-actions
Copy link

github-actions bot commented Sep 21, 2022

Size Change: +390 B (0%)

Total Size: 1.26 MB

Filename Size Change
build/block-directory/index.min.js 7.08 kB +3 B (0%)
build/block-editor/index.min.js 163 kB +19 B (0%)
build/block-editor/style-rtl.css 15.4 kB +1 B (0%)
build/block-editor/style.css 15.4 kB +4 B (0%)
build/block-library/index.min.js 190 kB +51 B (0%)
build/components/index.min.js 198 kB +306 B (0%)
build/style-engine/index.min.js 1.45 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 605 B
build/block-library/blocks/cover/editor.css 607 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 337 B
build/block-library/blocks/group/editor.css 337 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 876 B
build/block-library/blocks/image/editor.css 873 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 1.99 kB
build/block-library/blocks/navigation/editor.css 2 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 493 B
build/block-library/blocks/post-comments-form/style.css 493 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 547 B
build/block-library/blocks/post-featured-image/editor.css 545 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 488 B
build/block-library/blocks/site-logo/editor.css 488 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 239 B
build/block-library/blocks/tag-cloud/style.css 239 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11 kB
build/block-library/editor.css 11 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.2 kB
build/block-library/style.css 12.2 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.1 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.8 kB
build/components/style-rtl.css 11.4 kB
build/components/style.css 11.5 kB
build/compose/index.min.js 12.5 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.8 kB
build/edit-post/style-rtl.css 6.94 kB
build/edit-post/style.css 6.94 kB
build/edit-site/index.min.js 57.6 kB
build/edit-site/style-rtl.css 8.36 kB
build/edit-site/style.css 8.34 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/index.min.js 41.6 kB
build/editor/style-rtl.css 3.62 kB
build/editor/style.css 3.61 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.76 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 953 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@oandregal
Copy link
Member

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 __experimentalStyles API (at the moment, navigation & pullquote)? Do we migrate to this file any CSS that uses that API?

@scruffian
Copy link
Contributor Author

I think it would be better to look at that on a case by case basis.

@scruffian
Copy link
Contributor Author

One thing that gives me pause is this: how should we address the missing styles for any other block that uses the __experimentalStyles API (at the moment, navigation & pullquote)? Do we migrate to this file any CSS that uses that API

These are different because they are block styles, not element styles from the core theme.json.

Copy link
Member

@oandregal oandregal left a 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 in block.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' );
Copy link
Member

@ramonjd ramonjd Sep 23, 2022

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?

Copy link
Member

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 👍

@ramonjd
Copy link
Member

ramonjd commented Sep 23, 2022

though I'd like to have another pair of eyes to look at this (style engine people, etc.).

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 after_setup_theme, which triggers a notice

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. Please see [Debugging in WordPress](https://wordpress.org/support/article/debugging-in-wordpress/) for more information. (This message was added in version 3.3.0.) in /var/www/html/wp-includes/functions.php on line 5839 Notice: Function wp_enqueue_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. Please see [Debugging in WordPress](https://wordpress.org/support/article/debugging-in-wordpress/) for more information. (This message was added in version 3.3.0.) in /var/www/html/wp-includes/functions.php on line 5839

Copy link
Member

@aristath aristath left a 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 👍

@scruffian
Copy link
Contributor Author

The problem with wp_enqueue_scripts is that it doesn't run in the editor, but I also added an action on admin_enqueue_scripts so hopefully that looks ok now?

@aristath
Copy link
Member

In that case, maybe init would be a better fit? It runs both on the front & dashboard, and we're doing it for other scripts/styles as well 👍

@scruffian
Copy link
Contributor Author

In that case, maybe init would be a better fit? It runs both on the front & dashboard, and we're doing it for other scripts/styles as well 👍

I don't feel strongly, but hooking to two actions seems ok to me.

@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Sep 26, 2022
Copy link
Contributor

@andrewserong andrewserong left a 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.

@scruffian scruffian merged commit a25ffd1 into trunk Sep 26, 2022
@scruffian scruffian deleted the fix/elements-in-classic-themes-2 branch September 26, 2022 15:30
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 26, 2022
@scruffian
Copy link
Contributor Author

I think this needs to go into 6.1. I started a backport here: WordPress/wordpress-develop#3331

ockham pushed a commit that referenced this pull request Sep 26, 2022
…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
@ockham
Copy link
Contributor

ockham commented Sep 26, 2022

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

@ockham 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 Sep 26, 2022
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 27, 2022
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
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 27, 2022
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
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 27, 2022
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
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 29, 2022
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
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 29, 2022
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
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 29, 2022
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
@ethanclevenger91
Copy link

ethanclevenger91 commented Oct 17, 2022

I'm not sure if this is a note for this or for #43981 but I have a "classic theme" with a theme.json file where I'm defining button styles via the elements section:

"styles": {
	"elements": {
		"button": {
			"color": {
				"background": "var(--wp--preset--color--fl-yellow)",
				"text": "white"
			},
			"border": {
				"color": "white",
				"radius": "70px",
				"style": "solid",
				"width": "4px"
			},
			"typography": {
				"fontWeight": "700"
			}
		}
	}
}

And a subset of these styles are being overridden by the classic.css styles due to specificity or loading order:

image

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
Gutenberg plugin 14.3.0

@scruffian
Copy link
Contributor Author

@ethanclevenger91 Thanks, that's a great spot. I have a fix over here: #45063

@oandregal
Copy link
Member

There's a follow-up in core to remove this stylesheet https://core.trac.wordpress.org/ticket/56990

ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
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
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Buttons block: altered styling(colors, padding, border-radius)
8 participants