Pattern CSS - Inline Block Styles

The missing inline CSS editor for blocks. Very powerful with synced patterns. How to

• Every block will have a new "Additional CSS" settings panel.
• To target a block, you must use the [block] selector.
• To target any element inside the block, use the normal CSS selector.
• Use !important to override your theme styles (use sparingly)

Features

• Smart loading. Only loads the CSS when the block is present
• No lock in. The styles are attached to the block attributes
• Scopes styles to the block so that parent/sibling blocks are not affected
• It's fast. CSS is minified and optimized in the browser
• It's safe. Invalid, non-spec CSS is never persisted (validated via webassembly sandbox)
• Supports reusable (synced or not-synced) patterns
• See changes on the page as you make them
• Combines adjacent rules (to decrease size)
• Minifies colors and math functions to simplify according to spec
• Supports CSS nesting Star it on GitHub DM me on Twitter @kevinbatdorf

Basic Example `/ Target the block directly / [block] { background: antiquewhite; padding: 2rem; } / Target any inner elements / a { text-decoration-color: burlywood; text-decoration-thickness: 2px; text-decoration-style: solid !important; } a:hover { text-decoration-color: darkgoldenrod; } / Output: / .pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b}` Supports Media Queries `@media (prefers-color-scheme: dark) { [block] { border-color: blue; } } / Output: / @media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}` Combines Rules `[block] { color: red; } .bar { color: red; } / Output: / .pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}` Fixes redundant properties `[block] { padding-top: 5px; padding-left: 50px; padding-bottom: 15px; padding-right: 5px; } / Output: / .pcss-3aa0f0fc{padding:5px 5px 15px 50px}` Supports CSS nesting `[block] { padding: 1rem; a { color: red; } background: white; / Including media queries / @media (prefers-color-scheme: dark) { background: black; color:white; } } / Output: / .pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}}` Check browser support for CSS nesting

1.2.3 - 2024-05-09

• Removed globals like @import, @font-face, and @keyframes (and others)

1.2.2 - 2024-04-19

• Fixed an issue where CSS media queries using <= were stripped out
• Removed loading the viewer for users without the edit_css cap
• Removed the tag stripping output - now only privlidged users can use
• Updated tests to run on modern WP (by disabling the iframe)

1.2.1 - 2024-02-22

• Removed the example code and added a useful default
• Render blocks now work - now adds the id to the main class list

1.2.0 - 2024-02-20

• Feature: Adds support for CSS nesting
• Removes the code example on focus and adds it back on blur (if empty)
• Lets users define an additional block selector
• Adds a notice that the site logo isn't currently supported

1.1.0 - 2024-02-18

• Prevent adding classes to blocks unless CSS is added
• Force the settings area to the bottom (mainly for custom blocks)

1.0.1 - 2023-11-04

• Fixed a bug where the it would crash on the pattern manager page

1.0.0 - 2023-07-15

• Feature: Now supports reusable blocks/patterns
• Update: Removed the "per page" functionality to limit the scope of this plugin to blocks and reusable patterns only
• Performance: Added global loading strategy to prevent per block n+1 loading issues
• Improvement: Added the option to update the CSS selector used for scoping (useful for duplicating blocks)
• Improvement: Added some examples when no CSS is present
• Improvement: Removed the public className attribute requirement from the Additional Settings area
• Improvement: Instead of saving as meta on a post, it now pulls from the attribute directly during page load (via the pre_render_block filter).
• Fix: Now it will only show on post types with the public setting set to true