WordPress 5.0 and the Block Editor: What You Need to Know

Home » WordPress » WordPress 5.0 and the Block Editor: What You Need to Know
December 10, 2018 WordPress
WordPress 5.0 and the Block Editor: What You Need to Know

WordPress 5.0 was released on December 6, 2018, shipping the new Block Editor — codenamed Gutenberg — as the default post editor. Instead of one large content area, every piece of content is now an independent block: paragraphs, headings, images, galleries, buttons, and much more. This is the most significant change to WordPress in many years.

Problem: What changed between the Classic Editor and the Block Editor introduced in WordPress 5.0, and what do developers need to know to support both?

Solution: The Block Editor stores content as HTML annotated with block comments. Existing themes and shortcodes continue to work, but developers need to understand block registration, enqueue editor-specific assets separately, and verify that custom meta boxes and ACF fields render correctly in the new interface.

The Block Editor replaces the TinyMCE classic editor with a React-based interface. Content is stored as HTML with special comments that define block boundaries:

<!-- wp:paragraph -->
<p>This is a paragraph block.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":42} -->
<figure class="wp-block-image">
    <img src="/wp-content/uploads/2018/12/photo.jpg" alt="" class="wp-image-42"/>
</figure>
<!-- /wp:image -->

If you need to keep the classic editor, the official Classic Editor plugin restores TinyMCE and is supported by WordPress until at least 2022:

wp plugin install classic-editor --activate

Enqueue Block Editor assets from a plugin or theme:

// Styles applied inside the editor (mirrors your front-end theme)
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style(
        'my-editor-styles',
        get_template_directory_uri() . '/css/editor-style.css',
        [ 'wp-edit-blocks' ]
    );
} );

// Styles applied on the front end only
add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style(
        'my-block-styles',
        get_template_directory_uri() . '/css/blocks.css'
    );
} );

Opt a theme into full wide-alignment support (required for the "Wide width" alignment option in the editor):

add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
add_editor_style( 'css/editor-style.css' );

NOTE: Existing content created with the Classic Editor is automatically wrapped in a classic block when opened in the Block Editor — your old posts won't be corrupted. However, the layout may look different; test your most important pages after upgrading to WordPress 5.0.

Related posts