delwinv

<p>A very tiny plugin that adds the ACF field key, field name, Flexible Content field name and Flexible Content layout name to the WYSIWYG<br />
editor body tag, allowing you to target these classes, along with the existing post-type-* classes added by default by WordPress, in<br />
your editor-style.css for a better admin/editor experience.</p>
<p>This works for both ACF and ACF Pro, version 5.</p>
<h3>Usage</h3>
<ol>
<li>Install the plugin through the Install Plugins interface or by uploading the <code>acf-plugin-wysiwyg-styling</code> folder to your <code>/wp-content/plugins/</code> directory.</li>
<li>Activate the ACF WYSIWYG Styling plugin from the Admin > Plugins menu.</li>
<li>Create or edit your editor-style.css in your theme directory and use the newly added classes to style your WYSIWYG editors.</li>
</ol>
<p>For example:</p>
<ul>
<li>
<p>The ACF WYSIWYG field with key field_9999ffff11112222 can be targeted with the following CSS:</p>
<p>body.acf-field-key-field_9999ffff11112222 {<br />
  background-color: red;<br />
}</p>
</li>
<li>
<p>The ACF WYSIWYG field with key field_9999ffff11112222 in the “room” post type can be targeted with the following CSS:</p>
<p>body.post-type-room.acf-field-key-field_9999ffff11112222 {<br />
  background-color: blue;<br />
}</p>
</li>
<li>
<p>All ACF WYSIWYG fields named “my_wysiwyg” can be targetted with the following CSS:</p>
<p>body.acf-field-name-my_wysiwyg {<br />
  background-color: yellow;<br />
}</p>
</li>
<li>
<p>All ACF WYSIWYG fields in the Flexible Content field named “page_content” can be targetted with the following CSS:</p>
<p>body.acf-flex-name-page_content {<br />
  color: green;<br />
}</p>
</li>
<li>
<p>All ACF WYSIWYG fields in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:</p>
<p>body.acf-layout-test_layout {<br />
  font-family: “Computer Modern Serif”;<br />
}</p>
</li>
<li>
<p>The ACF WYSIWYG field named “my_wysiwyg” in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:</p>
<p>body.acf-layout-test_layout.acf-field-name-my_wysiwyg {<br />
  border: 4px solid red;<br />
  height: 100%;<br />
  margin: 0 auto;<br />
  max-width: 100px;<br />
}</p>
</li>
</ul>
<p>N.B. I target using the body tag so that a user cannot accidentally target the admin CSS in their edit of the field (regardless of how unlikely<br />
that would be).</p>


ACF WYSIWYG Styling

Provides the necessary CSS classes in ACF WYSYWIG editor to allow for complete styling of the admin interface.

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.

ACF WYSIWYG Styling vs Neurogenesis Styler – Complete Design Controls for the Block Editor