What’s new in Gutenberg 9.8? (20 January)

As 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/ team and community continue to forge ahead with implementing Full Site Editing and Global Styles, the latest installment 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 (version 9.8) has been released today 🥳 As always, this release also includes many fixes and some nice new enhancements.

Semi-transparent Spacer 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.

The Spacer block, when selected, now has a semi-transparent background, rather than an (opaque) light grey one. This should make it easier to discern from any layer behind it (such as a Cover block or image), if that is of a very light color itself.

Block Switcher Shows variation icon

As a follow-up to an improvement to block variations that shipped with 9.7, the block switcher now displays the variation’s icon, rather than the block’s generic one.

Site Editor now iframed

The Site Editor now renders its content in an iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. There is a number of reasons for this, such as avoiding adminadmin (and super admin) CSSCSS Cascading Style Sheets. bleed, or allowing to simply use a theme stylesheet for a site without any adjustments. Once this approach proves stable, the team is planning to make the same change to the Post Editor.

FSE: No more auto-drafts

Full-Site Editing no longer creates auto-drafts for template and template part post objects. These auto-drafts were previously needed for block templates and template parts that were based directly on files from an FSE theme without any user modifications. However, they required complex management and sync logic that proved fragile. By removing them, the team hopes to stabilize a fundamental part of FSE.

9.8 😬

Enhancements

  • Use a semi transparent background for the spacer block when selected. (28103)
  • Display matching variation icon in Block Switcher. (27903)

New APIs

  • Create Block: Allow using locally installed packages with templates. (28105)
  • Create block: Add support for static assets. (28038)
  • Compose: Export useIsomorphicLayoutEffect and use it. (28023)

Bug Fixes

  • Reusable Blocks:
    • Show an error message when a reusable block has gone missing. (28126)
    • Fix dismiss notice after error. (28015)
  • Cover Block:
    • Fix nested cover block 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.. (28114)
    • Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. cover block transforms. (28087)
    • Fix cover regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (28287)
    • Fix Cover focal point picker. (28350)
    • Fix matrix alignment issue. (28361)
  • Fix block error when transforming blocks with Link Popover opened. (28136)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice in navigation-link. (28134)
  • Prevent link paste in RichText components in Button and Navigation blocks. (28130)
  • Fix floating date status inferred for posts where the status has been edited. (28127)
  • BlockSwitcher: Fix crash due to null reference. (28122)
  • Verse: Fix line-wrap rendering on front-end of site. (28109)
  • FocalPointPicker: Fix rendering and dragging experience. (28096)
  • Block Directory: Fix “missing” block when the block can be installed from the directory. (28030)
  • Fix locked template not updating when inner blocks template prop changes. (28007)
  • Fix editor crash when registering a block pattern without categories. (27970)
  • Fix the RTL editor styles and the theme styles option. (27947)
  • Don’t close the block inserter when clicking the scrollbar or an empty area. (27946)
  • Fix AlignmentMatrixControl focus issue. (27945)
  • Fix unexpected autosave for published posts. (27942)
  • Fix RadioGroup to support zero as a Radio value. (27906)
  • Update embed block transforms to permit multiple links to be pasted in a paragraph (#27551). (27746)
  • Change the week headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and left button style to meet the date spacing. (27730)
  • Add aria labels to box control component inputs/button. (27727)
  • Use clientWidth when no width is available for cropper. (27687)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Normalize _fields value for use in stableKey. (27526)
  • Fix appender margins again. (27392)

Performance

  • Components: Expose composite 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. from Reakit. (28085)
  • Improve Inserter block hover performance. (26348)

Experiments

  • Full Site Editing Framework:
    • Load content in iframe. (25775)
    • Avoid using auto-drafts for theme templates and template parts. (27910)
      • Delete unused options while upgrading the plugin. (28164)
      • Fix _wp_file_based term deletion in migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. (28300)
    • Fix the border radius in the site editor. (27986)
  • 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.:
    • Add border radius to the theme styles schema. (27791)
    • Add theme.json i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. mechanism and JSON file specifying which theme.json paths are translatable. (27380)
    • Add: Save time theme.json escaping. (28061)
  • Group Block: Add border radius. (27665)
  • Hide the theme without comments.php deprecation message. (28128)
  • Fix navigation editor. (28080)
  • Widgets: Temporary fix for saving widgets. (28078)
  • Decouple query from edit site. (27972)
  • Only enable the template mode for viewable post types. (27948)
  • Box control units: Ensure custom units are preserved. (27800)
  • Navigation Block: Use draft status when user creates a post and don’t render unpublished posts in menus. (27207)

Documentation

  • Docs: Improve README file for @wordpress/create-block. (28052)
  • Create Block: Update the demo included in the README file. (28037)
  • Docs: Switch heading to Quick Start for consistency. (28019)
  • Docs: A wether, as it turns out, is a castrated ram. (28008)
  • Update Quickstart guide for the Development Environment documentation. (28005)
  • Update copyright year to 2021 in license.md. (27951)
  • Block API: Add more inline comments. (20257)
  • Changelog: Group entries for 9.8.0-rc.1. (28332)

Code Quality

  • Remove effects test file and remove unused refx dependency. (28162)
  • Annotations: Replace store name string with exposed store definition. (28156)
  • Edit Widgets: Replace store name string with exposed store definition. (28044)
  • Interface: Replace store name string with exposed store definition. (28041)
  • Upgrade Reakit to version 1.3.4. (28013)
  • Fix PHPCS warning: Undefined variable $i. (27955)
  • Consolidate block editor initializations. (27954)
  • Fix create-block PHP template files according to WordPress standards. (27949)
  • block-directory: Simplify the LOAD_ASSETS flow by making it an async function. (25956)

Tools

  • Workflows (i.e. GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions):
    • Create Release Draft when tagging version. (27488)
    • Add action to upload release to SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. repo. (27591)
    • Compare Performance upon Release. (28046)
    • Build Plugin Workflow: Bump node version to 14. (28048)
  • End-to-end tests:
    • FSE: Fix intermittent errors in multi entity editing test. (28107)
    • Fix randomly failing end-to-end test. (28073)
    • Upgrade puppeteer to 5.5.0. (28055)
    • Performance tests: Fix. (28026)
  • Scripts:
    • Align default engines for check-engines with the package. (28143)
    • Add support for static assets in build commands. (28043)
    • Make it possible to transpile .jsx files with build command. (28002)
    • ESLint minor version upgrade to 7.17.0. (27965)
    • Upgrade Jest to the new major version (26.x). (27956)
    • Use wordpress/stylelint-config in wordpress/scripts. (27810)
  • Linting:
    • ESLint Plugin: Enable import rules used in Gutenberg. (27387)
    • Add no-unsafe-wp-apis to recommended configuration. (27327)
    • Remove /wordpress from test/linting ignore paths. (20270)
    • Update changelog for stylelint-config. (28074)
  • Testing: Prevent a direct usage of Reakit. (28095)
  • Update the minimum Node.js version to 12. (27934)
  • wp-env: Ensure the environment is used with the logs command. (27907)
  • Packages: Fully automate npm publishing with the latest and next tags (28335)
  • Upgrade webpack to version 5. (26382)
  • Revert “Upgrade webpack to version 5”. (27974)

Various

  • Gutenpride Template:
    • New Package to use with the tutorial. (27881)
    • Create Block: Enhancements to Gutenpride tutorial template. (28215)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Remove redundant array coercion. (28072)
  • Visual editor: Remove focusable wrapper. (28058)
  • Readme: Increase tested Version up to WP 5.6. (28050)
  • Interface: Remove deprecated prop from InterfaceSkeleton. (28034)
  • List View: Reduce whitespace and always show nested blocks. (28029)
  • Making the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. inspector’s tabs stick when scrolling. (28003)
  • Chore: Update Lerna dependency. (27990)
  • Try: Make focus width a CSS variable. (27968)
  • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context to all block’s titles. (27933)
  • Add primary destructive button style. (27774)
  • Modifies the widgets dashboard link to point to the new widgets editor. (26880)
  • Use standard select element for small number of authors. (26426)
  • Add srcset for cover image. (25171)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.85.55s29.05ms
Gutenberg 9.75.29s26.32ms
WordPress 5.64.66s28.57ms

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

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

Editor chat agenda: 20th January 2021

Facilitator and notetaker: @get_dave.

This is the agenda for the weekly editor chat scheduled for 2021-01-20 14:00 UTC.

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

  • 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/ 9.8 release (release candidate already available).
  • WordPress 5.7 Beta 1.
  • Monthly Plan for January 2021 and key project updates:
    • Global Styles.
    • BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor.
    • Full Site Editing.
  • Task Coordination.
  • Open Floor.

If you can’t attend the meeting, you’re encouraged to share anything relevant for the discussion:

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

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

Stale Issues in Gutenberg Repository

In the Core Editor meeting on Jan 13th, a group of us discussed the idea of implementing a “StaleBot” that will automatically close issues and PRs based on a level of inactivity (no comments or commits) after a period of time. Before implementing, it was agreed that it would help to get more thoughts and opinions to make sure this idea is set up for success. 

Please share your thoughts by Jan 29, 2021. If there are no major concerns, implementation will proceed. 

Implementation Details

Using a stale bot is a common practice among repositories, the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. project uses the Probot Stale bot to automate, with a 90 day policy. The bot allows customization of the time, messaging, and the ability to configure a specific label to skip auto closing. This gives great flexibility to make an implementation work for us.

The current recommendation is to set our policy to a 180-day of no activity, so if no comments or commits are on an issue or PR in 180 days, then the bot will post a comment to the issue alerting the user it will be closed in 7-days due to inactivity. The proposed message:

This is an auto-generated message to let you know that this issue has gone 180 days without any activity and meets the project’s definition of stale. This will be auto-closed if there is no new activity over the next 7 days. If the issue is still relevant and active, you can simply comment with a “bump” to keep it open, or add the “[Status] Not Stale” label. Thanks for keeping our repository healthy!

Important to keep in mind, closed tickets still exist, they maintain all the same info, are searchable, and can be reopened with one click. Further, if it turns out that this change has an unexpected negative impact, this can always be removed! 

Leave Feedback

Feedback on the following by January 29, 2021 would be the most helpful: 

  • What concerns (if any) do you have about implementing this? 
  • Does 180 days of inactivity seem like the proper time threshold?
  • Does giving 7 days to respond feel like enough time? 
  • Is the message clear yet friendly enough? Would you make any changes? 

#core-editor

Editor chat summary: Wednesday, 13 January 2021

This post summarizes the latest weekly Editor meeting (agendaslack transcript), held in the #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-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, 13 January 2021, 14:00 UTC.

WordPress 5.7

WordPress 5.7 is now underway with BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 due on 2 February 2021. You can help with this effort by jumping in on the following issues shared by @noisysocks:

https://github.com/WordPress/gutenberg/issues/24965
https://github.com/WordPress/gutenberg/issues/14744
https://github.com/WordPress/gutenberg/issues/24092
https://github.com/WordPress/gutenberg/issues/25983
https://github.com/WordPress/gutenberg/issues/23636

Finally, you can follow this Project board that tracks WordPress 5.7 “must-haves”. Please add issues to this board and/or reach out to (@noisysocks) if there is something you think needs to be included.

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/ 9.7 & 9.7.1

Gutenberg 9.7 & 9.7.1 were released over the last week. Highlights include drag & drop from the inserter for block patterns, updates to the reusable 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., and more.

Gutenberg 9.8 RC

As a reminder, Gutenberg 9.8 RC will be released this week to allow for a 1 week RC period before the stable release next week. Please use this as a chance to test the RC!

Monthly Plan & Key Project Updates

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.

Full Site Editing Update from @ntsekouras

Testing/feedback/review on Query Pagination block with InnerBlocks
and feedback for possible use cases of a Query Title block would be fantastic. Any thoughts and help are really appreciated!

Global Styles Update from @jorgefilipecosta

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. translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. mechanism was merged! There is a proposal for a save time theme.json escaping mechanism. The progress to integrate the font size picker new version advanced nicely and the PR should be merged soon.

Widgets & Navigation Update from @andraganescu

They are both back working in the main branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". after some foundational changes broke them.

Native Mobile Block Editor Update from @hypest

  • We added the ability to move blocks to top/bottom via long-pressing the block mover icons
  • Removed the info popup on start about the block editor being the new default as it’s been quite some time now that Gutenberg rolled out
  • Added block insertion E2E tests
  • Made progress on porting the Audio block

Work will continue on the audio block, the code block and prepare to work on the table block.

Help test full site editing

Today is the final day to respond to the very first call for testing for the FSE outreach program. Feedback is of course always welcomed and appreciated 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/. Expect a post this week on Make Test summarizing the results of this first test and join #fse-outreach-experiment if you’d like to help with future calls for testing. Thank you to all who have already helped test!

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.

@ajlende

  • This PR has now been merged: WordPress/gutenberg#25171 adds srcset for cover images. Looks like there’s a few people who would appreciate it for performance reasons and it’s needed in order to add duotone to the cover block. The primary question in the PR is if it’s worth adding the polyfill for IE.
  • Would love a review for this PR: WordPress/gutenberg#27936 has some light refactoring of the custom gradient picker which also adds some inline documentation and simplifies the code for readability. It also allows me to reuse it for the duotone picker

@joen

@youknowriad

  • Landed the removal of the auto-drafts in Full Site Editing, an important low-level work.
  • Fixed a number of small bugs and tweaks here and there
  • A number of reviews and discussions.
  • Going forward, would like to focus a bit more on FSE, maybe the template mode in the post editor in the next days.

@ntsekouras

  • PR for Query Pagination with InnerBlocks.
  • Display matching variation icon in Block Switcher.
  • Various small 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 and reviews.

@itsjonq

  • Continue the efforts of updating our Component Systems, starting with the FontSizeControl integration.
  • Working through final details/adjustments to make sure things conventions are compatible with Gutenberg.

@annezazu

@paaljoachim

  • Triaging older issues from 2018 and 2019. As well as triaging needs design feedback issues.
  • Docs: Working on (again) improving the Local WP Development Environment setup.
  • Taking part in Learn/Training team meetings to see where Gutenberg can improve to help make things easier there.
  • Docs: Working on Improving the intro Block Editor Handbook page. Issue 27400.

Open Floor

Should we implement a “stale bot” on the GitHub Repo? Raised by @mkaz.

The full question can be seen in this comment. A stale bot essentially automatically goes through issues after X timeframe and can be programmed to share a message before handling closing out the issue/PR. By implementing some version of a stale bot to sweep through the repo, it can ideally help keep the open issues/PRs more relevant and up to date while handling out of date items. Here are key points from the discussion:

  • We’d want a long timeframe for closing. ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. uses 90 days but we’d be looking at 120+ days.
  • Important to keep in mind, closed tickets are still searchable, still exist, and still make up the archive. They don’t disappear, and can be reopened.
  • A label could be added to keep something from being auto-closed for particular items.
  • It would be important to get the messaging right in whatever comment left by the stalebot so it’s clear what action needs to be taken to keep an issue or PR open, the reasoning for such a bot, etc.
  • It’s unclear what kind of approval/agreement is needed for this change. TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. currently doesn’t have this policy but it’s unclear if that’s due to tooling limitations.

Next steps: @mkaz and @annezazu will collaborate on a Make Core post to propose this change, draft a suggestion for the messaging, and get feedback to make sure this is an okay direction to go in.

Help review a restructuring change to the Gutenberg Developer Handbook. Raised by @justinahinon.

Work is underway in this PR about Gutenberg developer handbook homepage as part of the handbook restructuring project. This PR should ideally help give a better experience with more clarity for users who first enter the handbook. The first experience matters immensely so this is a great thing to get right! Give your feedback in the PR.

What’s the best way to allow my block users to edit attributes for every display (desktop, tablet, mobile)? Raised by @louis.

Here’s an expanded version of the question for clarity:

As I understand, iframing the editor is finally coming round (really great stuff). I’ve been looking at different ways to allow my block users to edit attributes for every display (desktop, tablet and mobile), but does the Gutenberg team have an idea worked out on how these attributes will be edited responsively? And if so, is it planned for WordPress 5.7.

@joen kindly jumped in to share some great thoughts:

  • This is really tricky to get right and the team likely won’t have something for 5.7.
  • The current approach is to first and foremost build as good a responsiveness as you can, right into the block. For example, having smart defaults, like how the Media & Text block collapses when responsive.
  • Right now, you can actually hook into the preview dropdown, and leverage that to create your own responsive system right now. This is what the Layout Grid block does, feel free to look at the source there.
  • Even implementing what the Layout Grid does, the experience is still lacking: How do you edit the desktop breakpoint on a physical mobile device?  How do you customize, or add additional breakpoints? All of this is TBD.

Ideally, going forward work started in this Gutenberg issue and improvements to Global Styles can enable this to work better in the editor.

#core-editor-summary

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

Editor Chat Agenda: 13 January 2021

Facilitator and notetaker: @annezazu

This is the agenda for the weekly editor chat scheduled for Wednesday, 13 January 2021, 14:00 UTC.

This meeting is held in the #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and all are welcome to join!

Even if you can’t make the meeting, you’re encouraged to share anything relevant for the meeting in the comments below:

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

#core-editor #core-editor-agenda

Core Editor Improvement: Drag & Drop Blocks and Patterns from the Inserter

With the launch of Gutenberg 9.6 and Gutenberg 9.7 comes the ability to drag and drop blocks and blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. patterns from the Block Inserter. This new feature might be easy to miss if you’ve grown used to relying on the current ways to add blocks! Here’s a quick video showing how it’s done for both blocks and block patterns:

Video showing drag & drop from the inserter for first a block and then a block pattern.

Important Note: you need to use a theme with registered block patterns (ex: the current default theme and the prior 4 years) .

With this new addition, there are now seven ways to quickly add blocks to your content, whether it’s to write a compelling post, build out a fancy sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. with the in progress Widgets Editor, or create a site using the site editing experiment:

  • Drag and drop from the inserter.
  • Select from the inserter. 
  • Type a forward slash followed by the block name: /image or /paragraph.
  • Click the black + icon at the side of an empty block.
  • Using the + icon at the top left of the editor which opens Block Inserter.
  • Hit the Enter/Return key from a currently selected block to create a new block underneath it. 
  • Click on the three dots just above a selected block and choose to add a block above or below the current block.

This is a very new feature so, as you explore, know that feedback 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. reports are always welcome on GitHub

If you’re interested in working on features like this, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting on Wednesdays @ 14:00 UTC in core-editor

#core-editor-improvement #core-editor

What’s new in Gutenberg? (6 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.

Block Patterns Drag and Drop

Similar to blocks drag and drop that shipped in the previous release, 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/ 9.7 allows user to drag block patterns from the inserter right into the desired position in the canvas.

Reusable blocks

The release also so an important change to how reusable blocks are shown and edited in the editor solving some of the old issues around block inspector, and block toolbars for the reusable blocks. Based on these changes, the UIUI User interface for reusable blocks is most likely going to see some iterations on the upcoming weeks.

Matching block variations

Block variations are a great 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. that can be used to build a generic block and ship several variations on top of it. That’s how the embed blocks or social link blocks are built. In Gutenberg 9.7, if you insert a block variation, the editor is going to match the block being used and show the “icon” and “description” of the said block variation in the different elements of the interface. (Block navigation, block inspector…)

9.7 😅

Features

  • Support drag and dropping block patterns from the inserter. (27927)

Enhancements

  • Improve the Reusable Blocks UI by relying on multi entity save flow. (27887) (27885)
  • Show the insertion point indicator bellow the inbetween inserter. (27842)
  • Add block transforms previews. (27861)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: RemoveQueryArgs should remove the ? char after removing all args. (27812)
  • Deburr the input of the Post Author and Parent Page controls when filitering results. (26611)
  • Display block icon, description and name by matching block variations. (27469)
  • RSS Block: Add an explicit border-box CSSCSS Cascading Style Sheets. rule. (27767)

New APIs

  • Create block: Allow to list npm packages to be installed in the template. (27880)
  • wordpress/url: Add a maxLength argument to filterURLForDisplay. (27530)
  • Add new package @wordpress/stylelint config. (22777)

Bug Fixes

  • Show all taxonomies in Tag Cloud block. (27930)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Fix editor styles. (27627)
  • Don’t ignore extra edits made in the server when saving posts. (27929)
  • Remove the animation of post publish button during autosaving. (27874)
  • Prevent the inserter from closing when switching the pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (27792)
  • LinkControl: Fix horizontal scrollbar within block toolbar. (27777)
  • Create Block: Fix support for external templates. (27776) (27784)
  • Fix text color dropdown not opening. (27596)

Experiments

  • Full Site Editing Framework:
    • Add support for custom templates in FSE themes. (27778)
    • Refactor the edit-site store to clarify the purpose of templateId and templatePartId. (27839)
  • Full Site Editing Blocks:
    • Site Logo: Remove duplicate link. (27924)
    • Post excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. block: Fix incorrect quotes for the class attribute in the wrapper. (27895)
  • Global Styles: Add padding control to the Global Styles sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (27154)
  • Navigation block: Fix the text color for links in the navigation block. (26698)

Documentation

  • Improve documentation for withNotices HOC in components package. (27863)
  • Add ContrastChecker component readme. (25570)
  • Remove default style information from the documentation. (27811)
  • Storybook: Fix broken import statements for DateTime component. (27794)
  • Add additional information about lock inheritance. (27834)
  • Typos and tweaks: (27909), (27799)

Code Quality

  • Use a consistent way to check isRTL. (27838)
  • Update the minimum required WordPress version to 5.5. (27807)
  • Remove unused redux-optimist dependency. (27798)
  • Storybook: Perform cleanup in the Storybook setup. (27786) (27813)
  • Raw handling: Remove duplicate code. (27758)
  • Refactor BlockSwitcher as a functional component. (27674)
  • Rich Text: Replace store name string with exposed store definition. (27820)

Tools

  • Remove overrides for JSDoc rules downgraded to warnings. (27912) (27879)
  • 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 release tool: Fix svn add/rm commands for release tool. (27886)
  • Add types to the wordpress/keycodes package. (19520)
  • end to end tests:
    • Make end to end tests do not rely on font size picker classes. (27825)
    • Remove expect.assertions count from multi-entity-saving tests. (27802) (27818)
    • Testing: Remove axe verification executed after every test case. (26626)
    • Improve font size end to end tests to work with input changes on blur. (27871)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.75.41s31.1ms
Gutenberg 9.65.45s28.8ms
WordPress 5.65.45s30ms

Kudos for all the contributors that helped with the release. 👏

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

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

Editor Chat Agenda: 6 January 2021

Facilitator and notetaker @ajitbohra

This is the agenda for the weekly editor chat scheduled for Wednesday, 6 January 2021, 14:00 UTC.

This meeting is held in the #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

  • Gutenberg 9.6
  • Monthly Plan for January 2020 and key project updates. For the updates, the discussion will focus on what is being done and help that is needed:
    • Full Site Editing.
    • Global Styles.
    • Widgets screen.
    • 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. screen.
  • Task Coordination
  • Open Floor

Even if you can’t make the meeting, you’re encouraged to share anything relevant for the meeting in the comments below:

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

#core-editor #core-editor-agenda