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.1 is a big release with 161 pull requests merged. Thank you to all the contributors of this release!

The release contains many refactors to the code base to make future changes possible, e.g., refactors to functional components so it is possible to use new 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. that are available.

This release tries to make 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. development using standard features like color picking UIUI User interface easier. To do that the release expands the useColors hook to have new functionalities like color contrast checking and default color detection.

There was huge progress on the full site editing work, with the merge of the template part block. Documentation efforts for the FSE (full site editing) work are now in progress.

Gutenberg 7.1 brings a new welcome UI for new users:

This release also Introduces table captions and implements a UI mechanism to toggle between edit and select modes:

The last two enhancements to note are the new fixed-mobile toolbar and the improved multi-block selection experience:

7.1 🇲🇽

Features

• Adding a menu to visually switch between edit and navigation modes and announce the mode changes to screen reader users.
• Support adding a caption to the Table block.
• Implement a Welcome Guide modal.

Enhancements

• Use a Fixed Block Toolbar on Mobile Web.
• Block UI:
  • Remove the parent block from the block title component.
  • Remove dashed outlines for child and parent blocks.
  • Remove hover styles.
• Navigation block:
  • Keep a single place to trigger the “Open in a new tab” option.
  • Fix overflow by allowing wrapping of menu items.
  • Fix double click to open the appender.
  • Add a type=submit to the search suggestion buttons.
  • Support justifying the menu items.
  • Use correct classnames for navigation link block save output.
  • Remove the inspector controls.
• Improve the block multi-selection:
  • 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): Use the browser’s selection default color. 
  • Polish the styles.
  • Responsive multi-selection.
  • Allow pasting on multi-selection.
• Improve the Image blocks replacement flow/UI.
• Disable the HTML mode in the Cover block.
• Add friendly offline error messages on 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/. request failures.
• Round the focal point coordinates.
• Popover & Dropdowns: Consistently and smoothly adjust the position on scroll.
• Remove clearing the block selection 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. tab switch.
• Separate editor notices by border instead of margin.
• Allow drag and dropping images into the featured image box.

Bug Fixes

• Prevent resized Image blocks from overlapping the boundaries of the block.
• Fix wrong link to attachment page after replacing images.
• Fix Media & Text block: “Crop image to fill entire column” reset on image change.
• Fix the Snackbar notices position.
• Save the Verse block line breaks as single characters.
• Remove has-background-dim-NaN classname from the Cover block.
• Normalize the keys of the apiFetch preloaded data to avoid unnecessary Rest API calls.
• Fix CSS styles of the ColorPicker component.
• Update the Inspector slots to use the bubblesVirtually slots Fixing RichText usage in Inspector controls.
• Move the Modals and Popovers to the right position in the DOM.
• Fix alignment of date picker days when used in block.
• Fix alignment of ToggleControl label.
• Fix the toggled state in the block toolbar buttons.
• Fix the multi-select inspector padding.
• Fix the behavior that allows writing by clicking anywhere in the canvas.
• Prevent private posts with a future date from becoming public on update.
• Fix useColors crashes if contrast checkers are not specified.
• Render metaboxes as a single seemless unit to fix styling issues for themes with colored backgrounds.
• Fix the FontSizePicker custom option.
• Fix reusable blocks showing up as too tall.
• Fix Drop Cap + alignment producing a gap between paragraphs.
• Fix Cover to Image block transform when no image is used in the Cover block.
• Ensure empty classname is not output onto table element.
• Fix scrolling the sidebar on mobile.
• I18: Fix the Code block example string.

APIs

• Support a disabled prop in the RichText component.
• Add a new CustomSelectControl component.
• Add a new TextHighlight component.
• Add a new CustomGradientPicker component.
• Add useViewportMatch React hook to the wordpress/compose package.
• Allowing changing the aXe config in the wordpress/just-puppeteer-axe package.

Experiments

• Block Content Areas:
  • Add a demo templates directory. 
  • Add the Template Part block.
  • Add documentation for the current state of the experiment.
• Widgets screen:
  • Clear the block selection when clicking outside the widget areas.
• APIs:
  • Add a new __experimentalResolveSelect 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. to the data package.
  • Add color detection and contrast checks support to the useColors hook.

Documentation

• Improvements to the Getting Started documentation.
• Include TypeScript type checking in Testing Overview.
• Add JSDoc recommendations.
• Reintroduce NodeJS LTS support commitment.
• Typos and tweaks: 1, 2, 3, 4, 5, 6.

Performance

• Avoid rerendering the EditorRegions component on each click.
• Flatten and simplify the align hook rendering.
• Shim the meta attribute source on block registration.

Various

• Storybook: Add StoryShots integration to generate unit tests.
• Work on the stability of e2e tests: 1, 2, 3, 4, 5.
• Use consistent theme colors and font sizes in e2e tests.
• Travis: Skip the deploy stage on PRs.
• And a Travis job to check the IE11 compatibility of the produced JavaScript builds.
• Avoid usage of editor store on block editor reusable blocks inserter.
• Replace the fs-extra dependency with rimraf.
• RSS block: Remove PHP 5.2 compatibility code.
• Update the Columns block to use the Patterns API.
• Refactor the BlockToolbar component to use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hooks.
• Refactor the BlockDraggable component for a simpler React tree.
• Refactor the BlockHTML component to use React hooks.
• Refactor the BlockList component to use React hooks.
• Refactor the BlockInsertionPoint component to use React hooks.
• Split @wordpress/urls into multiple modules/files to allow better tree-shaking.
• Improve the Storybook setup to allow updates on style changes.
• Enforce consistent usage of Button and ToolbarGroup components.
• Use the colors hook in the Paragraph block.
• Add missing actions and tests for lockPostAutosaving, unlockPostAutosaving.
• Collapse passed tests in Travis jobs.
• Add side effects property to the @wordpress/components package to allow tree-shaking.
• Add a script to perform patch releases for old npm package versions.
• Reuse the URLInput component in the Social Links block and disable suggestions.
• Improve and simplify reusable block styles.
• Refactor the Gallery edit component to be semi-cross-platform.
• Run tests using the same environment version used for development.
• Add CPU/Network slowdown configuration options to the e2e tests setup.
• Enable Type checking for the @wordpress/token-list package.
• Move the changelog.txt and readme.txt files to the GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository.

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)
Gutenberg 7.1.0	7.45s	88.56ms
Gutenberg 7.0.0	6.84s	94ms
WordPress 5.3	6.33s	75.19ms

#core-editor, #editor, #gutenberg