mentholinc

<p>Neurogenesis Styler adds the design controls the Block Editor is missing – without replacing your blocks, adding bloat, or locking you into a proprietary system. Install it, style your blocks visually, and keep your existing content exactly as it is.</p>
<p>Every control is visual. No CSS knowledge required.</p>
<h3>Responsive Styles – Desktop, Tablet, and Mobile</h3>
<p>Set different values for every styling property at each breakpoint. Typography, spacing, sizing, visibility, and text alignment all respond independently per device. Controls also support theme.json variables – pick from your theme’s declared color, spacing, and typography values directly inside the panel, keeping your design system consistent.</p>
<h3>Typography</h3>
<p>Font family, weight, size, line height, letter spacing, and text shadow – all responsive. Font sizes support fluid scaling using CSS clamp(), so your typography transitions smoothly across screen sizes without jumping between fixed values.</p>
<h3>Backgrounds</h3>
<p>Colors, gradients, and images – with Background Clip control for creative text and element effects. Multi-layer backgrounds coming in the next version.</p>
<h3>Borders</h3>
<p>Width, style, and color – set globally or per side independently. Border radius with full corner control.</p>
<h3>Spacing</h3>
<p>Margin and padding per side, per breakpoint. Supports theme.json spacing scale values for consistency with your theme.</p>
<h3>Block Sizing</h3>
<p>Width, height, minimum and maximum dimensions – all responsive. Keep elements at the right size on every screen without writing a single media query.</p>
<h3>Visual Effects</h3>
<p>Box shadow, text shadow, opacity, z-index, and transitions – all with visual controls. Hover states available for colors, backgrounds, borders, and shadows, letting you build micro-interactions directly in the editor.</p>
<h3>Transforms and Positioning</h3>
<p>Rotate, scale, skew, and translate with visual sliders. CSS positioning – relative, absolute, and sticky – with offset controls. No need to touch Additional CSS.</p>
<h3>Custom Element Selectors</h3>
<p>Style specific elements inside a block – not just the block wrapper itself. Define a CSS path to target repeating sub-elements like images inside a gallery, text inside columns, or links inside a card. Useful anywhere the block’s own controls don’t reach.</p>
<h3>Full Site Editing</h3>
<p>Works inside the Site Editor. Style template parts, global patterns, and page templates with the same controls available in the post editor.</p>
<h3>No New Blocks. No Lock-in.</h3>
<p>Neurogenesis Styler extends the native blocks you already use. It does not register new blocks or replace core ones. Deactivate the plugin and your content remains intact – your blocks render normally without any leftover markup or broken layouts.</p>
<h3>Source Code</h3>
<p>This plugin uses JavaScript and SCSS, which are compiled into the production-ready files in the /assets/dist/ directory.</p>
<p>The original, human-readable source code is included in the /assets/js directory.<br />
The build configuration for this plugin is included in <code>package.json.txt</code>. Rename it to package.json before <code>npm install</code>. Developers can review, modify, or extend the code from there.</p>
<h3>Build Instructions</h3>
<ol>
<li>Make sure you have Node.js and npm installed.</li>
<li>
<p>From the plugin root, install dependencies:</p>
<p>npm install</p>
</li>
<li>
<p>To build the production assets:</p>
<p>npm run build</p>
</li>
<li>
<p>For development with automatic rebuilds on file changes:</p>
<p>npm run start</p>
</li>
</ol>


Neurogenesis Styler – Complete Design Controls for the Block Editor

Complete design controls for every block - responsive styles, hover effects, shadows, transforms, and more. No CSS. No new blocks. No lock-in.

RobertGillmer

<p>This plugin allows you to create “style guides” displaying all core WordPress Gutenberg blocks, including variations, for styling purposes.  You can choose which custom post types you can create the posts for, so you can see if there are CSS differences across different CPT’s.  Additionally, you can use this to test how Gutenberg blocks display on custom post types which haven’t been set up to use the Gutenberg editor yet.</p>


Block Style Guides

I find this plugin to be a great help when working with Blocks when building sites: the style guides give a good impression of what I can expect and how it will look visually and display on the actual used installation with the theme etc.

Really helpful in day to day work. And I could also image this to be a great helper for Block developers who code extensions for existing Blocks from WP Core.

Maybe popular block collection plugins will get some support in the future? Maybe, this would be a great feature extension ;-) (I am thinking of Ultimate Addons for Gutenberg and Kadence Blocks for example)

Thanks for creating this plugin and releasing this for free! Keep up the good work :)

Great assistant for working with Blocks

Create "style guides" displaying all core WordPress Gutenberg blocks, including variations, for styling purposes.

Neurogenesis Styler – Complete Design Controls for the Block Editor vs Block Style Guides