WazFrame Enhanced

This plugin removes autogenerated classes from WordPress that comes from theme layout support for contentSize and wideSize in theme.json.

Because defaults and autogenerated CSS are set with lower specificity than WordPress core versions, these are easily overrideable. Plus, since single CSS classes are used, rather than dozens of duplicated classes with randomly generated id's, you can override them via writing your own CSS.

Currently, the plugin is in active early development and some more testing is required, however all features you can use with WordPress default settings (such as changing blockGap, contentSize or wideSize on a single block) work just as they do in WordPress core.

The biggest difference is that now you have significantly less embedded CSS styles & styles that are immediately overrideable by a theme targeting the CSS classes.

So far this has been tested in both TwentyTwentyTwo (WordPress's default theme for 2022) and blank themes and is working as intended.

Note this plugin dequeues both WordPress and Gutenberg Plugin's theme layout support functions. This way you can use this plugin whether you're using Gutenberg or just WordPress without conflict.

Current Features

Replaces redundant auto-generated .wp-container-{$id} CSS classes for content, wide and full size, as well as blockGap settings.
Only generates the custom settings for either contentSize, wideSize or blockGap via auto-generated CSS.
Has been tested in WordPress's default twentytwentytwo theme as well as blank / new themes.

For example, if a block has only set a custom blockGap value, it will only generate code for the blockGap setting, rather than the entire settings.

On our test page for blocks, using WordPress Core defaults 27 stylesheets were generated. After turning on the plugin, this number of generated stylesheets was reduced to 4.

The 'flex' layout type is still in development in Gutenberg, but we still have the option for changing the flex direction to columns in place, although no current core blocks use this.

Planned Features & Updates

Clean up code duplication using PHP classes.
Add hooks so that users / theme developers can hook in their own code if they desire to the CSS classes created.
Add presets & ability to change tags (for example, using logical properties for margin, instead of WordPress defaults).
Presets could look like: Option A) WordPress defaults, B) Smart Logical Properties, C) Custom (you set them)

One of the big sore points of the auto generated css is that while they have to be generated via PHP in order to connect to the theme supports API, that also limits the ability for them to be overridden or manipulated as a theme developer might desire.

By adding in hooks at the point where the CSS is generated, it now becomes possible for a theme developer to change the properties & what they contain as desired.

Replacement Auto Generated CSS

On any block that can inherit theme sizes from theme.json such as alignWide and alignFull WordPress by default generates CSS classes containing wp-container-{$id}.

Because these classes cannot be dequeued (they're not a stylesheet) and are autogenerated (because they pull settings from theme.json to determine values), they are difficult to override or control.

Plus, because a unique class with a unique id is created everytime a block that uses content width settings is used, you end up with dozens of redundant css classes with the exact same code that clutter up the pages.

This plugin replaces those auto generated classes with the following CSS classes and simply auto-applies the classes to the blocks that use them - and they all dynamically update with theme.json updates.

However, we still have to autogenerate the code via php, rather than enqueueing with a stylesheet traditionally because otherwise dynamic properties set by the user or through theme.json wouldn't be possible.

The Complete List of CSS Classes

.wf-container__default > * {
    max-width: 42.5rem; /* comes from theme.json */
    margin-left: auto !important;
    margin-right: auto !important;
}
.wf-container__default > .alignwide {
    max-width: clamp(48.5rem, 62vw, 96rem); /* comes from theme.json */
}
.wf-container__default .alignfull {
    max-width: none;
}

.wf-container__inherit .alignleft {
    float: left;
    margin-left: var( --wp--style--block-gap, 2em );
}
.wf-container__inherit .alignright {
    float: right;
    margin-right: var( --wp--style--block-gap, 2em );
}

.wf-v_stack > * {
    margin-top: 0;
    margin-bottom: 0;
}
.wf-v_stack > * + * {
    margin-top: var(--wp--style--block-gap, 1.5rem);
}
.wf-container__flex {
    display: flex;
    gap: var( --wp--style--block-gap, 1.5rem)
}
.wf-container__flex_wrap {
    flex-wrap: wrap;
}
.wf-container__flex_items-center {
    align-items: center;
}
.wf-container__flex > * {
    margin: 0;
}

Code Comparisons to WordPress Core

.wf-container__default > * {
    max-width: 42.5rem; /* comes from theme.json */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Replaces */
.wp-container-61f8dbb1d464f > * {
    max-width: 42.5rem; /* comes from theme.json */
    margin-left: auto !important;
    margin-right: auto !important;
}

.wf-container__default > .alignwide {
    max-width: clamp(48.5rem, 62vw, 96rem); /* comes from theme.json */
}
.wf-container__default .alignfull {
    max-width: none;
}

/* Replaces */
.wp-container-61f8dbb1d464f > .alignwide {
    max-width: clamp(48.5rem, 62vw, 96rem); /* comes from theme.json */
}
.wp-container-61f8dbb1d464f .alignfull {
    max-width: none;
}

.wf-container__inherit .alignleft {
    float: left;
    margin-left: var( --wp--style--block-gap, 2em );
}
.wf-container__inherit .alignright {
    float: right;
    margin-right: var( --wp--style--block-gap, 2em );
}

/* Replaces */
.wp-container-61f8dbb1d464f .alignleft {
    float: left;
    margin-right: 2em;
}
.wp-container-61f8dbb1d464f .alignright {
    float: right;
    margin-left: 2em;
}

.wf-v_stack > * {
    margin-top: 0;
    margin-bottom: 0;
}
.wf-v_stack > * + * {
  margin-top: var(--wp--style--block-gap, 1.5rem);
}

/* Replaces */
.wp-container-61f8dbb1d464f > * {
    margin-top: 0;
    margin-bottom: 0;
}
.wp-container-61f8dbb1d464f > * + * {
    margin-top: var( --wp--style--block-gap );
    margin-bottom: 0;
}

This creates consistent vertical spacing between elements based on the the blockGap setting in theme.json.

.wf-container__flex {
    display: flex;
    gap: var( --wp--style--block-gap, 1.5rem)
}
.wf-container__flex_wrap {
    flex-wrap: wrap;
}

/**  
 * Right now, WordPress only has the align-items center option for row block,
 * so this is the only class for this option as of 02/01/2022. 
 */
.wf-container__flex_items-center {
    align-items: center; 
}
.wf-container__flex > * {
    margin: 0;
}

/* Replaces */
.wp-container-61f8dbb1d1804 {
    display: flex;
    gap: var( --wp--style--block-gap, 0.5em ); /* Can also be custom */
    flex-wrap: nowrap; /* also wrap */
    align-items: center;
    align-items: center; /* WordPress duplicates the code by default */
    justify-content: flex-start; /* Also flex-end, space-between, center */
}
.wp-container-61f8dbb1d1804 > * {
    margin: 0;
}

Flex option handling is a little challenging because the user can set a variety of different options from the block settings on any given page for any given block using these properties.

Currently only the row block uses these settings, although WordPress intends to convert every block that uses flex properties via custom CSS to this system.

By default, all flex-properties are flex-wrap: nowrap so we do not need to explicitly put this in code.

.wf-container__flex_wrap {
    flex-wrap: wrap;
}

When the wrap option is selected in the editor for a row block, the above code is generated and applied to the block.

WordPress's common.css already contains one line css classes to handle justify-content alignment. We simply use these classes and apply them to the block when they're selected as an option. Those classes are:

.items-justified-left {
    justify-content: flex-start;
}

.items-justified-center {
    justify-content: center;
}

.items-justified-right {
    justify-content: flex-end;
}

.items-justified-space-between {
    justify-content: space-between;
}

Example Custom Generated CSS Classes

There's still a need to auto generate some CSS classes if a user sets a custom value for blockGap, contentSize or wideSize on an individual block. However, we generate these auto-generated classes smartly.

Rather than regenerate the entire codebase that applies to the theme layout support API, we only render the properties that have actually chagned. That means, any property that is still set to a theme default simply calls the global CSS class.

Some Examples

/* Set a different contentSize, wideSize and blockGap */
.wf-container__layout-61fa4c65b4f52 > * {
    max-width: 300px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.wf-container__layout-61fa4c65b4f52 > .alignwide {
    max-width: 400px;
}
/* Although alignfull can't change, we still need it to properly inherit */
.wf-container__layout-61fa4c65b4f52 .alignfull {
    max-width: none;
}
.wf-v_stack-61fa4c65b4f52 > * + * {
    margin-top: 5rem;
    margin-bottom: 0;
}

/* Set a custom wideSize that by default changes the contentSize to match in editor */
.wf-container__layout-61fa4c65b7563 > * {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.wf-container__layout-61fa4c65b7563 > .alignwide {
    max-width: 900px;
}
/* Although alignfull can't change, we still need it to properly inherit */
.wf-container__layout-61fa4c65b7563 .alignfull {
    max-width: none;
}

/* Only the blockGap was changed */
.wf-v_stack-61fa4c65b4812 > * + * {
    margin-top: 100vh;
    margin-bottom: 0;
}

/* on a flex layout block (currently only row by default), only the gap property changes */

.wf-container__flex-gap-61fa4f6153097 {
    gap: 15rem;
}

SteveKinzey / WazFrame