Title: What’s New in Gutenberg? (21st June) Author: Matias Ventura Published: June 21, 2018 Last modified: May 20, 2020 --- [ ](https://profiles.wordpress.org/matveb/) [Matias Ventura](https://profiles.wordpress.org/matveb/) 5:10 pm _on_ June 21, 2018 Tags: [core-editor ( 761 )](https://make.wordpress.org/core/tag/core-editor/), [editor ( 223 )](https://make.wordpress.org/core/tag/editor/), [gutenberg ( 553 )](https://make.wordpress.org/core/tag/gutenberg/), [gutenberg-new ( 220 )](https://make.wordpress.org/core/tag/gutenberg-new/)    # What’s New in Gutenberg? (21st June) Coming back from a great WCEU, it was cool to see a lot of examples of what people are already building with 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/](https://wordpress.org/gutenberg/) and the overall sense of shared enthusiasm. This release includes a new system for walking a new user through the interface via tips. There’s also a new iteration of the 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. sibling inserter that continues the effort to consolidate all the multiple interactions that are possible while reducing UIUI User interface weight. Previewing and auto-saves has also gotten a lot of work, improving the auto-save mechanism and allowing to preview changes to already published posts. There’s also a lot of bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes, details, improvements, and tightening of components and APIs. For example, creating a shared block from an HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block now defaults to be in preview mode when a user inserts it. ## 3.1 🥦 * [Implement Tips Interface](https://github.com/WordPress/gutenberg/pull/6631) to guide a user in the new editor interface. * New design [version of sibling inserter](https://github.com/WordPress/gutenberg/pull/7220)( the ability to insert blocks between other blocks). * Allow the user to [preview changes to a published post](https://github.com/WordPress/gutenberg/pull/7189) without first updating the post. * [Show the preview mode](https://github.com/WordPress/gutenberg/pull/7138) for HTML blocks converted into shared blocks. This streamlines the process of creating straightforward HTML blocks and letting users insert them visually. * [Exclude the currently focused block](https://github.com/WordPress/gutenberg/pull/7273) from the block completer options. (i.e. don’t show paragraph as an option if already on a paragraph) * Trigger autosave [as standard save for draft by current user](https://github.com/WordPress/gutenberg/pull/7130). * Add [mime type checking to the pre-upload error messaging system](https://github.com/WordPress/gutenberg/pull/6968) when uploading media. * Allow block hover outlines [to draw color from admin theme](https://github.com/WordPress/gutenberg/pull/7111). * Allow [transforming multiple paragraph blocks into a single quote block](https://github.com/WordPress/gutenberg/pull/7069). * 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.: move useOnce block configuration [to supports.multiple = false](https://github.com/WordPress/gutenberg/pull/7293). * Add strikethrough support for Markdown conversion [when pasting](https://github.com/WordPress/gutenberg/pull/7171). * Add [yAxis=middle support to Popover](https://github.com/WordPress/gutenberg/pull/7038) to allow showing arrows vertically centered for NUX tips. * Add `BlockIconWithColors` component and [use it for the block header with description in the inspector](https://github.com/WordPress/gutenberg/pull/7263). * Add [error notices mechanism](https://github.com/WordPress/gutenberg/pull/6957) directly to media placeholder. * Refactor the initialization of the editor [to only require a post ID](https://github.com/WordPress/gutenberg/pull/6384). * [Optimize the default column width for character length](https://github.com/WordPress/gutenberg/pull/7112) and use the same width for the text editor. * Incremental improvements and polish [to the mobile block toolbar](https://github.com/WordPress/gutenberg/pull/7278). * [Visually compensate](https://github.com/WordPress/gutenberg/pull/6408) nested blocks for block padding. * [Prevent](https://github.com/WordPress/gutenberg/pull/7166) slash autocompleter from letting users insert two cases of a useOnce block. * Let screen readers [announce the block aria label](https://github.com/WordPress/gutenberg/pull/7305). * Improve the [accessibility of featured images](https://github.com/WordPress/gutenberg/pull/7200). * Make aria-multiline [true by default in RichText](https://github.com/WordPress/gutenberg/pull/7306) so the content field is properly announced. * [Add back role textbox to the List block](https://github.com/WordPress/gutenberg/pull/7432) and improve aria-multiline usage. * Replace the renderBlockMenu prop [with Slot/Fill](https://github.com/WordPress/gutenberg/pull/7199). * Hide [disabled blocks from shortcut inserter](https://github.com/WordPress/gutenberg/pull/7336). * Avoid [deprecated React Lifecycle hooks in withAPIData](https://github.com/WordPress/gutenberg/pull/7280). * Improve the element serializer[ to avoid double ampersand encoding of valid character references](https://github.com/WordPress/gutenberg/pull/6620). * Update [drop-cap design](https://github.com/WordPress/gutenberg/pull/7089) to better balance line length. * [Describe expanded state](https://github.com/WordPress/gutenberg/pull/7209) of“ more options” panel. * Improve [DotTip positioning fix](https://github.com/WordPress/gutenberg/pull/7219). * Implement Button component as [assigning ref via forwardRef](https://github.com/WordPress/gutenberg/pull/6527)( new ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) API). * Allow users [to re-enable Tips](https://github.com/WordPress/gutenberg/pull/7163). * Improve [serialising JSON to PHP-compatible query strings](https://github.com/WordPress/gutenberg/pull/7339). * Introduce `rendererPathWithAttributes()` [for ServerSideRender](https://github.com/WordPress/gutenberg/pull/7371). * Refactor the getPostEdits selector [to avoid relying on Lodash’s _.get](https://github.com/WordPress/gutenberg/pull/7381). * Refactor withSelect [to use getDerivedStateFromProps](https://github.com/WordPress/gutenberg/pull/7431). * Replace JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.-escaped quotation mark [with unicode escape sequence](https://github.com/WordPress/gutenberg/pull/6619) in Block API. Fixes _PlainText_ component not properly escaping attributes under some specific user roles. * Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or [blockers](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?output_format=md#blocker). 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 Columns [block’s front-end style](https://github.com/WordPress/gutenberg/pull/7128). * Fix [regression in SVG support](https://github.com/WordPress/gutenberg/pull/7140) for block icons. * Fix [PHP 5.2 notice](https://github.com/WordPress/gutenberg/pull/7120) by ensuring` $memo` is always an array. * Fix [margins of embed block content](https://github.com/WordPress/gutenberg/pull/7164). * Fix [autocomplete behaviour in IE11](https://github.com/WordPress/gutenberg/pull/6667). * Fix [regression with formatting toolbar](https://github.com/WordPress/gutenberg/pull/7167) not showing divider between some block controls. * Fix issue where [pasting an inline shortcode](https://github.com/WordPress/gutenberg/pull/6329) would produce a separate shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. block. * Fix issue when [copy pasting images in Chrome](https://github.com/WordPress/gutenberg/pull/7156). * Fix [typos](https://github.com/WordPress/gutenberg/pull/7286) in code comments. * Fix [consistency of hover styles](https://github.com/WordPress/gutenberg/pull/7104) in toolbars. * Fix option for [linking to attachment page on gallery block](https://github.com/WordPress/gutenberg/pull/7185). * Fix [Classic Editor adding paragraphs from block boundaries](https://github.com/WordPress/gutenberg/pull/7373). * Fix post publish panel showing [incorrect UX for contributors](https://github.com/WordPress/gutenberg/pull/6729) who don’t have publishing capabilitycapability A **capability** is permission to perform one or more types of task. Checking if a user has a capability is performed by the `current_user_can` function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the“ edit_posts” capability), but not permission to edit other users’ posts (the “ edit_others_posts” capability).. * Fix issues with floats and the side UI [on wide and full-wide](https://github.com/WordPress/gutenberg/pull/7223). * Fix issue where [server side upload errors disappear automatically](https://github.com/WordPress/gutenberg/pull/7386). * Fix block inserter popover [in RTL mode](https://github.com/WordPress/gutenberg/pull/7429). * Fix [mp3 uploads on chrome](https://github.com/WordPress/gutenberg/pull/7398). * Fix getMimeTypesArray [return documentation](https://github.com/WordPress/gutenberg/pull/7441). * [Avoid showing error](https://github.com/WordPress/gutenberg/pull/7347) if autosave runs and there are no changes to save. * Prevent any disabled button [from changing the cursor to pointer](https://github.com/WordPress/gutenberg/pull/7430). * [Remove ‘who’=>’authors’ compatibility shim](https://github.com/WordPress/gutenberg/pull/7158) as it’s part of WP 4.9.6. * [Remove](https://github.com/WordPress/gutenberg/pull/7110) confusing “wrap text” from Button settings. * Remove the [usage of the componentWillMount lifecycle](https://github.com/WordPress/gutenberg/pull/7282). * Remove the [componentWillReceiveProps lifecycle usage](https://github.com/WordPress/gutenberg/pull/7395). * [Remove](https://github.com/WordPress/gutenberg/pull/7192) createInnerBlockList utility / context. This should be a simplification of block context, potentially with some performance and/or memory improvements, as an intermediary component is no longer created. * Improve translatable strings containing “%s” [to have a translator comment](https://github.com/WordPress/gutenberg/pull/7201). * [Move trash post URL change to the BrowserUrl component](https://github.com/WordPress/gutenberg/pull/7228). Consolidates all browser navigation (url changes and actual navigation). * [Simplify the withColors HOC](https://github.com/WordPress/gutenberg/pull/6782) so we can avoid the usage of memoize while still having a correct implementation without unnecessary rerenders. * Refactor Higher-order components in data module [to avoid the use of componentWillMount](https://github.com/WordPress/gutenberg/pull/7206). * [Use mdash](https://github.com/WordPress/gutenberg/pull/7196) for block description in cover image. * Ensure that [only the latest promise updates the autocompleter state](https://github.com/WordPress/gutenberg/pull/7318) for more predictable behaviour. * Wrap PluginPostStatusInfo [with PanelRow](https://github.com/WordPress/gutenberg/pull/6867) rather than Slot. Fix issue with hard to style divs. * Update demo content [to avoid dirtying embed](https://github.com/WordPress/gutenberg/pull/7379). * Allow using ServerSideRender component [without defined attributes](https://github.com/WordPress/gutenberg/pull/7229). * Avoid loading Gutenberg assets [in other admin pages](https://github.com/WordPress/gutenberg/pull/7117). * Add a new `@wordpress/api-request` [package](https://github.com/WordPress/gutenberg/pull/7018). Instead of relying on globals to set the nonce/rootURL, it users configurable middlewares. Preloading support is also built as a middleware. * Move the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data Module [to packages](https://github.com/WordPress/gutenberg/pull/7222). * Move Plugins module [to packages](https://github.com/WordPress/gutenberg/pull/7235). * Rename [all the hooks moved from blocks to editor](https://github.com/WordPress/gutenberg/pull/7410). * Add [NUX e2e tests](https://github.com/WordPress/gutenberg/pull/7165). * Add [e2e tests for Plugins API](https://github.com/WordPress/gutenberg/pull/7269). * Add [es5 samples](https://github.com/WordPress/gutenberg/pull/7290) to edit-post and plugins. * Add [e2e test to blocks.BlockEdit filter](https://github.com/WordPress/gutenberg/pull/7294). * Add [snapshot test](https://github.com/WordPress/gutenberg/pull/7338) for `MoreMenu` component. * Fix [broken links](https://github.com/WordPress/gutenberg/pull/7173) in [readme](https://github.com/WordPress/gutenberg/pull/7121) files. * Build tooling: [add linting for package.json files](https://github.com/WordPress/gutenberg/pull/7001). * Further [explanation](https://github.com/WordPress/gutenberg/pull/7105) for why. normalize() is optional in raw-handling. * Update icon color [readme example](https://github.com/WordPress/gutenberg/pull/7291). * Generate docs [for the data module](https://github.com/WordPress/gutenberg/pull/7264). * [Enable Strict-Mode](https://github.com/WordPress/gutenberg/pull/7202) of React. * Publish [new versions of WP packages](https://github.com/WordPress/gutenberg/pull/7146). * [Regenerate](https://github.com/WordPress/gutenberg/pull/7399) integrity checks to sha512. * [Drop deprecations](https://github.com/WordPress/gutenberg/pull/7419) slated for 3.1 removal. * [Upgrade](https://github.com/WordPress/gutenberg/pull/7393) React 16.3.2 to React 16.4.1. [#core-editor](https://make.wordpress.org/core/tag/core-editor/), [#editor](https://make.wordpress.org/core/tag/editor/), [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#gutenberg-new](https://make.wordpress.org/core/tag/gutenberg-new/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=bluesky) * [ X ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=x) * [ Facebook ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2018/06/21/whats-new-in-gutenberg-21st-june/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/884b90e8fb62568bf990eaf6187515a665d7698647a81e849e9296f8a806a873? s=32&d=mm&r=g) 2. [David Bennett](https://profiles.wordpress.org/bennettskaya/) 9:26 am _on_ June 23, 2018 3. I am finding that unless the toolbar is fixed to the top, the sibling inserter is not creating a 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. ‘before’. Comments are closed. # Post navigation [← Dev Chat Agenda: June 20th (4.9.7 week 5)](https://make.wordpress.org/core/2018/06/19/dev-chat-agenda-june-20th-4-9-7-week-5/) [Dev Chat Summary: June 20th (4.9.7 week 5) →](https://make.wordpress.org/core/2018/06/22/dev-chat-summary-june-20th-4-9-7-week-5/)