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

Add: Mechanism to detect if a block instance matches a global styles selector #26945

Conversation

jorgefilipecosta
Copy link
Member

Alternative to #24423.

This PR adds a mechanism to detect at run time if global styles selector affects a given block instance.
Basically, the selector defines a set of attributes and we consider a block matches a selector if all the attributes defined in the selector have the same value on the block.

How has this been tested?

I added the following information to the theme.json

	"core/heading/h1": {
		"settings": {
			"color": {
				"palette": [
					{
						"slug": "pink",
						"color": "#FFC0CB",
						"name": "Pink"
					}
				]
			}
		}
	},
	"core/heading/h2": {
		"settings": {
			"color": {
				"palette": [
					{
						"slug": "brown",
						"color": "#8B4513",
						"name": "Brown"
					}
				]
			}
		}
	},

I created a new post.
I added a heading block.
I verified that the available colors change depending on if I select heading levels 1 or 2.

@github-actions
Copy link

github-actions bot commented Nov 12, 2020

Size Change: +240 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-editor/index.js 133 kB +114 B (0%)
build/block-library/index.js 147 kB +128 B (0%)
build/edit-site/index.js 23.2 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.9 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 821 B 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/edit-site/style-rtl.css 3.98 kB 0 B
build/edit-site/style.css 3.98 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@gziolo gziolo added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Nov 13, 2020
@oandregal oandregal force-pushed the try/extract-theme-json-processor branch from aee8a21 to 77d626a Compare November 13, 2020 09:26
Base automatically changed from try/extract-theme-json-processor to master November 13, 2020 09:52
@jorgefilipecosta jorgefilipecosta force-pushed the add/mechanism-to-detect-if-a-block-instance-is-being-affected-by-global-styles-selector branch from 82c572e to 9ce8161 Compare November 13, 2020 12:37
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

This is nice!

A few minor things that I'd like us to address are:

  • make the title key mandatory for all blocks that use this new mechanism (not having the key is only useful for the heading block)
  • add some checkings for those keys (title, selector, attributes) being present

I'm pre-approving because I'm eager to get this in and don't want you to be blocked by my review.

@oandregal
Copy link
Member

Unsure how this should be advertised, though. Although it's experimental, if there're third-parties testing this already, how do make sure they know about this? Add a note into the block-library changelog, perhaps?

@jorgefilipecosta jorgefilipecosta force-pushed the add/mechanism-to-detect-if-a-block-instance-is-being-affected-by-global-styles-selector branch from 9ce8161 to eed7d5f Compare November 13, 2020 16:38
@jorgefilipecosta jorgefilipecosta merged commit 390402e into master Nov 13, 2020
@jorgefilipecosta jorgefilipecosta deleted the add/mechanism-to-detect-if-a-block-instance-is-being-affected-by-global-styles-selector branch November 13, 2020 17:10
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 13, 2020
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants