iansvo

<p>This block allows you to add an additional block content area to a site-editor template and store the block output inside a meta field. By default, WordPress posts or pages may only store blocks in one place: post_content. These blocks are output on the page using the core/post-content block. This block allows you to have multiple “outlets” where you can add blocks so you can have post-specific blocks appear in more than one location in the template.</p>
<p>The block is a fork of the core/post-content block that uses a customized version of the useEntityBlockEditor hook which supports meta keys. The blocks for your content area are then stored inside that meta key (instead of post_content). This allows you to keep the blocks separate and you can use as many of these on a single template as you want (but in most cases 2 is probably enough). It’s all up to you!</p>
<h3>Requirements</h3>
<ol>
<li>Using this plugin requires you to enable template previews (which will let you visually see the new content area you’re adding). This can be enabled on any given post or page, but you can optionally set it on by default using a filter.</li>
<li>Your theme must be a block theme (i.e. it uses the site editor). This won’t work for a hybrid or classic theme (which has no concept of live template preview in the block editor).</li>
</ol>
<h3>Hooks</h3>
<p>If you want to disable this meta key’s registration, add the following to your theme or plugin:</p>
<pre><code><?php
add_filter( 'content_area_block_register_default_meta', '__return_false' );
</code></pre>
<p>For advanced users, there is also a filter for the entire block’s output. See the below snippet from render.php:</p>
<pre><code><?php
/**
 * Filter the block's frontend output.
 *
 * @param string $parsed_content The parsed block content for output.
 * @param int    $block_post_id  The current post ID the block is displaying in.
 * @param array  $attributes     The block attributes.
 * @param string $content        The original unparsed block content.
 * @param object $block          The current parsed block object.
 *
 * @return The block content for output on the frontend.
 */
$output = apply_filters( 
    'content_area_block_content', 
    do_blocks( str_replace( ']]>', ']]&gt;', $content ) ), 
    $block_post_id, 
    $attributes, 
    $content, 
    $block 
);
</code></pre>
<h3>Contributing</h3>
<p>The plugin source code may be found here: https://github.com/iansvo/content-area-block.</p>
<p>To build the plugin from source, you must have NodeJS (v24+) installed.</p>
<p>Setup Steps:</p>
<ol>
<li>Navigate to the project folder in your terminal.</li>
<li>Run <code>npm i</code> to install dependencies.</li>
<li>Run <code>npm run build</code> to performn the initial build.</li>
</ol>
<p>If you’re using wp-env to run the plugin…<br />
1. Run <code>npm run wp-env start</code> to start the docker container.<br />
2. Run <code>npm run start</code> to watch for file changes.</p>


Content Area Block

Adds a block content area to a site editor template and stores the blocks in a specified meta field. By default, the plugin will add a new meta field  …

pixelgrade

vlad.olaru

George Olaru

Razvan Onofrei

Madalin Gorbanescu

<p>Style Manager generates and coordinates colors, typography, and spacing for compatible WordPress themes and blocks.</p>
<p>Instead of tuning isolated colors, font sizes, and spacing values by hand, you work with connected design decisions that can flow through the editor, the active theme, compatible blocks, and the front end.</p>
<p>Themes that support Style Manager apply the system across site templates and theme details. Compatible blocks can adapt to the same design decisions in context, so sections and blocks feel like part of one site rather than separate styling work.</p>
<p>In Style Manager 2.3, the main styling flow is available in the Site Editor, with visual preview boards, editor-canvas previews, and a Live Site preview for reviewing unsaved changes before publishing.</p>
<h4>Free compatible stack</h4>
<p>You can try Style Manager with this free Pixelgrade stack:</p>
<ul>
<li><a href="https://github.com/pixelgrade/anima" rel="nofollow ugc">Anima</a> provides the theme-level integration.</li>
<li><a href="https://wordpress.org/plugins/nova-blocks/" rel="ugc">Nova Blocks</a> provides compatible blocks that can respond to the same design system.</li>
</ul>
<p>Style Manager also integrates with Pixelgrade LT themes, but premium themes are not required to try the free Anima and Nova Blocks path.</p>
<h4>What you can shape</h4>
<ul>
<li>Color palettes with generated roles for compatible themes and blocks.</li>
<li>Typography choices for headings, body copy, and details.</li>
<li>Spacing and rhythm controls that keep layouts consistent.</li>
<li>Theme-supported tweaks and motion settings.</li>
<li>Live editor previews before saving.</li>
<li>Context-aware styling for blocks and sections that support Style Manager.</li>
</ul>
<h4>Compatibility</h4>
<p>Style Manager is not a universal page builder and does not make every theme or block support every control.</p>
<p>The full experience depends on your active theme and blocks being built to read Style Manager’s design decisions. If a theme or block does not support a specific Style Manager feature, the related controls may be hidden or may not affect that theme or block’s output.</p>
<h3>Issues</h3>
<p>If you identify any errors or have an idea for improving the plugin, please open an <a href="https://github.com/pixelgrade/style-manager/issues?stage=open" rel="nofollow ugc">issue</a>. We’re more than excited to see what the community thinks of this project, and we welcome your input!</p>
<p>If GitHub is not your thing, but you are passionate about Style Manager and want to help us make it better, don’t hesitate to <a href="https://pixelgrade.com/contact/" rel="nofollow ugc">reach us</a>.</p>
<h3>Credits</h3>
<ul>
<li><a href="https://select2.github.io" rel="nofollow ugc">Select2</a> JavaScript library – License: MIT</li>
<li><a href="https://ace.c9.io/" rel="nofollow ugc">Ace Editor</a> JavaScript editor – License: BSD</li>
<li><a href="https://github.com/natedavisolds/jquery-react" rel="nofollow ugc">jQuery React</a> JavaScript jQuery plugin – License: MIT</li>
<li><a href="https://github.com/typekit/webfontloader" rel="nofollow ugc">Web Font Loader</a> JavaScript library – License: Apache 2.0</li>
<li><a href="http://fusejs.io" rel="nofollow ugc">Fuse.js</a> Lightweight fuzzy-search JavaScript library – License: Apache 2.0</li>
<li><a href="https://carbonfields.net/" rel="nofollow ugc">CarbonFields</a> WordPress Custom Fields Library – License: GPLv2</li>
<li>Default <a href="https://unsplash.com/photos/OgM4RKdr2kY" rel="nofollow ugc">image</a> for Style Manager Color Palette control – License: <a href="https://unsplash.com/license" rel="nofollow ugc">Unsplash</a></li>
</ul>
<h3>Privacy & External Services</h3>
<p>Style Manager uses external services to deliver some design assets.</p>
<p><strong>Pixelgrade Cloud (cloud.pixelgrade.com)</strong></p>
<p>To provide color palettes, font palettes, and curated design configurations, the plugin can fetch design assets from Pixelgrade Cloud. This request is made from the WordPress admin, not from your site’s frontend, and the response is cached locally.</p>
<p>When fetching design assets, the plugin sends: your site URL, whether the site uses SSL, your WordPress version, the Style Manager version, and your active theme’s slug, name, URI, version, and text domain. No personal data about your site’s visitors is sent or collected, and the plugin does not load tracking or analytics scripts.</p>
<ul>
<li>Service: Pixelgrade Cloud</li>
<li>Provider: Pixelgrade – https://pixelgrade.com</li>
<li>Privacy Policy: https://pixelgrade.com/privacy/</li>
<li>Web fonts referenced by font palettes are served by Google Fonts (https://fonts.googleapis.com / https://fonts.gstatic.com). See Google’s Privacy Policy at https://policies.google.com/privacy.</li>
</ul>


Style Manager

Generate and coordinate colors, typography, and spacing across compatible WordPress themes and blocks.

Content Area Block vs Style Manager