Upgrade/Install component meeting agenda for May 18th, 2021

The next meeting is scheduled on Tuesday, May 18, 2021, at 17:00 UTC and will take place on #core-auto-updates SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ channel with the following agenda:

  • Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. of the tickets in the spreadsheet (they all refer to Outcome 1 of the Updater initiative)
  • Open floor/tickets awaiting review

Got something to propose for the agenda? Please leave a comment below.

#core-auto-updates, #updater, #upgrade-install

A Week in Core – May 17, 2021

Welcome back to a new issue of Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Let’s take a look at what changed on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. between May 10 and May 17, 2021.

  • 28 commits
  • 90 contributors
  • 47 tickets created
  • 8 tickets reopened
  • 40 tickets closed

Ticketticket Created for both bug reports and feature development on the bug tracker. numbers are based on the Trac timeline for the period above. The following is a summary of commits, organized by component and/or focus.

Code changes

Boostrap/Load

  • Have language in wp-config-sample.php better match install instructions – #37199
  • Boostrap/Load: Strengthen language in wp-config-sample.php – #37199
  • Bootstrap/Load: Improve docs for error reporting – #41902

Build/Test Tools

  • Update the several dependencies – #52624

Bundled Themes

  • Update twenty_twenty_one_password_form function to actually use a $post parameter – #53091

Coding Standards

  • Adds spacing so define() statements displayed when creating a networknetwork (versus site, blog)#53182

Docs

  • Update documentation in wp-config-sample.php per the documentation standards – #52628
  • Update help key documentation link in 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/ response – #53162
  • Miscellaneous DocBlockdocblock (phpdoc, xref, inline docs) corrections – #52628
  • Update documentation in phpunit/includes/abstract-testcase.php per the documentation standards – #52628
  • Clarify the @since note for unlink-homepage-logo in get_custom_logo()#51075, #52628

Editor

  • Remove editor type specific filters for 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. editor configuration – #52920
  • Rename should_load_separate_core_block_assets for consistency – #50328
  • Some documentation and test improvements for loading separate assets for core blocks – #50328, #52620, #53180
  • Fix 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. introduced with loading separate block assets – #53180
  • Enqueue script and style assets only for blocks present on the page – #50328, #52620

External Libraries

  • Update the Requests library to version 1.8.0#53101

KSES

  • Allow calc() and var() values to be used in inline CSSCSS Cascading Style Sheets.#46197, #46498
  • Remove duplicate object-position property – #52991

Login, Users

  • Use a monospace font to display passwords – #40275

Network and Sites

  • Display site icons in the My Sites menu – #46657

Plugins

  • Add support for Update URI 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.#14179, #23318, #32101

Post Thumbnails

  • Display the “Remove featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.” link in the classic editor in red color – #45198

Posts, Post Types

  • Enable revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. for the wp_block post type – #53072

Site Health

  • Remove status text indentation – #52966
  • Improve the appearance of Site Health Status dashboard widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.#52966

Toolbar

  • Reset box-shadow on links – #40594

Props

Thanks to the 90 (!) people who contributed to WordPress Core on Trac last week:

@SergeyBiryukov (4), @dd32 (3), @desrosj (3), @rmccue (3), @audrasjb (3), @aristath (3), @jorbin (3), @sabernhardt (3), @joyously (3), @hareesh-pillai (2), @hedgefield (2), @schlessera (2), @mukesh27 (2), @hellofromTonya (2), @utz119 (1), @ryno267 (1), @benoitchantre (1), @chriscct7 (1), @monikarao (1), @robdxw (1), @florianbrinkmann (1), @kraftbj (1), @dougwollison (1), @gregorlove (1), @sasagar (1), @lev0 (1), @youknowriad (1), @TimothyBJacobs (1), @mcsf (1), @westonruter (1), @aduth (1), @johnjamesjacoby (1), @matveb (1), @joemcgill (1), @Clorith (1), @mblach (1), @afercia (1), @paulschreiber (1), @burhandodhy (1), @aspexi (1), @netweb (1), @justinahinon (1), @soulseekah (1), @ozh (1), @travisnorthcutt (1), @carlalexander (1), @skithund (1), @jrf (1), @GaryJ (1), @JeroenReumkens (1), @nhuja (1), @sean212 (1), @filosofo (1), @infolu (1), @dingdang (1), @grapplerulrich (1), @williampatton (1), @earnjam (1), @design_dolphin (1), @mweichert (1), @jamesbonham (1), @olafklejnstrupjensen (1), @displaynone (1), @poena (1), @DavidAnderson (1), @DrewAPicture (1), @markjaquith (1), @meloniq (1), @markparnell (1), @apedog (1), @mikejolley (1), @Ipstenu (1), @juliobox (1), @Rarst (1), @Otto42 (1), @gMagicScott (1), @mordauk (1), @knutsp (1), @TJNowell (1), @jb510 (1), @GeekStreetWP (1), @crazycoders (1), @miqrogroove (1), @afragen (1), @jdgrimes (1), @damonganto (1), @khromov (1), @georgestephanis (1), @joostdevalk (1), and @nvartolomei (1).

Congrats and welcome to our 18 (!!) new contributors of the week! @ryno267, @gregorlove, @sasagar, @lev0, @mblach, @aspexi, @carlalexander, @JeroenReumkens, @sean212, @infolu, @dingdang, @design_dolphin, @jamesbonham, @olafklejnstrupjensen, @displaynone, @gMagicScott, @GeekStreetWP, and @damonganto ♥️

Core committers: @sergeybiryukov (11), @desrosj (4), @gziolo (4), @jorbin (3), @davidbaumwald (2), @ryelle (2), and @clorith (1).

#5-8, #week-in-core

Introducing the WordPress CSS Audit Tool

The CSSCSS Cascading Style Sheets. Audit Tool generates an HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. representation of audit data. View it live.

What it is

An automated tool for generating reports on the WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSS files. The reports are made up of one or more audits, each of which provides statistical information on a particular aspect of the CSS, for example “Top 10 selectors by length” and “Number of unique colors”. 

The CSS Audit tool is here on 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 by the repository owner. https://github.com/: https://github.com/wordpress/css-audit. It can be installed locally to generate reports on any collection of CSS files.

The online repo tracks commits to wp-adminadmin (and super admin) CSS each day, regenerating the report if anything has changed. The most recent report can be seen at https://wordpress.github.io/css-audit/public/wp-admin

Why we made it

There are many possibilities for reducing complexity in the wp-admin CSS codebase. The CSS Audit tool provides a big-picture view of those areas in need.

Each audit generally addresses a particular aspect where improvements could be made, for example “Number of times `!important` is used” and “Top 10 selectors with the highest specificity” allowing the health of the CSS code-base to be tracked over time. 

Audits can also expose CSS values which deviate from standards established by design, a feature used recently to limit core CSS color values to the official WordPress core color palette. The result was a >50% reduction in the number of individually defined colors!

This improvement was directly informed by the results of the CSS Audit. The same approach can be used to reduce complexity in other CSS rules, for example font-size which currently has 404 unique values specified.

Getting complexity under control and minimizing redundancy will pave the way for streamlining  and modernizing the CSS architecture, for example: using custom properties for theming.

How it works

The CSS Audit tool is a command line Node.js tool. Internally it uses PostCSS to analyze a set of CSS files and output the results in a user-configured format.

Reports can be generated as human-friendly HTML, machine-friendly 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., or tables printed to the command line output. 

For full instructions see the README file.


Thanks to @ryelle, @danfarrow, @notlaura, and @isabel_brison for their work on devising and implementing the CSS Audit Tool, and for reviewing and contributing to this post!

#core-css, #css-audit

Editor Chat Agenda: 19 May 2021

Facilitator and notetaker: @paaljoachim

This is the agenda for the weekly editor chat scheduled for Wednesday, May 19, 2021, 04:00 PM GMT+1.

This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

  • 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/ 10.7 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). final release for WordPress 5.8.
  • WordPress 5.8 project board (Which remaining open issues should be included in 5.8?)
  • What’s new in Gutenberg 10.6
  • Help Test the Widgets Editor for WordPress 5.8
  • Monthly Plan for May 2021 and key project updates:
    • Global Styles.
    • 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. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor.
    • Navigation block.
    • Full Site Editing.
    • Mobile
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.
#agenda, #core-editor, #core-editor-agenda, #meeting

Core Editor Meeting 12 May 2021

This post summarizes the latest weekly Editor meeting (agendaslack transcript). This meeting was held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ channel on Wednesday, 12 May 2021, 10:00 AM EDT and was facilitated by @itjusteileen.

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/ Version 10.6

Gutenberg 10.6 was released 12 May and is available for download. Take a look at What’s new in Gutenberg 10.6 for full details.

Monthly Priorities

The monthly post outlining Gutenberg’s priorities for May 2021 is available.

Global Styles —

Full report from @nosolosw Issue 20331

Navigation

@getdave Mostly focused on work to improve consistency and reliability between Nav editor and 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.. Also lots of effort going into improving UXUX User experience by surfacing unsaved changes to users. Would particularly like to draw attention to a proposal to add a @wordpress/menus package in order to share data logic between Nav Editor and Block. Any input here much appreciated.

Widgets Screen

@Andrei has a call out for testing

FSE

@annezazu As a reminder, the sixth call for testing will ship today focused on template editing mode (making some final changes). This is a very high impact test to participate in as we get closer to 5.8. Jump into #fse-outreach-experiment if you’re keen to join in on the fun

Mobile Projects

@chipsynder We shipped: Custom 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. support in block picker, as well as better animation PR 30291

  • Shipping in the next day or so is the work for the Mobile Slash inserter PR 29772
  • We had Some translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. pipeline fixes PR 3423
  • Our in progress projects are:
  • RN upgrade to 0.64.x
  • Editor On Boarding
  • Global Style Support – Colors
  • Reusable blocks
  • Adding search to the block inserter
  • Embed block
  • iOSiOS The operating system used on iPhones and iPads. share extension

We’re also working on:

  • Gallery Block Refactor PR 26823 – Our main hurtle here is investigating a way to prevent data loss for users who have an older Gutenberg version on device but a newer version on their site.

Task Coordination

@mamaduka

  • Finally fixed the issue, which should help us land unsaved changes notification for users.
  • I’m also trying to figure out which endpoint makes more sense to handle menu location assignments. You can see the discussion here, and any feedback is appreciated.
  • also helped with PR reviews and fixed few issues for Widgets Screen.

@paaljoachim

Highlighting:

@vdwijngaert

Could we get some quick eyes on PR 31755 and PR 31754 they should be included in a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. for Gutenberg 10.6.

@joen

Primarily on the nav block and adjacent patterns. Excited to have helped Vicente with a hamburger menu feature that should land very soon. Will help with a few followups after that.

Open Floor

@paaljoachim Need some eyes on Improving multi-entity saving UI method and how to handle the discard option.

#agenda, #core-editor, #core-editor-agenda

What’s new in Gutenberg 10.6? (12 May)

Two weeks have passed since the last 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, which means the time has come for a new version! Gutenberg 10.6 introduces Duotone 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. supports, 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. Pattern suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilitiescapability capability is permission to perform one or more types of task. Checking if a user has a capability is performed by the current_user_can function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability). of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe

Dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.: Loading the template editor inside of an 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. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the 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.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • 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): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • Fix bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. with color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • 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.:
    • Call deprecated 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. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.:
      • Add white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not 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. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of theme.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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen collapsing 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice to 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. block attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponentifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on 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 by the repository owner. https://github.com/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

Kudos to all the contributors that helped with the release! 👏

Special thanks to @priethor and @youknowriad for guiding me through this release!

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

CSS Chat Agenda: May 13, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, May 13, at 5:00 PM EDT. This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

If there’s any topic you’d like to discuss, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
  • Project Updates
    • Color Scheming (#49999)
    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSS deprecation path (#53070)
    • CSS Audit (#49582)
    • Feedback requested on #52429 & #31288
  • Open Floor + CSS Link Share

#agenda, #core-css

Dev chat summary: May 12, 2021

@lukecarbis and @jeffpaul led the 0500 UTC devchat and 2000 UTC devchats, respectively, on this agenda.

Here’s a combined summary from those discussions …

Highlights from blogblog (versus network, site) posts

In short order, the standout posts of the week are:

While the group opened browser tabs and bookmarked those posts, the chat moved on to …

Upcoming releases

A schedule reminder for 5.8: Feature Freeze is coming in 13 days (ed. note: at this writing, twelve) on Tuesday, May 25th. Per the published schedule, that means no commits for new enhancements or feature requests for the last two weeks before BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1. Instead, the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team will focus on bugs during that period.

To that end, @lukecarbis and @chaion07 have published the bug-scrub schedule. If you’d like to add a scrub, you can — whether you’re a developer or not, whether you’re already a contributor or not! And it gets you official props as a Core contributor to 5.8. (Ed. note: You are also free to tailor your scrub to the tickets, issues, and features that matter most to you. It is, quite literally, your scrub.)

There’s also a new(ish) kind of scrub called a testing scrub. If you’d like to get ready to help with those, here’s a handy how-to guide from @boniu91.

@helen reminded the group that 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.-based widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor needs a lot more testing.

Details on the Marketing plans for 5.8 are noted in the Full Site Editing Pre-Merge Overview post, if you’re interested in helping out there please consider attending Marketing meetings which are held every Wednesday at 14:00 UTC.

Components check-in and status updates.

For more details on any change, check the ticketticket Created for both bug reports and feature development on the bug tracker. that makes the commit. You’ll get the all the conversation about the issue, what changed and why, and — of course — the patches and screenshots that took the change from concept to commit, all in one place.

@sergeybiryukov:

  • Ticket #53101 updates the Requests library to version 1.8.0, making it a lot faster to use cURL.
  • Ticket #50105 pulls infinite scrolling out of the Media Library and replaces that feature with a Load More button that the user controls (accessibly!)
  • Also in Media, ticket #35725 brings WebP image-format support to Core.
  • No major news this week on Build/Test Tools, Date/Time, General, 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., or Permalinks.

@audrasjb:

@marybaum checked in on Help/About. There’s no major news right now, but that component gets very busy starting at feature freeze.

Open Floor

@markparnell has a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. on #49278 that’s passing unit tests, looking for review in hopes of landing in 5.8; @peterwilsoncc likes the approach of improving DQ query performance and feels it needs to be an early ticket but unsure if we’re still early in the 5.8 cycle for it to be considered; @lukecarbis noted some dev-feedback from someone experienced with SQL would help

@christos12 raised a concern about removing infinite scroll from the Media Library possibly surprising some users. A brief discussion followed, with @desrosj weighing in on the Load More button and @davidbaumwald noting that he has written a plugin that will let a user restore Infinite Scroll.

In a late-breaking comment on the devchat agenda, @paaljoachim asked the group for recommended resources on WordPress 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. design (not development or information design, but visual design). @jeffpaul suggested the Plugin Handbook; a little later, @megphillips91 recommended this guide to plugin UI in the block editor.

Props to @jeffpaul for reviewing this post.

#5-8, #core-css, #core-media, #dev-chat, #hosting, #mobile, #openverse, #summary

CSS Chat Summary: 06 May 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

Check in on bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub frequency

  • As recent bug scrubs have been low energy we decided to switch them to a monthly basis
  • CSSCSS Cascading Style Sheets. bug scrubs will now run on the first Thursday of each month
  • @lukecarbis added the scrub to this bug scrub schedule for 5.8

Project updates

CSS Audit (#49582)

  • The CSS Audit v1.0 project is effectively finished! We briefly discussed some ideas for future features including adding a parameter to specify different configs, and storing weekly 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. reports for historical analysis
  • Good progress has been made on the draft Make post

Color Scheming (#49999)

CSS deprecation path (#53070)

  • @ryelle brought up a deprecation example from current CSS where a class name has changed and the old class name has been marked as /* deprecated */. She wondered how this would fit into deprecated.css without requiring duplication of lots of CSS

Open floor / CSS link share

Thanks everyone!

#core-css, #summary

Help Test the Widgets Editor for WordPress 5.8

Remember 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. based Widgets Editor? In case you missed it, this new feature had both a previous call for testing and a merge proposal ahead of WordPress 5.6. After months of hard work, it’s back and better than ever! For a quick refresher, the block based Widgets Editor is an upgrade to the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas provided by WordPress through themes, that enables users to add blocks right next to widgets to their headers, footers, sidebars and other widget areas.

Help test this feature

This is a call for testing for the new block based Widgets Editor. Please report your findings on 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 by the repository owner. https://github.com/ in the Gutenberg repository as issues or in the comments below. If you have triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. access, labeling any issue with [Feature] Widgets Screen or [Feature] Widgets Customizer,  depending on the issue, would be very helpful. Alternatively, you can simply include “[Widgets Screen]” in the title to help those who can set the labels appropriately. Check out the instructions below for more detailed information.

What’s new?

The most important addition since the last call for testing is that the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. now supports editing blocks and widgets in widget areas with live preview. Compared to the first iteration of this project, where the widget areas in the Customizer were read only, now you can add widgets and blocks with live preview, scheduling and sharing right from the Customizer.

The main benefit of upgrading the widgets functionality to blocks comes from the ability to directly edit widgets using the familiar block interaction that you use when editing a page or post on your site.  Being able to use blocks opens up tons of new creative possibilities, from no-code mini layouts to tapping into the vast library of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 3rd party blocks to create content. 

For developers, unlocking blocks in widget areas also offers a core path to upgrade widgets to blocks and get ready for the future. With more aspects of content creation and management moving to blocks, including the upcoming block based theme format, this also helps bring consistency to the user experience. 

Is it ready?

This is currently betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. software and it has a host of known bugs. But it is also intended to be merged into core for the 1st beta of WordPress 5.8. As a merge candidate the goal of the testing is not to discover a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. free feature, but to observe if there are blockers for merging. During WordPress 5.8 beta releases, the bug list will be prioritized ahead of the release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta)..

What to test:

Please keep in mind that it’s recommended that you test this feature on a development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. rather than a production siteProduction Site A production site is a live site online meant to be viewed by your visitors, as opposed to a site that is staged for development or testing.. For information about how to set up a development site, please refer to the Setting Up a Development Environment documentation.

Test using the WordPress Beta Tester Plugin and set it to:

– Update channel to “Bleeding edgebleeding edge The latest revision of the software, generally in development and often unstable. Also known as trunk.

– Stream options to “Beta/RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). only”

You can install the WordPress 5.8 Beta 1 in two ways:

  • Install and activate the WordPress Beta Tester 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. (select the “Bleeding edge” channel and “Beta/RC Only” stream).
  • Direct download the beta version here (zip).

For users:

Migrating from classic widgets

  1. Be on the latest version of WordPress (5.7.1)
  2. Go to Appearance > Themes
  3. Go to Plugins > Add new
    • Install and activate a plugin that provides widgets
  4. Go to Appearance > Widgets
    • Add some core widgets. For example, Search or Recent Posts.
    • Add some 3rd party widgets (aka widgets provided by a plugin)
  5. Go to Plugins > Add new
    • Install and activate the latest version of the 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/ plugin
  6. Go to Gutenberg > Experiments
    • Check “Enable Widgets screen in Customizer”
  7. Go to Appearance > Widgets
    • Are all the widgets you added there?
    • Can you customize their settings?
    • Can you drag and drop widgets to different places?
  8. Go to Appearance > Customize > Widgets
    • Are all the widgets you added there?
    • Can you customize their settings?

Adding blocks next to widgets

  1. Be on the latest version of WordPress (5.7.1)
  2. Go to Appearance > Themes
    • Install and activate a theme that has support for sidebars
  3. Go to Appearance > Widgets
    • Add some core widgets.  For example, Search or Recent Posts.
  4. Go to Plugins > Add new
    • Install and activate the latest version of the Gutenberg plugin
  5. Go to Gutenberg > Experiments
    • Check “Enable Widgets screen in Customizer”
  6. Go to Appearance > Widgets
    • Click the inserter plus button in the top bar
    • Add some blocks
      • Do they work?
    • Save
      • Are they published on the front end next to the widgets?
  7. Go to Appearance > Customize > Widgets
    • Click the inserter plus button in the top bar
    • Add some blocks
      • Do they work?
    • Edit some of the block contents
      • Does the preview update accordingly?
    • Edit some of the classic widget’s contents
      • Does the preview update accordingly?
    • Publish
      • Are they published on the front end next to the widgets?

Opting out of the new widgets screen

  1. Be on the latest version of WordPress (5.7.1)
  2. Go to Plugins > Add new
  3. Go to Appearance > Widgets
    • Is the classic interface present?
  4. Go to Appearance > Customize > Widgets
    • Is the classic interface present?

What to notice:

  • Did it crash?
  • If it worked, did the editor perform as expected?
  • Was it intuitive for you to add blocks and third party widgets (ie from other plugins)?
  • Were you able to properly customize widgets as you wanted? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

For developers:

Make sure to go through the general “How to” documentation available in the Gutenberg codebase for specific instructions. 

Test upgrading classic widgets to blocks.

  • The new block based widget editor introduces a new 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. `widgets_to_exclude_from_legacy_widget_block`. It is used to hide widgets that have block equivalents.
  • We now have a documented way to upgrade widgets to blocks via block transforms.The transform may be added to the legacy widget via typical block extending. This in turn enables users to migrate widgets they already have configured to new block equivalents  provided by plugins.

Test enabling and disabling theme support

  • Test widget areas provided by themes, particularly “dynamic” sidebars, which appear depending on other factors.

Test 3rd party widgets compatibility.

  • The most common case is for widgets that work in the Customizer but not in the stand alone widgets editor. Previously, developers opted to present the widget UXUX User experience differently in the widgets screen compared to the Customizer. However, the best practices are preserved in the Customizer.
  • We’re having an audit of extension points and how well supported they are. Please add missing things that you may find.

Considerations around Opt-in vs Opt-out

Because there is not enough data and stories, a decision has not yet been made on whether the block based Widgets Editor will be opt-out by default or an option for each theme to opt into. Currently, we’re providing the following options for opting out:

  • The Classic Widgets plugin which allows users to easily opt out of the new blocks in widget areas feature and see the classic widget editor only.
  • The `widgets-block-editor` theme supports which allows theme authors to opt out of supporting blocks in widget areas. This also reverts WordPress adminadmin (and super admin) to the classic widget editor.
  • The `gutenberg_use_widgets_block_editor` filter which allows administrators to opt out of supporting blocks in widget areas in cases where this is required. Like the two above, this also reverts WordPress admin to the classic widget editor.

A recent discussion in the Core Editor chat is a good summary on why we’re opting out via a plugin for users. Briefly, it seems to be the cleanest and least prone to maintenance requirements mode possible, versus settings in other plugins or user settings.

This is a difficult decision to make since supporting blocks in widget areas is an important part of the roadmap of WordPress and it will eventually be the default experience. Today, it’s important to determine the impact and significance of the current work on backwards compatibility.

Thank you!

Thank you for helping with testing the new Widgets Editor! Since it is one of the major focuses of WordPress 5.8 any help in this early stage is immensely valuable as it will help determine how viable it is for merging.

Later updates

Monday, May 17th – updated the instruction steps for the user section and added a step to enable the Customizer widgets block editor. This is essential to test the most important addition, adding blocks to widget areas using the Customizer.

Monday, June 14th – updated the instruction steps with newer recommended versions for testing (WordPress 5.8 Beta 1 and Gutenberg Plugin 10.8). Thanks to all the testers and all the feedback below. It was instrumental in advancing the state of the editor, and it’s now better than ever.

Friday, June 25th – updated the instructions to test using the WordPress Beta Tester Plugin.

#5-8, #call-for-testing, #customizer, #feature-widgets-block-editor, #gutenberg, #testing, #widgets