內容簡介
Neurogenesis Styler 是一款專為 WordPress 區塊編輯器設計的外掛，提供缺失的設計控制功能，讓使用者可以視覺化地調整區塊樣式，無需替換現有區塊或撰寫 CSS，保持內容完整性。
【主要功能】
• 視覺化控制所有樣式屬性
• 響應式設計，適用於各種設備
• 支援多層背景和創意效果
• 自訂邊框和圓角設置
• 進階元素選擇器，針對特定元素樣式
• 在網站編輯器中使用相同控制
外掛標籤
開發者團隊
② 後台搜尋「Neurogenesis Styler – Block Editor Typography, Spacing & Design Controls」→ 直接安裝（推薦）
原文外掛簡介
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.
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 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.
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
