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

Theme.json: Allow shared block style variations via separate theme.json files #57787

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Jan 12, 2024

Related

What?

This PR makes the registration and definition of block style variations easier.

Shared block style variation definitions can now be created as standalone files within a theme's block-styles directory

Block style variations defined in this way will be automatically registered and merged into the theme's theme.json data under each block identified in a new top-level theme.json property called supportedBlockTypes.

An example theme.json file for a block style variation could be as simple as:

{
	"version": 2,
	"supportedBlockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "indigo",
			"text": "plum"
		}
	}
}

Why?

With the extended functionality of block style variations, they will hopefully get further use. Helping theme authors cut down on repetitive block style variation definitions will further increase their adoption.

How?

  • Introduces new top-level theme.json property, supportedBlockTypes, allowing a block style variation to define for which blocks can be used
  • Updates the theme.json resolver to pull in block style variations from a block-styles directory within the theme
  • Supports child themes overriding a parent's block style variation definitions
    Add and updates theme.json resolver tests to cover new functionality

Testing Instructions

  1. Add partial theme.json files within your theme's block-styles directory (see snippets below or test theme for examples)
  2. Double check which blocks those new block style variations are to be registered for
  3. Open up the editor, insert a block with a new variation, select it and confirm the block style variation is present and can be applied
Examples
{
	"version": 2,
	"supportedBlockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "indigo",
			"text": "plum"
		}
	}
}
{
	"version": 2,
	"supportedBlockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "midnightblue",
			"text": "lightblue"
		}
	}
}

@aaronrobertshaw aaronrobertshaw added [Type] Experimental Experimental feature or API. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 12, 2024
@aaronrobertshaw aaronrobertshaw self-assigned this Jan 12, 2024
Copy link

github-actions bot commented Jan 12, 2024

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/block-styles/block-style-variation-a.json
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
❔ phpunit/data/themedir1/block-theme/block-styles/block-style-variation-a.json
❔ phpunit/data/themedir1/block-theme/block-styles/block-style-variation-b.json
❔ lib/class-wp-theme-json-gutenberg.php
❔ lib/class-wp-theme-json-resolver-gutenberg.php
❔ phpunit/class-wp-theme-json-resolver-test.php

Copy link

github-actions bot commented Jan 12, 2024

Size Change: 0 B

Total Size: 1.69 MB

ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.31 kB
build/block-editor/content.css 4.31 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 248 kB
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 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 90 B
build/block-library/blocks/archives/style.css 90 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 138 B
build/block-library/blocks/audio/theme.css 138 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 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 419 B
build/block-library/blocks/button/editor.css 417 B
build/block-library/blocks/button/style-rtl.css 632 B
build/block-library/blocks/button/style.css 631 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 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 121 B
build/block-library/blocks/code/style.css 121 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 421 B
build/block-library/blocks/columns/style.css 421 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
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 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.61 kB
build/block-library/blocks/image/style.css 1.6 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.02 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 478 B
build/block-library/blocks/latest-posts/style.css 478 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 505 B
build/block-library/blocks/media-text/style.css 503 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 kB
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 401 B
build/block-library/blocks/page-list/editor.css 401 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 602 B
build/block-library/blocks/search/style.css 602 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 475 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 215 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 235 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.73 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.94 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 27.9 kB
build/edit-post/style-rtl.css 6.29 kB
build/edit-post/style.css 6.27 kB
build/edit-site/index.min.js 195 kB
build/edit-site/style-rtl.css 15 kB
build/edit-site/style.css 15 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.73 kB
build/edit-widgets/style.css 4.72 kB
build/editor/index.min.js 59.1 kB
build/editor/style-rtl.css 5.21 kB
build/editor/style.css 5.21 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.98 kB
build/format-library/style-rtl.css 500 B
build/format-library/style.css 500 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.5 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.38 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.07 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.06 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.22 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented Jan 17, 2024

FWIW I'm currently looking at simplifying this approach so that the theme.json resolver will absorb referenced variations into the theme.json data avoiding the need to merge the referenced variation with user changes in multiple locations.

This approach has been used also in #57908.

@youknowriad
Copy link
Contributor

Why it's styles.blocks.variations and not just styles.variations ?

@youknowriad
Copy link
Contributor

Also, this could also be separate files entirely as well. an alternative theme.json file is just a style variation IMO. So maybe we don't need to introduce a new key within theme.json at all and just reference another file? I guess the question becomes how to reference a "saved variation" (id)

@aaronrobertshaw
Copy link
Contributor Author

Why it's styles.blocks.variations and not just styles.variations ?

The thinking here was that these are block style variations and living under styles.blocks helps reflect that.

I don't feel strongly about styles.blocks.variations vs styles.variations. It is a simple change at this stage so better to get it right now. Which leads on to the suggestion that variations could be in their own files.

Also, this could also be separate files entirely as well

This would make extending the block style variations to support their own specific settings much neater too.

I like that it wouldn't introduce a new property to theme.json for the variations. We'll still be adding the nested elements and blocks properties etc to variations within the schema but at least they are effectively already known.

In #57908, I looked at using an array property within a variation definition to specify which block types were eligible to use it.

	"styles": {
		"blocks": {
			"variations": {
				"purple": {
					"block_types": [
						"core/group",
						"core/columns",
						"core/media-text"
					],
					... // Normal style definitions.
				}
			}
		}
	}
}

It saves needing individual blocks to all reference the variation by ID or whatever but it does come at the cost of being a new theme.json property again whether that's under styles.blocks.variations or in a separate file.

Do you have any thoughts on that?

In the meantime, I'll get this PR updated and give the separate files for block style variations a run.

@youknowriad
Copy link
Contributor

In #57908, I looked at using an array property within a variation definition to specify which block types were eligible to use it.

If the variations are on separate files, we could have a top level "supportedBlockTypes" property added there as well.

@aaronrobertshaw aaronrobertshaw force-pushed the try/referencing-variations-in-theme-json branch from 42b805f to c66f888 Compare January 19, 2024 02:10
@aaronrobertshaw aaronrobertshaw changed the title [WIP] Theme.json: Allow referencing shared block style variations Theme.json: Allow shared block style variations via separate theme.json files Jan 19, 2024
Copy link
Contributor Author

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

@youknowriad I've updated this PR to leverage standalone files for specifying block style variations as discussed above.

There's a couple of thing I'd like to get your thoughts on with the latest approach.

  1. Is there a better place for these block style variations to live than under a block-styles directory in a theme?
  2. Should we be automatically registering block style variations defined in these files?

Comment on lines +398 to +409
// Automatically register the block style variation if it
// hasn't been already.
$registered_styles = $registry->get_registered_styles_for_block( $block_type );
if ( ! array_key_exists( $variation_slug, $registered_styles ) ) {
gutenberg_register_block_style(
$block_type,
array(
'name' => $variation_slug,
'label' => $variation['title'],
)
);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should block style variations defined within these standalone files be registered for blocks automatically?

Child themes wouldn't be able to deregister block style variations coming from standalone files via unregister_block_style but they could override the variation setting empty styles or supportedBlockTypes properties to avoid the automatic registration and omit that variation.

Copy link
Contributor

Choose a reason for hiding this comment

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

  1. I would prefer that, yes.

  2. This is currently how child themes need to override (remove) theme style variations, so it makes sense.

Yes it is a little limiting, but it is already documented that "The function unregister_block_style only unregisters styles that were registered on the server using register_block_style" so there would be no change.


// Resolve shared block style variations that were bundled in the
// theme via standalone theme.json files.
$shared_block_style_variations = static::get_style_variations( '/block-styles' );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For the moment, the shared block style variations are being looked for in a block-styles directory within the theme. As with theme style variations under styles, this takes into account child theme variations overriding a parent's definition.

Is there a better location to store these block style variations? It seemed keeping them separate from theme style variations made sense to limit further updates to ensure block style variations weren't accidentally included with theme styles.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it needs to be a different directory than the existing styles, but the naming is trickier.

@aaronrobertshaw aaronrobertshaw marked this pull request as ready for review January 19, 2024 05:55
@carolinan
Copy link
Contributor

carolinan commented Jan 19, 2024

Thank you for working on this, this is very exciting.

Is there also a way to set the variation as the default?

Let me try to describe my use case:
I have 4 blocks that has the exact same font size, font weight, font family, background, border.
This is not a variation that I have registered with PHP (register_block_style), it is the default design for the block in theme.json. But I have to repeat it 4 times, and the theme.json file grows larger and larger.
Using a ref: doesn't really help because I would still need to repeat that for each style and block.
Would this solve that problem?

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.

Oh, fascinating idea! I haven't taken a close look yet, but just had a couple of immediate thoughts / questions about moving to separate files:

  • If block style variations are stored in separate files instead of within theme.json, where would changes to block style variations be stored in user styles when (eventually) it's possible for these shared variations to be edited in the UI? Would that be in the main global styles entity, or a separate one? If it winds up being merged into the main entity, then I'm wondering if it'd be worth making it possible for the shared variation to be stored in a separate theme.json file or as a separate key in the main theme.json file, to offer a bit more flexibility?
  • Will the separate theme.json files for style variations ever use the settings object? (Not a blocker, but just curious since it currently looks like they're effectively full theme.json files, just with a supportedBlockTypes scope).
  • Will performance need to be taken into account? In core, there's some caching done on loading core block.json files so that they all get loaded from a single PHP file here instead of having to grab each individual file. If a theme were to have many style variations (i.e. a dozen or more), would this be a performance concern?

All up, I think separate files makes for a much more readable approach, and also would make it easier for folks to manually edit / copy from one theme to another, which could be really handy. If supporting multiple files, though, my main thought is whether it'd still be worthwhile to support it as a key in the main theme.json also 🤔

@aaronrobertshaw
Copy link
Contributor Author

I'm glad you're liking the potential here @carolinan 👍

Is there also a way to set the variation as the default?

At this stage, no, there isn't a means by which you could define one of these block style variation files as the default block styles. Once the dust settles on extending block style variations, this could easily be a follow-up.

My initial thoughts jumped to being able to add a top-level property to flag that instead of a block style variation the contents of the given file gets merged into the theme.json as if they were normal block styles. Or perhaps, along with the supportedBlockTypes property there is a second array property defining the block types for which this block style variation should be the default (last variation defined wins).

The merging should be straightforward and much the same as this PR does for the style variations. I'm just not sold that we can keep adding more and more top-level properties. Perhaps we need a single top-level property that can be an object defining these sorts of things e.g. supported block types, which block types the partial theme.json represents the default block styles etc.

Given the short time to WP 6.5 and the slim chance this all has to make it, I don't think I can expand the scope much here.

@aaronrobertshaw
Copy link
Contributor Author

Great feedback as always @andrewserong, thank you 🙇

Oh, fascinating idea!

Credit here is all @youknowriad's

If block style variations are stored in separate files instead of within theme.json, where would changes to block style variations be stored in user styles when (eventually) it's possible for these shared variations to be edited in the UI?

Because the theme.json resolver merges these block style variations into the theme.json data as if they were defined on each block type by the theme's theme.json, the UI and editing/saving of block style variations functions as per normal.

Would that be in the main global styles entity, or a separate one?

It's the main global styles entity, primarily, as current core block style variations already work this way.

Also, back on the point about the styles being "resolved" by the theme.json resolver for each block type, this means that each block type has its own copy effectively of the shared variation.

There were a few reasons that pushed me in that direction but the most important being to reduce confusion.

At the moment, if a user is editing a block style variation within Global Styles, they aren't going to know if it has come from a shared variation created by the theme's author. So there is no pushing of user changes back to the source of the shared variation.

I'm wondering if it'd be worth making it possible for the shared variation to be stored in a separate theme.json file or as a separate key in the main theme.json file, to offer a bit more flexibility?

I think this might not offer the expected flexibility particularly if/when these shared variations end up coming with their own settings e.g. palettes.

Also, I'm not sure there's a great appetite to introduce many new properties within theme.json. For example, in the early explorations into section styling a sections property was dismissed, and this very PR started out adding styles.blocks.variations.

There's probably something to be said for having a single clear means of implementing these shared variations too. Not to mention the theme style variations do not offer a separate key in the main theme.json file.

Will the separate theme.json files for style variations ever use the settings object? (Not a blocker, but just curious since it currently looks like they're effectively full theme.json files, just with a supportedBlockTypes scope).

That's the plan eventually.

For an initial MVP though, block style variations have historically only been styles, so will remain limited to that. Settings
such as custom palettes, font sizes, etc can be a follow-up.

The ability to define custom settings is also something I considered with the alternate approach to extending block style variations that creates a custom per-variation-application stylesheet (#57908). With that approach, it wouldn't be a great stretch to grab the settings from the block style variation and use those or merge them with the main theme.json settings before generating the stylesheet.

Will performance need to be taken into account?

Definitely.

If a theme were to have many style variations (i.e. a dozen or more), would this be a performance concern?

Honestly, I'm not certain. Adding a little caching here wouldn't hurt in case the theme.json resolver is for some reason being requested to merge theme data repeatedly.

I'd like to move doing that to a follow-up, if possible, to keep reviewing these block style variation PRs simpler.

make it easier for folks to manually edit / copy from one theme to another, which could be really handy.

Or to be supplied alongside patterns.

@andrewserong
Copy link
Contributor

Thanks for laying all that out @aaronrobertshaw! Those answers all point to separate files being desirable to me, with minimal drawbacks, and like you mention, caching can be something to add further down the track if needed. Also, that there's a use case for including settings in a variation is a good argument for separate files, too, as it really is a mini theme.json rather than just a subset of styles 👍

aaronrobertshaw added a commit that referenced this pull request Jan 24, 2024
aaronrobertshaw added a commit that referenced this pull request Jan 25, 2024
aaronrobertshaw added a commit that referenced this pull request Feb 1, 2024
aaronrobertshaw added a commit that referenced this pull request Feb 6, 2024
aaronrobertshaw added a commit that referenced this pull request Feb 20, 2024
@aaronrobertshaw
Copy link
Contributor Author

Closing this PR as it will be covered by #57908. At least until that #57908 is split up for easier review when the time comes.

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] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants