-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Elements: Add an API make it easier to get class names #41753
Conversation
@scruffian Can you add some unit tests to this PR please. |
Size Change: +29 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
I added some simple unit tests for PHP and JS. |
@scruffian, the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the follow-ups, @scruffian. This tests well for me.
Can you rebase on top of the current trunk to resolve merge conflicts?
Unrelated to this issue, I noticed that if I change Global Styles for the button, this only affects the button in the Post Comment Form block.
Screenshot
Co-authored-by: George Mamadashvili <[email protected]>
c53ea55
to
0f9901e
Compare
Thanks for the review @Mamaduka
I think this will be because the theme is providing CSS for these buttons which is stronger... |
I'm using 2022, but that makes sense. |
@scruffian, it looks like we missed typo in PHP Unit tests 😅 |
That is unexpected though? The users styles should be used. Is there an issue created? |
If the theme provides stronger CSS than the rules output by theme.json I think that's a theme issue. We need to allow themes the option to override Global Styles if they want to, so I think this should be updated in the theme, which is tricky as this looks like TwentyTwentyTwo... |
* 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 <[email protected]> * Add @SInCE * update form.js * fix PHP test Co-authored-by: George Mamadashvili <[email protected]> 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 <[email protected]> lint fixes fix fixtures remove incorrect change lint fixes
…ree (#41696) * Elements: Add an API make it easier to get class names (#41753) * 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 <[email protected]> * Add @SInCE * update form.js * fix PHP test Co-authored-by: George Mamadashvili <[email protected]> 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 <[email protected]> lint fixes fix fixtures remove incorrect change lint fixes * fix rebase
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
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
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
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
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
What?
This adds a couple of functions in PHP and JS to make it easier for developers to use the correct class names when they want to add elements to their blocks.
Why?
An improved developer experience.
How?
We create a couple of arrays which hold the relationships between elements and their corresponding class names.
Testing Instructions
The following blocks should work the same:
It's necessary to test both the back and front end.
cc @WordPress/block-themers