What’s new in Gutenberg? (25 March)

This releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. is mostly focused on polish work for 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. UIUI User interface redesign.

Screen Capture on 2020-03-16 at 15-49-00

It also includes an official 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 register custom Block patterns from themes and plugins. The API is still a work-in-progress and might evolve before reaching WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

register_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'   => __( 'Two buttons' ),
        'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

7.8

Enhancements

  • Add visible labels to BlockPatternPicker pattern selection buttons 19789
  • Adds always on display of media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org 19504
  • Adds current menu class to navigation block 20076
  • Block: Outline when interacting with Toolbar Block Type/Movers 20938
  • Create block: Improve how prompts and values provided are handled 20756
  • Expand create block options and add readme.txt template 20694
  • Patterns: Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). adding patterns easier 20854
  • Polish a few icons 20980
  • Polish date-picker component 20824
  • Improve permalink editing 12009
  • Nicer block footprint for social links 20978
  • Show inserter only when block selected for nesting contexts 20753
  • URL: Use test data from web-platform-tests for isURL spec conformance 20537
  • Adds multi-select to categories on Latest Posts 20781
  • Add basic nav block example for inserter and styles previews 21011

Bug Fixes

  • Allow media library in gallery mode to be reset 20675
  • Autocomplete: Add support for results with long titles 20962
  • Compat: Conditionally filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. editor settings for image dimensions 20939
  • Compat: Use core-js-url-browser for URL polyfill 20225
  • Data: Migrate post editor persistence with fullscreenMode false 21082
  • Edit Post: Make 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. 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. focusable for button focus normalization 21031
  • Fix auto-hiding appender regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. 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. 20780
  • Fix fullscreen mode device preview 21010
  • Fix link control search results spacing. 21003
  • Fix snackbar container block portion of UI while present 21000
  • Make the inner button block not allowed as a reusable block or editable as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 20948
  • URL: Fix getQueryString incorrect handling of hash fragment 20738
  • Update social links block to output a custom class on each individual link 20998
  • Update the inserter’s block preview to use the AutoHeightPreview 20817
  • Latest Posts:
    • Fix link for read more markup 20917
    • Fixes the categories selector crash when categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. does not exist 20960
  • Fix input rules 20964
  • Trim input value in navigation search input field 19832
  • Fix mobile header 20946
  • Fix visually hidden classnames 20649
  • Fix/screen reader text 20607
  • Fix SelectControl example code synax highlight 19803

New APIs

  • Add initial API to register patterns from themes and plugins 21074
  • Convert __experimentalCreateInterpolateElement to a stable API 20699

Experiments

  • Sitesite (versus network, blog) Editor:
    • Add Fullscreen mode 20691
    • Add fullscreen close button 20989
    • Add more menu and fullscreen toggle 21006
    • Style resets for top level page 20886
    • Get current template part correctly for auto drafts 20438
    • Add template preview to the edit site template switcher 20958
    • Add things required to load custom blocks to Site Editor page 20549
    • Avoid page templates overwriting page title 20865
  • Lighter block DOM:
  • Navigation Block:
    • Fix dynamic rendering recursive function name typo 21078
    • Avoid hiding submenu when adding a link 21035
    • Fix toolbar overlap on navigation links 21033
  • PlainText v2 21076
    • Editable Component 18361

Documentation

  • Add ESNext example for unregisterBlockType 20784
  • Docs/SlotFills: Small update for consistency 20767
  • Correct 2nd param of useViewportMatch() usage 20911
  • Include npm run dev guidance in “Getting Started” 21015
  • Document default login credentials and wp-env run command 20678
  • Fixes docblockdocblock (phpdoc, xref, inline docs) for useViewportMatch 20919
  • Lowercase visual editor and code editor to match block editor and classic editor 20968
  • Update README.md 20913
  • Add Custom Block Editor to TOC and Manifest 20749
  • Add tutorial link to Table of Contents for Custom Block Editor 20750

Code Quality

  • Block Editor: Use useResizeObserver in place of direct reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-resize-aware dependency 20889
  • E2E Test Utils: Improve durability of embedding matcher 20811
  • Framework: Migrate/remove temporary compatibility script initialization 19178
  • Framework: Use WHATWG URL in place of legacy url module 19823
  • Nav Block: Remove ‘frontend’ from style comments 21034
  • Project Management Automation: Add TypeScript type-checking 20850
  • Refactor the inserter menu component and split into multiple smaller components 20880
  • Remove iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. from content elements 20976
  • Update Search/RSS block render method 20977

Various

  • Update glossary 20934
  • Improve performance testing 20802
  • Edit Post: Register block patterns as separate 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 20871
  • 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): updated headings to reflect semantic relationship between html 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.) and it’s content. 16444
  • Add Prettier shared config package 20026
  • Add default styles to the TabPanel component 20872
  • Add isFileURL method and use it on all native media upload checks. 20985
  • Add menus endpoints. 20292
  • Block Patterns: Update text-two-columns.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. 20890
  • Block Styles: Remove the block margin in the style selector 19983
  • Block patterns: improve success notice 21005
  • Blocks: Allow the Default Style selector to be hidden. 20620
  • E2E Tests: Mock Embed response for InnerBlocks locking test 20481
  • ESLint Plugin: Relax prefer-const for destructuring assignment 20737
  • Gallery: Update UI of controls 20776
  • Improves RTL style conversion 20503
  • Minor change to switch Help link target to _blank, add rels 20800
  • Mobile: Add accessibility label to Block List Footer 20633
  • Moves category multi select from LatestPosts to QueryControls 20832
  • Paste: replace iframes with url 20983
  • Polish poster image button arrangement. 20754
  • Preview Button: Remove the separator and border, and reduce the size of the icon. 20683
  • RangeControl: Improve disabled rendering and interactions 20723
  • Reduce gap between block library and preview 20777
  • Remove aria-expanded from close button in Publish panel 20993
  • Remove feature flag for mobile page templates 20718
  • Remove inaccurate message from image block 20909
  • Removed the textarea width restriction for the 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 20624
  • Revert “Framework: Travis: Avoid skipping Puppeteer download” 20828
  • Show errors in the media replace control 19244
  • Styles Panel: Don’t force it to be closed by default. 20617
  • Update Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. Item icon 20763
  • Update page template picker after design review 20883
  • Latest Posts: Testing larger margins 20563
  • Add codeowners for env package 20667
  • Scripts: Update all webpack related dependencies 20916
  • Dependencies webpack plugin: Let the output file be specified when output is combined 20844

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.8 5193ms 23.05ms
Gutenberg 7.7 5134ms 22.79ms
WordPress 5.3 9512ms 25.83ms

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