Tag Archives: gutenberg

Bernhard Reiter 7:22 pm on January 20, 2021
Tags: , , gutenberg,   

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

Ajit Bohra 7:28 pm on January 12, 2021
Tags: , , , , , 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

Riad Benguella 9:35 am on January 7, 2021
Tags: , , gutenberg,   

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

Paal Joachim Romdahl 5:55 pm on December 21, 2020
Tags: , , , gutenberg,   

Editor chat Summary: 16 December, 2020

This post summarizes the weekly editor chat meeting (agenda here) held on 2020-12-16 14:00 UTC. in Slack. Moderated by @paaljoachim.

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.6.0 RC release

Gutenberg 9.6.0 RC was released 16th December. It will have one week of testing before general release.

WordPress 5.6 release

WordPress 5.6 was released on 8th December.
Be sure to check the forums as well as the Gutenberg repository for user feedback.

Monthly Priorities

December monthly priorities. Along with Key Project updates.

Full Site Editing

@annezazu
Full Site Editing Outreach program is starting up with the launch of Gutenberg 9.6: https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/ Join (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)
#fse-outreach-experiment to take part in the exploration.

@aristath
Working on blocks assets loading for FSE themes. Finding ways to address styles for blocks that will be loaded asynchronously via infinite-scoll or other mechanisms. Experimenting with inlining & minifying assets on the fly when a 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. gets loaded.

Global Styles

@jorgefilipecosta
Global Styles Project: We made sure Font Weight and Style can be used independently on Global Styles.
Changes: Font Weight, Style and decoration are not presets anymore.
Box control now supports custom units .
Implemented border radius support.
A few bugs were fixed Fix: Block crashes if font family is not found.

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

@andraganescu
Widgets screen: Nothing notable on the widgets screen or on adding blocks in customizer. Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions for both Widgets and Navigation will restart in 2021.

Task Coordination

@youknowriad

  • Drag and drop from the inserter.
  • Some 5.6 documentation follow-ups.
  • Some refactorings around Popover/Dialogs (reusable hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.).
  • More FSE related work on the next week(s).

@ntsekouras

@annezazu

  • Prep work for the launch of the #fse-outreach-experiment, 5.6 Q&A follow up, triage of the 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/ repo, launched the overhaul of the new https://make.wordpress.org/core/features/ page (now with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor items!) with the teamwork of @noisysocks, and doing various FSE testing with different block themes.

@get_dave

  • Adding an experimental Gutenberg 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/. endpoint to allow us to get data about a remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for use in the editor (eg: contents of <title> tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) or favion…etc). Potential use cases:
  • 1. Showing an embed preview for generic links when pasted into editor (a la Slack).
  • 2. Showing details about a link being added using LinkControl.
  • Making some tweaks soon and then should be ready to merge: Add URL Details endpoint to REST API to allow retrieval of info about a remote URL.

@tug

  • Good progress on porting the Audio block.
  • Improving our CI tests and working on performance tweaks.
  • Porting Audio and Code blocks related to the RN v0.63 upgrade.
  • Link picker integrations in blocks. 

Open Floor

@Settimo Augusto Vittorio

  • Needs help with Post title block: Enabling the link changes the position of the block.
  • Proposed a ServerSideRenderedDataDrivenBlock, to enable developers who don’t know js to write blocks. A toggle to enable a preview.
    @joyously
    The 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. block could be extended to use the expected attributes as inputs in 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.. (like ShortCake 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 was trying to do)
    Link to additional discussion on Slack.

@joyously

  • There are usually some forum topics about coding blocks, but no one to answer them.

@daisyo

  • Starting the “What’s Next” post for January. If you have specific focus areas (issues, PRs, etc) planned for the month please feel free to share them with me. Hearing from you all helps to make this post really useful for those outside of the core editor contributor team.

@paaljoachim

  • The 16th December Core Editor chat was the last before the holidays. 23rd and 30th December there will be no official chats. The next chat in the new year will be 6th January.
  • Merry Christmas and a Happy New Year! Have a beautiful and relaxing holiday! See you in the new year!

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

Jorge Costa 11:24 pm on December 11, 2020
Tags: , , , , , gutenberg,   

Editor chat summary: Wednesday, 9 December 2020

This post summarizes the weekly editor chat meeting on Wednesday, 9 December 2020, 14:00 UTC held in Slack.

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

We had a minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. to fix three bugs. The details of the fixes can be checked in the release page.

WordPress 5.6

WordPress 5.6 was recently released, more details can be found here.

The release contains several enhancements to the editor. @isabel_brison made an overview post with the changes https://make.wordpress.org/core/2020/12/03/wordpress-5-6-core-editor-overview/.

Besides the editor enhancements, the 2021 theme is also a big step. It will have an equivalent 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. version that will test how robust is FSE and Global Styles to allow third-party themes.

@youknowriad said: Nice work @isabel_brison and others leading the editor side of the release. And the message was well supported on the chat using 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/. reactions. Thank you for all the work made leading the editor side of this release @isabel_brison!!


Monthly Plan and key project updates.

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

Widgets and customizer screen are still continuing with explorations going on to find the best way to add blocks support in customizer. 

Global Styles

We merged an update that makes client preset metadata match the server. ” – https://github.com/WordPress/gutenberg/pull/27453. And now we are also not passing some metadata to the client like selectors https://github.com/WordPress/gutenberg/pull/27449.
The work to make 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. translatable continues.
We are making some changes, namely removing some presets we are not totally convinced yet they should exist.
We already have some traction on the work to enhance our components to allow a better UXUX User experience on Global Styles; @q proposed the addition of some utils.
We also have some progress on the Global Styles extensibility with some filters being proposed https://github.com/WordPress/gutenberg/pull/27509.

Full site editing

The Query block now inherits the global query so FSE themes can add a query block in the index or archive templates and it will work for all archives, properly getting the query context from the visitor’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: https://github.com/WordPress/gutenberg/pull/27128.

Template-parts now have a UIUI User interface to select the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element that will be used for their wrapper: https://github.com/WordPress/gutenberg/pull/27101 so they can define easier if it’s, etc.

The inserter was also improved and behaves as popover. The editor now has an outline mode used in both Site Editor and Template mode.

Native Mobile APP Updates

  • File block merged and usable.
  • Post’s Save dialog fixes.
  • Background and text color support in Group, Paragraph and Quote blocks
  • Use new link picker in various blocks: Button, Image, Gallery
  • Improvements on Separator block style
  • E2E tests execution improvement.
  • Release process documentation improvements.

An app release is going to be skipped because of New Year’s and people taking holidays on these days.

Task Coordination

@annezazu

Helped a bit with 5.6 Q&A docs, light GH triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., continued working with @noisysocks on updating the features page and updating the issue templates, worked on FSE program preparation (including adding a welcome bot there and digging into current/recently merged PRs!), and dug in a bit to block directory adoption. Plans to do much of the same in the week ahead!.

@itsjonq

Continued the efforts of improving the Component System for Gutenberg.
The latest update is a (draft) pull-request to bring in the UI libraries/systems Has been working on (aka. “G2 Components”) https://github.com/WordPress/gutenberg/pull/27594. @itsjonq gave a thank you to @youknowriad and @gziolo for thoughts/guidance on integration.
@itsjonq said that t’s just the beginning, but it’s looking very promising. As always, @itsjonq tries Livestream design/dev updates on Twitch several times a week.
@itsjonq is also posting weekly updates on the project blogblog (versus network, site):
https://g2components.wordpress.com/.

@paaljoachim

Design triaged Bigger font for various handbooks.
Worked on several documentation tasks namely: Improving the intro page of the Block Editor Handbook and Re-examining introduction tutorials.

@youknowriad

Has been on working on some follow-ups to the addition of the “template mode” in the post editor.
The idea is that as we add features and enhancements, the code base becomes more complex as we take shortcuts so it’s important to circle back and “clean” the code a bit. Has been doing that with some a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., extracting common components and removing unnecessary complexity. Still has a few follow-ups planned. Some refactorings and some more features.

@jorgefilipecosta

Worked on an update that makes client preset metadata match the server. And another one that makes sure we are not passing some metadata to the client like selectors.
Did multiple reviews on Global Styles related work.
Proposed a solution to remove some of the presets we have being back-compatible with markup that uses them.
For the next week, plans on helping the effort to improve our WordPress components with PR reviews comments, feedback, etc. Wants to merge the Gutenberg side of 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. and iterate and merge the typography presets removal. Also plans on making some progress on the design tooling visibility issue.

@cguntur

Would like to help with the Gutenberg documentation.

@aristath

For next week his main focus will be splitting core block assets loading and revisit progressive loading for FSE.
Would also love it if we could focus on removing auto-drafts for theme-provided templates but that one is a bit tricky as it touches lots of things.

Open floor

@bph bring to the attention of the participants of the chat an issue/question https://github.com/WordPress/gutenberg/issues/27321. @youknowriad shared some guesses of what may be the cause of the issue and @ntsekouras offered to followup and share his findings on the issue.

Skipping coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats of 23rd and 30th December

@paaljoachim share the following in the agenda:

I suggest that we skip having a Core Editor meeting the 23rd and 30th December as many will be having their Christmas holiday

People discussed this suggestion, there was no opposition to this suggestion so participants of the chat decided to skip the chats of 23rd and 30th December.

Starting the FSE Outreach Program

@annezazu said the following:

After digging into some recent FSE related PRs and talking with a few people, I wanted to raise the idea of starting the #fse-outreach-experiment after the next Gutenberg release. I think this PR from @youknowriad on a template editing mode is a great place to start but wanted to hear thoughts. Right now though, there aren’t a ton of things lined up to do next. I think this will be okay though as it’ll give an extended period of time for people to test (might be good with this time of year) and it’ll make it easier to tweak what we’re doing after this first round. How does that sound to you all? P.S. I welcome people flagging possible additional things to run through for the group. I try my best to stay on top of things but definitely miss stuff.

@youknowriad shared he agrees that the template editing mode is a good flow to test. He believe the feature in itself is still a little bit rough around the edges but testable.

@annezazu supported riad’s thoughts and concluded that she will get to work fleshing out the details to kick off the program. She welcomes any collaborators who might be interested!

For anyone reading this summary, you can be a part of the program by joining #fse-outreach-experiment channel.

One week RC period

@youknowriad said:

The last releases saw a couple bugs being introduced and to address that I’d like us to discuss the possibility to try a one week RC in Gutenberg 9.6.

The participants of the chat showed support for this idea. The plan is to start having a one week RC period. The next release will still follow the normal schedule, so we give more time of notice to allow publishing the notes of the meeting (this post), and we have a fuller release otherwise it would be just a one-week release which would be very small.

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

annezazu 9:52 pm on December 11, 2020
Tags: , , , gutenberg   

The FSE Outreach Program is Officially Starting!

In May 2020, @chanthaboune announced a new experimental outreach project dedicated to Full Site Editing. Most recently, @matveb shared a wonderful post summarizing where Site Editing is today. Building on both, I’m excited to announce that, despite 2020’s best attempts to derail efforts, the program will officially launch with the release of 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.6! Right now, it’s likely that this release will be done 1 week later than usual to give a longer RC period so expect the program to begin around December 23rd. This cycle will focus on testing this PR that introduces a template editing mode. For additional context, you can see the discussion around picking this PR here. Hopefully, aligning the call for testing with the current Gutenberg version will make it easier for more people to participate in testing. 

Please keep in mind that this is the program’s first iteration. We’re starting with this first item and expecting the outcome to be a comprehensive list of issues that the Gutenberg team can work on as capacity allows. We’ll also allow an extended time to test this first item to accommodate this time of year. 

Moving forward, this program will eventually offer a few items to test back-to-back, with an easy and quick way to integrate feedback into Gutenberg releases. Remember, feedback outside of this program is always welcome and necessary as well — think of it as doing the work to pave the way for future iterations! 

What are the immediate next steps? 

I will be posting on Make Test once Gutenberg 9.6 is released around December 23rd with an extended time to give feedback. The post will include a testing script, resources for setting up a testing environment, and where to share feedback. I will also share that post in the #fse-outreach-experiment channel to alert everyone who has opted in. 

How can I join this program/follow along?

To join the FSE outreach experiment, create a WordPress slack account, join the #fse-outreach-experiment channel, and subscribe to the Make Test blogblog (versus network, site) to be notified about future posts. 

Who should join this program?

This is a great program for you if you want to test new features coming to WordPress, and: 

  • You build WordPress sites for yourself or for others.
  • You manage or maintain WordPress sites for yourself or for others.
  • You publish content using WordPress.

If you’re not sure, join anyway and see for yourself!

Thanks in advance for all who join in on this experiment and who help make it better with feedback/questions/etc. I’m thrilled to get started!

Ultimately, this is an awesome way to help build WordPress’s future, and I hope you’ll join the fun. 

#core-editor, #full-site-editing, #gutenberg

Matias Ventura 5:06 pm on December 10, 2020
Tags: , gutenberg   

Status Check: Site Editing and Customization

As we approach the end of 2020, it’s good to do a brief recapitulation of where we are standing with one of the major focus areas for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Phase 2: site editing with blocks. If you are curious about the more detailed tasks ahead of us, the overview issue for full site editing is the best way to follow the updates and progress.

Header area showing blocks

In this post I’ll describe the current state of all the primary projects and comment a bit on how they fit together. Worth noting this doesn’t cover the other projects still under the phase 2 umbrella (like the widgets screen updates).

For all the following items, keep in mind that they tend to illustrate the maximum amount of customization options — the ability to lock down templates, capabilities, design tools, etc, is still a prime focus to account for the different needs of different sites.

Site Editor

The site editor allows editing 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. themes and all their template files. It allows the user to swiftly navigate between the template hierarchy and make edits across an entire site. To accomplish this, it introduces some new interface elements, areas to manage, and the ability to browse the different templates a theme has to offer. Since the entire template is built with blocks, it leverages all the preview tools that have been built for blocks and patterns so far, allowing users to quickly visualize their contents.

Template navigation showing a quick preview for a full page template

The site editor engine is capable of knowing what elements of a site are being modified — whether a site option, a template part, or some local content, providing a much more powerful and flexible update flow. A site title block accurately saves its data as the site name option, not in the content, for example. While we are not yet focusing on editorial flows (that’s one of the aims of Gutenberg Phase 3) these foundational pieces can allow all sorts of integrations down the road, being very granular around what is being updated in a session.

Update design flow with checks for every element that has been modified

The site editor opens up the ability to edit and customize parts of the site that used to be only accessible through code editors or ad hoc interfaces. For example, being able to edit the 404 template with the same familiar block tools. For 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 and block developers, that means all the blocks being created can now be used in plenty more places of a site without any extra work.

Editing the 404 template

Most of the infrastructure needed to power this editor is already built. What remains to be done is stabilizing loading flows, refining design and interactions, introducing semantic template areas (such as 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 footer), and connecting the creation flows with what block patterns offer.

  • ⚒️ Overview Issue and next steps: 24818

Block Themes

The site editor depends on the ongoing focus of building themes with blocks to take advantage of the block editor interface. This year has seen a lot of great collaboration between the theme and editor development groups, which is paramount to ensure the WordPress block editing platform is powerful enough to support all the theme building needs and simple enough for users to interact with ease and confidence. This is an exciting area of collaboration, and something that needs the continued help and feedback from the community. If you are interested in helping shape these projects, the theme-experiments repository can be a good start to peek through.

To support this effort, outside of the template and template parts infrastructure, there’s an obvious need for creating many new blocks centered around theme functions. These includes blocks for the site title, navigation block, post title, content, 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., author, date, featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., and plenty more.

Block inserter listing a featured image block

In the future, rich layout tools — such as full site grid support — will be able to cascade down through the entire experience of the block editor, allowing interactions like snap-to-grid and overcoming a lot of the hurdles alignments currently impose.

The current focus here is on producing a version of Twenty Twenty One using only blocks to help us identify what blocks or block capabilities are still missing. There are also some options for gradual adoption in themes that continue to be discussed.

  • ⚒️ Overview Issue and next steps: 22724

Navigation Block

Out of all the theme related blocks, the navigation block has stood out as its own fundamental project for some time. The work that went into this block has allowed the various block APIs it depends on to evolve and mature substantially, including new support for horizontal inner blocks, a fully fledged block list view, and many more.

Displaying the navigation block

These are wonderful results of this specific project because it lifts up the available block tools for all third-party blocks. We are building the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks with the same tools that are offered through the standard block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. As an example, many of these capabilities are employed in the Buttons and Social Icons blocks.

With everything expressed in blocks, the opportunities for extending the navigation are also enormous — imagine adding with ease to your navigation a Search block, Social Icons, or a Cart block from WooCommerce. With the navigation becoming a more flexible container it opens a lot of integration points for already existing blocks. Each child block can be responsible for its own set of tools and capabilities while the user is presented with a unified way of building things.

Ultimately, the power of combining blocks is going to allow all sorts of menus to become possible. Themes will be able to provide more than one header pattern for users to choose or swap between them.

The biggest remaining challenge with the navigation block is also one of flexibility and ease of use. Flexibility needs to be balanced with intuitiveness and there’s more work to be done to get the user experience in a great place to be widely released. There’s also some work in ensuring smooth compatibility with current themes.

  • ⚒️ Overview Issue and next steps: 27593

Query Block

This is another major area of the site editing focus which also takes some of the block API infrastructure to the limit. If you are curious about block development tools and their latest capabilities, the Query block is a good one to explore, as it leverages nested blocks, inner blocks templates with live updates, block variations, contexts, etc.

Generally, the query block is responsible for controlling fetching and rendering of post types. It is naturally a core ingredient of block themes. It comes with a LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block that is responsible for iterating on the results and rendering a template. One cool thing is that interacting with the Loop in the editor automatically updates the template used for all posts in that query. You can add a featured image, change the order of title and date, add a block to display the author, and see it all reflected instantly.

A featured image inserted within the Query block

The next steps for this block are ensuring it plays well with the template hierarchy (global query), defining more user friendly block variations, and creating patterns that use it to build great layouts.

  • ⚒️ Overview Issue and next steps: 24762

Global Styles

There are two major areas that fall underneath the global styles umbrella: centralized theme configuration and an interface for manipulating visual aspects of blocks globally.

Theme configuration absorbs things like declaring color palettes, presets, different supports and settings, as well as being able to toggle on or off the several block design tools that are available (typography, colors, dimensions, etc). It will also allow themes to specify how blocks should look by being able to specify all their default attributes. This accomplishes many goals at once, ensuring that the editor is more connected with how themes wants things to render, provides a solid interface for the mobile apps to understand block configuration, and opens the door for further performance optimization on the front-end since WordPress will be able to load the right styles for blocks when they are actually being used in the page instead of needing to load styles for all, all the time (like themes have to do now with widgets even if they might not be used).

The other major part of global styles is the interface for the user to make edits to blocks globally. This ranges from being able to set the color for Links across blocks to modifying how all Headings ought to look. Global styles operates both at the site level as well as allowing changes to each registered block. A lot of the tools that emerge from this work continue to be released in each major WordPress version in the form of block tools.

  • ⚒️ Overview Issue and next steps: 20331

🕰 Timeline

In terms of timelines, all of these are in advanced stages and can be used in the Gutenberg plugin already. The main hurdle to include the work in major WordPress releases are the various dependencies between each project when it comes to ensuring a great user experience. The immediate focus is then on completing the milestones, stabilizing the work, and doing as much testing with different kinds of users as possible. For that last purpose, there will be some calls for testing announced soon as part of the Site Editing Outreach Program.

#full-site-editing, #gutenberg

Riad Benguella 10:07 am on November 19, 2020
Tags: , , gutenberg,   

What’s new in Gutenberg? (18 November)

While the work on Full Site Editing and Global styles is continuing, 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.4.0 introduced some nice additions to existing blocks and APIs. Let’s take a look at some of them:

Button widths

Instead of relying on dynamic widths, you can set percentage widths for button blocks.

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

Blocks can provide block variations. In Gutenberg, a variation switcher can be added to the block inspector for these blocks.

Social Icons size support

Users can change the size of the icons in the Social Icons block.

Font size support for the List block

9.4 🇸🇰

Features

  • Add Keyboard Input inline format. (26801)
  • Add Block variations transformations. (26687)
  • Add width selector for button block. (25999) (26781).
  • Add font size support to the List block. (26257)
  • Social Links: Add ability to change social icon sizes. (25921)

Enhancements

  • Unify the inserter search UIUI User interface. (26595)
  • Polish custom select menu styles. (26956)
  • Polish menu item styles. (26889) (26720) (25218) (26572)
  • Polish the link interface. (26551)
  • Code & Preformatted Blocks: Delete on backspace if empty. (26605)
  • File Block: Move the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org button to the Block toolbar. (26602)
  • Allow adding a 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. by typing /h1, /h2 etc. (26597)
  • Polish 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. block styling. (26456)
  • Polish Search block styling. (26446)
  • Use a wider canvas for themes that don’t provide a custom width. (26357)
  • Show reduced UI on hover. (26882)
  • Update Legacy 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. toolbar button font to match UI when displayed in Widget Screen. (26841)
  • Update token field icon. (26726)
  • Windows 10 high contrast mode improvements. (26567)

New APIs

  • Create block: Add support for external templates installed from npm. (23712)
  • Add optional icon to snackbar notices. (26907)
  • wordpress/env: Add support for custom WP_HOME port. (26507)
  • wordpress/lazy-import: Allow importing local paths. (23751)
  • Format library: Introduce useAnchorRef. (26782)

Bug Fixes

  • Fix block context injection hook after CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. change in block rendering. (26998) (27011)
  • Fix Query block’s Toolbar popover width. (26992)
  • Fix IE11 interface bugs. (26944)
  • Improve arrow navigation between blocks. (26921)
  • Fix block alignments when theme styles are disabled. (26912) (26680) (26376)
  • Fix padding of text-only buttons mode. (26769)
  • Fix horizontal mover icon position. (26761)
  • Fix column width units. (26757)
  • FormTokenField input position when typing. (26741)
  • Fix applying colors to outlined buttons. (26707) (24626)
  • Render big font sizes properly in the font size picker. (26705)
  • Use currentColor in quote blocks to better support dark themes. (26684)
  • Fix “Browse All” in Quick Inserter for container blocks. (26443)
  • Fix responsive embeds in the widget screen. (26263)
  • Fix undefined index notice in Social Link Block. (25663)
  • Buttons block: Fix default alignment icon in toolbar to reflect the actual default alignment of buttons. (26910)
  • Block Support: Fix font size style when applying block support. (26762)
  • Do not invalidate the entity record cache during optimistic update in saveEntityRecord. (26627)
  • Provide a minimum of code wrapping for the code block. (26623)

Experiments

  • Full Site Editing Framework: Rework templates and template parts synchronization. (26650) (26383)
  • Full Site Editing Blocks:
    • 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: Allow editing of generated excerpts. (26637)
    • Post Excerpt block: Add missing closing div tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). (26806)
    • Add wide and full alignment options to the post/site title blocks. (26601)
    • Template Part block: Render preview as div. (26873)
    • Post Taxonomies: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Fatal erroor for unregistered taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. (#26851). (26854)
    • PostAuthor: Safeguard to wait for authors to load. (26776)
    • Query block: Update the order of settings and filters in 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.. (26647)
  • Site Editor:
    • Fix responsiveness. (26021)
    • Fix alignment of the new template button. (26934)
    • Add default block widths styles. (26853)
    • Refactor menu creation code. (26966)
    • Only show auto-draft template parts corresponding to current theme. (26948)
    • Polish the template navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.. (26933), (26930).
    • Add navigation panel back button slot. (26846)
    • Remove dashboard button focus on mount. (26845)
    • Saving flow: Use template and template parts entities titles. (26708) (26653)
    • Reorder template creation dropdown. (26610)
  • Global styles:
    • Fallback to theme color pallete. (26783) (26786)
    • Hide Block panels without content. (26609)
    • Update styles to rely on CSSCSS Cascading Style Sheets. variables for colors and gradients. (26319)
    • Fix Table block global styles selector. (26973)
    • Hide the line height panel if disabled in 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. file. (26778)
    • Cache generated styles. (25680)
    • Add: Mechanism to detect if a block instance matches a global styles selector. (26945) (26991)
    • Extract theme json processor. (26803)
    • Add support for line height at the global level. (26767)
    • Add preset classes generation on the client side. (26224)
  • Navigation block: Fix color support declaration. (26928)
  • Popover: Add sticky boundary element prop. (26728)
  • Block Support:
    • Add font style and weight options with combined UI. (26444) (26868)
    • Add text transform block support flag. (26060) (26059)
    • Add Font Family picking mechanism. (24868), (26750), (26759).

Performance

  • Use 2-pass terser compression. (24821)
  • Memoize getEntityRecords to prevent infinite re-renders. (26447)
  • Resolve per-entity resolvers after receiving a list of records. (26575)

Documentation

Code Quality

  • Use date-fns and date-fns-tz instead of moment. (25782) (27002)
  • is-shallow-equal: Convert to ESM. (26833)
  • Minor code refactoring in template part previews. (26949)
  • Drop zone: Rewrite with hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. and simplify. (26893)
  • PostTitle: Rewrite with hooks (+ avoid globals). (26820)
  • Avoid relying on a the global document. (26834) (26814) (26813) (26657)
  • Format library: Use hooks for all components. (26779)
  • Sandbox: Use hooks and avoid withGlobalEvents. (26742)
  • Draggable: Use hooks and prepare for 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.. (26897)
  • PostLockedModal: Use hooks and avoid withGlobalEvents. (26743)
  • WpEmbedPreview: Use hooks and avoid withGlobalEvents. (26740)
  • FocusableIframe: Use hooks and avoid withGlobalEvents. (26737)
  • Navigation Component: Update styles to reference grid spacing helper. (26523)
  • Hooks: Type package. (26430)
  • Deprecated: Type package. (26429)
  • Movers: Small positioning refactor. (26353)
  • Use useAnimate for all Animate component usage. (26201)
  • Gallery block: Use 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. v2. (26145)
  • Gallery: Remove obsolete deprecation entry. (26736)
  • Cleanup: (24831), (23598), (27000).
  • Remove useMemo in Query inspector controls. (26658)

Build Tooling

  • Add eslint rule to warn against using globals for addEventListener. (26810)
  • Update workflows to use Node 14.x. (26835)
  • Add command to format PHP files. (26850)
  • Build Tooling: Rebuild stylesheets when imported styles are modified. (26649)
  • Fix GH actions “cancel” step. (27025)
  • Run assign fixed issues and first time contributor label tasks for PRs from forks. (26876)
  • Update .nvmrc to use latest LTS. (26855)
  • Update nodegit to 0.27.0 in wordpress/env. (26712)
  • Tests: Add fixture for Column deprecation. (26774)
  • Store screenshots of CI end-to-end failures as CI artifacts. (26664) (26957)
  • End 2 End Tests:
    • Fix improper assertion in template-part.test. (26709)
    • Fix RTL end-to-end tests. (26508)
    • Add regresion end-to-end test for the empty reusable block causing WSODs issue. (26913)
    • Add block drag and drop test. (26869) (26904)
    • Add Delete on backspace from empty code/preformatted blocks test. (26972)
    • Merge end-to-end test relying on order into one. (26883)
    • Add template part conversion end-to-end tests. (26788)
    • Make the allowed blocks test more stable. (26631)
    • Add end-to-end test utils to install and activate themes. (23685)

Various

  • TextControl: Support forwarding refs. (26209)
  • Update gutenberg_is_fse_theme function to make it filterable. (27021)
  • Windows: Use wp-env instead of file location. (26671)
  • Site Editor: Rename left sidebar → secondary sidebar. (26517)
  • Add State locks for concurrency control to wordpress/core-data. (26389) (26661)
  • Avoid PHP warnings when 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 folder isn’t writable. (17671)

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.46.2s26.6ms
Gutenberg 9.36.3s23.7ms
WordPress 5.56.7s22.1ms

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

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

Ajit Bohra 9:37 pm on November 10, 2020
Tags: , , , gutenberg,   

Editor chat summary: Wednesday, 4 November 2020

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, November 4, 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.6 Beta 3

WordPress 5.6 Beta 3 is now available to be tested. Released on 2nd novemebr.

WordPress 5.6

Project board to track issues for inclusion in WordPress 5.6.

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

Gutenberg 9.3 was released on 4th november

Monthly Plan

November Monthly Priorities.

Updates on the key projects

@youknowriad

  • The pace is increasing on the Full Site Editing related work, now FSE themes don’t need the experimental flag to work properly. A warning message about the experimental state is shown in the adminadmin (and super admin).
  • I expect some of us to focus more on template parts and templates auto-draft behavior (how to load theme templates and templates parts in the site editor).
  • I believe other folks are also working on the UIUI User interface and the 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..

@vindl

Full Site Editing – Navigation milestone update:

  • The PR for detaching blocks from Template Parts shipped.
  • Bunch of fixes and tweaks for some minor issues related to the navigation 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. and template parts.
  • PR for adding incorporating search for templates and template parts is now open
  • Here is an attempt to create wp_templates entries on theme updates instead of on each 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. request
  • We started a new and simplified version of framework PR for introducing a custom status for templates provided by themes (or plugins) as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. files, which haven’t been customized by the user yet

@ntsekouras
FSE: Query block

@jorgefilipecosta

Global Styles:

  • We now support other units and fluid typography on font size presets.
  • We now use the block settings on each global styles panel.
  • We now reference the preset variables on global styles so if for example global background color is set set to color X, and later we change color X, the background color also changes.
  • The UI is improved and we don’t show block panels without content.
  • We should have font family picker in the next few minutes (just finishing a last round of tests)

@nosolosw

  • For Global Styles the current focus is on tighten up things and fixing the flows, specially by testing what we have with the TwentyTwentyOne blocks theme.

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.

@zieladam

Took a deep dive in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data:

  • Propose an update to useSelect to address every key stroke in the editor re-running all registered selectors.
  • Merged two fixes related to saveEntityRecord ending up with outdated state.
  • Proposed lock mechanism for core-data to ultimately fix all the timing issues.
  • I am also playing with taking screenshots of all e2e failures 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/ CI.

@youknowriad

  • I’m focusing on FSE efforts as raised above
  • I’m also thinking about 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. for the APIs introduced on WP 5.6 and hoping to find time to write these next week.  I believe we should start publishing some of the block editor dev notes.

@karmatosed

  • Navigation drop down improvements.
  • Link iterations again this one grew from improvments to link UI.
  • I’m trying to do some PR trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. pickups as go and level up my skills there, thank you to everyone that has supported me (special calls to @itsjonq and @joen) Also continuing to work on options and going to post some flow updates to that this week.
  • Release continues, so I’m also navigation around that.

@annezazu

  • Quieter week for me, Working with others on communication for 5.6.
  • some light triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. for unlabeled items, and some quick FSE focused testing.
  • Excited to take 9.3 for a spin!

@ntsekouras

  •  Query block: Expose initial templates as block variations.
  • Fix double alignment controls in toolbar of Heading block.
  • Allow editing of extracted 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. in Post Excerpt block

@itsjonq

@paaljoachim

@retrofox

@bph

  • Thanks to  @afragen I am  almost ready for Gutenberg-Nightly version for non-dev testers.

@jorgefilipecosta

  • Iterated and merged support for other units and fluid typography on font size presets.
  • Iterated and merged PR to use the block settings on each global styles panel.
  • Iterated and merged PR to reference the preset variables on global styles so if for example global background color is set set to color X, and later we change color X, the background color also changes.
  • Submitted and merged PR to don’t show block panels without conten
  • Rebased and Iterated on font family picker in the next few minutes (just finishing a last round of tests).
  • Reviewed multiple PR including the moment removal PR.
  • Submitted multiple small fixes/enhancements to Global styles

For the next week, I plan on testing 2021 blocks deeply with global styles and submit fixes either for the theme or to Gutenberg. I plan to continue the typography work with font weight and  recheck a possible font loading global styles API.

@kjellr

  • I’ll be focused on Twenty Twenty-One Blocks.

Open Floor

@tomjn

  • Asked what’s the best way to register block for particular post type.
  • Current option is to loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. through blocks and unregister undesored blocks for the posttype.
  • Some discussion around defining posttype via block.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. but no decision.

@meszarosrob

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

Riad Benguella 1:14 pm on November 4, 2020
Tags: , , gutenberg,   

What’s new in Gutenberg? (4 November)

This is the first GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ release that is not going to be included entirely in WordPress 5.6. The important bug fixes were backported to WordPress 5.6 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. 2 and 3.

In addition to the stability work for WordPress 5.6, the contributors also focused on improvements to the Full-site editing flows. The FSE experiment will be automatically enabled if you activate a 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 theme.

The site editor and its navigation panel saw a lot of improvements as well.

Site Editor Screen

9.3 🇲🇾

Enhancements

  • Support for all units in Font Size presets. (26475)
  • Sort post formats alphabetically by translated name. (26305)
  • Ensure Alignment options are always rendered in the same order. (26269)
  • Buttons block: Overhaul alignment and justification controls. (23168)
  • a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Retain focus position when tabbing back to the block toolbar. (25760)
  • Dark mode UIUI User interface enhancements. (26483) (26510)
  • Social Links: Add Patreon, Telegram, and Tiktok icons. (26118)

Bug Fixes

  • Fix Visual 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. on the color palette editor. (26614)
  • wordpress/scripts: Fix error in ignore-emit-webpack-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. (26591)
  • Cover block: Restore default overlay background. (26569) (26625)
  • 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.: Fix incorrectly pluralized strings. (26565)
  • Limit the editor interface to max-width 100%. (26552)
  • Ensure editor footer remains at the bottom of the screen when navigating regions. (26533)
  • URLInput: Use debounce() instead of throttle(). (26529)
  • Heading Block: Fix double alignment controls in toolbar. (26492)
  • Fix Block preview vertical offset. (26487)
  • Reusable Blocks: Make the number retrieved from the 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. unlimited. (26486)
  • Fix editor error when an empty reusable block exists. (26484)
  • Latest Posts: Add missing classname. (26477)
  • Fix single column block display for smaller screens. (26438)
  • Turn off autocomplete for ComboboxControl components. (26427)
  • Fix parent post selector initial value and search. (26397)
  • Fix gallery block undo issue. (26377)
  • Fix spellings in the Getting Started guide. (26310)
  • Fix embed blocks rendering in 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. (26307)
  • Fix design of color/gradient controls. (26255)
  • Fix drop zone indicators for non blocks. (25986)
  • Fix left and right alignments for video embeds. (24847)
  • Next Page block: Center text properly. (26515)

New APIs

  • Allow text buttons in DropdownMenu. (26425)
  • Support custom viewportWidth in block previews (example). (26346)
  • Change updateSelection property to false for InnerBlocks. (26312)

Experiments

  • Full Site Editing :
    • Disable 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. and widgets screens. (26594)
    • Automatically enable FSE experiment. (26500)
    • Remove the demo templates. (26419)
    • Strip post ids from template part blocks on export. (26268)
    • Allow themes to live in a subdirectory. (26391)
  • Introduce the layout prop to InnerBlocks. (26380)
  • Site Editor
    • Add Dropdown to Create Generic Templates. (26284)
    • Prevent inserter overscroll. (26432) (26583)
    • Fix dirty template and template parts on template creation. (26560)
    • Fix composite role warnings triggered by template part previews. (26406)
    • Reduce the Amount of Data Passed Through the Components Tree. (26463)
    • Add the option to convert a template part to regular blocks. (26488)
    • Fix Invisible Template Previews in 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.. (26424)
    • Add convert to template part flow. (20445)
    • Fix custom template part theme metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. (26587)
  • Query block:
    • Add initial variations. (26378)
    • Add sticky support. (26279)
  • Global Styles:
    • Use block settings on the block panels. (26218)
    • Fix: Font size picker regression on edit site global styles. (26603)
    • Process settings only once. (26330)
  • Navigation Component:
    • Add Support for RTL Languages. (26334)
    • Styling 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.. (26338)
    • Fix focus behavior when opening the panel. (26296)
    • Fix the height of the Navigation panel and make it scrollable. (26187)
    • Search Control in Menu Titles. (25315)
  • Use a DropdownMenu for menu selection on the navigation screen. (25390)

Documentation

  • Update glossary to include more block-based terminology. (26478)
  • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. documentation for clarity around closing issues and labels. (26480)
  • Update WordPress versions document to include 5.6. (26365)
  • Typos and tweaks: (26491), (26553), (26437), (26400), (26566).
  • Storybook: Fix broken BlockDraggable story. (26457) (26431)

Code Quality

  • Remove anonymous components from global styles sidebar. (26604)
  • Add types to components:
    • Tip. (26173)
    • BaseControl and VisuallyHidden. (26078)
  • Improve wordpress/I18n types. (26171)
  • Migrate to builtin data controls. (25993) (25949) (25773) (25990) (26509) (25772)
  • Chore: Ensure WordPress packages share the same hoisted dependencies. (26453)
  • Use CSSCSS Cascading Style Sheets.-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. in wordpress/components:

Build Tooling

  • Components: Copy SCSS file from reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates to components package. (26534)
  • webpack: Replace legacy namedChunks/namedModules options with chunkIds/moduleIds. (26502)
  • Rewrite sideEffects flags to use only positive patterns. (26452)
  • Load the Twenty Twenty-one theme by default in Gutenberg’s local environement. (26414)
  • Build: Assign the library exports to window.wp rather than this.wp. (26272)
  • Move to Dart Sass compiler. (25628)
  • Fix composer test failures due to 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. lock. (26472)
  • Update node-watch to 0.7.0. (26403)
  • Release tool: Support multiple RCs. (25971)
  • jest-puppeteer-axe: Migrate to @axe-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./puppeteer. (25659)
  • Improve End-to-End tests stability:
    • Fix autosave end-to-end tests. (26416)
    • Fix ‘Multi entity saving -> site editor’ end-to-end failures. (26371)
    • Fix Twenty Twenty One related end-to-end test failures. (26341)
    • Fix demo test by disabling the welcome dialog. (26314)
    • Disable BlockPreviews from axe-core tests. (26527)
    • Site editor: Fix end-to-end tests navigation panel. (26454)
    • Consolidate sequential multi-entity-saving tests. (26373)
    • Make the adding patterns test stable. (26345)

Various

  • Create Block: Update the list of categories to pick from. (26448)
  • Removes extra full stop from preferences. (26586)
  • wordpress/scripts: Configure all the tools to skip vendor folder. (26450)

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.36.6s27.16ms
Gutenberg 9.26.2s26.62ms
WordPress 5.56.4s27.53ms

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

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