{"id":4854,"date":"2022-10-09T16:38:43","date_gmt":"2022-10-09T16:38:43","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=4854"},"modified":"2023-01-11T18:04:43","modified_gmt":"2023-01-11T18:04:43","slug":"deep-diving-into-json-elements","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/deep-diving-into-json-elements\/","title":{"rendered":"Deep-diving Into JSON Elements"},"content":{"rendered":"

Notes: This post is part 1 <\/strong>of my proof-of-concepts learning note post for CSS-Tricks article<\/a> on the JSON elements. Some screenshot images used here are credited to the CSS-Tricks.<\/p>\n

There is considerable ongoing efforts in Gutenberg block editor to move the entire style definitions to a single place, i.e.\u00a0theme.json<\/code>\u00a0file. To measure the progress, let’s look at the last three\u00a0default themes<\/a>\u00a0(TT1, TT2, TT3).<\/p>\n

The TT1 theme, the first default theme designed for block editor, contains over\u00a05,900 lines of CSS<\/a>, a JavaScript file, and a … KB size. There is no\u00a0theme.json<\/code>\u00a0file.<\/p>\n

The TT2, the first block-based default theme, which includes\u00a0theme.json<\/code>\u00a0file and only over\u00a0147 lines of CSS<\/a>\u00a0code. The\u00a0theme.json<\/code>\u00a0file contains only\u00a0373 lines<\/a>. Its lead developers had made concerted efforts to make this as the CSS-less theme, however, at that time not all CSS styling rules via\u00a0theme.json<\/code> were resolved in Gutenberg site editor. If we look at the TT2 CSS file, those issues included, styling of (i) links and their interactive state, (ii) consistency in styling buttons, and spacing and full-width (age-to-edge) layout.<\/p>\n

Now that these styling CSS issues have now been resolved and thus the TT3 is the first default theme, without a single line of theme CSS. It’s theme.json<\/code>\u00a0file contains\u00a0687 lines<\/a> of codes. The theme is slim down version of TT2 with added … styles alternatives and has ..KB file size.<\/p>\n

At present, not all the CSS styling rules via\u00a0theme.json<\/code>\u00a0has been resolved, and the remaining significant issues are currently being discussed with an aim to fully move all the CSS style rules into the theme.json<\/code> and consolidate different sources of\u00a0theme.json<\/code> into a single Global Style UI via Style Engine<\/a> and create front-end CSS.<\/p>\n

These new developmental features included in WordPress 6.1 have not been widely exposed to most WordPress users due to lack to documentations, notes and tutorials.\u00a0In this article, I attempt to share my current understanding of these new features with you with some use case examples.<\/p>\n

Learning Goals<\/strong>
\nPart 1<\/strong>: JSON elements API – An Introduction and Overview (this post<\/strong>)
\nPart 2: Using JSON Elements<\/div>\n

The objective of this learning-note post series is to document my research on the topic and retain my memory dump, while preparing a first draft of my article for the CSS-Tricks.<\/p>\n

First off, let’s briefly overview JSON element and Pseudo-classes interactive states.<\/p>\n

An Overview<\/strong><\/h6>\n

One of the main goals of the Gutenberg site editor is to absorb the entire CSS of classic themes by\u00a0moving theme CSS to theme JSON file<\/a>. This approach creates different layers of theme JSON files (e.g., Core, block, theme, and user), and thus introduces a new specificity or precedence issue for theme developers.<\/p>\n

Since the\u00a0block themes<\/a>\u00a0were introduced in\u00a0WordPress 5.9<\/a>,\u00a0how to override Core generated CSS<\/a>\u00a0has been one of the main concerns. This problem has been further exacerbated by the frequency of the Gutenberg plugin release cycles, often with moving targets, which are eloquently described in this\u00a0Make WordPress post<\/a>.<\/p>\n

Theme JSON and theme CSS<\/h6>\n

Though structurally, both the\u00a0theme.json<\/code>\u00a0and theme CSS look similar. In block themes,\u00a0theme.json<\/code>\u00a0provides a single place to configure and customize its styling.<\/p>\n

In this\u00a0Make WordPress Core blog proposal<\/a>, Ben Dwyer of Gutenberg development team, eloquently articulates the reasoning of moving the theme CSS into the\u00a0theme.json<\/code>\u00a0file, and its benefit to block theme authors.<\/p>\n

One of the major benefits of moving CSS to JSON is that the latter is machine-readable format, and can be exposed in site editor UI, thus allowing users to modify default values and customize the site appearance without writing CSS. It also provides access to block style consistency and better style hierarchy settings, such that the user’s settings take the highest priority over the theme provided\u00a0theme. json<\/code>\u00a0settings.<\/p>\n

For theme authors, the\u00a0theme.json<\/code>\u00a0provides options to define most block styles within JSON. Theme users would be able change the site’s default visual appearance by using the\u00a0Global Styles interface<\/a>, without writing CSS.<\/p>\n

You can find more detail behind the scene discussion<\/a> notes from the Make WordPress Core post<\/a>.<\/p>\n

HTML element vs JSON Element<\/strong><\/h6>\n

The MDN glossary describes<\/em> elements<\/a> as \u201ca part of a webpage. In XML<\/a> and HTML<\/a>, 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<\/a>, enclosed text content, and a closing tag.\u201d<\/p>\n

This Full Site Editing tutorial<\/a> explains why there are essential with a table of Gutenberg and WordPress supported selectors.<\/p>\n

JSON elements<\/h6>\n

Previously, only individual heading and link elements were available (e.g., see this sample from\u00a0TT2 theme<\/a>). Now, with WordPress 6.1, we can also\u00a0add<\/a>\u00a0Button, Caption, Cite, and Headings element to the\u00a0theme json<\/code>\u00a0file to address the issues of inconsistent style of similar elements across blocks.<\/p>\n

JSON\u00a0elements<\/a>\u00a0are low-level components for themes and blocks, that do not need the complexity of blocks. They are a\u00a0representation of HTML primitives<\/a>\u00a0which are currently not within any block and can be used across blocks. How they are supported in the WordPress and Gutenberg is described in the\u00a0Editor Handbook<\/a>\u00a0and this\u00a0Full Site Editing tutorial<\/a>.<\/p>\n

For example, the links are found in lots of blocks but do not have their own block. By the same token, headings and buttons have their-own blocks, but they are also used across many other blocks as well. Similarly, HTML headings, button, caption, form, and cite elements are also used within the blocks.<\/p>\n

A few properties of the JSON elements include:<\/p>\n