{"id":250058,"date":"2025-09-27T08:29:56","date_gmt":"2025-09-27T08:29:56","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/neurogenesis-styler\/"},"modified":"2026-03-16T18:43:03","modified_gmt":"2026-03-16T18:43:03","slug":"neurogenesis-styler","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/neurogenesis-styler\/","author":18359878,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.5.0","stable_tag":"0.5.0","tested":"6.9.4","requires":"6.8","requires_php":"7.4","requires_plugins":null,"header_name":"Neurogenesis Styler - Advanced CSS Controls for Native Blocks","header_author":"mentholinc","header_description":"The Missing Gutenberg Styler \u2014 Advanced design controls, custom variables, hover effects, and responsive styling without coding.","assets_banners_color":"cac5d1","last_updated":"2026-03-16 18:43:03","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/neurogenesis-styler.com","header_author_uri":"https:\/\/menthol-inc.com","rating":5,"author_block_rating":0,"active_installs":0,"downloads":534,"num_ratings":3,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.1.0":{"tag":"0.1.0","author":"mentholinc","date":"2025-09-27 08:29:33"},"0.1.1":{"tag":"0.1.1","author":"mentholinc","date":"2025-10-27 17:54:16"},"0.2.0":{"tag":"0.2.0","author":"mentholinc","date":"2025-11-06 19:18:28"},"0.3.0":{"tag":"0.3.0","author":"mentholinc","date":"2025-12-03 21:53:15"},"0.4.0":{"tag":"0.4.0","author":"mentholinc","date":"2026-01-06 18:22:08"},"0.5.0":{"tag":"0.5.0","author":"mentholinc","date":"2026-03-16 18:43:03"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":3},"assets_icons":{"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3410138,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3433844,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3433844,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3484186,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/wp-admin\\\/post.php?post=4&action=edit\",\"steps\":[{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"neurogenesis-styler\"},\"options\":{\"activate\":true}},{\"step\":\"runPHP\",\"code\":\" 'page',\\n'post_status' => 'publish',\\n'post_title' => 'Neurogenesis Styler Demo',\\n'post_content' => '\\n
\\n
\\n

Get connected<\\\/h2>\\n\\n\\n

Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.<\\\/p>\\n<\\\/div>\\n<\\\/div>\\n\\n\\n

\\n
\\n

Email us<\\\/h2>\\n\\n\\n

info@example.com<\\\/p>\\n\\n\\n

support@example.com<\\\/p>\\n<\\\/div>\\n\\n\\n

\\n

Call us<\\\/h2>\\n\\n\\n

+ 1 83399 000 000<\\\/p>\\n\\n\\n

+ 1 83399 000 000<\\\/p>\\n<\\\/div>\\n\\n\\n

\\n

Visit us<\\\/h2>\\n\\n\\n

84408 Camilla Spur, North Angeloland, Idaho<\\\/p>\\n<\\\/div>\\n<\\\/div>\\n\\n\\n

<\\\/p>\\n',\\n);\\n$page_id = wp_insert_post( $page_args );\"}]}"}},"all_blocks":[],"tagged_versions":["0.1.0","0.1.1","0.2.0","0.3.0","0.4.0","0.5.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3410138,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3410138,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3410138,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3410138,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Typography controls in the block sidebar - customize fonts, sizes, line height, spacing, and text shadows.","2":"Background settings - apply gradients, images, or layered effects directly to any block or group.","3":"Border and spacing tools - fine-tune widths, styles, radii, margins, and padding with precision.","4":"Responsive controls - style blocks differently for desktop, tablet, and mobile views.","5":"Interactive Hover States - Showcasing the controls for applying hover styles (colors, shadows, backgrounds) to any block."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[148857,4072,3733,606,24137],"plugin_category":[43],"plugin_contributors":[248460],"plugin_business_model":[],"class_list":["post-250058","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-design","plugin_tags-hover","plugin_tags-responsive","plugin_tags-spacing","plugin_category-customization","plugin_contributors-mentholinc","plugin_committers-mentholinc"],"banners":{"banner":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/banner-772x250.png?rev=3433844","banner_2x":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/banner-1544x500.png?rev=3433844","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/icon-256x256.gif?rev=3410138","icon_2x":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/icon-256x256.gif?rev=3410138","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/screenshot-1.png?rev=3410138","caption":"Typography controls in the block sidebar - customize fonts, sizes, line height, spacing, and text shadows."},{"src":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/screenshot-2.png?rev=3410138","caption":"Background settings - apply gradients, images, or layered effects directly to any block or group."},{"src":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/screenshot-3.png?rev=3410138","caption":"Border and spacing tools - fine-tune widths, styles, radii, margins, and padding with precision."},{"src":"https:\/\/ps.w.org\/neurogenesis-styler\/assets\/screenshot-4.png?rev=3410138","caption":"Responsive controls - style blocks differently for desktop, tablet, and mobile views."}],"raw_content":"\n

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>\n\n

Every control is visual. No CSS knowledge required.<\/p>\n\n

Responsive Styles - Desktop, Tablet, and Mobile<\/h3>\n\n

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>\n\n

Typography<\/h3>\n\n

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>\n\n

Backgrounds<\/h3>\n\n

Colors, gradients, and images - with Background Clip control for creative text and element effects. Multi-layer backgrounds coming in the next version.<\/p>\n\n

Borders<\/h3>\n\n

Width, style, and color - set globally or per side independently. Border radius with full corner control.<\/p>\n\n

Spacing<\/h3>\n\n

Margin and padding per side, per breakpoint. Supports theme.json spacing scale values for consistency with your theme.<\/p>\n\n

Block Sizing<\/h3>\n\n

Width, height, minimum and maximum dimensions - all responsive. Keep elements at the right size on every screen without writing a single media query.<\/p>\n\n

Visual Effects<\/h3>\n\n

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>\n\n

Transforms and Positioning<\/h3>\n\n

Rotate, scale, skew, and translate with visual sliders. CSS positioning - relative, absolute, and sticky - with offset controls. No need to touch Additional CSS.<\/p>\n\n

Custom Element Selectors<\/h3>\n\n

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>\n\n

Full Site Editing<\/h3>\n\n

Works inside the Site Editor. Style template parts, global patterns, and page templates with the same controls available in the post editor.<\/p>\n\n

No New Blocks. No Lock-in.<\/h3>\n\n

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>\n\n

Source Code<\/h3>\n\n

This plugin uses JavaScript and SCSS, which are compiled into the production-ready files in the \/assets\/dist\/ directory.<\/p>\n\n

The original, human-readable source code is included in the \/assets\/js directory.
\nThe build configuration for this plugin is included in package.json.txt<\/code>. Rename it to package.json before npm install<\/code>. Developers can review, modify, or extend the code from there.<\/p>\n\n

Build Instructions<\/h3>\n\n
    \n
  1. Make sure you have Node.js and npm installed.<\/li>\n

  2. From the plugin root, install dependencies:<\/p>\n\n

    npm install<\/p><\/li>\n

  3. To build the production assets:<\/p>\n\n

    npm run build<\/p><\/li>\n

  4. For development with automatic rebuilds on file changes:<\/p>\n\n

    npm run start<\/p><\/li>\n<\/ol>\n\n\n

      \n
    1. Upload the plugin files to the \/wp-content\/plugins\/neurogenesis<\/code> directory, or install directly through the WordPress plugin screen. <\/li>\n
    2. Activate the plugin through the \u2018Plugins\u2019 screen in WordPress. <\/li>\n
    3. Open the block editor and explore the new styling controls in the sidebar.<\/li>\n<\/ol>\n\n\n
      \n

      Does this plugin add new blocks?<\/h3><\/dt>\n

      No. Neurogenesis Styler adds design controls to the native blocks you already use. Nothing new appears in your block inserter.<\/p><\/dd>\n

      Do I need to know CSS?<\/h3><\/dt>\n

      No. Every control is visual - color pickers, sliders, dropdowns, and toggles. You never need to write or edit CSS manually.<\/p><\/dd>\n

      What happens if I deactivate the plugin?<\/h3><\/dt>\n

      Your content stays intact. The custom styles added by Neurogenesis Styler will no longer be applied, but your blocks render normally with no broken layouts or leftover markup.<\/p><\/dd>\n

      Will it work with my theme?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Does it support theme.json variables?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Can I style elements inside a block, not just the block itself?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Does it work in the Site Editor (FSE)?<\/h3><\/dt>\n

      Yes. The same controls available in the post editor work inside the Site Editor for template parts, global patterns, and page templates.<\/p><\/dd>\n

      Can I style responsive properties per device?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      What is fluid typography \/ CSS clamp()?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Is the plugin free?<\/h3><\/dt>\n

      Yes. The current version is fully free and distributed under the GPL v2 license.<\/p><\/dd>\n\n<\/dl>\n\n\n

      0.5.0<\/h4>\n\n

      March 16, 2026<\/strong>\n- Added transform controls (translate, rotate, scale, skew) with visual sliders.\n- Improved text section with enhanced typography and text effects.\n- Added text stroke control for outlined text styling.\n- Added Background Clip control for creative text and element effects.\n- Minor bug fixes.<\/p>\n\n

      0.4.0<\/h4>\n\n

      January 06, 2026<\/strong>\n- Added the possibility to define new element selectors\n- Added theme.json variables to the spacing, border and color controls.\n- Improved color control UI\n- Small bug fixes.<\/p>\n\n

      0.3.0<\/h4>\n\n

      December 04, 2025<\/strong>\n- Grouped the style sections into tabs.\n- Small bug fixes.<\/p>\n\n

      0.2.0<\/h4>\n\n

      November 06, 2025<\/strong>\n- Polished the color picker and added a \"Recent Colors\" section for faster styling.\n- Fixed minor bugs and improved overall editor performance.<\/p>\n\n

      0.1.1<\/h4>\n\n

      October 27, 2025<\/strong>\n- Improved style rendering in the editor for more accurate visual previews.\n- Fixed issues with duplicated and pasted blocks not retaining custom styles.<\/p>\n\n

      0.1.0<\/h4>\n\n

      September 27, 2025<\/strong>\n- Initial release\n- Adds advanced design controls to native Gutenberg blocks:\n - Typography
      \n - Backgrounds
      \n - Borders
      \n - Spacing
      \n - Shadows
      \n - Responsive settings
      \n - Hover states<\/p>","raw_excerpt":"Complete design controls for every block - responsive styles, hover effects, shadows, transforms, and more. No CSS. No new blocks. No lock-in.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/250058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=250058"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/mentholinc"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=250058"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=250058"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=250058"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=250058"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=250058"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=250058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}