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

This belated release brings support for nested blocks into 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/. The list of changes is rather big, so it's broken up into sections. It also has a new Columns 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. 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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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 APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and Extensibility

  • Drop focus/setFocus props in favor of isSelected prop.
  • New PlainText component for raw content that is styled as editable text. Renamed Editable to RichText for extra clarity and separation.
  • Add RawHTML component, drop support for HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. string block save.
  • Absorb multiple-image uploads in generic image placeholder component and reuse it for galleries.
  • Refactor Default Colors and the ColorPalette component. Moves the default colors to the frontend making the Editor script more reusable without the need of the server-side bootstraping.
  • Reimplement block alignment as a common extension.
  • Use block API functions in reusable block effects.
  • Check for duplication in addGeneratedClassName.
  • Assign default for all allowed blockTypes.
  • Update ToggleControl to pass boolean onChange.
  • Add withSafeTimeout higher-order component.
  • Expose getEditedPostAttribute selector.
  • Move selected block focus to BlockListBlock.
  • Allow themes to disable custom color functionality across blocks.
  • Added slug selector to data modules collection.
  • Defer registration of all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks until editor loads. Generally useful for extensibility hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same..
  • Add a subscribe function to the editor data module. Also, separate reducers into multiple stores to avoid unallowed access to the actions.
  • Support multiple stores in data module for the redux dev tools.
  • Expose registered selectors as functions.
  • Remove Popover isOpen prop, render by presence.

Bug fixes

Other changes

#core-editor, #editor, #gutenberg, #gutenberg-new