Title: widgets – Make WordPress Core --- # Tag Archives: widgets [ ](https://profiles.wordpress.org/noisysocks/) [Robert Anderson](https://profiles.wordpress.org/noisysocks/) 3:01 am _on_ June 29, 2021 Tags: [5.8 ( 99 )](https://make.wordpress.org/core/tag/5-8/), [block-editor ( 131 )](https://make.wordpress.org/core/tag/block-editor/), [dev-notes ( 616 )](https://make.wordpress.org/core/tag/dev-notes/), [feature-widgets-block-editor ( 8 )](https://make.wordpress.org/core/tag/feature-widgets-block-editor/), widgets    # 󠀁[Block-based Widgets Editor in WordPress 5.8](https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/)󠁿 WordPress 5.8 introduces a new 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 to the Widgets screen (Appearance → Widgets) and 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. (Appearance → Customize → Widgets). The new editor allows users to add blocks to their 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 using the familiar block editor interface introduced in WordPress 5.0. This gives users powerful new ways to customise their sites using the rich library of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third party blocks. Existing widgets and third party widgets will continue to work and can be used alongside blocks. ## Opting out of the block-based widgets editor The block-based widgets editor is enabled in WordPress 5.8 by default. There are several ways to restore the classic editor: * A theme author may include `remove_theme_support( 'widgets-block-editor' )`. [Learn more.](https://developer.wordpress.org/block-editor/how-to-guides/widgets/opting-out/#using-remove_theme_support) * A site administrator may use the new `use_widgets_block_editor` filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/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.. [Learn more.](https://developer.wordpress.org/block-editor/how-to-guides/widgets/opting-out/#using-a-filter) * A user may install and activate [the Classic Widgets plugin](https://wordpress.org/plugins/classic-widgets/). ## New Widgets screen The `widgets.php` adminadmin (and super admin) screen (Appearance → Widgets) now loads a block-based widgets editor which exists in the [`@wordpress/edit-widgets` package](https://github.com/WordPress/gutenberg/tree/trunk/packages/edit-widgets). The editor is built using ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) and is similar to the editor used for posts and pages (`@wordpress/edit-post`) and uses many of the same subsystems: ` @wordpress/interface` and `@wordpress/components` for UIUI User interface, `@wordpress/ block-editor` for block editing, `@wordpress/data` and `@wordpress/core-data` for persisting changes, and so on. A new filterable function, `wp_use_widgets_block_editor()`, is used by `widgets. php` to determine whether to load the new block-based editor or the classic editor. The Widgets screen is extendable via block editor APIs such as `registerPlugin`,` registerBlockType`, `registerBlockVariation`, and so on. The Widgets screen uses new 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/](https://developer.wordpress.org/rest-api/) endpoints [which are detailed in a seperate dev note](https://make.wordpress.org/core/2021/06/29/rest-api-changes-in-wordpress-5-8/). ## New Customizer control The Widgets section in the Customizer (Appearance → Customize → Widgets) now loads a new control (`WP_Sidebar_Block_Editor_Control`) which contains an embedded block- based widgets editor that exists in the [`@wordpress/customize-widgets` package](https://github.com/WordPress/gutenberg/tree/trunk/packages/customize-widgets). The editor is built using React and uses `@wordpress/block-editor` and `@wordpress/ components` to implement its block editing interface. It does not use `@wordpress/ data` or `@wordpress/core-data` to persist changes. Instead, the existing [Customizer JavaScript API](https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/) is used. A new filterable function, `wp_use_widgets_block_editor()`, is used by `WP_Customize_Manager` to determine whether or not to log the new block-based editor control or the classic editor control. The block-based widgets editor in the Customizer is extendable via block editor APIs such as `registerBlockType`, `registerBlockVariation`, and so on. ## New block: Legacy Widget Existing widgets and third party widgets can be edited in the block-based widgets editor via the new Legacy Widget block. This block has an identifier of `core/legacy- widget` and exists in the [`@wordpress/widgets` package](https://github.com/WordPress/gutenberg/tree/trunk/packages/widgets/src/blocks/legacy-widget). The Legacy Widget block is compatible with most third party widgets. Broadly speaking, the Legacy Widget block has three states: 1. _Select. _When first inserted, the block displays a list of widgets available to choose from. The list can be customised using the `widget_types_to_hide_from_legacy_widget_block` filter. 2. _Edit._ When selected, the block displays the widget’s control form fields. This is determined by the widget’s `WP_Widget::form()` implementation. 3. _Preview._ When not selected, the block displays a preview of how the widget will look once saved. This is determined by the widget’s `WP_Widget::widget()` implementation. A “No preview available.” message is automatically shown when `widget()` does not output any meaningful HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. [Learn more.](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/#displaying-no-preview-available) The Legacy Widget block is not available in other block editors including the post editor, though [this can be enabled](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/#using-the-legacy-widget-block-in-other-block-editors-advanced) for advanced use cases. ## New widget: Block Blocks added to widget areas are persisted using the same widget storage mechanism added in WordPress 2.8. Under the hood, each block is serialised into HTML and stored in a _block widget_. This is represented by a new `WP_Widget_Block` subclass that extends `WP_Widget`. A block widget is a specialised case of the HTML widget and works very similarly. If blocks are added to a widget area, and then the block-based widgets editor is disabled, the blocks will remain visible on the frontend and in the classic widgets screen. ## Tips to prepare for the new block-based widgets editor ### Use the `widget-added` event to bind event handlers The Legacy Widget block will display a widget’s control form in a way that is very similar to the Customizer and is therefore compatible with most third party widgets. Care must be taken, however, to [always initialise event handlers when the `widget-added` jQuery event is triggered on `document`](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/#compatibility-with-the-legacy-widget-block). ```notranslate ( function ( $ ) { $( document ).on( 'widget-added', function ( $event, $control ) { $control.find( '.change-password' ).on( 'change', function () { var isChecked = $( this ).prop( 'checked' ); $control.find( '.password' ).toggleClass( 'hidden', ! isChecked ); } ); } ); } )( jQuery ); ``` ### Use `block_categories_all` instead of `block_categories` The `block_categories` filter has been deprecated and will only be called in the post and page block editor. 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. developers that wish to support the widgets block editor should use the new `block_categories_all` filter which is called in all editors. See [#52920](https://core.trac.wordpress.org/ticket/52920) for more details. ### Allow migrating from widgets to blocks Many core and third party widgets have a functionally equivalent block. For example, core’s Recent Posts widget is analogous to core’s Latest Posts block. In order to avoid duplicate functionality, is is recommended that plugin authors provide a way for users to convert their existing widgets to any equivalent block. WordPress 5.8 provides a mechanism for doing this using [block transforms](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/): 1. Configure your widget to display its instance in the REST API by setting `show_instance_in_rest` to `true` in `$widget_options`. 2. Add a [block transform](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/) to your block from the `core/legacy-widget` block. 3. Hide your widget from the Legacy Widget block using the `widget_types_to_hide_from_legacy_widget_block` filter. There is a [guide containing more detailed instructions](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/#allowing-migration-to-a-block) in the Block Editor Handbook. ### Don’t use `@wordpress/editor` Many legacy widgets call the `wp.editor.initialize()` 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](https://www.javascript.com/) function to instantiate a TinyMCE editor. If a plugin or block uses the `@wordpress/editor` package and enqueues `wp-editor` as a script dependency, this will re-define the` wp.editor` global, often resulting in a `wp.editor.initialize is undefined` error. ### Don’t use functions like `is_admin()` that won’t work in a REST API request Because the Legacy Widget block makes REST API requests in order to render widgets, admin-only functions like `is_admin()` and `is_plugin_available()` are not available. --- _Written by [@andraganescu](https://profiles.wordpress.org/andraganescu/) and [@noisysocks](https://profiles.wordpress.org/noisysocks/)._ _Thanks to [@talldanwp](https://profiles.wordpress.org/talldanwp/), [@isabel\_brison](https://profiles.wordpress.org/isabel_brison/), [@kevin940726](https://profiles.wordpress.org/kevin940726/), and [@get\_dave](https://profiles.wordpress.org/get_dave/) for reviewing._ [#5-8](https://make.wordpress.org/core/tag/5-8/) [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/) [#feature-widgets-block-editor](https://make.wordpress.org/core/tag/feature-widgets-block-editor/) [#widgets](https://make.wordpress.org/core/tag/widgets/) [#block-editor](https://make.wordpress.org/core/tag/block-editor/) [ ](https://profiles.wordpress.org/andraganescu/) [Andrei Draganescu](https://profiles.wordpress.org/andraganescu/) 10:26 am _on_ May 12, 2021 Tags: [5.8 ( 99 )](https://make.wordpress.org/core/tag/5-8/), [call for testing ( 5 )](https://make.wordpress.org/core/tag/call-for-testing/), [customizer ( 6 )](https://make.wordpress.org/core/tag/customizer/), [feature-widgets-block-editor ( 8 )](https://make.wordpress.org/core/tag/feature-widgets-block-editor/), [gutenberg ( 537 )](https://make.wordpress.org/core/tag/gutenberg/), [testing ( 25 )](https://make.wordpress.org/core/tag/testing/), widgets    # 󠀁[Help Test the Widgets Editor for WordPress 5.8](https://make.wordpress.org/core/2021/05/12/help-test-the-widgets-editor-for-wordpress-5-8/)󠁿 ![](https://lh5.googleusercontent.com/B6YW1JYazSi_bYz8_7iCLsE4KRO9PDaeTz7kioa6OpWNJSYeBamM8atObkUVXD9siqlSofFgkAo3kefKVGk0scUBFiMXdhP0_9vv- oOUvFihfW9FoZEwtloxSfE80krsglIa_FU) 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](https://make.wordpress.org/core/2020/09/30/call-for-testing-the-widgets-screen-in-gutenberg-9-1/) and a [merge proposal](https://core.trac.wordpress.org/ticket/51506) 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/](https://github.com/) in the [Gutenberg repository](http://github.com/wordpress/gutenberg) 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](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BFeature%5D+Widgets+Screen%22) or [[Feature] Widgets Customizer, ](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BFeature%5D+Widgets+Customizer%22) 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? ![](https://lh5.googleusercontent.com/0w0gYs1hckAcKewh8-xmwSruORkpSQExKPdpybRs8fhoIKsMvqOnT3nM79kwdC- wEzcK3sAK0MUcFrOkCTWs76ORGtWkOdHVvLEGYbDwqQciFxuquG63KhlaBciP812zt7JkRwA) 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](https://github.com/wordPress/gutenberg/projects/27). But it is also intended to be merged into core for the 1st beta of [WordPress 5.8](https://make.wordpress.org/core/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)](https://make.wordpress.org/core/tag/widgets/?output_format=md#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.](https://developer.wordpress.org/themes/getting-started/setting-up-a-development-environment/) Test using the [WordPress Beta Tester Plugin](https://wordpress.org/plugins/wordpress-beta-tester/) 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](https://make.wordpress.org/core/tag/widgets/?output_format=md#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)](https://make.wordpress.org/core/tag/widgets/?output_format=md#alpha-beta). only” You can install the WordPress 5.8 Beta 1 in two ways: * Install and activate the [WordPress Beta Tester](https://wordpress.org/plugins/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/](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)](https://wordpress.org/wordpress-5.8-beta1.zip). #### **For users:** **Migrating from classic widgets** 1. Be on the latest version of WordPress (5.7.1) 2. Go to Appearance > Themes 3. * [Install and activate a theme that has support for sidebars](https://wordpress.org/themes/tags/left-sidebar+right-sidebar+footer-widgets/)( e.g. TwentyTwenty). 4. Go to Plugins > Add new 5. * Install and activate a plugin that provides widgets 6. Go to Appearance > Widgets 7. * Add some core widgets. For example, Search or Recent Posts. * Add some 3rd party widgets (aka widgets provided by a plugin) 8. Go to Plugins > Add new 9. * 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/](https://wordpress.org/gutenberg/) plugin 10. Go to Gutenberg > Experiments 11. * Check “Enable Widgets screen in Customizer” 12. Go to Appearance > Widgets 13. * Are all the widgets you added there? * Can you customize their settings? * Can you drag and drop widgets to different places? 14. Go to Appearance > Customize > Widgets 15. * 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 3. * Install and activate a theme that has support for sidebars 4. Go to Appearance > Widgets 5. * Add some core widgets.  For example, Search or Recent Posts. 6. Go to Plugins > Add new 7. * Install and activate the latest version of the Gutenberg plugin 8. Go to Gutenberg > Experiments 9. * Check “Enable Widgets screen in Customizer” 10. Go to Appearance > Widgets 11. * 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? 12. Go to Appearance > Customize > Widgets 13. * 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. * Install and activate the Gutenberg plugin * Install and activate the [Classic Widgets plugin](https://wordpress.org/plugins/classic-widgets/) 4. Go to Appearance > Widgets 5. * Is the classic interface present? 6. Go to Appearance > Customize > Widgets 7. * 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](https://github.com/WordPress/gutenberg/tree/trunk/docs/how-to-guides/widgets) 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](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](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/widgets/legacy-widget-block.md#allowing-migration-to-a-block) 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](https://github.com/WordPress/gutenberg/issues/31126) 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](https://wordpress.org/plugins/classic-widgets/) 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](https://make.wordpress.org/core/2021/05/06/editor-chat-summary-5th-may-2021/) 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](https://wordpress.org/wordpress-5.8-beta1.zip) and [Gutenberg Plugin 10.8](https://github.com/WordPress/gutenberg/releases/tag/v10.6.0)). 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](https://wordpress.org/plugins/wordpress-beta-tester/). [#5-8](https://make.wordpress.org/core/tag/5-8/), [#call-for-testing](https://make.wordpress.org/core/tag/call-for-testing/), [#customizer](https://make.wordpress.org/core/tag/customizer/), [#feature-widgets-block-editor](https://make.wordpress.org/core/tag/feature-widgets-block-editor/), [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#testing](https://make.wordpress.org/core/tag/testing/), [#widgets](https://make.wordpress.org/core/tag/widgets/) [ ](https://profiles.wordpress.org/annezazu/) [annezazu](https://profiles.wordpress.org/annezazu/) 5:29 pm _on_ September 30, 2020 Tags: [5.6 ( 85 )](https://make.wordpress.org/core/tag/5-6/), [core-editor ( 745 )](https://make.wordpress.org/core/tag/core-editor/), widgets # 󠀁[Call for Testing the Widgets Screen in Gutenberg 9.1](https://make.wordpress.org/core/2020/09/30/call-for-testing-the-widgets-screen-in-gutenberg-9-1/)󠁿 _Thank you to [@andraganescu](https://profiles.wordpress.org/andraganescu/) and [@mapk](https://profiles.wordpress.org/mapk/) who collaborated with me on this post._ ## Introducing the Widgets Screen After 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/](https://wordpress.org/gutenberg/) 8.9 release moved the new 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 Screen out of experimental status, Gutenberg 9.1 released today includes design updates that now put the project in a great spot for a call for testing. This new functionality replaces the previous adminadmin ( and super admin) `Appearance > Widgets` screen. ![](https://make.wordpress.org/core/files/2020/09/widget-editor-1024x687.png) Image showing the layout of the new Widgets Screen. The new Widgets Screen both replicates the functionalities of the previous screen and unlocks the ability to add blocks to 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 (also called sidebars) in any theme that supports this new screen. ![](https://make.wordpress.org/core/files/2020/09/widgets-in-inserter.png) Image showing the Inserter in the context of the new Widgets Screen. ## Help test this feature This is a call for testing for this new feature. 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/](https://github.com/) in the [Gutenberg repository](http://github.com/wordpress/gutenberg) 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` 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. Finally, testing should cover all the features you’d expect from the previous editor, as the new one should offer “feature parity”, meaning all the things previously available should still be available. Of note, it would be particularly helpful when testing to focus on the feature of adding blocks alongside classic widgets and to focus on any backward incompatibility issues that the block editor might introduce in relation to using widgets in themes. ## Testing Flow Here is a basic flow for testing: 1. Have a site using WordPress 5.5. 2. Make sure you use a theme that supports widget areas (e.g. TwentyTwenty). 3. Go to the website’s admin. 4. Install and activate the Gutenberg 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.. If you already have it installed, make sure you are using at least Gutenberg 9.1. 5. Go to Appearance > Widgets. 6. Notice that it visually resembles the Block Editor now. 7. If you have a 3rd party widget installed, search for it in the Block Library and add it. 8. Adjust any required settings and Preview your widget. 9. Now drag that Widget into another Widget Area on your screen. 10. Go back to the first Widget Area and add an Image block. 11. Below the Image block add a Latest Posts block. 12. Save your changes and view them on the frontend. 13. Go back to the Widget screen and drag the Image block into the “Inactive Widgets” Area. 14. Save and check out the frontend of the website. 15. Share your experience in the comments below or [in GitHub directly](https://github.com/WordPress/gutenberg/issues). 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)? * Did it work using Keyboard only? * Did it work using a screen reader? ## Backward compatibility testing The best way to test for backward compatibility issues is to install plugins that provide widgets and try to add them to widget areas using the new Widgets Screen. If you already have a website using widgets and you use the Gutenberg plugin, the widgets you have set up should just appear in the new editor. Outside of testing what you commonly install, try popular plugins that provide widgets and see if: * The plugin widget can be added to any widget area. * The plugin widget can be set up and customized in the new Widget Screen. * The plugin widget renders well on the website’s frontend. The new Widgets Screen is expected to introduce some backward incompatibility, mainly because the block based editor does not contain the same HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. as the previous screen. We do aim to support all of the previous screen’s 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., filters and actions, in both the admin and the frontend, as these are the correct extension points for WordPress. ## Extendability testing The new Widgets Screen should prefer blocks over corresponding widgets. That means that if a block is registered by a plugin and it covers the exact same role that a widget currently has, the developer of the block can use the new `widgets_to_exclude_from_legacy_widget_block` filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/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. to add the widget they replaced with the new block to an exclusion list. All the widgets that have block equivalents will not be available to use through the LegacyWidget block. Testing extendability should not focus solely on previous available hooks and filters but also imagining new points of extensibility in the new block based Widgets Screen. ## Disabling the new Widgets Screen Users of the plugin who do not want to test the new Widgets Screen or who require the old screen, can use a simple filter to disable the new Widgets Screen. Just place this in [your theme’s](https://developer.wordpress.org/themes/basics/theme-functions/)` functions.php` file: ```wp-block-code add_filter( 'gutenberg_use_widgets_block_editor', '__return_false', 100 ); ``` ## Thank you! Thank you for helping with testing the new Widgets Screen! Since it is one of the major focuses of WordPress 5.6 any help in this early stage is immensely valuable. If you would like to suggest improvements to this call for testing, leave them in the comments! [#5-6](https://make.wordpress.org/core/tag/5-6/), [#core-editor](https://make.wordpress.org/core/tag/core-editor/), [#widgets](https://make.wordpress.org/core/tag/widgets/) [ ](https://profiles.wordpress.org/audrasjb/) [Jb Audras](https://profiles.wordpress.org/audrasjb/) 4:28 pm _on_ July 9, 2020 Tags: [5.5 ( 87 )](https://make.wordpress.org/core/tag/5-5/), [accessibility ( 57 )](https://make.wordpress.org/core/tag/accessibility/), [dev-notes ( 616 )](https://make.wordpress.org/core/tag/dev-notes/), [HTML5 ( 4 )](https://make.wordpress.org/core/tag/html5/), widgets    # 󠀁[Accessibility improvements to widgets outputting lists of links in 5.5](https://make.wordpress.org/core/2020/07/09/accessibility-improvements-to-widgets-outputting-lists-of-links-in-5-5/)󠁿 When lists of links are displayed on a page for navigational purpose, it can become difficult for users utilizing assistive technologies to navigate between these lists while maintaining an understanding of the purpose of the links. The `