Neurogenesis Styler – Advanced CSS Controls for Native Blocks
by mentholinc on WordPress.org
Neurogenesis Styler adds advanced typography, spacing (margin/padding), backgrounds, borders, and responsive controls to native Gutenberg blocks.
Typography controls in the block sidebar - customize fonts, sizes, line height, spacing, and text shadows.
Neurogenesis Styler extends the native Gutenberg blocks with advanced design controls-it does not add new blocks.
This keeps your site lightweight, fast, and future-proof while giving you professional styling options inside the block editor.
Design with the blocks you already know-headings, paragraphs, groups, columns, images, and more-now with richer visual tools. No custom blocks, no theme lock-in, no clutter.
Typography
Custom fonts, weights, sizes, line heights, letter spacing, and text shadows-responsive by default.
Backgrounds
Colors, gradients, or images, layered for depth.
Borders & Radius
Width, style, and color per side or globally.
Spacing Controls
Margin and padding for desktop, tablet, and mobile-no CSS.
Visual Effects
Shadows, transitions, opacity, z-index.
Block Sizing
Width, height, min/max, all responsive.
Hover States
Dynamic colors, borders, shadows, backgrounds.
Template Editing
Style templates and template parts for Full Site Editing themes.
With Neurogenesis Styler, Gutenberg feels complete-design modern, responsive sites without adding a single new block.
Roadmap and Future Plans
We are committed to making Neurogenesis Styler the best tool for styling native Gutenberg blocks. Here is what we’re actively working on for upcoming releases:
View generated CSS by section, so you can inspect easy all the properties.
Background Blend Modes: Giving designers even more creative control over layered background images and colors.
Custom Font Provider Integration: Expanding support for popular custom font services.
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
