Kevin Batdorf

<p>The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles.</p>
<p>This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted.</p>
<p>Star it on <a href="https://github.com/KevinBatdorf/pattern-css" rel="nofollow ugc">GitHub</a><br />
Follow me on Twitter <a href="https://twitter.com/kevinbatdorf" rel="nofollow ugc">@kevinbatdorf</a></p>
<h4>How to</h4>
<ul>
<li>Every block will have a new “Pattern CSS” settings panel</li>
<li>Open it and add any CSS. It will be scoped to the block</li>
<li>To target the block directly, you must use the <code>[block]</code> selector</li>
<li>To target any element <em>inside</em> the block, use the normal CSS selector</li>
<li>Use <code>!important</code> to override your theme styles (use sparingly)</li>
</ul>
<h4>Global Editor</h4>
<ul>
<li>Access global styles under the options menu (three dots) in the top right corner of the editor</li>
<li>Additionaly, you can open from the Pattern CSS block editor controls</li>
</ul>
<h4>Features</h4>
<ul>
<li>Powered by WebAssembly for fast and secure CSS parsing</li>
<li>Smart loading. Only loads the CSS when the block is present</li>
<li>Styles persist when changing themes</li>
<li>Scopes styles to the block so that parent/sibling blocks are not affected</li>
<li>It’s fast</li>
<li>CSS is minified and optimized</li>
<li>It’s safe. Invalid, non-spec CSS is never persisted</li>
<li>Supports reusable (synced or not-synced) patterns</li>
<li>See changes on the page as you make them</li>
<li>Combines adjacent rules (to decrease size)</li>
<li>Minifies colors and math functions to simplify according to spec</li>
<li>Supports CSS nesting</li>
</ul>
<h4>Basic Example</h4>
<pre><code>/* 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}
</code></pre>
<h4>Supports Media Queries</h4>
<pre><code>@media (prefers-color-scheme: dark) {
  [block] {
    border-color: blue;
  }
}

/* Output: */
@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}
</code></pre>
<h4>Combines Rules</h4>
<pre><code>[block] {
  color: red;
}
.bar {
  color: red;
}

/* Output: */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}
</code></pre>
<h4>Fixes redundant properties</h4>
<pre><code>[block] {
  padding-top: 5px;
  padding-left: 50px;
  padding-bottom: 15px;
  padding-right: 5px;
}

/* Output: */
.pcss-3aa0f0fc{padding:5px 5px 15px 50px}
</code></pre>
<h4>Supports CSS nesting</h4>
<pre><code>[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}}}
</code></pre>
<p>Check browser support for <a href="https://caniuse.com/css-nesting" rel="nofollow ugc">CSS nesting</a></p>


Pattern CSS – The CSS Editor For Blocks


This is exactly what I need. Very easy to use. Love that you can scope to current item with [block] {}



JANUARY 2025 UPDATE: after a year of use and having installed on at least 20 client sites, I now look at this as indispensable to my work as a website developer. No complaints whatsoever.


really, really great CSS control

Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too.

Ahmed Ramzan - Gosign.de

Awais - Gosign.de

Mohsin Khan - Gosign.de

Muhammad Zohaib

Ahsan Zia

Mansoor - Gosign.de

<h3>English</h3>
<p>This plugin creates a border block. it could be empty space, border with icon, border with different width and positions and alot of custom options.</p>
<h4>Features:</h4>
<ul>
<li>Full width, short width separators</li>
<li>Add beautiful icon border of custom colors</li>
<li>Creates styling borders with icon or svg images</li>
<li>Alot of custom styling options for border</li>
<li>Add White Space between your blocks</li>
<li>Add border with or without shadows</li>
<li>Add Marging space between blocks</li>
<li>PHP 7.2-support</li>
<li>Full WordPress 5 (Codename: Gutenberg) support</li>
</ul>
<h3>MORE WORDPRESS 5 (GUTENBERG) CONTENT ELEMENTS / CONTENT BLOCKS:</h3>
<ul>
<li><a href="https://wordpress.org/plugins/gosign-masonry-post-block/" rel="ugc">Masonry Post Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-background-container/" rel="ugc">Background Container Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-text-with-image-block/" rel="ugc">Text with Image Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-simple-teaser-block/" rel="ugc">Simple Teaser Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-accordion-slider-block/" rel="ugc">Accordion Slider Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-google-maps-block/" rel="ugc">Google Maps Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-advanced-separator-block/" rel="ugc">Advanced Separator Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-logo-slider-block/" rel="ugc">Logo Slider Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-post-teaser-block/" rel="ugc">Post Teaser Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-posts-slider-block/" rel="ugc">Posts Slider Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-readmore-toggle-text-block/" rel="ugc">ReadMore Toggle Text Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-header-image-block/" rel="ugc">Header Image Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-notification-and-alert-block/" rel="ugc">Notification and Alert Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-promo-box-block/" rel="ugc">Promotion Box Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-youtube-video-player-block/" rel="ugc">Youtube Video Player Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-vimeo-video-player-block/" rel="ugc">Vimeo Video Player Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-gallery-box-block/" rel="ugc">Gallery Box Block</a></li>
<li>Full Width Button Block</li>
<li>Button Block</li>
<li>FAQ Block</li>
</ul>
<h3>MEHR WORDPRESS 5 (GUTENBERG) INHALTSELEMENTE / INHALTSBLÖCKE:</h3>
<ul>
<li><a href="https://wordpress.org/plugins/gosign-masonry-post-block/" rel="ugc">Mauerwerkspfostenblock</a></li>
<li><a href="https://wordpress.org/plugins/gosign-background-container/" rel="ugc">Hintergrund-Container-Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-text-with-image-block/" rel="ugc">Text mit Bildblock</a></li>
<li><a href="https://wordpress.org/plugins/gosign-simple-teaser-block/" rel="ugc">Einfacher Teaser Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-accordion-slider-block/" rel="ugc">Akkordeon-Schieberblock</a></li>
<li><a href="https://wordpress.org/plugins/gosign-google-maps-block/" rel="ugc">Google Maps Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-advanced-separator-block/" rel="ugc">Erweiterter Separatorblock</a></li>
<li><a href="https://wordpress.org/plugins/gosign-logo-slider-block/" rel="ugc">Logo Slider Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-post-teaser-block/" rel="ugc">Beitrag Teaser Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-posts-slider-block/" rel="ugc">Posts Slider Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-readmore-toggle-text-block/" rel="ugc">ReadMore Textblock umschalten</a></li>
<li><a href="https://wordpress.org/plugins/gosign-header-image-block/" rel="ugc">Kopfzeile Bildblock</a></li>
<li><a href="https://wordpress.org/plugins/gosign-notification-and-alert-block/" rel="ugc">Benachrichtigungs- und Warnblockierung</a></li>
<li><a href="https://wordpress.org/plugins/gosign-promo-box-block/" rel="ugc">Promotion Box Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-youtube-video-player-block/" rel="ugc">Youtube Video Player Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-vimeo-video-player-block/" rel="ugc">Vimeo Video Player Block</a></li>
<li><a href="https://wordpress.org/plugins/gosign-gallery-box-block/" rel="ugc">Galerie Kastenblock</a></li>
<li>Tastenblock mit voller Breite</li>
<li>Tastenblock</li>
<li>FAQ Block</li>
</ul>
<p>Easy To Use All features.</p>
<h4>Features coming soon:</h4>
<ul>
<li>Just write us what you want.</li>
</ul>
<h3>Note: We are trying to give our best to Test this Plugin with the WordPress 5 Plugins and Themes. We will be thankfull if you can give us feedback about your Tests. So we can extend the bottom list.</h3>
<h4>LIVE DEMO</h4>
<ul>
<li><a href="https://www.gosign.de/plugins/gosign-advanced-separator-block/" rel="nofollow ugc">Advanced Separator Block</a></li>
</ul>


Gosign – Advanced Separator Block

This plugin enables you to add custom border, spaces, styling borders with icons there positioning, sizes, colors and many other options.

Pattern CSS – The CSS Editor For Blocks vs Gosign – Advanced Separator Block