In the last few years, the teams working on the block editor have learned a lot about how people build sites now and how they want to build sites in the future.

The latest version represents the culmination of these discoveries, and the next stage in the editor’s evolution.

With better visuals and more advanced features, it’ll keep designers, developers, writers, and editors productive and happy, and — tension-building drumroll — it’s in your editor right now!

What’s new

With a comprehensive visual refresh, a plethora of new features, and dozens of bug fixes, the new block editor comes with a lot to unpack.

What follows is just a small (but delectable) sample of the many ways we’ve upgraded your editing experience. (You can get the full list of goodies in the release notes.)

We hope you enjoy.

A revamped editor UI

The first thing you’ll notice is the slick UI. Buttons, icons, text, and dropdowns are all sporting a contrast boost, with bolder colors and more whitespace between buttons, text labels, and menu items.

the-word-is-made-of-blocks Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
The new block editor’s UI

As you navigate through the editor’s menus, individual items are clearly highlighted, allowing you to quickly identify what you’ve selected.

block-editor-menu-navigation-1 Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
Active menu items have distinct highlights

The block toolbars are now simpler, displaying the most commonly-used features. For example, paragraph blocks show only bold, italic, and link formatting buttons. You’ll find all the extra options in the dropdown menu.

paragraph-option-menu Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
The block toolbar options are simpler and uncluttered

What’s more, instead of listing blocks within a fixed-height container, the block inserter now spans the height of the window. You’ll now see more blocks and block categories at once with less scrolling.

block-inserter-full-span-height Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
The block inserter spans the full height of your screen

Introducing block patterns

With the block editor as your canvas you can design almost any layout you can imagine – but building intricate page structures should never get in the way of your creative process.

Here’s where the blocks really shine: along with individual blocks, the editor now includes block patterns, a library of predefined and reusable block layouts, that you use on any page or post.

To check out the list of available patterns, click on the block pattern icon (on the top right) to reveal a collection of pre-built layouts:

notice-the-block-patterns Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
Block patterns are groups of individual blocks combined to create elegant layouts

Pick the pattern you want to use, and it will appear in your editor ready for you to customize with your own content.

Right now, you’ll find a few introductory patterns – Two Columns of Text, Two Buttons, Cover, and Two Images Side by Side – but we’ll be adding more and more patterns as they’re available. When the block patterns API opens up to third-party authors, you’ll also be able to develop and share your own.

(Have an idea for a great pattern? The block editor developer community is actively seeking ideas. The more ideas they receive, the better your editor will be!)

Colors, colors everywhere

When it comes to words and columns, websites aren’t newspapers: things don’t have to be black and white.

Use the new Text Color selector tool to change the color of sentences, and even individual words and letters. Highlight the text you’d like to change, then click on the arrow dropdown and select “Text Color.”

text-color-editor Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
Select “Text Color” from the options
text-color-editor02 Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
Pick the color of your word or character

 

To change the background colors of your columns, select the column and head to the sidebar, to Color settings.

column-color-picker-1 Create With Confidence — and Better Blocks WPDev News Editing|Features|New Features|Block editor|Editor|gutenberg|wordpress-com
Columns get background colors too!

The road ahead is paved with blocks

There’s still a long way to go, and the editor’s community of contributors hasn’t given its collective keyboards a moment’s rest. Work on polishing UI elements like the sidebar and dropdowns continues along with advancements to block patterns and other exciting features.

Are there ways we could improve the site editing experience even more? Please let us know! We’re always keen to hear how we can make the web a better place for everyone.