Hello! This is the latest roundup of theme-related discussions, fixes, and developments in Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ accounting for the 13.6 release of the plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
Caption elements can be styled by themes
Gutenberg’s PR #41140 introduced the ability to style the caption element via `theme.json JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.` directives, moving along the number and types of supported elements.
Button elements can be styled by users
Having an element available for styling by the theme is not enough. We need to allow users to customize the defaults provided by theme authors. This is where the Global Styles Interface comes in to help. In PR #41659 the button elements gain this ability.
Element pseudo states can be styled by themes
Adding support for pseudo selectors on elements in `theme.json` enables theme authors to define specific styling for various states such as `:hover` or `:active` on the elements which support these states.
The PR adds the possibility to use any available styling directives such as:
"color": {
"text": "hotpink"
}
in the theme JSON configuration at `styles.elements.{element}.{pseudo_state}` for example, `styles.elements.link.:hover`.
Not all the element and state combinations will be supported by default, as the goal is to provide capabilities for the most used and needed functions, not exhaustive support. Why? Because all of these settings will eventually find their way to the Global Styles Interface and we need to make sure we don’t clutter it with too granular settings or web development jargon.
Theme JSON allows references to attributes
In an attempt to make writing `theme.json` less verbose Gutenberg 13.6 introduces the ability to reuse attribute values when you need them, by referencing in dot notation their location in the tree.
For example buttons could do this:
{
"color": {
"text": { ref: "styles.color.background" }
}
}
and this way reference the global background color to reuse for their text color.
Improvements to “inherit default layout” toggle
The “inherit default layout” toggle has been a source of confusion for a long time. Mainly it was unclear what would be the result of toggling the feature `on`. PR #41893 shipped in Gutenberg 13.6 attempts to improve this by two things:
- Rewording the label of the toggle so that it makes more sense what the result of the action is: “Blocks use full width”
- Adds some helper text to further clarify the intended result
Other updates
Add option to disable theme duotone per-block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
Gutenberg 13.6 allows users to disable theme wide duotone filters on a per block basis. When this happens saves ‘unset’ as the `style.color.duotone` attribute instead of an array of colors.
The link color of navigation links is moved to block JSON
When themes want to override the hover color of the navigation block, this is not possible using theme.json, because this CSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. selector is too strong. PR #41898 fixes this by moving the styling to the Navigation block’s JSON configuration.
Props
This post was written by @andraganescu.
#gutenberg-themes-roundup
