WordPress 5.0 Block Editor

WordPress 5.0 uses a brand new “block editor” to create and update your site, replacing the old “Classic” editor.

Understanding how this editor works is crucial if you want to confidently build the best website you can.

Getting started with the Block Editor

Learn to Think & See “Blocks”

This new editor is called the “block editor” because everything you write, design, and upload is broken up into individual “blocks.” Paragraphs, headings, images, quotes, videos, buttons, and more are each their own “block” with unique options. So when you look at a page, you’ll eventually learn to see it in terms of blocks:

Stick with the Fundamentals

Once you understand how to think about the new editor, don’t forget that your primary goal remains strong communication with your website visitors. Keep following best practices for writing on the web.

Don’t go overboard in formatting your information, especially at first. There are new options for adding color, changing your font size, and more, but going from writing plain text to wildly formatted text will be a jolt for your users and lead to an inconsistent website in the long run. Over time, you’ll discover when you need the more advanced features and use them with a purpose.

Advanced Block Types

You’ll have to experiment with and explore the block editor before you can truly understand and appreciate it’s features, but know that it provides a variety of exciting new features and a foundation for plugins to add even more.

Some of the exciting new block types and features include:

• Cover Image – Large text over a dimmed image
• Media & Text – Side–by–side image and text layout
• Columns – Insert content in 2 or more columns
• Widget Blocks – Add a list of Recent Posts or your Blog Categories directly in a page. More widgets are coming to WordPress in the future.
• “Wide” and “Full” alignment – In themes that support the feature, you can make extra large images, columns, and more that fill all or most of the screen width.

Tips & Tricks for the Block Editor

The block editor has a few critical options and features that help you customize the tool to your liking.

Toolbar Option & View Modes

First, hidden in the “Options” menu are three modes that every WordPress user should experiment with. By clicking the button with three vertical dots in the top-right corner, you’ll find the ability to use any or all of:

• Top Toolbar – Keep the formatting tools at the top of the page rather than popping up directly in the page.
• Spotlight Mode – Highlight the block you’re editing and dim all others.
• Fullscreen Mode – Expand the editor to cover the admin menu.

You may discover that you like to use them all, some of them, or even none of them. What’s important is that you explore use the ones that help you focus on writing.

The “Slash Inserter”

The “slash inserter” is the #1 feature everyone should use.

By default, when you hit ENTER, you’ll create a new paragraph block. That’s just about the same thing that would happen as before. However, the new button allows you to view and add other blocks. This could be a Heading, a Blockquote, or one of the fancier blocks like Cover Image or Columns.

However, you may find that clicking the Add Block button is time-consuming or takes you out of the flow. That’s why there’s a way to add a new block without using your mouse:

1. Press ENTER to create a new empty block
2. Type /
3. Type the name (or certain synonyms) of the block you want (e.g. /image).
4. Click or use your arrow keys and ENTER to select the block you want

Once you have mastered the slash inserter, you’ll be much more productive in the block editor!

Transitioning from the “Classic Editor”

The #1 way to ease your transition to the block editor is to stick with the fundamentals of good writing and not worry too much about the more advanced features.

If you need more time to get used to the block editor, consider a hybrid approach to publishing your pages. You have two options on this front:

1. Use the “Classic” block in which the old editor you’re used to is embedded in the new editor, almost completely unchanged.
2. Alternately, write you information in Word, Google Docs, or any other program you’re comfortable with and then paste it into the new editor for final formatting.

Impact on Plugins & Themes

Because the WordPress block editor is relatively new —released in late November 2018— and completely diverges from the old WordPress edit screen, the ecosystem of themes and plugins is not fully compatible.

Plugins that change the editor or add features to the “Edit” screen may be partially or fully incompatible. However, many of the most popular plugins (check out the list of recommended plugins) already support the block editor and even add new features to it. For example, many Jetpack features such as maps, forms, and related posts have their own blocks you can use directly in posts.

Similarly, while most themes should work with the new editor, older themes may not look very good or at least not support certain new features. Many themes have or will get updates to improve support for things like the wide and full aligments, but other themes may not. (If you’ve used one of the recommended themes for nonprofits, many of those will be updated.)

Overall, the update has mostly remained compatible with older plugins and themes, but don’t be surprised if you need to replace a plugin or even consider looking for a different theme.

The block editor is a major change to WordPress, but the fundamentals of planning and building a website haven’t changed at all! So long as you follow these tips for using the editor and focus on providing a good experience for your website visitors, you’ll do just fine!