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: Don't output double selectors for elements inside blocks #40889

Merged
merged 1 commit into from
May 9, 2022

Conversation

scruffian
Copy link
Contributor

@scruffian scruffian commented May 6, 2022

What?

When elements are used inside blocks, if the element selector is the same as the block selector (as it is in the case of heading blocks) then the selector becomes doubled (e.g. h1 h1). To ensure we can use element declarations inside block definitions we need to ensure that when the selectors match we don't double them. Fixes #39698.

Why?

To make it possible to use element selectors inside heading block rules.

How?

We detect whether the element selector matches the block selector. If it does, then we should only use one.

Testing Instructions

  1. Add this to your block theme:
		"blocks": {
			"core/heading": {
				"color": {
					"text": "blue"
				},
				"elements": {
					"h1": {
						"color": {
							"text": "purple"
						}
					}
				}
			}
		},
  1. Add a post with multiple heading blocks.
  2. Check that the h1 headings are purple, but the others are still blue.

Screenshots or screencast

Screenshot 2022-05-06 at 13 35 43

cc @WordPress/block-themers

@scruffian scruffian added [Block] Heading Affects the Headings Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels May 6, 2022
@scruffian scruffian self-assigned this May 6, 2022
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

I tested and it works as described. The code changes makes sense to me. Caveat I am not sure of other potential implications.

@scruffian
Copy link
Contributor Author

I'm going to merge this one but keep an eye on it in case there are unexpected side effects.

@scruffian scruffian merged commit 709aabc into trunk May 9, 2022
@scruffian scruffian deleted the fix/39698 branch May 9, 2022 08:45
@github-actions github-actions bot added this to the Gutenberg 13.3 milestone May 9, 2022
*
* @access private
*/
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_1 {
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we need this here instead of naming WP_Theme_JSON_Gutenberg the class in 6.1? Is there a specific reason?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason is that when we come to add more compat versions of this file we need to change the class name to the specific version and add a new one to the next compat folder which can create conflicts. Keeping the WP_Theme_JSON_Gutenberg in experimental is more stable and predictable.

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure I see any difference in having WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_0 in the 6.1 folder. I think experimental is the folder for changes that are not planned for the next WP release - thus the name. If we know something is going to be in 6.1 for example we should add it just there. --cc @gziolo

Copy link
Member

Choose a reason for hiding this comment

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

I guess it's how things are done for this particular class that gets updated in every WordPress major release.

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: https://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
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
[Block] Heading Affects the Headings Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. 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.

theme.json styles.blocks.core/heading values take precedence over styles.elements.h1
4 participants