Neurogenesis Styler – Block Editor Typography, Spacing & Design Controls
Neurogenesis Styler – Block Editor Typography, Spacing & Design Controls
Description
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.
Every control is visual. No CSS knowledge required. Patterns and blocks that already have WordPress color, typography, spacing, or border styles can be converted into Neurogenesis from the Styler ⋮ menu.
Free companion themes
Pair the Styler with a block theme that already speaks its language — colors, type, spacing, and patterns that snap into Neurogenesis controls. No page builder. No lock-in.
- Thinko — the companion theme for Neurogenesis Styler. A full site editing theme for LMS and online course sites, built entirely with native Gutenberg blocks and custom-made patterns, with bold dark-green and coral accents. Get it free: https://wordpress.org/themes/thinko/
- A new companion theme is on the way — another free starter in the same native-block family. More themes coming soon.
Install Thinko, open the editor, and start styling. A professional site in hours, not weeks.
Responsive Styles – Desktop, Tablet, and Mobile
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.
Typography
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.
Backgrounds
Colors, gradients, and images – with Background Clip control for creative text and element effects. Multi-layer backgrounds let you stack colors, gradients, and images for richer visual depth.
Borders
Width, style, and color – set globally or per side independently. Border radius with full corner control.
Spacing
Margin and padding per side, per breakpoint. Supports theme.json spacing scale values for consistency with your theme.
Block Sizing
Width, height, minimum and maximum dimensions – all responsive. Keep elements at the right size on every screen without writing a single media query.
Visual Effects
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.
Transforms and Positioning
Rotate, scale, skew, and translate with visual sliders. CSS positioning – relative, absolute, and sticky – with offset controls. No need to touch Additional CSS.
Custom Element Selectors
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.
Neurogenesis Tab
A dedicated Neurogenesis tab in the block editor groups your advanced design controls in one place. Jump in from the inspector with the “Style with Neurogenesis” shortcut, or open styling from the block toolbar.
Full Site Editing
Works inside the Site Editor. Style template parts, global patterns, and page templates with the same controls available in the post editor.
No New Blocks. No Lock-in.
Neurogenesis Styler extends the native Gutenberg blocks you already use. It does not register new block types – there is no custom Section block – and it does not replace core ones.
The inserter Section item is a Group variation: a full-width Group using the section HTML tag, plus a layout overlay. Real Sections insert starter copy and media using the same WordPress blocks as a hand-built page. Old Column Splits insert empty Columns you fill yourself. Saved markup is always core blocks:
- Group
- Columns
- Cover (including a video background hero)
- Heading and Paragraph
- Image
- Buttons
- Separator
Deactivate the plugin and the content does not break. Posts and templates still open. Those native blocks keep editing and rendering – headings, images, columns, buttons, and Cover video included. Neurogenesis visual styles (colors, type, spacing, shape dividers) simply stop painting. You will not see missing-block placeholders or leftover custom markup.
Source Code
This plugin uses JavaScript and SCSS, which are compiled into the production-ready files in the /assets/dist/ directory.
The original, human-readable source code is included in the /assets/js directory.
The build configuration for this plugin is included in package.json.txt. Rename it to package.json before npm install. Developers can review, modify, or extend the code from there.
Build Instructions
- Make sure you have Node.js and npm installed.
-
From the plugin root, install dependencies:
npm install
-
To build the production assets:
npm run build
-
For development with automatic rebuilds on file changes:
npm run start
Installation
- Upload the plugin files to the
/wp-content/plugins/neurogenesisdirectory, or install directly through the WordPress plugin screen. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- Open the block editor and explore the new styling controls in the sidebar.
Screenshots
Typography controls in the block sidebar - customize fonts, sizes, line height, spacing, and text shadows.
Background settings - apply gradients, images, or layered effects directly to any block or group.
Border and spacing tools - fine-tune widths, styles, radii, margins, and padding with precision.
Responsive controls - style blocks differently for desktop, tablet, and mobile views.
Faq
No. Neurogenesis Styler does not register new block types. Section in the inserter is a native Group variation. Layouts inside it are native Gutenberg blocks: Group, Columns, Cover, Heading, Paragraph, Image, Buttons, and Separator. Saved content is those core blocks, not a proprietary block type.
No. Every control is visual – color pickers, sliders, dropdowns, and toggles. You never need to write or edit CSS manually.
Your content stays intact. The page is still WordPress blocks, so nothing turns into a “block missing” placeholder. Headings, images, columns, buttons, and Cover (including a chosen video) keep working and stay editable. Neurogenesis visual styles – including Section shape dividers – stop painting. There is no leftover custom markup.
Yes, as long as you are using a block-based theme. Neurogenesis Styler integrates with the Block Editor and is compatible with any FSE-ready block theme. Note that some CSS rules defined by your theme may take precedence over certain styles depending on specificity.
Yes. Color, spacing, and typography controls can pull values directly from your theme’s theme.json declarations. This keeps your styling consistent with your theme’s design system without hardcoding values.
Yes. The Custom Element Selector feature lets you define a CSS path to target a specific child element inside a block – useful for styling images inside a group, links inside a navigation, or repeated elements inside a columns layout. Selectors must be normal CSS paths (no {, @import, or similar). Comma-separated lists stay limited to that block.
Yes. The same controls available in the post editor work inside the Site Editor for template parts, global patterns, and page templates.
Yes. Typography, spacing, sizing, visibility, and text alignment all support independent values for desktop, tablet, and mobile breakpoints. Switch between device modes in the editor to set values per screen size.
Fluid typography lets you set a minimum and maximum font size, and the browser scales smoothly between them based on the viewport width. This eliminates abrupt size jumps between breakpoints. Neurogenesis Styler supports this natively for heading and paragraph blocks.
Yes. The current version is fully free and distributed under the GPL v2 license.
Reviews
Finnaly in Full Styling Control on Gutenberg
By 
So great to be able to easily style any block without custom CSS now. I love it the distinct UI color I get to associate with detailed styling. Great job over all!
Very useful!
By 
I like how this plugin extends the block styling controls; it is simple to use, works very well and i am excited for more options. I am already using it on a client website.
This is a great tool in my Gutenberg toolkit 🙂
Great plugin addon for Gutenberg
By 
Great plugin to enhance the basic options limited by Gutenberg. As long as it doesn’t cause any conflicts and remains lightweight, I’m happy to have it installed on my sites that use Gutenberg.
Changelog
1.1.0
September 15, 2026
– Section inserter item: a full-width Group (<section>) with Real Sections (designed starter layouts, including a video hero Cover and split pricing card), empty column splits, and Prebuilt Library on the empty placeholder. Inserts native Gutenberg blocks (Group, Columns, Cover, Heading, Paragraph, Image, Buttons, Separator). Deactivate the plugin and those blocks remain; Neurogenesis styles stop painting.
– Section Block tab: General (Container Width, Vertical Padding), Background, and shape dividers (curve, wave, tilt, triangle, peaks) painted with CSS masks — no extra HTML in the Group.
– Element picker is a tree (wrapper and nested parts) with a visible dropdown arrow and the CSS selector on each row. Clicking a listed part on the canvas selects it; the selected part is highlighted with a box and tag/name chip.
– Convert WordPress (Gutenberg) native styles into Neurogenesis from the Styler ⋮ menu, including inner blocks in a pattern.
– Constrained the stored neuro block attribute with a schema and sanitized generated CSS on save and on the frontend (selectors, IDs, values, and url()).
– Compatibility: tested up to WordPress 7.1.
1.0.0
August 8, 2026
– Introduced the Neurogenesis tab in the block editor for a clearer styling workflow.
– Added a “Style with Neurogenesis” shortcut in the block inspector.
– Added a Neurogenesis button to the editor toolbar for quicker access to styling controls.
– Various bug fixes and editor polish.
0.6.1
May 29, 2026
– Improved CSS variable serialization.
– Fixed template part style rendering.
– Fixed color and value reset bugs.
– Fixed axial spacing issues.
– Compatibility update: tested up to WordPress 7.0.
0.6.0
May 12, 2026
– Added advanced border radius
– Added background layers
– Minor bug fixes.
0.5.0
March 16, 2026
– Added transform controls (translate, rotate, scale, skew) with visual sliders.
– Improved text section with enhanced typography and text effects.
– Added text stroke control for outlined text styling.
– Added Background Clip control for creative text and element effects.
– Minor bug fixes.
0.4.0
January 06, 2026
– Added the possibility to define new element selectors
– Added theme.json variables to the spacing, border and color controls.
– Improved color control UI
– Small bug fixes.
0.3.0
December 04, 2025
– Grouped the style sections into tabs.
– Small bug fixes.
0.2.0
November 06, 2025
– Polished the color picker and added a “Recent Colors” section for faster styling.
– Fixed minor bugs and improved overall editor performance.
0.1.1
October 27, 2025
– Improved style rendering in the editor for more accurate visual previews.
– Fixed issues with duplicated and pasted blocks not retaining custom styles.
0.1.0
September 27, 2025
– Initial release
– Adds advanced design controls to native Gutenberg blocks:
– Typography
– Backgrounds
– Borders
– Spacing
– Shadows
– Responsive settings
– Hover states