The Taming of the Block

WordCamp Vienna 2020


Thomas Kräftner
https://kraftner.com | @tkraftner

Different approaches to Content Editing

Text Editor WYSIWYG Editor CMS Page Builder
full control (over HTML)
no HTML
separate content/layout
visual editing

◆ - yes | ⬖ - partly | ◇ - no

What does it mean for WordPress?

  • 🏃‍♀️💨 People leave for services with easier (visual) editing
  • 🏚️🔥 Fractured WP ecosystem/inconsistent editing experience

Gutenberg empowers users …

… by making editing complex content easier …

… and giving them plenty of styling controls.

Empowering users is great …

… but not always and without limits.

Often the "old" model to separate content and layout works better.

The practical part

  • Decluttering the Editor
  • Enforcing Consistency & Maintainability
  • The future of Gutenberg
Difficulty 👶 🔧 🏗️
Risk 🛋️ 👷 💀
Stability 🚧 🧪

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"

Gutenberg is still work in progress …

… so only future will tell where things will go. 🔮

Thank you!

Questions?

See you at the happiness bar!

https://kraftner.com/talks/the-taming-of-the-block


Thomas Kräftner
https://kraftner.com | @tkraftner