IE 11 Support Phase Out Plan

After recent research and discussion, a decision to drop Internet Explorer 11 support in WordPress was reached. However, the timing for this change was undetermined when the summary post was published.

After discussing with several contributors, the decision has been made to move ahead with officially removing IE11 support in WordPress 5.8.

Note: This change will only affect WordPress and it’s built-in features. For your site visitors, any 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 or theme you may be using, which was made with support for IE11 in mind, should still look and feel as if nothing changed.

Phase-Out Plan

IE11 support will be removed in two phases.

Phase 1: WordPress 5.8

For 5.8, the following steps will be taken:

  • Update the `browserslist` for the `package.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.` file 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.`.
  • Run the build process to update generated CSSCSS Cascading Style Sheets..
  • Update the `browserslist` in 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/ repository to remove IE11 support from built CSS and JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors..

This will effectively remove IE11 support in 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. editor and all generated CSS files used within the adminadmin (and super admin).

A TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. will be opened to discuss whether IE11 specific polyfills should continue to be enqueued in WordPress 5.8. Even if polyfills are not loaded, they will remain bundled with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in case plugins or themes wish to continue loading them.

New features added in 5.8 or later do not need to be tested on or support IE11.

Phase 2: WordPress 5.9 and beyond

Because most of the code in WordPress Core targeting specific browsers maintained manually (not compiled or run through a build process), individual tickets should be created to evaluate removing each instance of IE11 specific code.

These tickets will not be considered in 5.8 unless a committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. or release squad member feels it is a blockerblocker A bug which is so severe that it blocks a release. for full site editing and agrees to own the ticket.

Props @jorbin, @chanthaboune, @Clorith, @youknowriad, and @davidbaumwald for discussing the above plan and reviewing before being published.

#5-8

Standardization of WP-Admin colors in WordPress 5.7

This is the first part of a larger project in cleaning up WordPress adminadmin (and super admin) CSSCSS Cascading Style Sheets.. In WordPress 5.7, all colors used in the CSS is collapsed to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white.

This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.

The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step. Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. Themes and 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 developers are encouraged to use this new color palette, for better consistency between their products and WordPress Core.

Plugin authors that use the existing CSS Core classes should be all set up with the new color palette, as every Core class was updated accordingly.

The full color palette is also available on this CodePen, courtesy of @ryelle.

A PostCSS tool to help plugin authors to switch to the new WP-Admin color palette

@ryelle also published a PostCSS tool which can be used on any CSS file to either replace or create a second CSS file with the 5.7 colors – this is essentially the same process that ran over core, so it should make the same matches in plugin CSS.

This tool uses PostCSS and postcss-palettize-colors to automatically convert any colors in your CSS to the new color palette in WordPress admin. It uses a basic color difference algorithm to convert any color to the closest color in the palette.

To use it, follow the usage guide from PostCSS for your setup. Follow the postcss.config.js in this gist to add the postcss-palettize-colors to your process. Make sure to define the palette colors using paletteOptions.

If you’re not using PostCSS or a build process yet, you can use this tool via the following steps:

  1. Install the dependencies:
    npm i postcss postcss-cli https://github.com/ryelle/postcss-palettize-colors.git
  2. Configure PostCSS – download the postcss.config.js in this gist. This includes the full color palette for wp-admin.
  3. Run PostCSS via command line:
    npx postcss style.css --replace
  4. Swap out style.css for the path to your CSS file. Note, this will overwrite your CSS file with the new color values.

Alternately, if you need to match colors in both 5.7 and older WordPress: you could use this command to create a separate 5.7-specific stylesheet, and check the version of WordPress to enqueue the correct CSS for each version:

npx postcss style.css -o style-57.css

See also postcss-cli for more configuration options.

Now that the color palette has been reduced, the next step will be to switch to CSS variables for a better maintainability of WordPress Admin CSS colors.


For reference, see ticketticket Created for both bug reports and feature development on the bug tracker. #49999 and the initial proposal published on Make/Core.

Props @ryelle for proofreading.

#5-7, #dev-notes

Dev Chat Agenda for May 12, 2021

Here is the agenda for this week’s developer meetings to occur at the following times: May 12, 2021 at 5:00 UTC and May 12, 2021 at 20:00 UTC.

Blogblog (versus network, site) Post Highlights

5.8 Schedule Review

  • Bug Scrub schedule and preparing for test scrubs
  • Marketing schedule (based on earlier plans)
  • Feature Freeze in 13 days on Tuesday, May 25th
  • 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 in 27 days on Tuesday, June 8th
  • RC 1 in 48 days on Tuesday, June 29th
  • 5.8 release in 69 days on Tuesday, July 20th

Components check-in and status updates

  • 5.8 plans and help needed
  • Check-in with each component for status updates.
  • Poll for components that need assistance.

Open Floor

Do you have something to propose for the agenda, or a specific item relevant to the usual agenda items above?

Please leave a comment, and say whether or not you’ll be in the chat, so the group can either give you the floor or bring up your topic for you accordingly.

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

Props @desrosj for peer review.

#5-8, #agenda, #dev-chat

Gallery Block Update – Call for Testing

A refactor of the core Gallery Block has been worked on over the last couple of months which will move it from a list of image tags within 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. content to nested Image blocks using InnerBlocks. The hope is this change will make things easier for both users and developers.

Why the change?

The fundamental reason for this change is to make images behave the same in the editor whether they are used as single blocks or as part of a gallery. For example, for users, this update means that Gallery images would automatically have the ability to add custom links for each image! It’s also easy now to replace a single image directly. Other benefits include being able to use the standard move, drag and drop, copy, duplicate, and remove block functionalities. Keyboard navigation also benefits from the standard block model.

There have been open issues related to this inconsistency for some time:

To get around this inconsistency, 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 developers often have to duplicate all of the Image block functionality in custom Gallery block plugins. Tied to this, plugins that extend the image block haven’t been able to benefit galleries directly. With this change making image behaviour more consistent between stand-alone images and those within the gallery, more custom gallery functionality can be implemented as Block Styles or Block Variations of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Gallery block instead of creating a completely new gallery block.

With each image being a block, server operations are also much more straightforward since you can get the image IDs directly.

In depth testing needed

While the expectation is nothing changes in terms of output for the end-user, this is a pretty major change on a technical level for a very popular block, including a change in the underlying markup to align it with the W3C WAI guidelines on the grouping of images, so it’d be a huge help to gather as much testing feedback as possible.

Accessing the new Gallery Block

To test the new Gallery block, you can either checkout the Gallery refactor PR branch and test in a local dev environment, or you can download the Gallery refactor plugin build and install it on any WordPress test site. Once installed you need to enable the experimental setting ‘Enable the refactored gallery block’:

Only new gallery blocks added after the experimental flag is turned on will be in the new format, all existing galleries will be editable and viewable in the current format. You can manually transform an old format gallery to the new format using the block transform menu and choose the ‘Gallery’ option.

Important note — only run the Gallery refactor experimental feature on test data

Although any existing gallery saved content should be unaffected, if you transform these to the new format, or add new gallery blocks in the new format, these blocks will be broken if the experimental feature is removed …. so don’t run the gallery refactor build against any critical data that you don’t have a backup of.

How can I be sure I am seeing the new gallery block?

When adding a Gallery block with the refactored gallery, selecting an individual image in a gallery should show you the same options as for an individual Image block. Currently, the only settings that will be missing are align and resize as these options break the gallery column layout.

Please note that this experimental feature will not currently work in FSE templates. To see the new gallery block you will need to add the block to a standard post or page. This change is also not ported to native mobile builds yet.

What needs testing?

General testing

Here’s a list of areas of functionality that need testing for your convenience that anyone can help test.

Plugin and theme authors

If you are the author of a plugin or theme that extends or restyles either the Image block or the existing Gallery block you should:

  • Test how running the new Gallery block format affects the display of existing content in the editor or front end.
  • Test your plugin or theme against an existing gallery that has been migrated to the new format.
  • Test with new galleries added with the refactored block.
  • Test how an Image block extensions affect layout, etc. if the Image block is nested within one of the new Gallery blocks.

Where to report issues

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for 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/. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. Please check against the known issues list before reporting.

Expired GitHub and WordPress.org profile connections

A little over one year ago, a feature was rolled out allowing a GitHub account to be connected to a WordPress.org account.

In recent releases, the process of collecting props for non-WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ contributions (namely 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/) has been highly manual and error prone, occasionally resulting in contributors not receiving proper credit. Connecting your WordPress.org and GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ accounts will allow automatic tooling to be built which reduces the burden on release teams to maintain a credit list.

When access is revoked for the “WordPress.org Profiles” application for a GitHub account, this is respected and the WordPress.org and GitHub profiles are unlinked. However, GitHub also expires application connections automatically that have not been used in over a year.

Because WordPress.org respects all access changes for this application, it has resulted in some profiles becoming unlinked. If you had previously connected your accounts, please check that your connection is still valid.

To check, visit your WordPress.org profile (https://profiles.wordpress.org/me/) and verify that your GitHub account is still listed. If you do not see a GitHub account listed, your connection has expired, been revoked, or one was never made.

A screenshot of a WordPress.org profile with the GitHub field outlined.

Going forward, WordPress.org will now check that linked profiles are still up to date, haven’t been deleted, or suspended by GitHub more regularly regularly, and as a result the application connection will not go stale.

Props to @dd32 for investigating and fixing the issue, @cbringmann for proofreading.

#github

CSS Custom Properties Project Update

Based on the discussions in this previous post, a few of us over in #core-css have made some demos and explored the technical details around using custom properties with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as part of the larger goal to implement dark mode in WP-Adminadmin (and super admin), and allow for more sophisticated handling of color schemes (see #49999). The following post will summarize those thoughts and lay out a possible roadmap.

Given the IE11 phase-out plan, fallbacks for custom properties are not needed. If for some reason that changes, there are PostCSS tools for automating fallbacks.

Naming the custom properties – some demos to explore different naming schemes were shared in the core-CSSCSS Cascading Style Sheets. meetings (demo 1, demo 2, and demo 3). The aim is to create a consistent and understandable “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.” for interacting with colors (custom properties won’t be used for typography or layout). One formula for creating names was decided on, --[prefix]--[location]--[property]--[state]. Those tokens will be refined further in future Core CSS meetings. The next meeting is Thursday 21:00 UTC.

How it (could) work

In this example, there are 4 screenshots of possible color schemes – default, light high contrast, dark, and dark high contrast. Custom properties would be used to set the background colors, text colors, link, and button colors so that each theme can set just what is needed. For example, the button’s CSS would look like this:

.button {
    background: var(--wp-admin--button--background);
    color: var(--wp-admin--button--color);
}

Then each theme would set those variables, inheriting from the default.

body {
    --wp-admin--button--background: #2371b1;
    --wp-admin--button--color: #fff;
}

body.is-theme-dark {
    /* No change, the same button is used. */
}

body.is-theme-light-high-contrast {
    /* Inherits the text color, but darkens the button. */
    --wp-admin--button--background: #0b4b78;
}

body.is-theme-dark-high-contrast {
    /* Overrides both background and text. */
    --wp-admin--button--background: #68de7c;
    --wp-admin--button--color: #1d2327;
}

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 authors will also be able to use these colors in their CSS without creating separate rules for each color scheme.

.my-fancy-button {
    background: var(--wp-admin--button--background);
    color: var(--wp-admin--button--color);
}

Specific technical details – like how the schemes are registered & loaded, how to work with the existing properties in 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/, whether there should be a “default dark” for schemes to inherit from, etc – are still in progress. If this sounds interesting to you, please join the conversation in #core-css!

This project will likely also tie into the CSS deprecation discussion in #53070.

Next Steps

This is just a rough outline, and will depend on support and involvement across different teams.

Phase 1 (eta: early 5.9)

  • Start creating custom properties with an --experimental prefix. This will allow for use 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. without committing to forever supporting them.
  • This will need more input from designers and UIUI User interface folks to help identify colors and make sure the naming schemes are coherent in the design system of WordPress.
  • Once some color custom properties have been created, use these for the current core color schemes. Maybe make improvements to the color schemes.

Phase 2 (eta: 6.0)

  • Remove the experimental prefix from the custom properties.
  • Create new color schemes for a dark mode, high contrast dark mode, and high contrast light mode.

+make.wordpress.org/design/

Thanks to @melchoyce for quickly mocking up some possible color schemes, and thanks to @danfarrow, @notlaura, & @joyously for reviewing this post.

#color-schemes

Core Editor Agenda 12 May, 2020

Facilitator: @itsjusteileen

This is the agenda for the weekly editor chat scheduled for Wednesday, May 12, 2021, 02:00PM UTC.

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/..

  • Gutenberg 10.5.4
  • Gutenberg 10.6 due out on 12 May
  • WordPress 5.8
  • What’s New in Gutenberg
  • What’s Next in Gutenberg
  • Full Site Editing Upcoming Schedule
  • 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
  • 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.

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 can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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.

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 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 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 Appearance > Widgets
    • Are all the widgets you added there?
    • Can you customize their settings?
    • Can you drag and drop widgets to different places?
  7. 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 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?
  6. 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.

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

A Week in Core – March 8, 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 March 1st and March 8, 2021.

  • 20 commits
  • 42 contributors
  • 64 tickets created
  • 9 tickets reopened
  • 81 tickets closed

You might have noticed that the activity on Core is still pretty high this week, as we are very close to release WordPress 5.7.

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.

Code changes

Build/Test Tools

  • Ensure the test_php_and_js_shortcode_attribute_regexes_match() test can run when testing using either the src or build directory – #51734
  • Pin SHA versions to the remaining 3rd party actions – #52625
  • Generalize the NPM test workflow – #52658
  • Add path detection when running GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions on pull_request#52667
  • Change the cancel-workflow-action version to a SHA value – #52625
  • Pin the welcome-action to a specific commit SHA – #52625

Bundled Themes

  • Twenty Twenty-One: Make text readable when dark background is selected for the Media & Text 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.#52702
  • Twenty Twenty-One: Correct inner container background color for Cover Blocks – #52676
  • Twenty Fifteen & Twenty Sixteen: Remove extra space around post editor – #52646

Docs

  • Add a @since note to wp_admin_bar_edit_menu() about the “View Post” link on Comments screen for a single post – #42366

Editor

  • Classic Editor: Make sure word count is hidden if JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. is disabled – #52662
  • Block Editor: Fix color support for dynamic blocks – #52709

Help/About

  • Clarify two strings – #52347
  • Clarify a string about lazy-loading iframes – #52347
  • Iterate on the 5.7 About Page – #52693

Roles/Caps

  • Return same result from current_user_can and user_can()#52076

Site Health

  • Do not store HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. request error messages in an option – #52484

Upgrade/Install

  • Display version number on the “Update now” button on WordPress Updates screen – #52513
  • Upgrade/Install: Invalidate OPcache for version.php during update – #36455

XML-RPC

  • Pass an empty array to the xmlrpc_call action in methods that have no arguments – #52524

Props

Thanks to the 42 people who contributed to WordPress Core on Trac last week:

@johnbillion (6), @audrasjb (3), @SergeyBiryukov (3), @paaljoachim (3), @hellofromTonya (3), @desrosj (3), @sabernhardt (2), @peterwilsoncc (2), @davidbaumwald (2), @marybaum (2), @pbiron (2), @flixos90 (1), @tmatsuur (1), @tikifez (1), @lukecarbis (1), @dianeco (1), @mikeschroder (1), @kjellr (1), @sergeybiryukov (1), @cenay (1), @antonlukin (1), @krstarica (1), @stodorovic (1), @francina (1), @clorith (1), @TimothyBlynJacobs (1), @melchoyce (1), @sarahricker (1), @youknowriad (1), @rafhun (1), @nosolosw (1), @mukesh27 (1), @johnjamesjacoby (1), @ryelle (1), @poena (1), @jdy68 (1), @dd32 (1), @alexstine (1), @munyagu (1), @janak007 (1), @afragen (1), and @felipeelia (1).

Please join me to say welcome to our 3 new Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. of the week ♥️
@tikifez, @cenay, and @rafhun.

Core committers: @sergeybiryukov (6), @desrosj (6), @ryelle (4), @johnbillion (1), @peterwilsoncc (1), @noisysocks (1), and @mikeschroder (1).

Please note: it only includes commits with proper props attribution.

#5-7, #week-in-core

Editor Chat Agenda: 28 April 2021

Facilitator and notetaker: @jorgefilipecosta

This is the agenda for the weekly editor chat scheduled for Wednesday, April 28, 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.5 RC release.
  • Full Site Editing Go/No Go: Next steps.
  • IE 11 support phase out plan.
  • Monthly Plan for April 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.
  • 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