What’s new in Gutenberg (24 June)

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/ 8.4 has been released. This is the second last 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 release before WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 and it’s a big one! Gutenberg 8.4 includes image editing, multi 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. controls, and we’ve enabled the Block Directory. This release also includes many fixes, countless refinements, and a tonne of iteration on the Full Site Editing and the Navigation experiments.

Image editing

Are you a photography geek who cares about things like the “rule of thirds”? Now you can make quick crops without leaving the block editor. Just hit the Crop button in the toolbar and you can adjust the aspect ratio, zoom level, and position.

You can also rotate the image right then and there. Great for when your iPhone-using friend sends you a picture!

Multi block controls

How’s this for a little big improvement: Now, if you select multiple blocks of the same type, you can change their attributes all at once. Nice!

Enabling the Block Directory

Now you can discover, install, and insert third-party blocks into your posts from the comfort of your editor. Search for the block you want in the inserter and, if you don’t already have it, you’ll see a prompt to install it right then and there.

We call this the Block Directory, and it’s one of the big ticketticket Created for both bug reports and feature development on the bug tracker. items in the WordPress Roadmap. It’s powered by the WordPress.org Plugin Directory and we’re super excited to see what our fabulous community of plugin developers will do with it.

We’ll be posting more info about the Block Directory—including how you can publish your own blocks to it—shortly. Watch this space!

8.4 🇧🇷

Features

• Add image editing. (23349)
• Enable block directory. (23389)
• Allow block attributes to be modified while multiple blocks are selected. (22470)

Enhancements

• Show movers next to block switcher. (22673)
• Support drag and drop in blocks like Social Links and improve drop zone detection. (23020)
• Improve the accessibliity of toolbars by implementing roving tab index.
  • Embed block toolbar. (23278)
  • Custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block toolbar. (23277)
  • Table block toolbar. (23252)
  • Grouped blocks toolbars. (23216)
  • HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. toolbar. (22354)
• Tweak colors of disabled buttons to match rest of WP Adminadmin (and super admin). (23229)
• Unify style of subheadings. (23192)
• Make Popover scrolling and position behavior adapt to the content changes. (23159)
• Reduce block appender hover delay. (23046)
• Improve the alignment of children in the CardHeader and CardFooter components. (22916)
• Add ability to transform a Preformatted block into a Code block. (22634)
• Add a border to blocks while hovering with the Select tool active. (22508)
• Consolidate disparate “copy block” actions. (23088)
• Remove margin from last button if buttons in Buttons block are centered. (23319)
• Adapt the block switcher styles to the new Popover component. (23232)
• Make UIUI User interface more consistent. (23202)
• Remove canvas padding. (22213)
• Image Editing
  • Update Rich Image Icons. (22819)
  • Consolidate crop ratios. (22817)
  • Use snackbar notifications. (23029)
  • Batch editing in cropper component. (23284)
  • Move to image block. (23053)
  • Change Edit label to crop icon. (23387)
  • Use percentage instead of multiplier. (23362)

New APIs

• Update the theme colors to rely on CSSCSS Cascading Style Sheets. variables. (23048)
• Extend register_block_type_from_metadata to handle assets. (22519)
• Enable custom classnames on <CustomSelectControl>. (23045)
• Add onFilesPreUpload property toMediaPlaceholder. (23003)
• Improve error customization inMediaReplaceFlow. (22995)
• Add context properties to block types REST endpoint. (22686)

Bug Fixes

• Fix pixel shift for toggles. (23191)
• Fix useBlockSync race condition. (23292)
• Avoid overriding popover content padding. (23270)
• Fix block parent selector border radius. (23250)
• Fix plus radius. (23240)
• Fix Inserter’s handling of child blocks. (23231)
• Create Block: Fix errors reported by CSS linter in ESNext template. (23188)
• Add context property mapping to block registration. (23180)
• Remove z-index from placeholder fieldset. (23152)
• Fix possibly outdated onChange in color palette’s color picker. (23136)
• Fix updateSlot missing from defaultSlotFillContext. (23108)
• Add check theme support is an array before indexing. (23104)
• Add i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. to padding ‘reset’ button. (23099)
• Fix group block moving animation not working correctly. (23084)
• Use a light block DOM for the Media & Text block. (23062)
• Popover: Ensure popovers consider border width’s in their positioning. (23035)
• Remove child space inTooltip. (23019)
• Fix drag and drop for blocks that don’t use __experimentalTagName for their inner blocks. (23016)
• Fix am / pm i18n 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.. (22963)
• Fix plugin document setting panel name. (22763)
• Fix plus icon. (22704)
• Fix Typography panel rendering from style 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.. (22605)
• Fix “Cannot read property ‘end’ of undefined” error on babel-plugin-makepot. (22394)
• Fix “ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. does not recognize isSelected prop in ComplementaryAreaToggle” warning. (22967)
• Cover padding: Fix reset and visualize on hover. (23041)
• Fix color picker saturation bug. (23272)
• Fix image size feature. (23342)
• Remove block preview paddings. (23386)
• Block Directory
  • Fix “no result” UI flash. (22783)
  • Uninstall unused block types. (22918)
  • Fix installing blocks. (23096)
  • Add plugins 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/. endpoints. (22454)
  • Use plugin 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. for installing & deleting block-plugins. (23219)
  • Use a more specific <script> matching pattern. (23407)
  • Fix missing padding. (23346)
• Image Editing
  • Fix image size on crop. (23173)
  • Avoid re-render on select. (23009)
  • Preserve crop position through rotations. (23374)

Performance

• Memoize useSelect callbacks on the header toolbar items. (23337)
• Enqueue assets for rendered blocks only. (22754)
• Call isMultiSelecting and isNavigationMode selectors where needed. (22135)

Experiments

• Full Site Editing
  • Move initial template fetch to client. (23186)
  • Fix Template Part Auto-draft creation. (23050)
  • Fix template part switching instability. (23282)
  • Fix $theme-color error in Template Part block. (23221)
  • Add auto-drafting for theme supplied template parts. (23254)
  • Add template part previews to placeholder block. (22760)
  • Fetch template parts in Template Switcher from REST API. (21878)
  • Post Title block: Add alignment and heading level support. (22872)
  • Post Author block: Update functionality and visual parity. (22877)
  • Add theme exporter. (22922)
• Navigation block & Navigation screen
  • Visual improvements to the block navigator. (22796)
  • Improve flow when creating from menu. (23187)
  • Renamed Navigation Link to Link. (23163)
  • Only show appender for the currently selected block. (22998)
  • Fix navigation block dark style appender. (23165)
  • Fix saving on navigation screen. (23157)
  • Extract and refactor placeholder from navigation block edit function. (23109)
  • Better README for the edit-navigation package. (23018)
  • Remove navigator from the navigation block inspector. (23022)
  • Separate block navigator focus from the editor focus. (22996)
  • Change MenuLocationsEditor to use a card instead of a panel. (23151)
  • Change Create Menu UI to use a Card instead ofPanel. (23150)
  • Enable creation from existing WP Menus. (18869)
  • Don’t announce external value changes in custom select control. (22815)
  • Refactor Navigation screen to use @wordpress/data. (23033)

Documentation

• @wordpress/env: add login details to documentation. (23343)
• Grammatical fixes in modularity.md. (23336)
• Update modularity.md. (23322)
• Use correct package for importing useState in BoxControl examples. (23243)
• Rename architecture index.md to readme.md. (23242)
• Scripts: Update changelog to move unreleased entries to Unreleased section. (23178)
• Handbook: Udpate documentation for package release. (23162)
• Use deny/allow list. (23120)
• Move ESNext as default code example. (23117)
• Handbook: Update release documentation. (23002)
• Update theme-support.md for experimental supports. (23310)
• RichText: Add missing param documentation for getActiveFormats(). (23160)
• API description: Use a period at the end. (23097)
• Improve JSDoc comment in ESNext template in edit.js file. (23164)
• Blocks: Update block registration default values. (23348)

Code Quality

• Refactor header toolbar items to use @wordpress/data hooks. (23315)
• Use useLayoutEffect to compute the popover position. (23312)
• Reduce unnecessary selector specificity for Button block. (23246)
• Button component – remove isLarge prop. (23239)
• Upgrade Reakit to version 1.1.0. (23236)
• Refactor column block to use hooks. (23143)
  –RichText: Rewrite with hooks. (23132)
• Refactor ToggleControl to use functional component. (23116)
• Refactor Media & Text to use functional components. (23102)
• Image block: Split huge component. (23093)
• SimplifyuseImageSizes. (23091)
• Block: Move align wrapper out of Block element. (23089)
• Remove Gutenberg plugin’s deprected APIs for version 8.3.0. (23001)
• Block: Remove animation component so it is just a hook. (22936)
• Remove asterisk icon. (22855)
• Image Editing
  • Use hooks. (23008)
  • REST API Code Cleanup. (23037)

Copy

• Cover block: update copy for Opacity label. (23287)

Build Tooling

• Packages: Fix the changelong updater for initial npm release. (23166)
• Scripts: Fix style.css handling in the build and start commands. (23127)
• Scripts: Clean up the build folder via clean-webpack-plugin. (23135)
• Scripts: Update stylelint dependencies to latest versions. (23114)
• Remove volumes and networks in wp-env destroy. (23101)
• Build: Replace “release” with “build” in script for building a package. (23063)
• Release tool: Fix bug on reporting message error. (22994)
• Scripts: Remove temporary workaround in ESLint configuration. (22915)
• ESLint plugin: Allow ESLint 7.x as peer dependency. (23190)
• Packages: Add “gutenberg” to the list of keywords in package.json. (23161)
• Update package-lock.json. (23052)

Various

• Initialize the content size used in Popover computation. (23279)
• Make the block grouping test more stable. (23266)
• Try to improve heading custom color E2E test stability. (23260)
• Attempt to fix RTL end-to-end test. (23203)
• Add verification for Create Block to Continues Integration. (23195)
• Remove padding inheritance on lists in editor-styles. (23080)
• Change select parent button styles. (23230)
• Make link color control opt-in. (23049)
• Use showBlockToolbar consistently in e2e tests. (23311)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version	Loading Time	KeyPess Event (typing)
Gutenberg 8.4	7.69 s	31.91 ms
Gutenberg 8.3	7.23 s	28.30 ms
WordPress 5.4	9.00 s	41.17 ms

Kudos for all the contributors that helped with the release. 👏

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