Global Styles: Output defaults from theme.json for classic themes

[scruffian]

What?

In classic themes we don't output the styles for elements, which we rely on for button styles. This adds those rules to the global styles output for all themes so that buttons retain their styles.

Fixes https://github.com/Automattic/wp-calypso/issues/64917

Why?

We need buttons to work for classic themes as well as block themes.

How?

Previously we weren't outputting anything defined under styles for themes that don't support theme.json. However since in this case we already set the origins of the output to $origins = array( 'default' );, we don't need to worry about outputting the default rules from the core theme.json file.

For classic themes this means the following changes. This CSS is added:

body{
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
a:where(:not(.wp-element-button)){
    text-decoration: underline;
}
.wp-element-button, .wp-block-button__link{
    background-color: #32373c;
    border-width: 0;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;
}

Testing Instructions

1. Switch to a classic theme that doesn't specify its own button styles (I'm using Canape)
2. Check that button look broken in trunk
3. Check out this PR
4. Check that buttons now look correct:

[scruffian]

@andrewserong Thanks for looking into this, your insights are very valuable. I tried a different approach, which again attempts to simplify things. I switched some of the logic which means that the default editor styles are now output on all themes, not only block themes. This means the following CSS will be added to block themes in the editor:

/**
* Default editor styles.
*
* These styles are shown if a theme does not register its own editor style,
* a theme.json file, or has toggled off "Use theme styles" in preferences.
*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  --wp--style--block-gap: 2em;
}

p {
  line-height: 1.8;
}

.editor-post-title__block {
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 2.5em;
  font-weight: 800;
}

What do you think?

[github-actions[bot]]

Size Change: +744 B (0%)

Total Size: 1.25 MB

Filename	Size	Change
build/block-library/blocks/button/editor-rtl.css	482 B	+41 B (+9%)	🔍
build/block-library/blocks/button/editor.css	482 B	+41 B (+9%)	🔍
build/block-library/blocks/button/style-rtl.css	523 B	+18 B (+4%)
build/block-library/blocks/button/style.css	523 B	+18 B (+4%)
build/block-library/blocks/buttons/editor-rtl.css	337 B	+45 B (+15%)	⚠️
build/block-library/blocks/buttons/editor.css	337 B	+45 B (+15%)	⚠️
build/block-library/blocks/buttons/style-rtl.css	332 B	+57 B (+21%)	🚨
build/block-library/blocks/buttons/style.css	332 B	+57 B (+21%)	🚨
build/block-library/editor-rtl.css	11 kB	+39 B (0%)
build/block-library/editor.css	11 kB	+37 B (0%)
build/block-library/index.min.js	188 kB	+150 B (0%)
build/block-library/style-rtl.css	12 kB	+24 B (0%)
build/block-library/style.css	12 kB	+25 B (0%)
build/components/index.min.js	198 kB	+88 B (0%)
build/edit-post/index.min.js	30.7 kB	-2 B (0%)
build/edit-site/index.min.js	58.5 kB	+61 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/index.min.js	7.05 kB
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-editor/index.min.js	162 kB
build/block-editor/style-rtl.css	15.2 kB
build/block-editor/style.css	15.2 kB
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/calendar/style-rtl.css	207 B
build/block-library/blocks/calendar/style.css	207 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.15 kB
build/block-library/blocks/navigation/style.css	2.14 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	507 B
build/block-library/blocks/post-featured-image/editor.css	505 B
build/block-library/blocks/post-featured-image/style-rtl.css	166 B
build/block-library/blocks/post-featured-image/style.css	166 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	396 B
build/block-library/blocks/search/style.css	393 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/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/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/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.6 kB
build/components/style-rtl.css	11.5 kB
build/components/style.css	11.5 kB
build/compose/index.min.js	12 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.06 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/style-rtl.css	6.94 kB
build/edit-post/style.css	6.94 kB
build/edit-site/style-rtl.css	8.3 kB
build/edit-site/style.css	8.28 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.66 kB
build/editor/style.css	3.65 kB
build/element/index.min.js	4.68 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	6.75 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.81 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	612 B
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.4 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.19 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}

[andrewserong]

What do you think?

Hrm... this is an interesting one 🤔. Personally, I don't think block themes should get this hard-coded list of CSS rules, since the base styles for font, font-size, line-height etc should be provided by either the base theme.json file, the theme's theme.json, or user styles — conceptually, a blocks-based theme should be able to create quite a vanilla output if desired, so if we think of something like emptytheme as an intentional output, then introducing the editor defaults there might feel like a regression, as we'd have a mismatch between styling in the post editor vs the site editor and site frontend. Or to put it differently, perhaps a blocks-based theme shouldn't need to be concerned with overriding the list of editor default styles?

From my perspective the default editor styles are most useful for legacy Classic themes that have not been updated to support the block editor, so that the editing experience can be pleasing, even if the theme hasn't been designed for use with the block editor.

[scruffian]

@andrewserong I see, it's more complicated than I realised.

I've pushed up a different and simpler approach, which seems to work. In essence, we always output the core theme.json defaults on the frontend, but in the editor we still only use the default editor styles for classic themes.

Thanks for all your help with this.

[scruffian]

@andrewserong Thank you that seems to solve it. I've tested both classic and block themes and neither have duplicate styles, but the buttons look correct in both.

[andrewserong]

Thanks @scruffian, this definitely feels closer! The styles appears to be output in the correct places, without the duplication in the earlier commit.

Unfortunately, it looks like these base styles wind up having a higher specificity than desired in Classic themes. Here's how it's looking in TwentyTwenty in the editor:

Before (editor on trunk)	After (editor with this PR applied)

One of the things that works nicely in blocks themes is that the theme.json styles can be easily overwritten by a theme.json file that's the next level up (either at the theme level, or user settings in global styles). For Classic themes, there appears to be the challenge that we'd like these base styles to have a lower specificity, so that theme styles always win 🤔

The issue isn't as noticeable in some classic themes like TwentyNineteen, because in that theme the Button styles happen to have a higher specificity, but I imagine we probably can't rely on that to be the case for most Classic themes?

Just pinging a couple of other folks who were involved in the earlier PR (#34180) that moved the styles out of the Button block's styling and who've also looked at global styles (@oandregal, @getdave and @jasmussen) in case they have ideas on how this should work, too 🙂

[scruffian]

I wrapped the button selectors in a :where which makes them less specific. I've tested classic and block themes in both the frontend and the editor. The search block looks different in the editor and frontend in twentytwenty two, but I think we'll have to solve this in the theme. At least the behaviour of the frontend isn't impacted:

Frontend:

Editor:

[MaggieCabrera]

I made an empty classic theme, basically an underscores fork without the CSS and it was working as intended. The frontend and the editor looks mostly the same (there's GB styles that are only applying to the editor but are unrelated to this issue or PR)

Frontend:

Editor:

I think :where is probably the way to go here. I tested block themes that both apply styles and don't to the button element, and they were working as intended.

[MaggieCabrera]

Should we have tests for this?

[oandregal]

:wave: I can look at this issue deeply tomorrow morning.

I need to familiarize myself with what base-layout-styles do and also the button styles (I presumed the later lived in the block's block.json and not in the default theme.json).

While reading this, I wondered if we could simplify the current code by hooking into the existing theme_json_(origin) filters: if the theme is a classic one we remove the data we don't need, hence the styles will be generated properly without any need to wrangle origins or types in the wp_get_global_stylesheet function. I prepared an experimental PR to demonstrate what we could do at https://github.com/WordPress/gutenberg/pull/44268

The PR is not working. It's a prototype to help explain my point. Please, feel free to improve it. I thought I'd share early for timezones to work to our advantage and not the contrary.

[scruffian]

Another option is to keep these rules but also add the CSS back to the block...

[andrewserong]

Another option is to keep these rules but also add the CSS back to the block...

Good point. That might wind up being the simplest approach for now 🤔

[oandregal]

Hey, I've been checking the evolution of styles for buttons in this cycle. It's been a lot of back and forth so I may have missed something. Please, correct me if this is not what happened:

• Styles for buttons were in its style.css and shipped within the block-library stylesheet (or corresponding block stylesheet).
• https://github.com/WordPress/gutenberg/pull/34180 moved some styles to the block.json of the button, as to make them part of the "global styles" algorithm and so higher priority layers (theme, user) could override them easily.
• https://github.com/WordPress/gutenberg/pull/41822 moved the block styles to the default theme.json. The rationale is that these styles are shared by many blocks that use the element button, including the block button.

There was a lot more of back and forth, but this should be the essential steps. As a consequence, the styles for the button block that were shipped as part of the block library stylesheet are not longer shipped because we ignore theme.json styles for classic themes. The challenge is to make these styles available to classic themes without adding more than they don't need. Is this correct?

Some notes:

• This issue is wider than the button. Any block that uses __experimentalStyles won't have its styles shipped for classic themes. So far, they are the navigation and pullquote blocks. We need to make this API work for classic themes or revert it.

• My thinking is that we should always load the theme.json of the blocks for any theme, in the same way we ship presets and variables. This would solve the issue for pullquote and navigation.

• For the button block. Can we use the theme_json_default filter to add the button element styles we need if the theme is a classic one? Exploring this at https://github.com/WordPress/gutenberg/pull/44268 I'm happy if anyone wants to try an alternative path to that approach or push to make it work.

• I don't know enough about why the button styles were moved to the default theme.json. Need to go deep into this more. Ideally, we'd be able to have these styles in the block.json of the block.

[scruffian]

I think this approach is always going to need some intervention from some themes. I tried a different approach in https://github.com/WordPress/gutenberg/pull/44334.

[scruffian]

I don't know enough about why the button styles were moved to the default theme.json. Need to go deep into this more. Ideally, we'd be able to have these styles in the block.json of the block.

@oandregal

One issue we are dealing with is trying to ensure that themes can have consistent styling for buttons. This is the role of the button element vs the button block. In order to maintain the current visual appearance of buttons we need to define some styles, but if we define them in the block then they will have a higher specificity than the styles that users define for the button element - so to override them users would need to define styles for both button elements and button blocks, which is very inconvenient and would likely result in inconsistencies on people's sites as the might only remember to update the styles for one, not both.

[scruffian]

My thinking is that we should always load the theme.json of the blocks for any theme, in the same way we ship presets and variables. This would solve the issue for pullquote and navigation.

Do you mean the block.json? This is already what we do - if you look at a classic theme you can see that the pullquote CSS is output in global styles. This issue is dealing with the issue of loading the core theme.json file, which doesn't specify any rules for blocks.

[oandregal]

Do you mean the block.json? This is already what we do - if you look at a classic theme you can see that the pullquote CSS is output in global styles. This issue is dealing with the issue of loading the core theme.json file, which doesn't specify any rules for blocks.

Oh, I see, we do this is a different place: gutenberg_add_global_styles_for_blocks. The way we do it now is problematic. It's unguarded, it does not consider what origin we want to render depending on context. Try this:

• use a classic theme (I'm using Canape)
• add some style to blocks in the default theme.json (I've tried with a background color for the core/paragraph block)
• the result is that classic themes will have those styles while the expectation is that they shouldn't

The concern I shared here for elements is demonstrated with how block styles work at the moment: the classic themes get unwanted styles.

[oandregal]

My thinking is that we should always load the theme.json of the blocks for any theme, in the same way we ship presets and variables. This would solve the issue for pullquote and navigation.

I want to rephrase this in light of my comment above because it may be not clear what I meant.

I think we should always load the styles for the blocks origin, whether or not the theme declares a theme.json because that's the API we're promoting for block styles (these styles would live in the style.css of the block, which classic themes would also get).

[t-hamano]

The Gutenberg plugin no longer supports WordPress 6.1, but I just wanted to check if this PR is still valid.

[skorasaurus]

The Gutenberg plugin no longer supports WordPress 6.1, but I just wanted to check if this PR is still valid.

@t-hamano I think this can be closed because @scruffian made another attempt at this in https://github.com/WordPress/gutenberg/pull/44334 which was merged. The issue that this addresses - https://github.com/Automattic/wp-calypso/issues/64917 has also been closed.

We can reopen this if necessary. :)