Decluttering - Disabling Blocks

70+ core blocks by default

Do you really need them all?

Hide Blocks with Block Manager

Disable Blocks with Plugin

Disable Blocks with Code

wp.domReady( function() {
    //Blacklist
    wp.blocks.unregisterBlockType( 'core/verse' );
    //Whitelist
    var allowedBlocks = [ 'core/paragraph', 'core/image'  ];
    wp.blocks.getBlockTypes().forEach( function( blockType ) {
        if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
            wp.blocks.unregisterBlockType( blockType.name );
        }
    } );
} );

<?php
add_action( 'enqueue_block_editor_assets', function(){
    wp_enqueue_script(
        'my-block-script',
        plugins_url( 'my-block-script.js', __FILE__ ),
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
    );
} );

Decluttering - Reducing / Changing block configurability

(Core) Blocks come with many options

Do you really need them all?

Colors, Gradients and Font Sizes

Colors, Gradients and Font Sizes

<?php
add_action( 'after_setup_theme', function(){
 // Disable Custom Colors
 add_theme_support( 'disable-custom-colors' );
 // Change Editor Colors
 add_theme_support( 'editor-color-palette', [
  [ 'name' => 'strong magenta', 'slug' => 'strong-magenta', 'color' => '#a156b4' ],
 ] );
 // Completely disable Editor Colors
 add_theme_support( 'editor-color-palette', [] );
 // Change Editor Gradient Palette
 add_theme_support( '__experimental-editor-gradient-presets', [
  [ 'name'  => 'Red to blue', 'gradient' => 'linear-gradient(red,blue)', 'slug' => 'red-to-blue' ]
 ] );
 // Disable Custom Font Sizes
 add_theme_support('disable-custom-font-sizes');
 // Change Editor Fonts Sizes
 add_theme_support( 'editor-font-sizes', [
  [ 'name' => Small, 'size' => 12, 'slug' => 'small' ],
 ] );
} )

Style Variations

Style Variations

wp.domReady( function() {

    wp.blocks.registerBlockStyle( 'core/quote', {
        name: 'fancy-quote',
        label: 'Fancy Quote'
    } );

    wp.blocks.unregisterBlockStyle( 'core/quote', 'fancy-quote' );

} );

<?php
add_action( 'enqueue_block_editor_assets', function(){
    wp_enqueue_script(
        'my-block-script',
        plugins_url( 'my-block-script.js', __FILE__ ),
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
    );
} );

Other Settings

Currently no API for Drop Cap, Column Count, Table Backgrounds,…

Ugly Hacks anyone? 🤢

Consistency & Maintainability

Sometimes you need to ensure that things are consistent over the whole site and it is easy to make global changes.

Global content with Reusable Blocks

Post Processing with render filters

<?php

// Replace all paragraph blocks with a Ghost

add_filter('render_block', function ($blockContent, $block) {

    if ($block['blockName'] === 'core/paragraph') {
        $blockContent = '
👻
';
    }

    return $blockContent;

}, 10, 2);

Dynamic Blocks

<?php
add_action( 'init', function () {

    register_block_type( 'scary-blocks/daily-ghost', array(

        // Full Block Code skipped in slide
        'editor_script' => 'scary-blocks-daily-ghost',

        'render_callback' => function ( $attributes, $content ) {
            return '
You opened this page on ' . date('l') . '
';
        }

    ) );

} );

Block Templates

<?php
add_action( 'init', function () {
    // Set template for posts
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = [
        [ 'core/image' ],
    ];
    // ...and lock it down so blocks can't be changed.
    $post_type_object->template_lock = 'all';

    // Set template for Custom Post Type on registration
    register_post_type(
        'book',
        [
            'public' => true,
            'label'  => 'Books',
            'show_in_rest' => true,
            'template' => [
                [ 'core/image',     [ 'align'       => 'left'               ] ],
                [ 'core/heading',   [ 'placeholder' => 'Add Author...'      ] ],
                [ 'core/paragraph', [ 'placeholder' => 'Add Description...' ] ],
            ],
        ]
    );
} );

The future
- Full Site Editing

• everything is a block: menus, widgets,…
• "theme blocks" for site title or post content
• block-based themes from "block templates"… (instead of in PHP files)
• … consisting of normal blocks and "theme blocks"