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

This release marks the 30th update to the editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. The highlights are broken down below.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Library

Arguably, one of the key pieces of the new editor UIUI User interface 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 GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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 adminadmin (and super 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, #gutenberg-new