WordPress 5.4 Field Guide

WordPress 5.4 is shaping up to be the best WordPress 2020 has seen!

As a user, you’ll see new blocks and enhancements in the block editor, new embeds, and improvements in the WordPress Admin experience.

As a developer, you’ll see 122 enhancements and feature requests, 210 bug fixes, and more! Of course, all those improvements mean code changes, which could in turn require you to make updates to your site, plugin, or theme.

So take a look through this Field Guide, and see what’s relevant to you and your users, among the many improvements coming in 5.4…

Accessibility

On the 14 updates related to Accessibility in 5.4, you’ll want to particularly note changes to the WordPress Admin Bar, to the calendar and recent comments widgets, on the Menu screen, and bugs reported by the WPCampus accessibility report.

Block Editor

The block editor has continued its rapid iteration since WordPress 5.0. Now it has Gutenberg version 7.5 bundled with WordPress 5.4; that’s ten releases all bundled into WordPress 5.4 (versions 6.66.76.86.97.07.17.27.37.4  and 7.5)! Bug fixes and performance improvements from Gutenberg versions 7.6 will also be part of 5.4.

The WordPress 5.4 Beta 1 post highlights a lot of new features and improvements across these releases, though you’ll also want to note the impressive achievement of 14% loading-time reduction and 51% time-to-type reduction (for a particularly long post of ~36,000 words, ~1,000 blocks) since WordPress 5.3.

Below you’ll find details on two new blocks, button component updates, block collections, default fullscreen mode for new installs/devices, custom keyboard shortcuts, general block editor API updates, new block variations API, a new gradient theme API, markup and style-related changes, and a new @wordpress/create-block package for block scaffolding.

Customizer

On the 14 updates of the Customizer component, WordPress 5.4 improves accessibility of focused elements as a follow-up to WordPress 5.3 Admin CSS changes, adds documentation of existing Customizer functions and hooks, removes apple-touch-icon-precomposed deprecated meta tags, and improves Menu items selection logic.

Please note that some unused Customizer classes are now formally deprecated:

Menus

On the 5 updates in the Menus component, WordPress 5.4 improves keyboard accessibility of the Menu items selection tab panel and streamlines the user interface.

If your plugins add custom fields to menu items, you’ll want to update your code to use the new wp_nav_menu_item_custom_fields hook:

Privacy

On the 15 updates in the Privacy component, you will want to specifically note:

  • Personal Data Export now includes Session Tokens, Community Events Location and Custom User Meta.
  • Personal Data Exports now include a JSON file and a Table of Contents
  • New filters for the headers of all Privacy-related emails
  • The privacy tables are improved for a cleaner interface
  • wp_get_user_request_data() function was replaced with wp_get_user_request() for better clarity

All those changes are in this dev note:

REST API

On the 22 updates related to the REST API, WordPress 5.4 now supports “OR” taxonomy relation parameter in Post Controller, adds selective link embedding and introduces some changes in the WP_REST_Server method. Read below for more details on these updates:

Shortcodes

On the 3 updates to the Shortcodes component, WordPress 5.4 introduces documentation improvements and a new function: apply_shortcodes. This function is an alias of do_shortcode, which is still supported.

Widgets

On the 9 updates to the Widgets component, WordPress 5.4 introduces accessibility and user interface enhancements on the Widgets Admin screen and changes in the Recent Comments and Calendar Widgets HTML markup.

Other Developer Updates

There are even more goodies in 5.4, like the new wp-env (a zero config tool for painless local WordPress environments), enhancements to favicon handling, better information about errors in wp_login_failed, a new site ID in multisite’s newblog_notify_siteadmin filter, a new TikTok video embed and removal of the CollegeHumor embed, storing the original URL of media attachments in _source_url post meta, improved accessibility by loading the Admin Bar with wp_body_open, avoiding duplicate IDs in the Recent Comments widget, a new parameter in the lostpassword_post action in retrieve_password(), theme headers supporting “Requires at least” and “Requires PHP” declarations, and the delete_posts capability won’t trigger PHP notices for custom post types. Read through the dev notes below to see details on all these changes coming in 5.4.

But Wait, There is More!

Over 198 bugs, 121 enhancements and feature requests, and 8 blessed tasks have been marked as fixed in WordPress 5.4. Some additional ones to highlight include:

  • Bootstrap/Load: Enhancement to favicon handling (#47398)
  • Bundled Theme: Twenty Twenty: Add social icon for WhatsApp (#49098)
  • Comments: Add “In response to …” before threaded comments in comment feed (#43429)
  • Comments: Add “in reply to” in comment moderation email notification (#43805)
  • Embeds: Embed support has been added for TikTok (#49083) (Gutenberg#19345)
  • Embeds: Removal of CollegeHumor embed as the service doesn’t exists anymore (#48696) (Gutenberg#18591)
  • Login and Registration: Clearer information about errors in wp_login_failed (#49007)
  • Login and Registration: new parameter passed into the lostpassword_post action in retrieve_password() (#38334)
  • Networks and Sites: Site ID has been added to the newblog_notify_siteadmin filter for multisite installs (#48554)
  • Networks and Sites: switch_to_blog() and restore_current_blog() reuse switch_blog action (#49265)
  • Media: store the original URL of the attachment in the _source_url post meta value (#48164)
  • Menus: Make tabs panels more accessible for keyboard users (#49211)
  • Posts, Post Types: Use delete_posts without triggering PHP notices in every post type (#30991)
  • Post Thumbnails: Make sure get_post_thumbnail_id() returns an integer, to match the documented return value (#40096)
  • REST API: Expose all theme supports and changed permissions in /themes endpoint (#49037)
  • Site Health: Theme headers support “Requires at least” and “Requires PHP” declarations (#44592)
  • Toolbar: The Admin Bar is now loaded with wp_body_open when available (#47053)
  • Widgets: Avoid duplicate IDs in Recent Comments (#46747)

Please, test your code. Fixing issues helps you and helps millions of WordPress sites.

Props to @jeffpaul and @marybaum for contributing to this guide.

#5-4, #field-guide

Bug Scrub Schedule for 5.4

Now that 5.4 has been officially kicked off, bug scrubs will happen weekly all the way up to the final release. Keep an eye on this schedule – it will change often to reflect the latest information.

  1. 1/21/2020 19:00 UTC
  2. 1/29/2020 23:00 UTC
  3. 2/7/2020 05:00 UTC (APAC-Friendly)
  4. 2/10/2020 16:00 UTC
  5. 2/18/2020 20:00 UTC
  6. 2/27/2020 23:00 UTC
  7. 3/2/2020 18:00 UTC
  8. 3/11/2020 TBD (If Necessary)
  9. 3/17/2020 TBD (If Necessary)
  10. 3/27/2020 TBD (If Necessary)
  11. 3/30/2020 TBD (If Necessary)

These scrubs are separate and in addition to the normal scrubbing and triage by individual components. Some of those sessions include:

Design Triage: Every Monday 17:30 UTC at #design
Gutenberg Design Triage: Every Tuesday 17:00 UTC at #design
Accessibility Scrub: Every Friday 14:00 UTC at #accessibility

Also, the ongoing APAC-friendly #core bug scrub session every Thursday at 06:00 UTC will continue during the cycle, alternating focus between core and editor.

Next, the Accessibility team has announced a few extra scrubs for the 5.4 cycle. You can read about those here.

Finally, a reminder that anyone — Yes, you! — can host a bug scrub at anytime. You can work through any tickets you’re comfortable with. In fact, if you plan one that’s 5.4-focused, we’ll add it to the schedule here along with your name. Finally, you’ll get well deserved props in the weekly Dev Chat, as well as in the #props Slack channel!

All open tickets for 5.4, in order of priority, can be found here. Tickets that haven’t seen any love in a while are in particular need. Those can be found in this query.

If you’d like to lead a bug scrub or have any questions or concerns about the schedule, please leave a comment or reach out to me directly.

#5-4, #bug-scrub

X-post: Accessibility Team meeting notes – March 13, 2020

X-post from +make.wordpress.org/accessibility: Accessibility Team meeting notes – March 13, 2020

Dev Chat summary – February 12, 2020 (5.4 week 9)

@davidbaumwald facilitated the chat on this agenda.

Full meeting transcript on Slack

This devchat marked week 9 of the 5.4 release cycle.

Announcements

WordPress 5.4 Release Candidate 2 was released on Tuesday March 11th as expected 🎉

Feedback from hosts is needed on Make/Hosting regarding SimpleXML PHP extension usage.

@joemcgill shared that XML Sitemaps Feature Plugin version 0.2.0 was released this week and could continue to use feedback from folks testing.

@audrasjb shared that Plugins & Themes Auto-updates Feature Plugin version 0.2.1 was released this week. This feature now have a dedicated Slack channel, created right after the last devchat: #core-auto-updates. There will be weekly meetings on Tuesdays at 18:00 UTC. The kick-off meeting recap is available on Make/Core.

@chanthaboune shared the roadmap to get an All-women Release Squad by the end of 2020.

Upcoming releases

WordPress 5.4 Release Candidate 3 is scheduled for Tuesday March 18th, 2020.

trunk is open for 5.5, but the priority is on 5.4 Release Candidate cycle. Polyglots Team already started to work on translation packages.

Components Check-In

@imath worked on Ticket #49236 and needs some feedback. @jeffpaul advised him to slate it to 5.5 with early keyword so it could be handled at the early stage of the development cycle.

@garrett-eclipse found a list of the components and sub-components without maintainers:

There’s the potential to merge some of the less active sub-components like Charset and Emoji into it’s parent Formatting component. But that would needs further discussion.

Open floor

The main discussion of the open-floor was the Block Editor’s Full Screen Mode enabled by default since WP 5.4 Release Candidate 1.

Here is a quick transcript of the discussion. Please note that no decision has been taken during this chat.

@peterwilsoncc wanted to know when was this committed to the WordPress repository. @jorgefilipecosta answered it was introduced during Beta 3, before WP 5.4 RC 1 was released.

@peterwilsoncc: “same for the release in which it was moved from experimental to stable (for want of a better word) Gutenberg?”. @jorgefilipecosta answered that Full screen mode was not experimental, it was stabilized and working for a long time, it was just not enabled by default (although some hosts were doing it), and the Gutenberg team just had a small PR that enabled the mode by default.

@peterwilsoncc noted that in the discussion on the Make/Core blog, @matt mentions some user testing. @peterwilsoncc asked how much was done.

@joostdevalk proposed to revert and take another look for 5.5, given the negative feedback about this change.

@clorith pointed out that it is still being worked on, and even had a design change between RC1 and RC2. It feels like it’s not ready, and needs more UX work before it goes in.

@chanthaboune asked how the feedback has been in support forums. @ipstenu answered that it’s hard to get feedback in support forums at this stage, since only people beta testing would see it and they tend to be a little more technical savvy than mainstream users.

@youknowriad wanted to clarify some of these questions:
– “I believe we should just the merits of the full screen on its own not whether it can be disabled or not. For instance the customizer is in full screen and it can’t be disabled.
– The UX work after RC1 was a bug fix for RTL languages.
– The feedback is balanced. There were good comments about it. Most negative feedback is about the fact that it becomes default.
– This feature has been on the Gutenberg plugin for more than a year now, It’s in before 5.0.”

@pbiron asked if it was enabled by default in the plugin before being merged into core.

@youknowriad answered that was a request from @matt as release lead prior to the RC.

@joostdevalk added that it’s sounds good to say that @matt has every right to make that call. But he disagrees that this is a good idea in its current form, and he think it will be necessary to guide changes like this more. The Block Editor is changing its default behavior without explaining that in the interface.

For @peterwilsoncc, at this point the question is whether it should be enabled by default rather than whether the feature should exist.

@joemcgill’s main concern is that the reaction to this change will be for people to install code that permanently overrides the feature preference, which makes it harder to move to a fullscreen mode default in the future.

@nilovelez noted that it may seem daunting for existing users, as some part of the UI will apparently be gone, but existing users are the ones that won’t even notice the change. Some attendees disagreed on that as the current behavior for existing users is saved with LocalStorage so it won’t stay for users that use different devices to connect to WordPress Admin.

@clorith also mentioned that Apple clears LocalStorage at set intervals, so users would lose their “don’t use fullscreen” option.

@johnbillion feels concerned that how to switch back to non full screen mode is not obvious.

@youknowriad answered the argument can be turned to the opposite direction for people preferring the full screen mode if it’s disabled. That’s why he think the core team should discuss whether it’s good not whether it can be disabled. For @clorith, given that it’s been off by default, then this is an unexpected change, and thus should not be used as the basis.

@joostdevalk proposed to show how to get out of full screen mode and how to set personal preference in the interface, and save preferences as a user meta and not on the user’s browser.

@jorgefilipecosta pointed out that a new welcome modal is shown to new users. He asked if it would make sense to introduce full screen mode there. @joyously stated that most of the users wouldn’t see it. @jorgefilipecosta, answered that users that won’t see the new modal won’t switch to default FullScreen mode, their preferences will be kept unchanged.

@audrasjb added that users don’t necessarily come to the editor from the posts list. With fullscreen mode and the WP logo button, they can only go back to the Posts list instead of having the full Admin menu. This is the only Admin action/link directly available after editing/publishing a post.

@jorgefilipecosta raised that the development of database persisting mechanism is in progress and that should happen soon. @ipstenu added it really should be a requirement for this feature to land in WordPress Core. @jorgefilipecosta mentioned database persisting for user’s preferences is expected to land in WP 5.5.

In terms of actions, @peterwilsoncc suggested:

  • Setting full screen to off by default
  • Adding some onboarding for when the switch is made
  • Enable once the user’s preference is saved in the database
  • Clarifying exiting full-screen mode (currently active, stated for completeness)

@johnbillion pointed out Matt mentioned that some hosts enabled full screen mode. He asked what is the feedback been regarding not getting lost, switching modes, etc.

@chanthaboune tried to summarize the concerns raised by the attendees:

  • Consistency/persistency of the visual experience
  • More thoughtful user flows
  • Clearer introduction to the full screen functionality

#5-4, #block-editor, #feature-plugins

Editor chat Summary: 11 March, 2020

This post summarizes the weekly editor chat meeting agenda here. Held on Wednesday, 11th March 2020 held in Slack. Moderated by @paaljoachim.

WordPress 5.4 Release Candidate

WordPress 5.4 Release Candidate (RC) was released 10th March.
https://wordpress.org/news/2020/03/wordpress-5-4-rc2/.

@jorgefilipecosta
Cherry Pick PR’s for WordPress 5.4 RC 2:
https://github.com/WordPress/gutenberg/pull/20743
Current status:
https://github.com/WordPress/gutenberg/projects/39.

Gutenberg version 7.7

Gutenberg version 7.7 release post: https://make.wordpress.org/core/2020/03/11/whats-new-in-gutenberg-11-march/

Weekly Priorities

There is master plan for March:

@youknowriad
Full Site Editing overview issue: https://github.com/WordPress/gutenberg/issues/20791

Task Coordination

@andraganescu
Working on LatestPosts block, LatestPosts v2 and Navigation block.
This PR allows Navigation menu to create items from an existing WP menu https://github.com/WordPress/gutenberg/pull/18869

@youknowriad
Strong focus on: the Block Patterns UI and the Full site editing.

@gziolo
Focus on block editor features API and registering block types from metadata in PHP.

@nosolosw
Focus on expanding the global styles system to other areas: first step the custom colors ( __experimentalUseColor component) and try to make them work with global styles.

@brentswisher
Continue working on storybook integration of components.

@karmatosed
Focus on Global styles wrap up for v1 and Navigation.

@jorgefilipecosta
Focus on the 5.4 release, and work on a package for generic screen functionality (share code between edit-post , edit-site etc), and global styles.

@mapk
In relation to FSE (Full Site Editing), Creating/editing templates and isolating template parts.

@itsjonq
Focus: adding more style controls to Gutenberg blocks, and making the controls easier to use.

@isabel_brison
Triaging the a11y audit board https://github.com/WordPress/gutenberg/projects/25

Needs review

Latest Post Block PR’s looking for a reviewer:
https://github.com/WordPress/gutenberg/pull/20785
https://github.com/WordPress/gutenberg/pull/20595
https://github.com/WordPress/gutenberg/pull/20563 @karmatosed
https://github.com/WordPress/gutenberg/pull/20541
https://github.com/WordPress/gutenberg/pull/20415

Open Floor

@matveb
WordPress 5.4 will use the pre Gutenberg 7.7 user interface.

@andraganescu
Brings attention to “Add menus endpoints.”
https://github.com/WordPress/gutenberg/pull/20292

@brentswisher and @itsjonq
Will work on improving the stories and docs for the storybook components.

@itsjusteileen
How do we show a template (wp_template post) we have built as a page on the frontend?
@johnstonphilip
It needs to have the right slug so that WP template hierarchy takes over and uses that template. https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page

@paaljoachim
“Consistency between image options in single image and gallery blocks.”
https://github.com/WordPress/gutenberg/issues/11436
Regarding nesting single image blocks inside parent gallery.
@andraganescu
This comment should help with a composed Gallery block:
https://github.com/WordPress/gutenberg/issues/19685#issuecomment-576010263
@youknowriad
A big issue would be InnerBlocks defining alignments for the children blocks.

CSS Chat Summary: 12th March 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1584046820150600

I (@isabel_brison) facilitated the meeting. 

Following on from last week’s discussion about meeting times and daylight savings changes, no one expressed a preference so we decided to keep meeting at the same time relative to UTC.

CSS audit status update

Progress this week was essentially creating tickets:

I also reviewed a ticket for removing some !importants from the common.css file: https://core.trac.wordpress.org/ticket/47569

@notlaura suggested checking in with design at the weekly meeting regarding any particular pain points they might be having with core CSS.

There was nothing for open floor, so we finished early 🙂

#core-css, #summary

REST API Meeting Agenda for March 12

The REST API weekly component chat will occur this week at March 12, 2020 18:00 UTC in the #core-restapi Slack channel.

Please note: We have not changed the UTC time for this meeting. If your country has recently adjusted for daylight savings time, this may be a different hour than the past few months.

Agenda Items:

  • Discuss priorities for the 5.5 development cycle
  • Discuss 5.4 documentation updates
  • Open Floor

All agenda items are welcome, from all teams and contributors; please post them as comments below or let us know by joining the meeting.

#agenda, #rest-api

Dev Chat Agenda for March 11, 2020 (5.4 Week 9)

Here is the agenda for the weekly meeting happening later today: Wednesday, March 11, 2020, at 09:00 PM UTC.

Announcements

Highlighted Blog Posts

Topics for discussion

Components Check-in

  • News from components
  • Components up for adoption (Filesystem API and Rewrite Rules)
  • Components that need help
  • Cross component collaboration

Open Floor


If you have anything to propose for the agenda or specific items related to those listed above, please leave a comment below.

This meeting is held in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack.

#5-4-2, #5-4, #agenda, #devchat

Auto-updates feature meeting summary: March 10th, 2020 (kick-off meeting)

These are the weekly notes for the WP Auto-updates team meeting that happened on Tuesday March 10th, 2020. You can read the full transcript on the core-auto-updates Slack channel and find the meeting’s agenda here.

It was the first meeting for the Plugins & Themes Auto-updates feature, and this kick-off meeting was really efficient and worthwhile for the project 🚀

WP Auto-updates feature general scope

Here is the current general scope of the Feature Plugin:

  • Ability for website administrators to opt-in to automatic updates for plugins and themes in the related WP-Admin screens
    • ✅ Done for plugins
    • 🔲 Themes: needs to be ported. Slated for milestone 0.4.
  • Ability to enable/disable auto-updates on a plugin-by-plugin and theme-by-theme basis
    • ✅ Done for plugins
    • 🔲 Themes: needs to be ported. Slated for milestone 0.4.
  • Email notifications to send regular auto-update summaries to website administrators
    • 🔲 Plugins: Slated for milestone 0.3.
    • 🔲 Themes: Slated for milestone 0.4.
  • Hooks and constants to help developers disable or programmatically define auto-update settings
    • ✅ Done for plugins
    • 🔲 Themes: needs to be ported. Slated for milestone 0.4.

For the moment, the team started with plugins autoupdates, then all this work will have to be ported to Themes screen.

As a reminder, the Feature Plugin is developed on GitHub and is available for testing on WordPress.org plugins repository.

Current status of the project – version 0.2 🐝

Last week, version 0.2.0 was released with a lot of enhancements and bugfixes. Here is the complete changelog:

  • Remove auto-updates column from must-use and drop-ins screens – PR #39
  • Ensure the the enable/disable bulk actions appear in the dropdown and are handled in multisite – PR #38
  • Remove dashicon from “Enable” text in plugins auto-updates column – PR #36
  • Replace “Automatic Updates” with “Auto-updates” in filters – PR #35
  • Display only filters with at least one available plugin – PR #33
  • Remove setting from site option when deleting plugin – PR #32
  • Populate site health with plugins auto-updates informations – PR #24
  • In multisite, only add the “Automatic Updates” column on the plugins-network screen – PR #21
  • Add auto-update-enabled and auto-update-disabled views on the plugins screen – PR #18

@pbiron noticed some PHP notices on version 0.2.0 and made a pull request to fix them. It is milestoned for version 0.2.1, later this week.

@audrasjb shared some screenshots of the current design of WordPress Admin screens:

Click images to open them in full size (it will opens in a new tab).

@mclancy3 will open GitHub issues to provide some feedback on the Plugins screen’s user interface.

Work in progress

@pbiron raised an issue with a premium plugin that assumes there is no extra column on the plugins list table and add its own column with a colspan attribute. As mentioned by @clorith, this is not a bug in WP Auto-update feature plugin but rather a bug in this particular plugin. @jeffpaul proposed to add this to a Known Issues/Caveats section in readme files.

@jeffpaul also proposed to port the Features/to-do list section from readme.md into GitHub issues. @audrasjb already ported Email notifications and Themes auto-updates into issues, and @jeffpaul will take care of the remaining ones.

@jeffpaul pointed out that 10up uses two GitHub Actions to help deploy plugins to WordPress.org as well as readme/asset updates. He proposed to submit a PR to add those here and help streamline deploys to WordPress.org. For the moment, @audrasjb generates releases from the GitHub repository and deploy them manually on the plugin repository, using SVN. If it’s not a top priority, it would be nice to improve this workflow.

As proposed earlier in core-sitemaps meeting, @pbiron suggested to add a label to issues when something different will have to be done to the plugin code when it gets merged into core. @audrasjb stated that it would be nice to introduce this kin of labels and also to use DocsBlocks comments to point out things that will need specific implementation on WP Core. @jeffpaul proposed to use a GitHub pull request template for that.

About next development steps, @audrasjb is currently implementing email notifications. It shouldn’t be a problem given there is an useful automatic_updates_complete action to hook on.

Porting auto-updates features from Plugins to Themes will probably be a way more difficult, as there is not so much hooks in the Themes screen template. Themes in multisite is fairly straightforward, since a list table is used there, but for single sites there is no list table so what we’ve done for plugins won’t really apply. We’ll probably end up with JavaScript hacks to include the interface opt-in buttons and informations. @jeffpaul proposed to expand the focus of 5.4.x to include those hooks in the themes screen, which sounds like a perfect option right now.

Current GitHub issues

Issue 31: Automatically rollback to previous version if fatal errors detected after update

@audrasjb thinks this issue is out of the feature plugin’s scope. @clorith added that if auto-updates are off by default, yes this would be out of scope for the first release, but definitely something to look into in the future. If they are on by default, this would be a blocker. @audrasjb answered that Plugins, Themes and Core (major) auto-updates are all meant to be opt-in, in the 2020 general roadmap. The team agreed to keep this issue open for the moment.

Issue 13: Automatically delay/postpone updates

@audrasjb said Postponing updates is a great feature, but it’s not on this feature plugin scope, and not sure it’s even in Core scope. @clorith pointed out that the core solution should facilitate by providing filters and such, but not add all those options. The team agreed to keep this issue open for the moment.

Next steps

  • @audrasjb will focus on email notifications development and grant GitHub commit access to @pbiron.
  • A call for testing will be published on Make/Test once 0.2.1 is released with the PHP notices fixes.
  • @jeffpaul will work on improving the GitHub repository organization.

Next meeting is scheduled on Tuesday March 17, 2020 at 18:00 UTC and will take place on #core-auto-updates Slack channel.

#auto-update, #feature-plugins, #feature-projects, #feature-autoupdates

JavaScript Chat Summary: March 10, 2020

Below is a summary of the discussion from this week’s JavaScript chat (agendaSlack transcript).

Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

News roundup proposal

(Slack conversation)

@nerrad as been kind enough to offer to share an aggregate of news relevant in the Gutenberg and general JavaScript ecosystem, to include in the summary notes for each week’s meeting.

Discussion:

  • There was an agreement that it’s a great idea.
  • The plan is to add this as an extra section in our JavaScript chat summary starting from this week.

Action items:

  • New agendas should be structured to include separate sections “Agenda Topics” and “News Roundup”
  • Note-takers should aim to include these items in the published summary notes.
  • Update “Note Takers” document guidelines.

ESLint “prefer-const” relaxation proposal

(Slack conversation)

@aduth added a pull request about a potential revision to our default ESLint configurations (i.e. coding standards) at https://github.com/WordPress/gutenberg/pull/20737. He just wanted to bring it to attention, since any of these sorts of coding standards changes are good to highlight. There’s been some positive feedback already on the pull request that was echoed in the chat.

Visual regression testing tools

(Slack conversation)

@isabel_brison created a ticket https://core.trac.wordpress.org/ticket/49606 to introduce visual regression testing in the WordPress core, so we can clean up some of the old CSS with confidence. She was wondering if this type of testing has been discussed or explored at all for core or Gutenberg. Also, would there be value in adding it for Gutenberg, too?

Discussion:

There’s no visual regression testing in Gutenberg as of today, but there are parts of the tooling that could make it possible, like taking screenshots with the headless browser via Puppeteer. At least with the ticket as presented, it seems primarily focused on existing screens which may not be expected to change, and thus primarily with the aim of preventing regressions while doing CSS refactoring.

The tests themselves are minimal, but the reference images are not insignificant though and need to be updated periodically. The biggest concern is the size of the assets that would have to be maintained and how to ensure they don’t pollute repositories with source code.

There is an existing prototype in the Gutenberg repository (https://github.com/WordPress/gutenberg/pull/18797) that uses 3rd party service percy.io that can be used as a reference when exploring the final implementation.

Introduce a common API to style Button from both web and mobile

(Slack conversation)

There is a pull request that explores primitive UI components that can be used both in native mobile apps and in the browser: https://github.com/WordPress/gutenberg/pull/19104. There was no specific discussion item attached to this, but it was requested that anyone interested take a look and provide any feedback they have to drive further development.

News roundup

A few links to Gutenberg and JavaScript related news (curated by @nerrad).

WordPress 5.4 dev notes

Other random stuff

#core-js, #javascript

What’s new in Gutenberg? (11 March)

With WordPress 5.4 around the corner, Gutenberg 7.7 is another exciting release. It introduces patterns and the first iteration of a new block UI design which aims to synthetize the learnings from these past couple years of Gutenberg being out in the wild.

New Block UI

After more than a year from its first production release, the community pushed the boundaries of the editor further than we’d have expected. The number of third-party blocks exploded and millions of users are interacting with the editor in different ways. This led to a refresh of the Block UI to apply some of the lessons learned in the meantime.

The redesign includes:

  • A simpler Block Toolbar.
  • Better UI color contrast.
  • Consistent focus styles.
  • Redesigned icons.
  • Grid-based spacing and sizes.
  • And more.

As with any feature in the editor, this is the initial release and there’s still more work planned to bring more consistency in the remaining UI elements: sidebar panels, drop-down menus, etc.

Block Patterns

While the editor has a rich set of built-in blocks, it is sometimes challenging for users to compose these blocks together in order to achieve the best designs for their pages. And as we accelerate towards Full Site Editing, this becomes an important challenge to solve.

Different existing community-provided solutions have addressed this by providing rich sets of templates/layout that are ready to use and prevent that dreaded “white page syndrome”. There is a need to bring some consistency and coherence to these features. Gutenberg 7.7 introduces Block Patterns: predefined block layouts, ready to insert and tweak to address that problem.

As a first iteration, the Block Patterns UI has been added as a sidebar plugin from where you can pick and insert the patterns. This is considered an MVP and the UI is expected to evolve over the next releases.

As a start, the plugin comes with a small limited set of patterns. The list will ultimately grow and be opened to third-party authors.

7.7 🇵🇭

Features

  • Add the initial version of the Patterns UI as a sidebar plugin (this is not the final interface and work is in progress to integrate with the main block inserter). 20354, 20715.
    • Add an initial set of patterns 20724.

Enhancements

  • Update the Block and editor UI. 19344
  • Improve the Back to WP Admin button in Fullscreen Mode. 20603
  • Make the editor Fullscreen by default. 20611
  • Remove template locking from the columns block 20465
  • Make the inserter full height. 20526

Bug Fixes

  • A11y:
    • Deselect first/last gallery images on blur. 14930
    • Revert top toolbar tab order 20571
  • Add an overlay to the html block preview to fix block selection in Firefox. 20425
  • Add missing accessibility attributes in the SVG icons. 20538
  • Fix invalid syntax error on Safari 12. 20507
  • Use a consistent width for the link suggetions. 20448
  • Use full labels for directional block movers. 20664
  • Columns block: Force 50% column width at mid-range viewport. 20597
  • Media & Text block: Fix frontend styles when “Crop image to fill” is selected 20539
  • Latest Post block:
    • Fix the excerpt length. 20313
    • Don’t trim manual exerptts 20432
  • Fix sidebar scroll issue on small viewports. 20491
  • Social Link block:
    • Escape generated class name. 20479
    • Fix label attribute type as string. 20468
    • i18n: Use placeholder for the default label 20475
  • Simulated Queries (Device previews):
    • Check for match in stylesheet host and protocol to prevent Chrome breakage. 20673
    • Fix IE11 editor breakage. 20226
    • Fix incorrectly displayed preview option for private post types. 20604
    • Focus preview button after opening preview. 20570
  • Fix isURL regex to take account file urls. 20435
  • Fix error when deleting empty paragraphs in IE11. 20594
  • Fix hidden inserter toggle behind the popover. 20663
  • Fix block registration shared defaults reuse across blocks. 20565
  • Shim meta attributes for early block registrations. 20544
  • Fix bouncing Custom color formatter. 20612
  • Fix Gallery block styles in Edge causing editor breakage. 20690

New APIs:

  • wordpress/env: Add support for ZIP URL sources. 20426

Experiments

  • Lighter Block DOM:
    • allow block types to render their own wrapper 19701
    • Lighter InnerBlocks. 19910
    • Automatically add block class. 20658
  • BlockPreview: Add __experimentalOnReady prop. 17242
  • Edit Site:
    • Update template navigation to use new link control. 20366
    • Update the edit site save modal UI. 20608
  • Fix the block toolbar in the Widgets and Site Edit screens. 20458
  • Fix widgets screen inserter 20680

Documentation

Code Quality

  • Refactoring to existing blocks to use a lighter DOM:
    • List block. 20498
    • Image block. 20576
    • Heading block. 20493
  • Consistent block focus behavior on mount. 20577
  • Cleanup CSS variables. 20529
  • Use the EditorSkeleton component in the widgets and Edit Site pages. 20440, 20431.
  • Refactor SlotFill components. 19242
  • Remove useless style override for floats. 20501
  • Block popover: remove data-type. 20531
  • Resizable editor improvements. 20259

Various

  • wordpress/env:
    • Save the database as a volume. 20648
    • Fix accidental quotes in Site Title. 20520
    • Set owner of wp-content to www-data. 20406
  • wordpress/create-block:
  • Fix React warning triggered by the BlockToolbar component. 20546
  • Skip the Type Writer effect component in IE 11. 20485
  • Update browserslist to fix out-of-date caniuse-lite messages 20709
  • Add storybook stories:
  • E2E Tests:
    • Add test for the Image block. 20622
    • More stable embed test. 20668
    • Fix intermittent RichText e2e test failure. 20457
  • Travis: Avoid skipping Puppeteer download. 20547
  • Plugin: Bump minimum WordPress version to 5.3 20628
  • @wordrpess/priority-queue: Fix for environments that don’t have window defined. 20486
  • Update jest configuration to only ignore tests from /wordpress/ as a subdirectory 20420

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.7.0 7.7s 37.86ms
Gutenberg 7.6.0 7.0s 34.97ms
WordPress 5.3 7.2s 66ms

#core-editor, #editor, #gutenberg

CSS Chat Agenda: 12th March 2020

This is the agenda for the upcoming CSS meeting scheduled for 12th March, 21:00 UTC.

This meeting will be held in the #core-css channel  in the Making WordPress Slack.

If there’s any topic you’d like to discuss, please leave a comment below!

Agenda

  • CSS audit status update
  • Open floor

#agenda, #core-css