What’s new in Gutenberg? (5th June)

This release marks the 30th update to the editor plugin. The highlights are broken down below.

Block Library

Arguably, one of the key pieces of the new editor UI is the block library or inserter. Unifying the way users can insert content has been one of the main objectives of the whole project. It has gone through multiple iterations and testing; balancing clarity, usability, flexibility, and extensibility. This release offers the result of some very fruitful collaborations between designers and developers.

Notably, tabs are being removed; blocks have bigger surface areas; and plugins can supply a distinct color for the block icon background. This seeks to allow the inserter to better scale while retaining visual clarity. The other addition to the inserter is related to the new concept of child blocks explained below.

Child Blocks

The editor has had support for nesting blocks since around the beginning of this year. With 3.0, a block author can now also register a block as being a child of another block by declaring parent: [ 'block-name' ]. This now causes a few changes in the interface: the root inserter won’t show child blocks unless the user is within the context of the right parent block. (It aims to reduce the amounts of blocks shown at any given time by making the inserter more contextual.)

Note that for a block to be effectively a child two conditions must apply:

  • The block must provide a valid parent property.
  • The parent must have an InnerBlocks area declared.

This is how the block library looks after both changes:

Showing a custom block with custom colors.
A block that contains children.

Theme Styles

During the whole process of Gutenberg, we have come to the realization that in order to have the most flexible system for styling within themes — and letting us get closer to visual parity between front-end and the editor — we had to separate presentational styles from structural styles when it comes to individual blocks. So far, we have not been loading presentational styles on the front-end in order to avoid unintentional changes to site’s appearance, but that also causes issues for new themes that would like to start working from the visual design baseline that Gutenberg offers by default as shown on the admin side.

The decision has been made to allow themes to opt-in to these styles with an add_theme_support( 'wp-block-styles' ) registration. This will allow us to keep (or reintroduce) some more opinionated styles for elements like Quotes, Tables, the Separator, and so on.

3.0 🍠

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (18th May)

This update is packed with improvements and fixes. It introduces the Plugin API that allows pinning items for quick access in the editor header. There are many refinements to the UI and consistency of various block tools. Toolbars now expose the keyboard shortcuts used to access most features. It also includes significant improvements around API support — lifting limits to various endpoints, capabilities, conditional UI, etc. Dive into the changes below to find all the details.

Showing how pinning a plugin item works.

2.9 🍂

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (May the 4th)

Things are going well on the road towards completing the first phase of the editor project. Most of the work is centered around polish, getting things ready for merge, and tightening existing APIs.



This release has many refinements and improves the capabilities of the Block and Plugin APIs. It also adds a new “spacer” block for generating visual space. The color palette component has been improved to be based on classes instead of inline styles (for registered colors) and includes some important accessibility improvements (like naming the color). Thank you to everyone involved!

2.8 🌌

Screen readers can announce the color by name.

Other changes

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (18th April)

This release introduces a number of visual refinements around block controls (hover areas, link modal, Classic block), a new block for pagination, and pushes much of the Plugin API out of its experimental stage. Thank you to all the contributors for their efforts, and welcome to the new faces seen throughout the release cycle!

Source for the demoed plugin

2.7 🥨

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (5th April)

This release introduces drag and drop capabilities for sorting blocks, various refinements to the block visual interface (including a label with block type identifier) and extensibility APIs, plus a lot of bug fixes. Thanks to everyone who contributed for all the ongoing efforts!

2.6 🐉 💧

Other changes

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (29th March)

This release has a strong focus on developer APIs, introducing new and improved tools to extend and interact with the editor. On the user side, there are updates to shared blocks, font size UI, accessibility, mobile, stability, and many bug fixes. 

2.5 🍌

Other Changes

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (14th March)

2.4 π

Inserter

Continues the work done in previous releases around balancing writing flow with the ability to easily insert non-text blocks.

Writing Flow

Strengthened, tweaked, and polished underlying mechanisms for handling the writing flow in order to provide more stability and consolidation.

  • Move isTyping behaviour to a separate component.
  • Inserting a block should only shift focus to a text field, otherwise focusing the block's "focus stop".
    • Example: Inserting an image should focus the top-level placeholder.
  • Pressing backspace or enter from the block's focus stop should respectively delete or insert a subsequent paragraph block.
    • Example: Pressing enter or delete on an image placeholder.
  • Pressing down arrow from a non-text-field should proceed with a tab transition as expected.
  • Multi-selection at the last text field in a block now accounts for non-contenteditable text fields.
  • Better internal identification of text fields for writing flow transitions. Previously, if a block contained a checkbox, radio, or other non-text input tags, they would be erroneously included in the writing flow sequence.
  • Inserting paragraph block (quote, etc; those with text fields) via autocomplete should move focus to the cursor.
  • Shift-arrow from a text field engages multi-selection, but not if there are other text fields in the intended direction in the same block.
  • Cancel isTyping state when focusing non text field.
  • Improve reliability of the block click-to-clear behavior.
  • When clicking below the editor move focus to last text field — this includes creating a new provisional block if last block is not text. This is equivalent to the default block appender spanning the entire viewport height of the editable canvas.
  • Introduce same undo buffering for general text to the post title (and other post properties).
  • Allow breaking out of List block upon Enter on last empty line.
  • Address conflicts between WritingFlow's selection transitioning and nested blocks by moving selection to the block's focus handler.

Other Changes

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? 2nd March

This release includes significant progress in consolidating the codebase and refining aspects of the experience. Notably, it introduces APIs for extending Gutenberg beyond blocks, allowing plugins to register a full sidebar for their functionality. There are also expansions to the template support (now allows to declare nested structures), ability to duplicate blocks, various design adjustments, etc. Overall the tone has been fine tuning existing elements and simplifying implementations.

2.3 🍇

HTML block, now with syntax highlighting.

Other Changes

High contrast mode in Windows.

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (16th February)

This belated release brings support for nested blocks into Gutenberg. The list of changes is rather big, so it's broken up into sections. It also has a new Columns block that leverages nested blocks to operate — it is labeled experimental, though, as it needs further work and has some browser hiccups.

Most notably to the user experience, we are introducing block shortcuts on empty paragraph blocks to streamline the process of inserting content that is not text, while also optimizing for the writing experience. The global inserter, featured at the top of the editor, is meant to become more of a primary way to add content when the user is not writing. Getting this balance right between block creation and the writing flow is crucial and we'll continue testing with users to refine it. 

We are also making changes to how text is synced to the application state, which improves the reliability of the "unsaved" state, the undo mechanism, the ability to dismiss the publish sidebar automatically as soon as you make another edit, and so on.

2.2 🌱

Highlights

  • Block Nesting is live! 🎉  It comes with an experimental Columns block. (Note: converting a nested block into a reusable block is disabled on this first version.) Furthermore, this is not a specific implementation for columns alone — any block author can take advantage of defining nested areas.
  • Refined block insertion experience:
    • Introduce block shortcuts on every empty paragraph block. This also temporarily disables the sibling inserter as we work on refining this interaction.
    • Add trailing text area at the bottom of a post to continue writing.
  • Preview saved blocks while hovering on the inserter. Allows users to quickly see what they are inserting before inserting.
  • Enable triggering onChange events within RichText component on every keystroke. This was an enforced limitation that prevented saved post checks from being faithful.
  • Rework undo levels to use history "buffer" and leverage the mechanism to aid in continuous syncing of RichText history records.
Hovering a "saved block" shows a quick preview

User Experience

New features

Block API and Extensibility

Bug fixes

Other changes

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (25th January)

This release iterates further on some design and writing flow details — lighter up/down movers, engaging the UI-less focus mode more often, etc. It also brings many extensibility API improvements, exposing internal editor state through selectors, enhancements to the meta-box handling, and implements the "Copy All" button as if it was a plugin as an example of how to leverage native hooks.

2.1 🦔

  • Iterate on the design of up/down arrows and how focus is managed. This seeks to further reduce the visual and cognitive weight of the up/down movers.
  • Show immediate visual feedback when dragging and dropping images into the editor. (Expands on the previous release work.)
  • Expose state through data module using selectors. This is an important piece of the extensibility puzzle.
  • New button outline and focus styles.
  • Show original block icon after converting to reusable block. Also hides the generic reusable block from inserters. This moves data logic out of the inserter.
  • Introduce a migration function for block versioning.
  • Add HTML handler to dropzone. Allows drag and dropping images from other web pages directly.
  • Trigger typing mode when ENTER or BACKSPACE are pressed. This improves the writing flow but engaging the UI-less mode more frequently.

Other changes:

What's next?

As we approach the final stages of features, we are looking at finalizing the nested blocks interface (with its own Columns component), some remaining important extensibility hooks for plugins, and adding drag-drop functionality for moving and inserting blocks. ⛰

#core-editor, #editor, #gutenberg