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:

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 🍠

• Redesign the inserter with collapsible panels.
• Add support for Child Blocks. These create a relationship between blocks and updates the inserter to show blocks based on context.
• Implement a new block hover and select approach to improve nested block selection and clarity.
• Allow expanding selection on consecutive MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.+A presses.
• Add shared blocks to the blocks autocompleter.
• Iterate on behaviour of the “between blocks inserter”.
• Multiple longstanding fixes to the UrlInput box by using Popover component instead of custom positioning.
• Allow themes to opt-in to the visual styles provided by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks.
• When focused on a parent with InnerBlocks set, show available child blocks clearly at the top. Blocks with children are marked visually in the root inserter.
• Add publish panels support for plugins.
• Add support for specifying background and foreground icon color when registering a block.
• Scroll the inserter menu to the relevant position when opening a panel.
• Expand matching categories when searching the block library.
• Introduce a dedicated autosaves endpoint for handling autosave behavior. Improves general handling of revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. through REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. saves.
• Allow clicking the block’s input fields.
• Move “Saved” blocks to the bottom and show distinct icon on the panel name.
• Improve max-upload size error message.
• Show autosave message when autosave exists.
• Normalize unicode in raw handling.
• Allow inserting a link with no text selected.
• Center the background of the cover image block.
• Make the Classic block toolbar sticky while scrolling.
• Make Button component styles independent from Core Styles.
• Make various greys less dull when used with opacity.
• Set the correct min-width for the ChromePicker popover.
• Unify all the media blocks placeholders under a unique component.
• Address focus style regression in menu and improve display of keyboard shortcut.
• Refactor popover to clarify computations and address multiple cases of overflow issues.
• Refactor URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org redirect as BrowserURL component. Resolves an issue where the browser URL does not change when a new post is autosaved.
• Send all fields when transmitting an autosave.
• Avoid URL redirect for published post autosave.
• Avoid superfluous changes in RichText.
• Improve performance for PublishPanel and extensions.
• Unselect blocks when opening the document settings.
• Simplify the accessibility handling of the updated inserter.
• Use new “theme” style mechanism to restore Quote styles on the front.
• Add text alignment options to verse block toolbar.
• Make sure the Title element uses the same max-width as blocks.
• Improve title component so it works with and without editor styles.
• Properly associate the spacer height input label.
• Further visual polish to new inserter design.
• Fix block icon alignment in block inspector.
  
• Fix issue with excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. textarea height overflow.
• Fix typo in withRehydration function call.
• Fix Post Formats UI not showing.
  
• Fix regressions with Button component after PostCSS.
• Fix issue with applied formats being lost.
• Fix unset background-color on 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. headings.
• Fix case where inbetweenserter would linger if you clicked to insert and then clicked away.
• Fix issue with rich text toolbar being gone in captions.
• Fix padding and outline style for expander panel.
• Fix CodeEditor component not loading when WordPress is installed in a subfolder.
• Fix regression with sticky toolbar border.
• Fix some intermittent E2E test failures.
• Fix “no results” message within inserter.
• Fix visual issue with normal buttons with icons.
• Fix issue where the sidebar would remain open on mobile when the page loaded if it was opened before.
• Fix fileName not being respected when the image is uploaded via drag & drop.
  
• Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. in spacer block.
• Fix getInserterItems cache.
• Fix intermittent adding-blocks E2E test failure.
• Fix issue with shared block preview being rendered hidden.
• Fix alignment issue with hover label on wide and full-wide.
• Fix Windows-unfriendly theme.scss loader rule.
• Fix issue where pasting would fail in IE11.
• Fix issue with editing paragraph blocks in shared blocks.
• Address small code style fixes on the core-data module.
• Add support for getEntityRecords selectors/resolvers to the core data module to avoid duplication across the different entities.
• Remove drag handle from block breadcrumb.
• Improve Child Blocks code footprint.
• Address package issues with npm audit fix.
• Use Core’s TinyMCE version to avoid conflicts.
• Scope the rule adding a white background to the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element.
• Remove onFocus from core blocks’ RichText usage.
• Remove post type capabilities from the user object.
  
• Remove the dependency on the editor module code from blocks tests.
• Expose preview_link through the REST API and use within client.
• Only load Gutenberg Polyfill in editor pages.
• Refine code statement of image classes.
• Add support for the default_page_template_title filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. in page-attributes meta-box.
• Add additional condition to “Available templates” meta-box logic.
• Ensure the wp-editor script is also enqueued soon using the enqueue_block_assets hook.
• Cleanup shared block tests.
• Provide cross-browser node containment checking.
• Add unit tests for core-blocks/more/edit.js components.
• Add documentation about ServerSideRender.
• Auto-generate human-readable version of Gutenberg block grammar.
• Doc Block cleanup for rich-text component.
• Address multiple typos in code comments.
• Skip test files when generating build folders for packages.
• Fail E2E tests when uncaught page error occurs.
• Extract new blob package out of utils module.
• Update the wait function name to discourage its use in E2E tests.
• Introduce new module with deprecation utility.
• Introduce insertBlock() utility for E2E tests.
• Move data module to the package maintained by Lerna.
• Avoid using spread for objects to work with all node 8x versions.
• Add lint rule to check that memize() is used.
• Add global guard against ZWSP in E2E content retrieval.
• Add building/watching support to Gutenberg packages.
• Add further explanation for why .normalize() is optional.
• Add new webpack plugin to handle library default export.
  
• Reload the page after webpack watch compile.
• Publish numerous WP packages updates from repository.
• Drop deprecations slated for 3.0 removal.
• Always publish main and module distributions in packages.
• Upgrade mousetrap to 1.6.2.
• Update all WordPress packages to the latest version.

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