Curating the Editor Experience

Curating the editing experience allows you to streamline workflows, ensure consistency, and align content with your site’s style and branding guidelines. This guide covers the essential tools for customizing the editor.

Why Curate?

A curated editor experience provides:

Streamlined editing process for users
Consistency in design and content
Prevention of accidental modifications
Alignment with branding guidelines
Efficient content management

Think about how you want to both open up creative possibilities and provide helpful guardrails for your users.

Core Curation Tools

Block Locking

Restrict user interactions with specific blocks to maintain layout integrity:

// Lock a block to prevent removal and movement
{
  "lock": {
    "move": true,
    "remove": true
  }
}

You can lock blocks at different levels:

// Content-only editing - users can edit text but not modify structure
{
  "templateLock": "contentOnly",
  "lock": {
    "move": true,
    "remove": true
  }
}

Use block locking to protect critical layout elements while allowing content updates.

Patterns

Create predefined block layouts for design consistency:

register_block_pattern(
  'my-theme/hero-section',
  [
    'title' => 'Hero Section',
    'description' => 'A hero section with heading and CTA',
    'categories' => [ 'featured' ],
    'content' => '
      <!-- wp:group {"align":"full"} -->
      <div class="wp-block-group alignfull">
        <!-- wp:heading {"level":1} -->
        <h1>Welcome</h1>
        <!-- /wp:heading -->
        
        <!-- wp:buttons -->
        <div class="wp-block-buttons">
          <!-- wp:button -->
          <div class="wp-block-button">
            <a class="wp-block-button__link">Get Started</a>
          </div>
          <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
      </div>
      <!-- /wp:group -->
    ',
  ]
);

theme.json Configuration

Configure global styles and settings:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#23282d"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "14px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "18px"
        }
      ]
    },
    "blocks": {
      "core/paragraph": {
        "color": {
          "palette": [
            {
              "name": "Text Primary",
              "slug": "text-primary",
              "color": "#333333"
            }
          ]
        }
      }
    }
  }
}

Use theme.json to provide a curated color palette and typography scale that matches your brand.

Filters and Hooks

Modify editor behavior programmatically:

import { addFilter } from '@wordpress/hooks';

// Restrict available block types
addFilter(
  'blocks.registerBlockType',
  'my-plugin/restrict-blocks',
  ( settings, name ) => {
    const allowedBlocks = [
      'core/paragraph',
      'core/heading',
      'core/image',
      'core/list',
    ];

    if ( ! allowedBlocks.includes( name ) ) {
      return {
        ...settings,
        supports: {
          ...settings.supports,
          inserter: false,
        },
      };
    }

    return settings;
  }
);

Disabling Editor Features

Selectively disable features for a streamlined experience:

// Disable specific editor features
function my_theme_editor_settings( $settings ) {
  $settings['__experimentalFeatures']['typography']['customFontSize'] = false;
  $settings['__experimentalFeatures']['color']['custom'] = false;
  $settings['__experimentalFeatures']['spacing']['padding'] = false;
  
  return $settings;
}
add_filter( 'block_editor_settings_all', 'my_theme_editor_settings' );

// Disable specific block supports
import { unregisterBlockType } from '@wordpress/blocks';

// Remove blocks entirely
unregisterBlockType( 'core/verse' );
unregisterBlockType( 'core/pullquote' );

Combining Approaches

You can combine multiple curation techniques:

// Register a locked pattern with specific colors
register_block_pattern(
  'my-theme/locked-header',
  [
    'title' => 'Site Header',
    'blockTypes' => [ 'core/template-part/header' ],
    'content' => '
      <!-- wp:group {
        "backgroundColor":"primary",
        "lock":{"move":true,"remove":true}
      } -->
      <div class="wp-block-group has-primary-background-color">
        <!-- wp:site-title /-->
        <!-- wp:navigation /-->
      </div>
      <!-- /wp:group -->
    ',
  ]
);

Practical Examples

Restrict Block Types by Post Type

function restrict_blocks_by_post_type( $allowed_blocks, $editor_context ) {
  if ( ! empty( $editor_context->post ) ) {
    if ( 'page' === $editor_context->post->post_type ) {
      return [
        'core/paragraph',
        'core/heading',
        'core/image',
        'core/columns',
      ];
    }
  }
  
  return $allowed_blocks;
}
add_filter( 'allowed_block_types_all', 'restrict_blocks_by_post_type', 10, 2 );

Limit Color Choices

{
  "settings": {
    "color": {
      "custom": false,
      "customGradient": false,
      "palette": [
        { "name": "Brand Blue", "slug": "brand-blue", "color": "#0073aa" },
        { "name": "Brand Gray", "slug": "brand-gray", "color": "#23282d" }
      ]
    }
  }
}

Disable custom colors with "custom": false to ensure users only select from your brand palette.

Create Role-Based Experiences

function role_based_blocks( $allowed_blocks, $editor_context ) {
  $user = wp_get_current_user();
  
  if ( in_array( 'contributor', $user->roles ) ) {
    // Contributors get basic blocks only
    return [
      'core/paragraph',
      'core/heading',
      'core/list',
      'core/image',
    ];
  }
  
  // Editors and admins get all blocks
  return $allowed_blocks;
}
add_filter( 'allowed_block_types_all', 'role_based_blocks', 10, 2 );

Best Practices

Start with minimal restrictions and add more as needed
Test your curation with actual users
Document any custom patterns or restrictions
Provide clear labels and descriptions for custom patterns
Balance control with creative flexibility

Get Started

Development Environment

Core Concepts

Block Development

Data & State

Guides

Curating the Editor Experience

Why Curate?

Core Curation Tools

Block Locking

Patterns

theme.json Configuration

Filters and Hooks

Disabling Editor Features

Combining Approaches

Practical Examples

Restrict Block Types by Post Type

Limit Color Choices

Create Role-Based Experiences

Best Practices

Resources

​Why Curate?

​Core Curation Tools

​Block Locking

​Patterns

​theme.json Configuration

​Filters and Hooks

​Disabling Editor Features

​Combining Approaches

​Practical Examples

​Restrict Block Types by Post Type

​Limit Color Choices

​Create Role-Based Experiences

​Best Practices

​Resources

Why Curate?

Core Curation Tools

Block Locking

Patterns

theme.json Configuration

Filters and Hooks

Disabling Editor Features

Combining Approaches

Practical Examples

Restrict Block Types by Post Type

Limit Color Choices

Create Role-Based Experiences

Best Practices

Resources