Introducing Format API on Gutenberg 4.2

With the release of Gutenberg 4.2, we got a numerous updates and new features. Before going to see the full changelog, let’s discuss few important updates of Gutenberg 4.2. 

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg

Format API

 Gutenberg 4.2 comes with Formatting API which extends Rich Text components allowing to extend its controls more easily.

  • It introduces a way to register formats through the rich-text package, which will also be used by Gutenberg itself for the “core” formats in the format-library package.
  • It will include the link format, so it can include all its components (no need to see it as an exception any more).
  • It will include the image format, so there’s no longer a need for the token API. The format API will absorb the token API. We can deprecate the token API and keep it around for a while longer.
  • It will be possible to register shortcuts, so we can remove the separate registration of shortcuts (which is currently done through TinyMCE).
  • Adjusts the internal value to use the format name and attributes instead of the element name and attributes.
  • Shortcut is seen a separate form of UI, which can work on it’s own (e.g. a code button only has a shortcut).
    ToolbarControls fills controls in the toolbar portal.
    InserterItems fills controls in the inserter portal.
    All value manipulations are passed as props. See https://github.com/WordPress/gutenberg/blob/try/rich-text-record/packages/rich-text-value/src/readme.md.
    The render function can contain all of the format’s components, such as LinkContainer, and can have its own state.

Block Inserter

A little+ sign in the middle of a block (Image below for reference.) has now the ability to call all the blocks and show a list with searching capabilities. 

Gutendev, gutenberg, wordpress gutendev, wordpress gitenberg
Block inserter on each block’s top. 
Gutendev, gutenberg, wordpress gutendev, wordpress gitenberg
Searching the block is now enabled. 

Few keyboard shortcuts added

Few keyboard shortcuts have been added to the new version of Gutenberg. You can click Alt+F10 if you want to see the modal or shortcut documentation. ‘img’ keyword is added if you want to call a block using shortcut [see, Using Gutenberg with Keyboard Shortcuts].

gutenberg, gutendev, wordpress tutorial.
‘img’ tag added

The following list is the full changelog. You can find all the detailed changes of Gutenberg 4.2 update from Introducing Formatting API on Gutenberg 4.2 to Gutenberg Mobile. 

  • Introduce the Formatting API for extending RichText.
  • Use default Inserter for sibling block insertion.
  • Support adding and updating entities in data module.
  • Update block descriptions for added clarity and consistency.
  • Add support for displaying icons in new block categories.
  • Append registered toolbar buttons in RichText.
  • Optimize SlotFill rendering to avoid props destructuring.
  • Optimize Inserter props generation and reconciliation.
  • Improve writing flow by unsetting typing flag if Escape pressed.
  • Add support for non-Latin inputs in slash autocomplete block inserter.
  • Use an animated WP logo for preview screen.
  • Add “img” as a keyword for the Image block.
  • Delay TinyMCE initialisation to focus.
  • Announce number of filtered results from block inserter to screen readers.
  • Add audible feedback for link editing.
  • Avoid focus loss on active tab change within the Sidebar.
  • Add Alt + F10 (navigate to the nearest toolbar) to the shortcut docs and modal.
  • Add some more URL helpers to the url package.
  • Add has-dates class to Latest Posts block if applicable.
  • Improve mobile display of “options” modal.
  • Add “link target” option in Image block.
  • Use currentcolor as border-color for outline button style.
  • Introduce a new middleware to the api-fetch package which adds ?_locale=user to every REST API request.
  • Refactor and optimize withSelect, withDispatch handling of registry change.
  • Refactor and update DropZone context API.
  • Rephrase description of responsive toggle.
  • Ensure buttons on end of row in media-placeholder have no margin on the right.
  • Include implicit core styles in SelectControl.
  • Use better help text for ALT text input.
  • Flatten Inserter mapSelectToProps to optimize rendering.
  • Cleanup Embed code and add better test coverage.
  • Add space above exit code editor button.
  • Return 0 in WordCount if text is empty.
  • Avoid setting a value on the File block download attribute.
  • Set download attribute on File block as empty.
  • Remove Cover block ‘strong’ style.
  • Reduce frequency of actions updating isCaretWithinFormattedText.
  • Add a function to unregister a block style variation.
  • Add lodash deburr to autocomplete so that is works with diacritics.
  • Avoid making WordPress post embeds responsive.
  • Improve handling of centered 1-column galleries with small images.
  • Make pre-publish prompts more generic.
  • Improve the style variation control aria-label.
  • Improve preloading request code.
  • Add missing context to various i18n strings.
  • Add post saving lock APIs so plugins can add and remove locks.
  • Take the viewport size into account when it comes to decide whether to show the button or toggle logic for “submit for review”.
  • Improve accessibility of settings sidebar tabs.
  • Improve the header toolbar aria-label.
  • Add styles to stop Classic block buttons from inheriting italics from themes.
  • Add aria-label to links that open in new windows.
  • Add more descriptive aria-labels for the open and closed states of sidebar settings.
  • Add key event handler to activate block styles with keyboard.
  • Add field that allows changing image alt text from the sidebar in Media & Text.
  • Add aria-label to describe action of featured image update button.
  • Restore displaying formatting shortcuts in toolbar.
  • Add i18n context to “Resolve” button for invalid blocks.
  • Update the editor styles wrapper to avoid specificity issues.
  • Fix converting a reusable block with nested blocks into a static block.
  • Fix regression with mobile toolbar spacing.
  • Fix size regression in block icon.
  • Fix multi-selected warning block highlight.
  • Fix: Show resizer on “Media & Text” block on unified toolbar mode
  • Fix some RichText shortcuts and add e2e tests.
  • Fix issue with tertiary button hit areas.
  • Fix issue with unified toolbar not always fitting in smaller viewports.
  • Fix issue with “remove tag” button in long tag names.
  • Fix rich text value for nested lists.
  • Use color function for defining the background in DateTimePicker.
  • Fix usage of preg_quote() in block parsing.
  • Fix flow of scheduling and then publishing.
  • Fix focus issue on Gallery remove button.
  • Fix keyboard interaction (up/down arrow keys) causing focus to transfer out of the default block’s insertion menu.
  • Fix regression causing dynamic blocks not rendering in the frontend.
  • Fix vertical alignment issue on Media & Text block.
  • Fix some linter errors in master branch.
  • Fix dash line in More/Next-Page blocks.
  • Fix missing Categories block label.
  • Fix embedding and demo tests.
  • Fix issue with vanilla stylesheet.
  • Fix documentation for openModal() and closeModal().
  • Fix blocks navigation menu SVG icon size.
  • Fix link popover keyboard accessibility.
  • Fix issue with multiselect using shift + arrow.
  • Fix issue with format placeholder.
  • Fix Safari issue where hover outlines sometimes linger.
  • Resolve an issue where the “Copy Post Text” button in the error boundary would not actually copy post text, since it used a legacy retrieval method for post content.
  • Make preview placeholder text translatable.
  • Load translations in the reusable block listing page.
  • Avoid adding isDirty prop to DOM.
  • Improve translation string and replace placeholder handling for MediaPlaceholder instructions.
  • Refactor rich text package to avoid using blocks packages as a dependency.
  • Handle 204 response code in API Fetch.
  • Remove HTML source string normalization.
  • Normalize function arguments in Block API.
  • Remove unused code path.
  • Deprecate layout attribute.
  • Add class for -dropdown/-list in Archives block.
  • Update registration method signature of RichText.
  • Add filter for preloading API paths.
  • Add missing @return tag to gutenberg_meta_box_save_redirect() function.
  • Rename id attribute to tipId in DotTip.
  • Only silence REST errors if the REST server is present
  • Use consistent help text in DatePicker.
  • Export both the DropZone and MediaPlaceholder editor components with the withFilters HOC.
  • Remove “half” keyword from Media & Text block.
  • Remove redundant hooks initialization.
  • Mark getSettings in Date package as experimental.
  • Remove unused variable fallbacks in RichText.
  • Improve the Toggle Control elements DOM order for better accessibility.
  • Mark Reusable blocks API as experimental pending future refactor.
  • Set correct media type for video poster image and manage focus properly.
  • Avoid PHP notices due to non-available meta boxes.
  • Implement fetchAllMiddleware to handle per_page=-1 through pagination in wp.apiFetch.
  • Add do’s and don’ts to block design documentation.
  • Update creating-dynamic-blocks.md.
  • Update editor package changelog.
  • Add notices package.
  • Add styles property to block-api.md.
  • Add documentation for responsive-embeds theme option.
  • Add missing e2e tests for Plugins API.
  • Add an eslint rule to use cross-environment SVG primitives.
  • Use turbo-combine-reducers in place of Redux
  • Update react-click-outside to 3.0.
  • Update @wordpress/hooks README to include namespace mention.
  • Fix Heading blocks validation errors after block splitting
  • Expose setUnregisteredTypeHandlerName / getUnregisteredTypeHandlerName for mobile.
  • Fix a refresh issue with iOS when splitting blocks.
  • Simplify onEnter handling.
  • Hook onBackSpace in RichText component.
  • Introduce the ability to merge two blocks together on Backspace.
  • Properly refresh blocks when merging them under iOS.
  • Port nextpage block to the ReactNative mobile app.
  • RichText: fix buggy enter/delete behaviour (Extra br elements).
  • Fix showing categories for contributors.

Leave a Reply

Your email address will not be published. Required fields are marked *