WP Plover

<p>Plover kit provide pattern library and pluggable modules that enhance the Gutenberg core blocks and also provide extended features. Creating unique and eye-catching web designs is pleasant and easy with the WordPress block editor and the extensions provided by Plover Kit.</p>
<h3>Featured Modules</h3>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/pattern-library/" rel="nofollow ugc">Pattern Library</a></h4>
<p>Add beautiful, ready-to-go layouts to your site with one click.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/table-of-contents/" rel="nofollow ugc">Table of Contents</a></h4>
<p>Introduce a Table of Contents block to your posts and pages. It shows a nested list of links to all the headings found in a post or page.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/breadcrumb/" rel="nofollow ugc">Breadcrumb</a></h4>
<p>Let’s you easily display breadcrumb navigation on your WordPress site, easy customization.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/shape-divider/" rel="nofollow ugc">Shape Divider</a></h4>
<p>Shape divider is used to create visual separation between different sections of content.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/particles-effect/" rel="nofollow ugc">Particles Effect</a></h4>
<p>Add cool particle effects to your designs!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/rough-notation/" rel="nofollow ugc">Rough Notation</a></h4>
<p>Create and animate hand-draw style notations on a page.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/entrance-animation/" rel="nofollow ugc">Entrance Animation</a></h4>
<p>Entrance animation adding dynamic movement to elements as they appear on screen.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/hover-animation/" rel="nofollow ugc">Hover Animation</a></h4>
<p>The Hover Animation allow you to add mouse hover animation effect for elements on your WordPress website.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/typing-animation/" rel="nofollow ugc">Typing Animation</a></h4>
<p>Add dynamic typing effects to your text.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/counter-block/" rel="nofollow ugc">Counter Block</a></h4>
<p>Introduce a counter block enables you to add an animated numbered counter to your page.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/reading-time-block/" rel="nofollow ugc">Reading Time Block</a></h4>
<p>Let’s you easily add an estimated reading time to your WordPress posts.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/code-snippets/" rel="nofollow ugc">Code Snippets</a></h4>
<p>Insert code snippets to site header or footer section like Google Analytics code, AdSense Code, Facebook Pixels code, and more.</p>
<p>You no longer need to manually modify theme code such as header.php, and no code snippets are lost when switching or updating themes.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/block-shadow/" rel="nofollow ugc">Block Shadow</a></h4>
<p>Extra text-shadow, drop-shadow, and box-shadow support for core blocks.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/block-sticky/" rel="nofollow ugc">Block Sticky</a></h4>
<p>Make your content in the page visible at all times, making it permanently visible while scrolling.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/block-measures/" rel="nofollow ugc">Block Measures</a></h4>
<p>You can set height, width, [min/max]-height and [min/max]-width css properties for blocks, responsive!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/css-position/" rel="nofollow ugc">CSS Position</a></h4>
<p>You can set position and z-index css properties for blocks, responsive!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/css-display/" rel="nofollow ugc">CSS Display</a></h4>
<p>You can set display CSS properties for blocks, responsive!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/block-event-handler/" rel="nofollow ugc">Event Handler</a></h4>
<p>Adding event handler to blocks to execute custom JavaScript snippets.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/code-highlight/" rel="nofollow ugc">Code Highlight</a></h4>
<p>Add out-of-the-box code highlighting features for core/code block.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/icon-button/" rel="nofollow ugc">Icon Button</a></h4>
<p>Add icon to boring buttons!, 2000+ free icons available!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/icon-block/" rel="nofollow ugc">Icon Block</a></h4>
<p>Add icons to your design! 2000+ free icons available!</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/icon-library/" rel="nofollow ugc">Icon Library</a></h4>
<p>Icon library allows you to manage icon libraries and upload your custom SVG icons.</p>
<h4><a href="https://wpplover.com/docs/plover-kit/modules/preloader/" rel="nofollow ugc">Preloader</a></h4>
<p>Animated elements that appear while website content loads make waiting more enjoyable.</p>
<h3>Privacy</h3>
<p>The following features of this plugin require access to our <a href="https://api.wpplover.com/" rel="nofollow ugc">external services</a>.</p>
<ul>
<li>Icon Library</li>
<li>Pattern Library</li>
</ul>
<p>Read <a href="https://wpplover.com/privacy-policy/" rel="nofollow ugc">Privacy policy</a> and <a href="https://wpplover.com/terms-conditions/" rel="nofollow ugc">Terms & Conditions</a> of this plugin.</p>


Plover Kit – Blocks, Patterns and Editor Enhancements

Patterns library and all-in-one block editor enhancement toolkit.

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.

Plover Kit – Blocks, Patterns and Editor Enhancements vs Pattern CSS – The CSS Editor For Blocks