Skip to content

Latest commit

 

History

History
160 lines (129 loc) · 4.92 KB

CSS.md

File metadata and controls

160 lines (129 loc) · 4.92 KB

WordPress Default CSS

##General CSS cheat sheet

div > * selector = selects all elements where parent is div.

div > * + * The adjacent sibling combinator '+' is only applied where the element is preceded by another element. The universal (wildcard) selector * ensures any and all elements are affected.

* + * is knows as the owl.

* + * {
	margin-top: 1.5em;
}

The OG reference to Owl Selector

When the element is div > * + * it ensures that only children are affected. div * + * is recursive and will inject the css into every element at all nesting levels.

Would read as "All elements in the flow of the document that proceed other elements must receive a top margin of one line."

General Cheatsheet Link

##WordPress Generated CSS

This File contains WP_Theme_JSON which autogenerates Custom Props and default body styles.

##Body Tag

<body class="home 
page-template-default 
page 
page-id-4 
wp-custom-logo 
wp-embed-responsive">
</body>

User Custom Templates

When a user creates a template, it saves as a CPT and renders the following CSS class: page-template-wp-custom-template-{$template_name}

##Block Template wrapper WordPress Generates wp-site-blocks as a wrapper

<div class="wp-site-blocks">
    <!-- template files appear here, 
    e.g. <header>, post_content, <footer> -->
</div>

Within the body tag, there is a div wrapper that has the site-blocks inside, e.g:

<body class="<!-- reference body tag notes above-->">
    <div class="wp-site-blocks">
        <!-- hidden SVG files here for accessibility -->
        <header class="wp-block-template-part"></header>
        <div class="wp-container-* entry-content wp-block-post-content">
            <!-- the_content -->
        </div>
        <footer class="wp-block-template-part"></footer>
    </div>
</body>

.wp-container-*

This class is autogenerated with a unique ID and is setting values such as spacing. Renders with max-width, margins, floats and uses > * and > * + * selectors.

Wraps the following blocks:

  • Columns
  • Group

Any block that can inherit site width properties from theme.json gets this bloat.

--This-- CSS is autogenerated by php, not by a css file enqueued.

wp_render_layout_support_flag() & wp_get_layout_style()

The wp_render_layout_support_flag function renders an entirely new id via php's uniqid() every single time the page is rendered or refreshed - and has existed since version one. I can't think of a single reason as to why this even exists.

When the wp_render_layout_support_flag() is removed via remove_filter('render_blocks') and replaced with a different custom function that uses the same name, it still works - however, using a different one where it references the same CSS class file currently does not.

The only logical explanation for why a unique id exists is so that if the user has a custom setting for wide and content size that it properly renders as a lazier alternative to an if() statement that would only create a unique id if the user has inputted a unique value for that particular block.

Source

Larger example:

.wp-container-61f5a9d413d0b > * {
 max-width: 42.5rem;
 margin-left: auto !important;
 margin-right: auto !important;
}
.wp-container-61f5a9d413d0b > .alignwide {
 max-width: clamp(48.5rem, 62vw, 96rem);
}
.wp-container-61f5a9d413d0b .alignfull {
 max-width: none;
}
.wp-container-61f5a9d413d0b .alignleft {
 float: left;
 margin-right: 2em;
}
.wp-container-61f5a9d413d0b .alignright {
 float: right;
 margin-left: 2em;
}
.wp-container-61f5a9d413d0b > * {
 margin-top: 0;
 margin-bottom: 0;
}
.wp-container-61f5a9d413d0b > * + * {
 margin-top: var( --wp--style--block-gap );
 margin-bottom: 0;
}

Renders all 7 of the above if the block is set to alignfull OR if alignwide. IF content is inside the block. If it's an empty block, then only the 4 props that don't include max-width load.

If the setting is alignwide, then only the 4 load. If empty then loads all 7?

.wp-site-blocks

Mostly blank, wraps all block content. Default CSS rendered:

.wp-site-blocks > .alignleft {
 float: left;
 margin-right: 2em;
}
.wp-site-blocks > .alignright {
 float: right;
 margin-left: 2em;
}
.wp-site-blocks > .aligncenter {
 justify-content: center;
 margin-left: auto;
 margin-right: auto;
}
.wp-site-blocks > * {
 margin-top: 0;
 margin-bottom: 0;
}
.wp-site-blocks > * + * {
 margin-top: var( --wp--style--block-gap );
}