Notes: This post is part 2 of my proof-of-concepts learning note post for CSS-Tricks article on the JSON elements. Some screenshot images used here are credited to the CSS-Tricks.
In the previous section, we briefly overview the JASON elements and discussed how they are used in a theme.json file. In this section, let’s expand JSON elements use cases at both the top-level (Global) and block-level. At the top-level, they are used using an element selector, and at the block-level, the element to used will be “the element’s appended to the corresponding block”.
Part 1: JSON elements API – An Introduction and Overview
Part 2:Using JSON Elements (this post)
In this section, lets look at briefly how JSON styles are used in top (global) label and block level.
Styling elements globally
Let’s look at the new default TT3 theme and examine how its buttons elements are styled. The following is the slim-down theme.json file of the TT3 theme showing the global elements styles section, but you can find the original code here.
In the TT3 theme, all buttons are styled at the top (global) level. The following screenshot shows how different button blocks (default button, Search, File, and Comments) look uniform with similar lime green (primary, hex: #9DFF20) background color.
Screenshot showing default state green background color of buttons in TT3 theme. (Screenshot credit: CSS-Tricks)If we examine their HTML and styling, a wp-element-button class is used for the styling. The same wp-element-button class is used to add its interactive states as well.
Screenshot showing button block HTML (left) and its styling with .wp-element-button class. (Screenshot credit: CSS-Tricks)Adding interactive states
The WordPress 6.1 has added support for defining interactivity states “pseudo classes” (e.g. :hover, :focus) in theme.json as well as in Global Styles UI for a limited set of elements.
For a refresher, the following short YouTube video by Automattic Engineer Dave Smith, demonstrates how interactivity states are defined in theme.json and exposed to Global Styles UI.
Styling elements at block level
To understand how we can use and customize styling at block level, let’s change the lime green background color of the Search block button from the previous section.
In the following code snippets of the core/search block button, I have modified its global default state background color from lime green to red (hex: #FF0000) and its :hover state to lime green (primary) color.
"core/search": {
"elements": {
"button": {
"spacing": {
"margin": {
"left": "0px"
},
"padding": {
"bottom": "var(--wp--preset--spacing--10)",
"top": "var(--wp--preset--spacing--10)"
}
},
"color": {
"background": "var(--wp--preset--color--quaternary)",
"text": "var(--wp--preset--color--base)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
}
},
":focus": {
"color": {
"background": "red",
"text": "var(--wp--preset--color--contrast)"
}
}
}
}
},In the screenshot below, the default button inherits its lime green background color from the global elements, where as the Search button gets its red background color from its core/search block elements styling.
Screenshot showing modified Search button with red background. (Screenshot credit: CSS-Tricks)The next screenshot shows the HTML elements of the Search button and its style at the block level at its default and interactive :hover state with different background colors.
Screenshot showing Search block HTML (left panel) with default state red (quaternary) background color (top, right), and green (primary) background for its :hover state (bottom, right). (Screenshot credit: CSS-Tricks)In the following section, let’s look at a few example use cases of styling elements at the top-level as well as at the block-level.
Example 1: Styling headings elements at top-level
In the upper level slim-down h1-h6 level heading elements styling of TT3 theme.json, the text color of only h3 heading is set to secondary (hex: #345C00). You will find the original code here.
...
...
{
"styles": {
"elements" {
"h1": {
"typography": { }
},
{ ...},
"h3": {
"typography": { },
"color": {
"text": "var(--wp--preset--color--secondary)"
}
},
{...},
"heading": {
"typography": { },
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
}
}
}
...
...The screenshot capture below shows that all the heading levels, with the exception of h3, inherit the default text color, while the h3 header receives the secondary text color.
The secondary color of the h3 text will be applied to all the h3 level elements across the website.
Example 2: Styling comments form
Now, let’s say, if we want to target headings in one specific block, then the heading elements should be appended at the block level. For demonstration purposes, I am targeting the post-comment-form heading and style with the red color as shown below.
Screenshot showing post-comments-form reply title with dark green color (left) and with red color (right) styled h3 heading inside the block.In the following example of core/post-comments-form , the color of the h3 heading text is styled red (quaternary, see below) by adding h3 elements inside the post-comment-form block.
...
...
"core/post-comments-form": {
"elements": {
"button": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"color": {
"background": "var(--wp--preset--color--quaternary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
}
},
"h3": {
"color": {
"text": "var(--wp--preset--color--quaternary)"
}
}
}
},
...
...The next screenshot shows that the red color is applied to .wp-block-post-comments-form h3 only and not other h3 headings, as they are not part of the post-comment-form block.
Screenshot showing comment form HTML and its h3 element styling.Example 3: Styling buttons and file button elements
theme.json snippets were added.{
"version": 2,
"settings": {
"appearanceTools": true,
"color": { },
"custom": {
"shadow": "5px 5px 0px -2px var(--wp--preset--color--base), 5px 5px var(--wp--preset--color--contrast)"
},
"layout": {
"contentSize": "700px",
"wideSize": "1000px"
},
"typography": {}
},
"styles": {
"blocks": {
"core/file": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--primary)"
}
}
}
}
}
},
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "red",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Now, let’s look at the frontend, we should the the buttons and file button styles as shown below.
Screenshot showing buttons and file buttons styles.Example 4: Styling cite elements in blockquotes blocks
For the quotes block style, I added the following code snippets in my TT3-child theme to target the Cite elements within the core/quote block (lines: 14-23).
...
...
"core/quote": {
"border": {
"color": "var(--wp--preset--color--primary)",
"style": "solid",
"width": "0 0 0 2px"
},
"spacing": {
"padding": {
"left": "var(--wp--preset--spacing--50)"
}
},
"elements": {
"cite": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
},
"color": {
"text": "var(--wp--preset--color--quaternary)"
}
}
}
},
...
...The following is the frontend appearance of the citation in quote block in a browser.
Screenshot showing text of Cite elements in a quote block in red color.The quote cite elements applies styles with the .wp-block-pullquote.cite class as shown below.
Similarly, we can also style the cite elements in the core/pullquote block differently from the quote block above, by adding the following code snippets.
"core/pullquote": {
"border": {
"width": "3px 0",
"style": "solid",
"color": "var( --wp--preset--color--quaternary)"
},
"spacing": {
"padding": "var( --wp--preset--spacing--30 ) 0"
},
"typography": {
"fontFamily": "var( --wp--preset--font-family--inter )",
"fontSize": "var( --wp--preset--font-size--large )",
"lineHeight": "var( --wp--custom--line-height--2-xl )"
},
"elements": {
"cite": {
"typography": {
"textTransform": "uppercase",
"fontSize": "var(--wp--preset--font-size--small)"
},
"color": {
"text": "var(--wp--preset--color--secondary)"
}
}
}
},
...
...
If we click on the browser inspection tab, the cite elements is also using the same .wp-block-pullquote cite class for styling.
Example 5: Styling caption elements
For styling figure caption elements, we should add the following code snippets by selecting the top level elements.
...
...
"caption": {
"typography": {
"fontFamily": "var( --wp--preset--font-family--system-font )",
"fontSize": "var( --wp--preset--font-size--small )",
"fontStyle": "italic",
"lineHeight": "1.5"
},
"color": {
"text": "var(--wp--preset--color--quarternary)"
}
},
...
...When I added the above codes in my TT3-Child theme, frontend view of figure caption of one of the text image is seen with red text color (see below).
The caption elements generates .wp-block-image figcaption class for frontend CSS styling. You may also find its application case in this WP Engine frost theme.
Example 6: Zazzing up buttons styling
In the preceding section, we made some basic styling of button elements. If you like to reinvigorate the default or interactive states of your buttons, you can add outlines or box-shadows in the theme.json file.
For this example, I am following the test instructions of this this GitHub ticket on a TT3 child theme.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}When viewing in a browser, you should see your button elements with red dashed outline (left). When at :hover state, it turns into a solid blue line (right).
Screenshots showing button outlines in default state (left) and :hover state (right). (Screenshot credit: CSS-Tricks)Adding box-shadow effect in button elements
In WordPress 6.1, we can add the box-show effect to the button using theme.json elements. Inspired by the example use case in Pixl theme, I modified the button elements in my TT3-Child theme’s theme.json file as follows.
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}Screenshot of the above box shadow (line 13) looks in a browser as shown below:
Screenshot showing button with box-shadow effect. (Screenshot credit: CSS-Tricks)For little smoother box-shadow (above right), the next shadow effect can be used.
{
...
"styles": {
"elements": {
"button": {
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)"
}
}
}
}You may find more detailed in-depth discussions about the box-shadow feature in this GitHub PR ticket. To learn more about the style JSON elements, you can check out the following block themes.
Buttons elements
- Pixl theme button elements used for border, color, typography, shadow, hover, and activate state.
- Vivre theme – color, border, typography
- Block-canvas theme with color, text, typography
- TT3 theme color, hover, focus, active
- Frost theme with border, color, spacing, typography
- Disco theme with border, color, typography
- Blockbase (example link )
- Rain fall (example link)
Wrapping up
In this section, we look at the examples of styling elements at both global and block level, with some use case examples.