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.
  • 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. 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.
  • A user may install and activate the Classic Widgets plugin.

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.

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/. 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/. endpoints which are detailed in a seperate dev note.

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.

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

The Legacy Widget block is not available in other block editors including the post editor, though this can be enabled 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.

( function ( $ ) {
    $( document ).on( 'widget-added', function ( $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/ 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 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:

  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 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 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/. 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 and @noisysocks.
Thanks to @talldanwp, @isabel_brison, @kevin940726, and @get_dave for reviewing.

#5-8 #dev-notes #feature-widgets-block-editor #widgets #block-editor

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.

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

Bringing the power of blocks to Widgets

With many existing WordPress sites and themes not yet able to take advantage of Full Site Editing, work is underway to bring the power of blocks when adding, editing, and managing widgets on your site. This is being done to help both bring benefits sooner rather than later to more parts of the site building process for users and to pave the path towards a future full site editing first experience. You can think of these changes as an upgrade of what’s currently possible. For example:

  • With blocks, 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 will now allow users to create layouts in sidebars, headers and footers, in a way that hasn’t been possible before with columns, separators, spacers, etc.
  • By supporting blocks, widget areas will also support visual rich text editing by default, without the need to edit HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. textareas or embed HTML editors.
  • 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 widget areas allow users to edit their theme’s template content in an inline and unified experience, removing the need to keep an abstract mental model of mapping boxes to front end results.
  • Many complex widgets which were based on shortcodes are available as blocks (for instance form widgets), and visually editing them is a lot more fluid and intuitive than the esoteric value hunting of shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. editing.
  • The new block based widget editing experience will have a smooth transition process that will allow developers to replace their widgets with blocks that have similar functionality.
  • Last, but not least, as part of WordPress’ efforts to maintain compatibility with existing themes, content, and workflows, blocks within widget areas will be fully editable from 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. as traditional widgets currently are.

To get more visual, here are two ideas for block powered Widgets sections to bring the above to life:

While this is a stepping stone, it’s one that will ultimately offer an improved experience overall with more modern and expanded functionality thanks to the years of work put into creating the block editor. 

To make sure that users can experience the full power of blocks in Widgets, we need to build more blocks for our Widgets! Building a post using blocks is inherently different than setting up your Widgets screen using blocks, and this is a great chance for our community of developers to to test out working in this area. To give feedback, check out this call for testing and share your feedback directly 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/ here. To help with the development process or to follow the project more closely, you’re welcome to participate in #feature-widgets-block-editor in 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/.. Finally, join the fun and check out the many resources below for building blocks:

  • Block Creation tutorial that teaches you how to write a block 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.
  • Block Submission tutorial that gives some tips and suggestions for ensuring your block is ready for the Block Directory.
  • Learn WordPress workshop on Intro to 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/ Block Development
  • Block Checker tool which will help you discover any issues that might prevent your plugin from working.

#core-editor, #feature-widgets-block-editor, #full-site-editing

What’s next in Gutenberg? (February 2021)

This is a monthly update containing the high-level items that 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/ contributors are focusing on for February. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so.

How to follow along with Gutenberg: 

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts and a Site Editing Milestone overview issue that breaks down the upcoming work into more concrete next steps. 

Preparations for WordPress 5.7

This release will include versions 9.3 to 9.9 of Gutenberg! The WordPress 5.7 Must Haves project board includes issues that need attention in preparation for the WordPress 5.7 release. Many contributors will be spending the month of February working on bugs and regressions to be fixed for inclusion in WordPress 5.7. As a reminder from this originally planning post, these are the main focuses: 

  • Update WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to include current releases of 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/ or can be cost-based plugin from a third-party.
  • Gutenberg: ship additional blocks, refine the UIUI User interface, add tools for themes and design, and continue working on 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. screen.
  • Continue work on auto-updates and jQuery.

Finally, a number of issues have been gathered in this issue for Dev Notes (more information on these notes here). Dev notesdev 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 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. are typically published along with the first Release Candidate which is currently scheduled for February 23rd, 2021

Global Styles

Global Styles refers to the system that defines and manages global aesthetics, allowing overall site styles, theme styles, and blocks to work well together. Currently, the focus remains on tightening up and fixing the flows, with the goal of preparing a V1 that can land as a core 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. early in the 5.7 cycle:

Of note, the parts of Global Styles that will land in 5.7 will solely concern the 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. structure and won’t impact users.

Follow along:

You can follow the progress for this overall system in this overview issue and by reviewing the Global Styles label

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 Widget Editor

Work on the Block-based widget editor (Widgets Screen) is a continued focus for the month ahead. The purpose of this effort is to bring the flexibility of block-based editing to the 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. screens. You can find more information about the current work in progress in this exploratory issue for bringing blocks to the customizer and this summary issue for overall items for a block based widget editor experience.  

Follow along:

You can follow the progress of this work on this project board and you can join #feature-widgets-block-editor in 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/ 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/. for future widget screen focused meetings.

Full Site Editing

As with the prior months, work on this major focus for phase 2 is ongoing and is expected to continue as a big picture goal for 2021. Work this month will include the following focus areas:

Milestone 1 – Site Editing Infrastructure and UI

Milestone 5 – Query Block 

  • Query Block toolbar controls 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. to make it easier to show the content you want.
  • Exploring the idea of a Query Block builder UI to scale the experience for advanced users. 

Milestone 6 – Navigation Block

Work on the Navigation Block is an ongoing effort and focus for February. An overview of the work in progress can be found in the Navigation Block tracking issue.

We’re still watching the Theme Experiments repo to see how theme developers are building block-based themes. Please continue to share there and know we appreciate it.

Follow along:

You can follow the progress of this project with this overview issue showing key milestones for site editing. For each major milestone, there are related issues you can follow if you want a more granular look at each next step (example from Query Block).

As a reminder, if you’re interested in being a part of testing Full Site Editing, check out the experimental outreach program to learn more

Areas to be aware of:

Block & Plugin Developers

Thanks to collaboration between @jessplease and @gziolo (and others!), a new package was created in this PR to make it even easier for developers wanting to develop their own third-party templates for the create-block package. You can read more about this addition on the @wordpress/create-block-tutorial-template reference page.

Theme Developers

A PR landed over the last month to load content in 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. for the site editor experience. This should help get rid of any CSSCSS Cascading Style Sheets. bleeding and allow a theme stylesheet to be dropped in the editor without any necessary adjustments. For theme authors this is something to be aware of as it should make block theme authoring easier!

Finally, there’s a comprehensive overview issue covering updates to experimental-theme.json that’s worth digging into to stay up to date.

Navigation Screen Work

Navigation screen work will be continuing this month but is a lower priority currently than the other areas listed above. A design iteration is underway as part of this effort. You can follow this work here and you can expect it to be a higher priority in the months to come. 

Ways to Get Involved:

While the above items are our focuses, don’t forget that you can always help with triage, needs testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a new course on Learn WordPress for how to do triage in GitHub! Check it out and join us. 

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate: 

  • Core Editor weekly @ 14:00 UTC in #core-editor focused on all things Gutenberg. 
  • Block-Based Themes meeting twice monthly at Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing. 

#core-editor #gutenberg-next

#gutenberg

Editor chat summary: Wednesday, 6 January 2021

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), 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, January 6, 2020, 14:00 UTC.

Thank you to all of the contributors who tested the 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. releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

WordPress 5.7

WordPress 5.7 is now underway with Beta 1 due on 2 February 2021. Now’s the time to be thinking about what 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/ features and 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. fixes we want to ensure are in the release. Project board to track WordPress 5.7 “must-haves” is available. Please add issues to this board and/or reach out to (@noisysocks) if there is something you think needs to be included.

Gutenberg 9.6

Gutenberg 9.6 was released on 23rd december. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Gutenberg 9.7

Gutenberg 9.7 was released on 6th january. First release of 2021 🎉. A number of contributors enjoyed some well earned time off but it didn’t stop them from shipping exciting features for 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.

Monthly Plan

The monthly update containing the high-level items that Gutenberg contributors are focusing on for January are:

  • Global Styles
  • Block-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
  • Full Site Editing

For detailed plan check out monthly priorities post.

Updates on the key projects

@jorgefilipecosta

  • On the Global Styles side, the work to include the new version of the components is ongoing. Starting with the font size picker. Our end to end tests was improved To not be as markup dependent And work with both versions of the components. There were some end-to-end tests that were legitimately failing And fixes were submitted. Besides that, the discussions on 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. translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. continued to happen. But all the feedback was applied and I think is ready to merge.
  • Another big chunk of the work saves time escaping the theme.json structure to align with what happens with other WordPress data saved in custom post types. This work is proving a little bit more complex than I anticipated. But a part should be ready very soon
  • Currently, we are blocked on an issue regarding transpiling. zustand is not being transpiled and the build is not ECMA compliment. I am not really sure how to force the transpiling of that specific lib. All the solutions I tried failed. But I have a considerable lack of babel knowledge So any help here is appreciated

@annezazu

  • The Full Site Editing Outreach program is underway with the very first call for testing
  • While you can leave feedback anytime 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/, this call for testing will be open until January 13th.
  • If you don’t have time to test right now, no worries—another way to help would be to share the call for testing with others.
  • If interested in joining the fun in general, please :dance: your way over to #fse-outreach-experiment

@paaljoachim

  • In regards to widgets screen update Every Wednesday UTC there is a block-based widget editor chat in the #feature-widgets-block-editor
  • The first meeting after the holiday was earlier today.

@noisysocks 

  • Going through various 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. issues. A new technical method is on its way check the main issue

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@get_dave

@ntsekouras

  • Add block transforms preview
  • Display Block Information by matching block variations is merged. This includes the addition of a property (isActive) in Block Variation’s settings. This optional property is a function to match block variations after their creation.
  • Add new post link to Query Block.
  • I have a PR for new block ‘Archive Title’.

@itsjonq

  • I had a break in December, so I’m catching up on all the things.
  • My primary focus is to continue work on the new Component System (aka. “G2 Components”).
  • As @jorgefilipecosta had mentioned earlier, we’re working on integrating things with the ‘FontSizePicker’ component. I’ll be helping with all integration efforts on that front. We’ll then have the UIUI User interface set up to start improving the UI for Global Styles.

@priethor

I’ve just started working on this issue, my first contribution Navigation Block: Add support for a dynamic home URL

@paaljoachim

  • I am working on various documentation such as updating Setting up a Local Dev environment. I also made a video for it. How to test a PR issue. Etc.
  • Widget screen Using the Move to option

@youknowriad

I took the time where everyone was away as an opportunity to solve two of the long-standing issues we had:

  • Reusable blocks to use controlled inner blocks (multi-entity save flow)
  • Refactor FSE templates and template-parts to avoid auto-drafts for theme provided template files.

One is shipped and I’ll continue with the second one

@adamsilverstein

  • I’ve been working on improving the Combobox controls we added for the post author and page parent selector and could use some help/review on when someone has a chance.

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary

What’s next in Gutenberg? (January 2021)

This is a monthly update containing the high-level items that 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/ contributors are focusing on for January. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so. 

How to follow along with Gutenberg: 

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts and a Site Editing Milestone overview issue that breaks down the upcoming work into more concrete next steps. 

Global Styles

Global Styles refers to the system that defines and manages global aesthetics, allowing overall site styles, theme styles, and blocks to work well together. Global Styles focus areas for January include:

  • Determining what 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. and infrastructure functionality (not user facing) to include in WP 5.7
  • Support for translation theme.json strings

Follow along:

You can follow the progress for this overall system in this overview issue and by reviewing the Global Styles label

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

Work on the Block-based widget editor (Widgets Screen) is a continued focus for the month ahead. The purpose of this effort is to bring the flexibility of block-based editing to the 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. screens.

Blocks in the Widget Screen

Adding block support for the widget editor is an ongoing focus. Progress toward this effort can be accessed via the Block-based Widget Editor project board. The emphasis for January will be eliminating bugs.

Blocks in the Customizer

An exploratory phase to find the best path for adding blocks in the customizer. If this interests you, please review this previous discussion and check out the current plan for exploration. For greater context, you can also watch this hallway hangout focused on managing blocks in the customizer. 

Follow along:

You can follow the progress of this work on this project board and you can join #feature-widgets-block-editor in 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/ 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/. for future widget screen focused meetings post 5.6 launch. 

Full Site Editing

As with the prior months, work on this major focus for phase 2 is ongoing and is expected to continue iterating over the coming months. Work this month will include the following focus areas:

Milestone 1 – Site Editing Infrastructure and UI

Work toward infrastructure and UIUI User interface improvements including:

Milestone 5 – Query Block 

This work includes the following Query Block design explorations:

  • A pagination block with different style variations to work alongside the Query Block. 
  • Query Block toolbar controls 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. to make it easier to show the content you want.
  • Exploring the idea of a Query Block builder UI to scale the experience for advanced users. 

Milestone 6 – Navigation Block

Work on the Navigation Block is an ongoing effort and focus for January. An overview of the work in progress can be found in the Navigation Block tracking issue.

In addition to the above, the Theme Experiments repo is being monitored to see how theme developers are building block-based themes. Please continue to share there, it is appreciated!

Follow along:

You can follow the progress of this project with this overview issue showing key milestones for site editing. For each major milestone, there are related issues you can follow if you want a more granular look at each next step (example from Query Block).

As a reminder, if you’re interested in being a part of testing Full Site Editing, check out the experimental outreach program to learn more

Important Note:

If you were previously following this project board, it has now been closed in order to use the milestones issues more consistently and to prevent people from needing to follow the progress in two places. 

Areas to be aware of:

Block & 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

PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 8 has been released please review the Dev Notes in the 5.6 Field Guide with a particular focus on preparing your plugins for PHP 8

Theme Developers

Those interested in learning more about block-based themes may wish to read the comprehensive article @frankklein wrote on what he learned while building a block-based theme. 

Ways to Get Involved:

While the above items are our focuses, don’t forget that you can always help with triage, needs testing issues, good first issues, and reviewing PRs. In particular, for this month, focusing efforts around testing the Widgets Screen would be very helpful and high impact. 

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate: 

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly @ 14:00 UTC on Wednesday in #core-editor focused on all things Gutenberg. 
  • Block-Based Themes meeting twice monthly Wednesday @ 16:00 UTC on Wednesday in #themereview focusing on preparing for Full Site Editing enabled theme development. 
  • Block-Based Widget Editor meeting weekly @ 07:00 UTC in #feature-widgets-block-editor on Wednesday focusing on implementing the ability to manage blocks in widget areas.

#gutenberg-next

What’s next in Gutenberg? (December)

This is a monthly update containing the high-level items that 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/ contributors are focusing on for December. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so. 

How to follow along with Gutenberg: 

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts and a Site Editing Milestone overview issue that breaks down the upcoming work into more concrete next steps. 

Addressing WordPress 5.6 feedback

WordPress 5.6 RC 2 is set to ship on December 1st with the General Release following on December 8th. During 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). period development will be limited to addressing critical regressions and bugs. Ideally, this won’t be an area that needs great attention for this month’s work thanks to the great effort put in thus far to make this release a success. 

Follow along:

In addition to following individual features and their progress, you can follow where things stand on this WordPress 5.6 Must Haves project board.

Global Styles

Global Styles refers to the system that defines and manages global aesthetics, allowing overall site styles, theme styles, and blocks to work well together. Currently, the focus remains on tightening up and fixing the flows, with the goal of preparing a V1 that can land as a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. early in the 5.7 cycle. You can find an initial list of items for a V1 here that includes everything from exploring versioning for 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. to ensuring theme.json works cross-platform (web & mobile).

Follow along:

You can follow the progress for this overall system in this overview issue and by reviewing the Global Styles label

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

After pausing this work for November, the Widgets Screen is once more a focus for the month ahead. Currently, this work involves an exploratory phase to find the best path for adding blocks in 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.. If this interests you, please review this previous discussion and check out the current plan for exploration. For greater context, you can also watch this hallway hangout focused on managing blocks in the customizer. 

Follow along:

You can follow the progress of this work on this project board and you can join #feature-widgets-block-editor in 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/ 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/. for future widget screen focused meetings post 5.6 launch. 

Full Site Editing

As with the prior months, work on this major focus for phase 2 is ongoing and is expected to continue iterating over the coming months. Work this month will focus on finishing up Milestone 1 – Site Editing Infrastructure and UI and Milestone 5 – Query Block alongside the overall Global Styles work previously mentioned. This work includes the following Query BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. design explorations:

  • A pagination block with different style variations to work alongside the Query Block. 
  • Query Block toolbar controls 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. to make it easier to show the content you want.
  • Exploring the idea of a Query Block builder UI to scale the experience for advanced users. 

Outside of the above, we’re still watching the Theme Experiments repo to see how theme developers are building block-based themes. Please continue to share there and know we appreciate it!

Follow along:

You can follow the progress of this project with this overview issue showing key milestones for site editing. For each major milestone, there are related issues you can follow if you want a more granular look at each next step (example from Query Block).

As a reminder, if you’re interested in being a part of testing Full Site Editing, check out the experimental outreach program to learn more

Important Note:

If you were previously following this project board, it has now been closed in order to use the milestones issues more consistently and to prevent people from needing to follow the progress in two places. 

Areas to be aware of:

Block & 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

Please review the Dev Notes in the 5.6 Field Guide with a particular focus on preparing your plugins for PHP 8

Theme Developers

Read the comprehensive article @frankklein wrote on what he learned in building a block-based theme. 

Help test out the Twenty Twenty-One Block based theme and give feedback/report bugs.

Ways to Get Involved:

While the above items are our focuses, don’t forget that you can always help with triage, needs testing issues, good first issues, and reviewing PRs. In particular, for this month, focusing efforts around testing the Widgets Screen would be very helpful and high impact. 

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate: 

  • Core Editor weekly @ 14:00 UTC in #core-editor focused on all things Gutenberg. 
  • Block-Based Themes meeting twice monthly at Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing. 

#core-editor #gutenberg-next