Styling Theme.json Elements in Block-theme

Written by Tinjure WP Posted on

Notes: This post is part of understanding new features in full site editing (FSE) interface. This learning post is still in active development and updated regularly.

In a previous learning note post, how to style links and psudoelements selectors support in theme.json was discussed. In this post, let’s explore styling theme.json elements of block themes.

First, lets briefly refresh ourselves about elements with a brief over view. In the MDN glossary “elements” is described as “a part of a webpage. In XML and HTML, an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.”

Image credit: MDN glossary

As the MDN describes, elements and tags are not same. “Tags begin or end an element in source code, whereas elements are part of the DOM.”

“HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.”

Styling Theme.json Elements

Gutenberg 13.8 added styling “elements” features such as heading, caption with theme.json elements. Theme.json elements are not exactly the same as HTML elements, because ” only a few elements are supported and WordPress applies some styles to a class name rather than a HTML tag”.

More detailed discussion on why to move styling from CSS to theme.json is described in this Moving Core block styling to JSON Make Core post.

Use Case Examples

In the following three use case examples from Full Site Editing, Carolina shows how block headings, buttons and figure captions can be styled using theme.json.

Example 1: Styling Headings

In the following example from the full site editing, elements from heading (h2) and post-comment-form (h3) are styled differently. H2 heading element has bold font-weight and Source serif pro fonts, where as in the post-comment-form (h3) block, font is defined as uppercase.

{
	"version": 2,
	"styles": {
		"elements": {
			"heading": {
				"typography": {
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)"
				}
			}
		},
		"blocks": {
			"core/post-comments-form": {
				"elements": {
					"h3": {
						"typography": {
							"textTransform": "uppercase"
						}
					}
				}
			}
		}
	}
}

A practical use case example is found here in Archeo theme, where site title link and typography styles are defined.

Example 2: Styling Button

In the following Carolina’s example, she is applying default styles for all buttons, and then reducing the font size for the button in the file block.

{
	"version": 2,
	"styles": {
		"elements": {
			"button": {
				"typography": {
					"fontWeight": "700",
					"fontSize": "1.2rem"
				},
				"color": {
					"background": "#fafafa",
					"text": "#111111"
				},
				"border": {
					"radius": "0",
					"width": "2px",
					"style": "solid"
				}
			}
		},
		"blocks": {
			"core/file": {
				"elements": {
					"button": {
						"typography": {
							"fontSize": ".8rem"
						}
					}
				}
			}
		}
	}
}

Theme authors have already started moving button style CSS rules to theme.json as in here in Archeo, Disco, Frost themes and probably many others.

Example 3: Styling Captions

Similar to other elements headings, captions of figure element like galleries, images, table, video, audio, and embeds can be defined in theme.json.

The following example from full site editing, demonstrates default caption style in theme.json.

{
	"version": 2,
	"styles": {
		"elements": {
			"caption": {
				"color": {
					"text": "#111111"
				},
				"typography": {
					"fontSize": "0.8rem",
					"lineHeight": ".7",
					"textTransform": "uppercase"
				}
			}
		}
	}
}

I tried styling a image caption using code snippet in modified Twenty Twenty-three theme and was placed just below the button definition under elements, as shown here in Justin Tadlock’s example.

....
"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--tertiary)"
		}
	},

...

In the example above, the hex value of tertiary color is #7A0019 (maroon).

In the screenshot of image, figure caption color and fonts style defined in theme.json is applied. Similarly, other caption styles can be defined.

Wrapping Up

In this brief learning note post, how to style elements using theme.json is defined.

Resources

Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.