What’s new in Gutenberg? (5 February)

More than 51 contributors participated in this exciting release.

It introduce some handy color related features to the Group and 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.. Instead of changing the text color block by block you can now wrap a group blocks in a Group block and assign the base color to the parent block.

For consistency with the Navigation and the buttons block, the Link UIUI User interface has been updated in the RichText formats.

This is also an exciting release of the block authors, we now have an official tool to scaffold blocks quickly. It’s as easy as running npm init @wordpress/block locally.

7.4 🇰🇷

Features

• Add background color support to the Columns block. 17813
• Add text color support for the Group block. 19181

Enhancements

• Navigation Block:
  • Add submenu chevron indication setting. 19601
  • Save the ID to the destination entity. 18641
  • Select Parent Navigation Block after clicking “Create from all top-level pages”. 19817
  • Update Appender visibility. 19598 19846
  • Move the Link Settings panel. 19917
  • Improve the UXUX User experience to add links. 19686
• Multi-selection: don’t focus first selected block. 19762
• Use the new link control component in the RichText link format. 19462
• Copy: Apply sentence case formatting to panel titles. 19901
• A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Add conditions and new translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings for the BlockMover. 19757

New APIs

• Add a new wordpress/create-block package for block scaffolding. 19773 19867
• Add a new wordpress/icons package:
  • Introduce the package. 17055
  • Make it a package that is always embedded to avoid loading all the icons at once. 19809
  • Move icons used in the project to the package. 19944 19808 19834 19862 19838 19943 19926
• Add a new wordpress/primitives package. 19781 19876

Bug Fixes

• Prevent gallery images from creating undo levels as they load. 19937
• FontSizePicker: Adjust Select Button size. 19479
• Remove post title escaping. 19955
• Fix Failure message styling in placeholders. 19673
• Fix RTL styles for the Media Text block. 18764
• Fix panel 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. styles. 19842
• Fix the editor fixed position at the 960px breakpoint. 19970
• Allow disabling color selection but keeping gradient support. 19925
• Prevent crash when creating a hierarchical post without a title. 19936
• Media & Text block: “Crop image to fill entire column” setting resets on image change. 19765
• Prevent Alt+F10 from scrolling to the top. 19896
• Fix clearing multi-selection with side click. 19787
• Update hover and focus selectors for “Move to TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” to ensure the link is always red 19974.
• Popover component:
  • clean up requestAnimationFrame. 19771
  • fix typo causing the mobile inserter to go out of view. 19978
• Fix 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. in block multi-selection causing Rich text editing to be disabled. 19839
• Fix useSelect ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hook timing and rerendering issues. 19286
• CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data: do not publish outdated state to subscribers during updates. 19752
• LinkControl component (Navigation and buttons blocks):
  • Initialize inputValue state from value prop. 19737
  • Handle submission via form handler. 19651
  • Use URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org as a link when title empty. 19739
  • Prevent focus loss in edit mode toggle. 19931
  • Resolve error when value is undefined. 19856
  • Handle Popover onClose for LinkControl. 19885

Experiments

• Add AnglePicker Component and useDragging hook. 19637
• Add Global styles CSSCSS Cascading Style Sheets. variables generation mechanism. 19883
• Allow blocks to register variations that shows-up in the inserter. 19243
• Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. 19330

Documentation

• Add docs for LocalAutosaveMonitor and __experimentalUpdateLocalAutosaveInterval. 19915
• Add markdownlint script to lint docs markup. 19855
• Add format-js detailed documentaation to wordpress/scripts package. 19946
• Reorganize the Contributors Guide. 19853
• Clarify when isEligible function is called. 19899
• Typos and tweaks: 19833, 19914, 19736, 19759, 19869, 19802, 19813.

Various

• Introduce Prettier Formatting:
  • Add the formatting script. 18048 19994
  • Format the codebase. 19963
  • Set a consistent line width. 19992
• Automation:
  • Fix pull request merge automation errors. 19768
  • Run pull request automation on closed. 19742
  • Add a step that updates CHANGELOG files before npm releases. 19764
• Allow Babel Stage 4 features. 19831 19065
• Use a Link to the changelog instead of adding it inline in the 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 README. 19761
• Use require.resolve() in wordpress/jest-preset-default config 19957.
• Fix multi-selection intermittent e2e failure. 19865
• Add Placeholder component to Storybook. 19734
• Include block.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. files in the plugin build output. 19786
• Rename patterns to variations in the 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.. 19966
• Paragraph block:
  • remove min-height. 19835
  • remove unnecessary CSS after shortcuts removal. 19821
• Refactor ObserveTyping as function component. 19881
• Move the is-navigate-mode classname to the WritingFlow component. 19868
• Block: use React context to provide the selected element. 19782
• Remove dead is-hovered selectors. 19870
• Remove the editor dependency from the block library. 16160
• Remove an unnecessary import from the playground. 19893
• Refactor the RichText wrapper to use React 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. for wrapper component. 19095
• RichText API: Limit “prefix” transformations to Paragraph blocks. 19727
• Apply width-based modifier classes to Placeholder only when the width is known. 19825
• Various:
• Refactor the server-side rendering of the Navigation block. 19989 19991
• Fix server-registered fixtures script. 19884
• Remove the RichText is-selected class. 19822
• Testing: Use deterministic selectors for incremented IDs. 19844

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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	KeyPress event (typing)
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/ 7.4.0	5.037s	34.54ms
Gutenberg 7.3.0	5.461s	34.63ms
WordPress 5.3	6.631s	71.553ms

#core-editor, #editor, #gutenberg