André 5:05 pm on April 15, 2020
Tags: , , ,   

What’s new in Gutenberg (15 April)

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. Design Tools

This release features a few additions to the design tools for the blocks, including height unit control for the Cover block, line-height control for the Paragraph and Heading blocks, and background gradient support for Group, Columns, and Media & Text blocks.

Patterns

Work on patterns has continued and 7.9 comes with three new ones:

  • Hero Two Columns
  • Numbered features
  • It’s time

Block markup

The work to lighten the DOM in the editor and make it as close as possible to the front-end has been advancing as well.

The 7.9 version also comes with a simplified and more semantic button block, although the pre-existing classes have been left untouched to minimize breakage.

Before this release:

<div class="wp-block-button">
  <a class="wp-block-button__link">Text</a>
</div>

After:

<a class="wp-block-button wp-block-button__link">Text</a>

We try hard to avoid block markup changes and we reckon that the button block changes may require some themes to adapt some of their style selectors. We hope that the improved markup will serve us better going forward.

7.9 🇧🇪

Features

  • Add gradients support to Group, Columns and Media & Text blocks. 21375
  • Add line height support to the Paragraph block. 20775
  • Add font size support to the Heading block. 21431
  • Add line height support to the Heading block. 21215
  • Add custom height unit support to the Cover block. 20888

Enhancements

  • New Patterns:
  • Add a new keyboard shortcut to toggle Fullscreen Mode. 21436
  • Insert post title instead of URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, when adding a link to an existing post 21240
  • Social links block:
    • Update tumblr icon 21329
    • Update and massage social links colors. 21474
  • Allow reusable block top and bottom paddings to collapse. 21472
  • Update all block previews to use the auto-height behavior. 21014
  • Disable autocomplete for custom class name inputs. 21110
  • Several small tweaks to the new Block UIUI User interface. 21476
  • Unify the focus styles across the UI. 21141
  • Improve block focus style. 21498
  • Remove the post permalink UI from the post title. 21099
  • Style the default toolbar buttons. 21252
  • Style tweaks to the patterns library 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.. 21263
  • Smaller space between toolbar and block. 21166

Performance

  • Add block selection performance test. 21230
  • Improve the performance of the block moving animation. 21231
  • Render the patterns list asynchronously. 21322

Bug Fixes

  • Improve WordPress logo rendering for non-retina displays. 21217
  • Fix inserter popover direction. 21556
  • Fix Snackbar notice bottom margin. 18858
  • Fix YouTube Embed block from flickering and crashing on Safari. 21225
  • Fix sibling inserter being unclickable. 21232
  • Fix block duplication using keyboard shortcut 21317
  • Avoid creating an empty paragraph when selecting the parent’s group block 21318
  • Fix the Buttons block margins. 21376
  • Prevent typing on a Popover from closing the block toolbar 21421
  • Prevent copy/paste on number inputs from copying the post content. 21457
  • Prevent scroll jumps when focusing long blocks. 21460
  • Fix Separator block RTL styles. 21525
  • Make dateI18n returns be affected by gmt parameter. 18982
  • Fixes the read more link added by themes in the Latest Posts block. 20541
  • Fix the Latest Posts block when imageDimensions is empty 21070
  • Fix transparent images used as Cover block backgrounds. 20904
  • IE11: fix focus on backspace. 21092
  • Fix IE11 breakage when hitting Enter. 21361 21366
  • Fix block movers on full-wide blocks. 21097
  • Fix Annotations classNames. 21184
  • RangeControl: Fix zero value handling with number input. 21187
  • Fix reusable block horizontal padding 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.. 21312
  • Fix fullwide margins regression. 21201
  • Prevent the Cover block from overriding the children blocks colors 21254
  • Fix overly verbose aria-label in Social Link block 21369
  • Fix container block appenders and sibling inserters. 21149 21142 21143

New APIs

  • wordpress/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.: Add create-i18n function. 21182
  • wordpress/interface:
    • Add screen sidebar extensibility APIs. 20698 21260
    • Prepare for npm release. 21417
    • Add Fullscreen mode component. 21334
    • Add InterfaceSkeleton component. 21335
  • wordpress/icons: Add new icons: tablet, mobile, desktop, font, share… 21261 21278
  • Support changing the Group block’s DOM element. 20218
  • 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.: Add new utility to register block types from metadata in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 20794
  • Add radio option to the ButtonGroup component. 20805

Experiments

  • Full site editing and Site Editor screen:
    • Use the default post comments template for the Post Comments block. 21012
    • Use slug as template part display label.21161
    • Remove duplicate queries fetching template parts 18878
    • Preload the edited template to avoid the white page effect. 21214
    • Move the menu item to the top level. 21273
    • Add block breadcrumb; 21274
    • Prevent template switcher jumpiness. 21280
    • Increase the viewport width used for template previews. 21287
    • Add top level inserter. 21328
    • Apply the editor styles. 20982
    • Update the multi-entity saving flow UI. 21159
    • Small updates to template selector. 21202
  • New navigation screen:
    • Bootstrap the screen. 21036
    • Implement the initial styling. 21314
    • Add save shortcut. 21342
    • Fix editor shortcuts. 21338
    • Basic responsive styles. 21414
  • Navigation block:
    • Make the submenus usable on mobile. 21471
    • Fix block for contributor users 18669
    • Fix submenus being overlapped by wrapping top-level nav links. 21140
    • Add vertical variation. 21296
    • Show color controls in toolbar only. 20884
    • Add capture toolbars prop to inner blocks. 21095
  • Block API Support flags:
    • Introduce a support key for support global style colors in blocks. 21021 21428
    • Add the possibility to support gradients using the experimental color support flag; 21481
    • Add a block support flag for font size. 21153
  • Remove experimentalUIParts API. 20979
  • Add experimental Text component. 21088

Documentation

  • Docs: Describe tools used in E2E testing. 21295
  • WP-env: Add reference to docker log command to show error logs in terminal. 21308
  • Docs: Add section in block RFC about register_block_type_from_metadata. 21501
  • Update serverSideRender docs to include how to use from the wp global. 18722
  • Prescribe latest NPM for development environment. 21017
  • Update Documentation on how to update post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. values from a block. 21155
  • Document getAnchorRect prop for Popover component. 17709
  • Typos and tweaks: 21228, 21364, 21405, 20660, 21297.

Code Quality

  • Add types to WordPress packages:
    • wordpress/element 21248
    • wordpress/primitives 21482
    • wordpress/icons 21487
    • wordpress/autop, wordpress/escape-htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and wordpress/html-entities 20669
    • wordpress/i18n 21224
    • wordpress/prettier-config 21381 21053
    • wordpress/block-editor DOM utils. 21362
  • Update the Buttons block to use the new color support flag. 21266
  • Update the Paragraph block to use the colors support flag. 21037
  • Update the Columns block to use the colors support flag. 21038
  • Update the Heading block to use the colors support flag. 21039
  • Update the Media & Text block to use the colors support flag. 21169
  • Refactor env commands into separate files .21353
  • Remove the deprecated request dependency. 21398
  • Move default styles to editor normalisation stylesheet. 19837
  • Replace lodash.assign with vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. 21054
  • Remove the old block preview implementation. 21096
  • Make RichText window/document agnostic. 21105
  • Polish 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) package. 21148
  • Fix two typos in lib rest menu controller. 21418
  • Global tips: Add period at the end of sentence. 20601
  • Lighter block DOM:
  • Update the padding values on the Card component to align with proposed spacing system. 21111
  • Disable scroll in PlainText component. 21115
  • Simplify inserter hasItems check. 21138
  • Avoid string concatenation for the Latest Post block read more link. 21170

Various

  • 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: Bump tested up to info to WP 5.4 21400
  • Output package type declarations. 18942
  • Exclude native files from type checking. 21491
  • docgen: Optimize README update script. 18840
  • Check Latest NPM on npm install. 21521
  • E2E Tests:
    • Improve stability of image block test 21174
    • Improve Allowed Inner Blocks test stability 21175
    • Use waitForSelector to wait for sidebar presence 21180
  • Unit Tests:
    • Fix wordpress/env testPortNumberValidation unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. 21394
    • Introduce reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-testing-library to some existing unit tests. 20428
    • Components: Add SlotFill test. 21226
    • Fail E2E when page displays warning notices 13452
  • Project Management: Prompt user to link GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ account to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile 21221 21384
  • wordpress/env: Bind "coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress." files to tests environment 21195
  • ESLint Plugin: Continue considering unused variables after encountering exception 21354
  • Enable prettier for JSX files 21151
  • Increase severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of JSDoc linting to error. 20427
  • Add I18N specific ESLint rules. 20555 20574
  • Update uuid to v7.0.2. 21258
  • Upgrade Reakit to version 1.0.0-rc.0; 21300
  • Framework: Add package-lock precommit check for latest NPM. 21306
  • Babel Preset: Update Babel version to 7.9.x. 21419
  • ESLint Plugin: Update ESLint and related dependencies to 6.8.x. 21424
  • Framework: Configure ESLint JSDoc plugin to target TypeScript mode. 18998
  • Major version upgrade for Jest in all packages. 20766
  • Storybook:
    • Add TreeSelect component. 20496
    • Update AnglePickerControl title. 21089
  • Automated Testing: composer non-interactive flag for Travis. 21118
  • 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/. error message: Remove unnecessary space. 21178
  • SlotFill: Guard property access to possibly-undefined slot. 21205
  • Build: Add TypeScript version validation 21208

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.9 16.8s 49.87ms
Gutenberg 7.8 16.9s 46.75ms
WordPress 5.4 13.8s 42.31ms

#core-editor #editor #gutenberg

#gutenberg-new