"Styled Areas" is a WordPress Plugin which provides the user with an alternative visual-editing interface for creating color-themes inside of a WP website using a new Block and Posttype.
Practically speaking, a Styled Area is a container element which uses CSS Variables for displaying foreground/background colors on the content inside of it. To make this even more powerful, Styled Areas can be saved, reused, and assigned to a post/page level.
- Download this repo and add the entire "xx-styled" directory to the "plugins" directory of your WordPress installation
/wp-content/plugins/ - Activate the plugin through the 'Plugins' screen in WordPress
- New controls/editors are now available! A new "Styled Areas" posttype in the admin sidebar, a block called "Styled Area" available in the block editor, and a sidebar plugin for managing post styles.
The block is capable of being used in multiple ways:
-
Inline Styles - the container element is inserted directly into your post and saved in
post_content(like most block content). This code contains CSS custom properties inside that element'sstyletag. -
Saved/Reusable Styles - these are edited as entries in a traditional WP Post Editor. Now you can create styles and reuse them in multiple places throughout your site.Instead of inlining the CSS, a reference will be placed on the container:
<div data-theme="my-cool-style"> -
Post Styles - Saved Styles can also be assigned at a high level to a Post/Page (in addition to inside the Gutenberg editing interface). Nothing will added to the entry in the Gutenberg editor, but a callback function allows a named style to be added to a high-level page element:
<body data-theme="my-cool-style">
The inline blocks will have classes like xx-styled xx-styled--block. The first class allows the container element access to a set of CSS Variables. With the xx-styled class alone there will be no visual changes. To use the variables, apply a second class (in this case xx-styled--block).
There is also a class named xx-styled--hasstyle which does the same thing. It can be applied to the container itself, or a child. This seperation allows for more deliberate usage. With this technique you can apply styles to a high-level element (like html or body) but only use the styles in certain islands (areas with .xx-styled--hasstyle)
Opting out: although it may be useful to pass variables to a lot of elements inside a container, it can also result in some hierarchy issues. You can prevent any element (h1, p, hr, etc) from displaying variables by adding the class inert - this is particularly useful for blocks with complexity inside.
This approach may help some users style their theme more consistently and dynamically by simplifying how color is added to container blocks and inner elements (p,h1,etc) without controlling each one individually.
In addition to the 'single' entry, additional helper urls are added:
- Individual Styles -
WPBASE/styled/my-cool-style.css(slug is used) - All Styles -
WPBASE/styled/compiled.css(special name 'compiled' is used)
- Individual JSON -
WPBASE/styled/my-cool-style.json(returns object) - Compiled JSON -
WPBASE/styled/compiled.json(returns arrray of objects). This is used in creating variations.
I began working on this block in 2019, and it developed alongside the core styling tools in WordPress. While the core WP features focus on 1) Global Styles and 2) inline styles, this project is more focus on streamlining the creation of reusable styles. Both approaches may be useful in different cases!
For items that need fixing, see the todo.md file in this project.
This article is really interesting, and uses a very similar technique.
Some icons were pasted from iconify.design