Global Styles: Elements support tracking issue

[scruffian]

What are elements?

Elements are a representation of HTML primitives that be used inside blocks. Some examples include link, heading and button.

Why use elements?

Many different blocks can use the same elements. By using elements inside blocks we make it possible for all elements to share the same styles regardless of what block they are in. This is powerful for elements like buttons and form fields which are used in many different blocks. If block developers use the elements in their blocks then themers and users will be able to ensure that all blocks have matching styles without using CSS.

What's the difference between an element and a block?

Elements can be used exist in many different blocks - they can be the things that blocks are built from, although not exclusively. For example the Button block uses a button element, as does the Search block and File block.

Which styles win, the block styles or the element styles?

Elements are lower down in priority order, so block styles will take precedence. This means you can have consistent styles across all buttons on your site with the exception of one particular block.

Will blocks have to use elements?

No. Blocks are free to output whatever HTML they like, but we’d encourage block builders to use elements where they exist so that themes can control their appearance.

This is a tracking issue for adding support for more elements to Global Styles. Currently only headings and links are supported and there's not a full UI for them:

• Introduce "Caption" as a new element #40205
• Styles > Add Button Color to Elements #39473
• Consider adding form elements to the theme.json elements block #34198
• Post Title: Global Styles elements selector is not applied #36731
• FSE Link Styles: can we have an option to control underlines? #40002
• Elements: Add a more usable API #41663
• Global Styles: Elements: Captions text color not respected in front end. #42054
• Global Styles: Elements: Link style rules are being applied to buttons #42055
• [Quote, Pullquote Blocks] Allow theme.json customizations of the citation fields #35735 (cite as element)
• Global Styles: Add support for elements to individual blocks #51272

[bph]

@scruffian already drafted the Dev Note

[scruffian]

I think we can close this now. There's still the question of form elements but we have an issue for that here: #34198