The second 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/ release of 2020 includes 159 PRs by 56 contributors!

The navigation 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. received again quite a few improvements this release. You now have the ability to set text and background colours!

This release we’ve also made some considerable performance improvements. The average time of an input event has almost been reduced by half (47.76%) and the loading time of a fairly large post by 29.25%! This is the result of making the block DOM tree lighter, meaning taking the block controls out of the block rendering and DOM tree and removing div element wrappers.

There’s a new block collections API which can be used to group blocks in the block inserter.

registerBlockCollection( namespace, { title, icon } );

Included are also new post layout blocks (author, date and 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.) and improvements for the site editing experiment.

7.3 🇬🇷

Enhancements

• Add border to table 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. & footer 19450
• Add the new replace flow to the cover 19583, media text 19198, file 19174, audio 19158 and video 19162 block.
• Components: improve ToolbarButton 18931
• Sibling inserter: fix dead zone between blocks 19719 19729
• Top toolbar: adjust tab order 19623
• Regions: position publish region after 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. 19427
• Better accessibilityAccessibility 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) labels for blocks 18132
• Breadcrumb: add accessibility label 19597
• Navigation: add background color 19108

Performance

• Lighter block DOM:
  • Put sibling inserter in popover 19456
  • Remove extra div wrapper 19010
  • Remove inner div wrapper 19593
  • Split out toolbar rendering 19564
  • Put side inserter in Popover 19406
  • Rewrite drop zone with 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. (useDropZone) 19514
  • Merge effects 19617
  • Fix alignments 19704
  • Clean up after control removal 19618
  • Reposition tabbable inserter 19596
• Avoid rerendering every block when caret moves in and out of formatting 19524

Bug Fixes

• Navigation:
  • Format the allowed styles 19477
  • Show recent pages as default suggestions when creating Nav Links 19458
  • Define allowedFormats option for NavigationLink 19507
  • Rename the LinkControl’s edit button title 19505
  • Use underline instead of bottom border for nav links 19538
  • Do not output navigation links with empty labels 19652
  • Remove draggable from all navigation-link blocks 19648
  • Remove duplicate CSSCSS Cascading Style Sheets. from Navigation that is aleady in Navigation Link CSS 19540
  • Remove the text color button double border on the navigation block toolbar 19567
  • Replace, on editing a navigation link, the current label with the title of page or post 19461
  • Add description for the Link Settings Description in the Link Block settings 19508
  • Fix Navigation Link url escaping 19679
  • Fix alignment on left border between menu navigation controls and menu item 19511
  • Styling fixes after navigation feature merge 19455
• Add support for align wide to deprecated versions of gallery block 19522
• Block top toolbar: fix mover direction 19574
• Editor keyboard shortcuts: fix Toggle Sidebar 19605
• Editor: Fix Block Embed Input size 19438
• Fix ServerSideRender component showing className 19555
• Fix writing flow focus capturing 19621
• Fix small visual select glitch 19590
• Fix the height of the tags tokens 19592
• Fix buttons block Link shortcut not working with multiple buttons 19492
• Disable HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. on navigation link 19483
• Fix managing page break in the block manager 19303
• Show predefined colors in the navigation block 19493
• Update CSS rule on the widgets screen required for drag & drop 19428
• Multi block selection: fix tabbing 19700
• Multi block selection: set focus back after attempt 19720
• RichText: don’t set focus when applying format 19536
• Writing Flow: fix list selection 19721
• Fix Color Picker Format Toggle placement 19607
• Fix Columns block pattern picker item margin. 19494
• Fix block styles for More block 19745
• Block: fix hasMovers BlockList setting for top toolbar 19619

New APIs

• Components: add ImageSizeControl component 17148
• Add block collections 17609
• Add Text component 18495
• Add warning package 19317
• Components: add isFocusable state to Button 19337

Experiments

• Edit Site:
  • Add a Post Author block 19576
  • Add a Post Date block 19578
  • Add a Post Excerpt block 19579
  • Implement Template Part block editing 2 19203
  • Add template loading 19081
• Block Directory:
  • Change ‘update’ icon to text to be more communicative 19451
  • Update the action button label to read ‘Add block’ 19412
• useColors:
  • Fix contrast check 19500
  • Directly pass ref for color detecting 19474
• InnerBlocks: Fix toolbar capturing 19530

Documentation

• Add js syntax highlighting to documentation 19467
• Add lint-md section to scripts readme 19716
• Add linting of source in markdown files 19518
• Document packages-update wp-scripts command 19711
• Linting Documentation 19543
• More visibility to the theme opt-in styles documentation 19463
• Remove spaces in title for consistency with other components and docs 19466 19464
• Update block-filters.md 19595 19684
• Update contributors guide with docker-compose info 19362
• Add js syntax highlighting to documentation 19465
• Use import statement instead of deconstruction in docs 19469 19471
• Fix Navigable Container component usage code 19615

Various

• Block Editor: Remove (more) legacy “editor-” class name compatibility 19489
• Block toolbar: rewrite toolbar forcing 19527
• Breadcrumb: isolate logic 19573
• Contain selection logic in useMultiSelection 19529
• Move navigation and selection logic to WritingFlow 19397
• LinkControl
  • Refactor LinkControl 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. 19396
  • Remove Popover from LinkControl component 19638
  • Add search results label for initial suggestions 19665
  • Prevent space being reserved for scrollbar when items fit box 19633
  • Remove non-public fetchSearchSuggestions from LinkControl documentation 19710
  • Update Nav Block to use new showInitialSuggestions prop on LinkControl 19667
  • Flatten LinkControl components by mocking useSelect for tests 19705
• Remove coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor usage from block editor rich text 18789
• Add script to automatically update core packages 19448
• Adds tests for horizontal mover descriptions 19549
• Remove: Gradient Picker from cover block placeholder 19712
• Add SVGR support to wp-scripts 18243
• Add storybook for Panel component 18541
• Add supports html: false to new website blocks. 19646
• Add: Block editor keyboard shortcuts on the widgets screen 19432
• Added 8px padding to search input block. 19452
• Adds a “(no title)” label to links to pages or posts with no title 19528
• Array type attribute source query comma missing 19717
• Block Editor: Make initial inner blocks non-dirtying. 19521
• Block Popover: editor canvas as boundary 19322
• Check for existing of avatar_urls array before trying to return the avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. img part of user autocomplete fragment 18259
• Update downshift dependency to v4.0.5 19661
• Components: replace console.warn with wordpress/warning 19687
• DOM: Mark stripHTML as unstable 19725
• Decode HTML entities for publish link 19517
• Expose custom gradient picker 19480
• Gallerys ids are saved as numbers 19163
• Media & Text: Remove “Insert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org” from the replacement flow. 19606
• Page template previews 19106
• Post-Author: Move HTML tags outside of the translatable string 19675
• Priority Queue: Invoke callback when flushing queue 19282
• RichText: split out inline warning 19545
• Storybook: Update to latest 5.3 19599
• Update npm-package-json-lint-config docs 19584
• Update the float on the Spinner to none 19338
• Wrap color palette in fieldset with label inside of a legend 19546
• Check Symbol.iterator not Symbol.toStringTag (redux-routine) 19666
• Skip intermittent end to end test on the button block 19653
• Fix e2e test failures via console log exception to handle temp wpnonce error 19532
• Packages: Mark build-styles as side-effectful 19535
• docgen: Omit unknown type tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) from Markdown format output 19571
• Build Tooling: Skip package for build if package.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. unreadable 19439

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.3.0	4.550s	33.8ms
Gutenberg 7.2.0	6.431s	64.7ms
WordPress 5.3	6.481s	69.865ms

#core-editor, #editor, #gutenberg