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: Allow references to values in other locations in the tree #41696

Merged
merged 2 commits into from
Jun 24, 2022

Conversation

scruffian
Copy link
Contributor

@scruffian scruffian commented Jun 13, 2022

What?

There are many times when a block would like to access properties from the global styles context but is unable to do so. Sometimes that isn't a problem as the CSS cascade takes care of it for us, but in the case where blocks want to apply a setting to a different property, there's no mechanism to do so. This PR proposes that we add a new convention to theme.json which allows one property to set itself to the value of another, for example buttons could do this:

{
	"color": {
		"text": { ref: "styles.color.background" }
	}
}

Global Styles will convert { ref: "styles.color.background" } to whatever is the value at styles > color > background in theme.json.

Why?

This will allow blocks to be a lot less opinionated in their styles and simply inherit from theme settings.

How?

The main part of this change is in get_property_value, which adds some lines of code to detect whether the value starts with styles or settings. If it does then we replace it with the result of _wp_array_get. The rest of the changes are necessary to pass $theme_json down to this function, since it's static. This was first attempted in #39432.

Testing Instructions

  • Switch to emptytheme
  • Add these blocks to a post: Button, File, Search
  • Check that the colors of these button are the inverse of the colors of the background and text of the site.

Screenshots or screencast

Screenshot 2022-06-13 at 17 19 37

Note

This change has a few side effects that we'll need to be careful with

  1. The default colors for theme.json are now fixed, so they won't fall back to the browser defaults.
  2. Search block buttons will now match other buttons in visual appearance, which they didn't before.

cc @WordPress/block-themers

@scruffian scruffian added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Jun 13, 2022
@scruffian scruffian self-assigned this Jun 13, 2022
* @param array $properties Properties metadata.
* @return array Returns the modified $declarations.
*/
protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change to this function except that we're passing in theme_json.

}

foreach ( $properties as $css_property => $value_path ) {
$value = static::get_property_value( $styles, $value_path, $theme_json );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And then passing $theme_json through here...

@github-actions
Copy link

github-actions bot commented Jun 13, 2022

Size Change: -64 B (0%)

Total Size: 1.24 MB

Filename Size Change
build/block-library/blocks/file/style-rtl.css 236 B -16 B (-6%)
build/block-library/blocks/file/style.css 237 B -16 B (-6%)
build/block-library/index.min.js 183 kB -19 B (0%)
build/block-library/style-rtl.css 11.5 kB -6 B (0%)
build/block-library/style.css 11.5 kB -7 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.73 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 6.58 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 151 kB
build/block-editor/style-rtl.css 14.5 kB
build/block-editor/style.css 14.5 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 103 B
build/block-library/blocks/audio/style.css 103 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 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 59 B
build/block-library/blocks/avatar/style.css 59 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 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/button/style-rtl.css 514 B
build/block-library/blocks/button/style.css 514 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 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 79 B
build/block-library/blocks/categories/style.css 79 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 127 B
build/block-library/blocks/comment-template/style.css 127 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 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 615 B
build/block-library/blocks/cover/editor.css 616 B
build/block-library/blocks/cover/style-rtl.css 1.55 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 110 B
build/block-library/blocks/embed/theme.css 110 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/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.5 kB
build/block-library/blocks/gallery/style.css 1.49 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 333 B
build/block-library/blocks/group/editor.css 333 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 738 B
build/block-library/blocks/image/editor.css 737 B
build/block-library/blocks/image/style-rtl.css 524 B
build/block-library/blocks/image/style.css 530 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 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 199 B
build/block-library/blocks/latest-posts/editor.css 198 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 493 B
build/block-library/blocks/media-text/style.css 490 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 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.94 kB
build/block-library/blocks/navigation/style.css 1.93 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 393 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 157 B
build/block-library/blocks/paragraph/editor.css 157 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 69 B
build/block-library/blocks/post-comments-form/editor.css 69 B
build/block-library/blocks/post-comments-form/style-rtl.css 495 B
build/block-library/blocks/post-comments-form/style.css 495 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 628 B
build/block-library/blocks/post-comments/style.css 628 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 605 B
build/block-library/blocks/post-featured-image/editor.css 605 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 323 B
build/block-library/blocks/post-template/style.css 323 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 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 369 B
build/block-library/blocks/query/editor.css 369 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 402 B
build/block-library/blocks/search/style.css 403 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 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 233 B
build/block-library/blocks/separator/style.css 233 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 708 B
build/block-library/blocks/site-logo/editor.css 708 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 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 177 B
build/block-library/blocks/social-link/editor.css 177 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.37 kB
build/block-library/blocks/social-links/style.css 1.36 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 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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 159 B
build/block-library/blocks/video/style.css 159 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/common-rtl.css 987 B
build/block-library/common.css 984 B
build/block-library/editor-rtl.css 10.2 kB
build/block-library/editor.css 10.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 677 B
build/block-library/theme.css 682 B
build/block-serialization-default-parser/index.min.js 1.11 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.9 kB
build/components/index.min.js 227 kB
build/components/style-rtl.css 13.9 kB
build/components/style.css 13.9 kB
build/compose/index.min.js 11.7 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.4 kB
build/customize-widgets/style.css 1.4 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 4.03 kB
build/edit-navigation/style.css 4.04 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.3 kB
build/edit-post/style-rtl.css 7.05 kB
build/edit-post/style.css 7.05 kB
build/edit-site/index.min.js 48 kB
build/edit-site/style-rtl.css 7.73 kB
build/edit-site/style.css 7.71 kB
build/edit-widgets/index.min.js 16.4 kB
build/edit-widgets/style-rtl.css 4.39 kB
build/edit-widgets/style.css 4.38 kB
build/editor/index.min.js 38.1 kB
build/editor/style-rtl.css 3.63 kB
build/editor/style.css 3.62 kB
build/element/index.min.js 4.26 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.6 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.79 kB
build/keycodes/index.min.js 1.38 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.9 kB
build/notices/index.min.js 945 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.69 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.51 kB
build/token-list/index.min.js 662 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.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

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.

Very cool idea @scruffian! I like the idea of the styles/settings lookup, and I can imagine it being quite powerful, and it seems a bit more direct than some cases of trying to implement this via CSS variables instead like in your earlier PR (#39432)

I've just left a couple of comments — while I think the feature itself is a great idea, I was wondering if it's worth breaking up the PR slightly to propose the new feature in one PR, and propose setting the default colors in another PR?

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php Outdated Show resolved Hide resolved
lib/experimental/theme.json Outdated Show resolved Hide resolved
lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php Outdated Show resolved Hide resolved
@draganescu
Copy link
Contributor

Cool stuff 👍🏻 I think it's awesome to lean in the power of our chosen format!

I wonder if this will introduce a lot of complexity in themes as it is so inviting to do this. Will it lower the expectation for defined palettes for instance? E.g. instead of "primary-color" just use "styles.color.background" ...

@MaggieCabrera
Copy link
Contributor

Cool stuff 👍🏻 I think it's awesome to lean in the power of our chosen format!

I wonder if this will introduce a lot of complexity in themes as it is so inviting to do this. Will it lower the expectation for defined palettes for instance? E.g. instead of "primary-color" just use "styles.color.background" ...

I think this is great to have. The defined palette is important just on its own because it's user-facing. And in your example, the background color is going to be defined as primary in any case, this approach just allows a different way of referencing colors and adds an extra tool for plugins to be styled in line with the rest of the theme.

@scruffian
Copy link
Contributor Author

I've addressed the feedback here. If y'all are happy with this approach, I'll remove the changes to theme.json so that this is a lot simpler. I'll leave them there for now to make it easy to test :)

@adamziel
Copy link
Contributor

cc @ramonjd

$value_path = explode( '.', $value['source'] );
$source_value = _wp_array_get( $theme_json, $value_path );
// Only use the source value if we find anything.
if ( ! empty( $source_value ) && is_string( $source_value ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If $source_value is empty, would this return just { source: "..." }? Is this intended? Also, could an empty value be actually valid and desired?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thinking is that if nothing is found then we should be non-destructive. This could be useful in the case where multiple theme.json files are combined - we might not have a value on the first processing but we may do later...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this lead to a situation where the final value after all the processing ends up being { source: "..." }?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, do you think that could be a problem?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure, depends on how it gets rendered as CSS – I haven't tried running it yet 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the value is an array it get skipped inside compute_style_properties (line 348).

@jffng
Copy link
Contributor

jffng commented Jun 15, 2022

🙌

I tried the following using Curator and it also worked, the background color of button elements was set to the same value as the button block. I also tested changing the button block background color via the GS panel (blocks > button > color > background), and the button elements still matched.

	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": { 
						"source": "styles.blocks.core/button.color.background"
					}
				}
			}
		}
	}

This feels pretty powerful. It creates possibilities for themes to make some strange connections / "links" in addition to very sensible ones.

How would this work if I wanted to access a color from settings > color > palette?

@scruffian
Copy link
Contributor Author

How would this work if I wanted to access a color from settings > color > palette?

We already have a mechanism for doing that, using vars (var:preset|color|secondary)

@ramonjd
Copy link
Member

ramonjd commented Jun 16, 2022

I like this idea. Thanks @scruffian

It's testing pretty well for me so far. I was toying with some edge cases, and I wasn't sure if they were important or not.

One was: should a ref to another ref be able to resolve (I can't see that it does)? E.g., see "margin" here:

		"spacing": {
			"blockGap": "200px",
			"padding": {
				"source": "styles.spacing.blockGap"
			},
			"margin": {
				"source": "styles.spacing.padding"
			}
		},

Just asking. I could imagine that would get pretty recursive.

@draganescu
Copy link
Contributor

@ramonjd 's example is my main fear with this enhancement, it's a tool for complexity creation, which is solving the same problem that css variables solves but has the potential to bring over a different flavor of callback hell.

@scruffian
Copy link
Contributor Author

One was: should a ref to another ref be able to resolve (I can't see that it does)? E.g., see "margin" here:

Yeah at the moment it doesn't work. I feel like this is probably the best option to avoid any kind of recursive loops etc. If you want to use a property which references another property then you'll have to update the reference to the parent property.

@adamziel
Copy link
Contributor

adamziel commented Jun 16, 2022

Yeah at the moment it doesn't work. I feel like this is probably the best option to avoid any kind of recursive loops etc. If you want to use a property which references another property then you'll have to update the reference to the parent property.

Adding a _doing_it_wrong call or a similar warning in case of recursion could be really helpful to future developers debugging their code.

@scruffian scruffian force-pushed the add/dynamic-properties-in-theme-json branch from 7b9f7ae to 370e049 Compare June 16, 2022 14:54
@scruffian
Copy link
Contributor Author

Adding a _doing_it_wrong call or a similar warning in case of recursion could be really helpful to future developers debugging their code.

Done!

@scruffian
Copy link
Contributor Author

I've made a few changes here:

  1. Changed source to ref
  2. Added a _doing_it_wrong notice for the case where someone might reference another dynamic property
  3. Removed the new theme.json file and the changes to buttons.

Ready for another review...

@andrewserong
Copy link
Contributor

Thanks for the updates @scruffian!

Changed source to ref

It looks like the PR still refers to source, is there a missing commit?

Also, since this introduces some potentially complex logic, would it be worth adding a couple of PHP tests with example theme.json structures provided to ensure the lookup and _doing_it_wrong calls are behaving as expected? With the style engine work, at some stage, this logic might need to be migrated elsewhere, so it'd be helpful to have some working tests to ensure we've got a stable baseline for the behaviour.

@scruffian
Copy link
Contributor Author

It looks like the PR still refers to source, is there a missing commit?

Ooops sorry yes, try now!

Good idea, I'll add some tests...

* Elements: Add an api make it easier to get class names

* Add some PHP unit tests

* Add a unit tests for elements

* lint fix

* fix PHP tests

* Update lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Add @SInCE

* update form.js

* fix PHP test

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

Theme JSON: Add dynamic properties

Theme JSON: Make it possible to use styles and settings from elsewhere in the tree

also make button text dynamic

fix type

remove unconnected changes

move the value replacement earlier and add validation

use an object rather than a string to fetch other values

adding a doing it wrong message

remove color changes for buttons

add an explanatory comment

change source to ref

Add unit tests

Update lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

Co-authored-by: Adam Zielinski <adam@adamziel.com>

lint fixes

fix fixtures

remove incorrect change

lint fixes
@scruffian scruffian force-pushed the add/dynamic-properties-in-theme-json branch from 4e17798 to 35e42ed Compare June 23, 2022 16:53
@scruffian scruffian merged commit cb1b5fd into trunk Jun 24, 2022
@scruffian scruffian deleted the add/dynamic-properties-in-theme-json branch June 24, 2022 14:52
@scruffian scruffian added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 24, 2022
@github-actions github-actions bot added this to the Gutenberg 13.6 milestone Jun 24, 2022
@oandregal
Copy link
Member

While getting familiar with how this works I've found a bug (this doesn't work in the site editor) #42890

@scruffian
Copy link
Contributor Author

Thanks @oandregal I noticed that too: #42884

It's on my list of things to look at this week.

@adamziel
Copy link
Contributor

adamziel commented Aug 2, 2022

For posterity, YAML supports these kind of aliases out of the box. It also supports comments.

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 10, 2022
This commit backports the original PRs from Gutenberg repository:

* [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json]
* [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks]
* [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements]
* [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally]
* [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector]
* [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages]
* [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name]
* [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree]
* [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names]
* [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json]
* [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors]
* [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements]
* [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles]
* [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list]
* [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity]
* [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON]
* [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements]
* [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements]
* [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements]

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54118 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 10, 2022
This commit backports the original PRs from Gutenberg repository:

* [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json]
* [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks]
* [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements]
* [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally]
* [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector]
* [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages]
* [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name]
* [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree]
* [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names]
* [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json]
* [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors]
* [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements]
* [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles]
* [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list]
* [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity]
* [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON]
* [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements]
* [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements]
* [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements]

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54118


git-svn-id: http://core.svn.wordpress.org/trunk@53677 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 10, 2022
This commit backports the original PRs from Gutenberg repository:

* [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json]
* [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks]
* [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements]
* [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally]
* [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector]
* [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages]
* [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name]
* [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree]
* [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names]
* [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json]
* [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors]
* [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements]
* [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles]
* [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list]
* [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity]
* [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON]
* [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements]
* [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements]
* [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements]

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54118


git-svn-id: https://core.svn.wordpress.org/trunk@53677 1a063a9b-81f0-0310-95a4-ce76da25c4cd
whereiscodedude pushed a commit to whereiscodedude/wpss that referenced this pull request Sep 18, 2022
This commit backports the original PRs from Gutenberg repository:

* [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json]
* [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks]
* [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements]
* [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally]
* [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector]
* [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages]
* [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name]
* [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree]
* [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names]
* [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json]
* [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors]
* [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements]
* [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles]
* [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list]
* [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity]
* [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON]
* [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements]
* [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements]
* [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements]

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54118
@bph bph mentioned this pull request Oct 3, 2022
89 tasks
@scruffian
Copy link
Contributor Author

scruffian commented Oct 11, 2022

Dev Note draft:

What

Theme designs often require consistency in the styles applied to blocks. Often this can be achieved by setting Global Styles properties which are inherited by blocks using the inheritance of the CSS cascade. In some cases blocks want to apply settings from Global Styles to a different property of the block - for example the button element might want to use the global text color for its background color and the global background for it's text color.

Why

To solve this problem we need to allow themes to share Global Styles settings with blocks. This will make it easier for users to update these shared properties across all their blocks. Again take the example of a button element that wants to use the text color for its background. If the button element is set up as in the example above, then when a user edits the global text color, the background color of their buttons will also be updated.

How

To achieve this, we have added new ref property to theme.json which allows one property to set itself to the value of another, for example we could define this for button elements:

		"elements": {
			"button": {
				"color": {
					"background": {
						"ref": "styles.color.text"
					},
					"text": {
						"ref": "styles.color.background"
					}
				}
			}
		}

Global Styles will convert { ref: "styles.color.background" } the value at: styles > color > background in theme.json.

Limitations

It is currently only possible to use ref to get one value from theme.json; a ref cannot point to another ref. This also prevents circular refs from causing problems.

ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
This commit backports the original PRs from Gutenberg repository:

* [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json]
* [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks]
* [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements]
* [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally]
* [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector]
* [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages]
* [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name]
* [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree]
* [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names]
* [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json]
* [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors]
* [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements]
* [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles]
* [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list]
* [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity]
* [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON]
* [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements]
* [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements]
* [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements]

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54118 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 Needs Dev Note Requires a developer note for a major WordPress release cycle
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants