Tag Archives: core-editor

Ajit Bohra 8:18 pm on July 26, 2021
Tags: , core-editor, ,   

Editor Chat Agenda: 28 July 2021

Facilitator and notetaker @ajitbohra

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

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

  • WordPress 5.8
  • What’s new in Gutenberg 11.1.0
  • 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/ 11.2.0 RC
  • Whats next in Gutenberg: July and August.
  • Project updates based on the latest site editing scope:
    • BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor.
    • Navigation Block & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

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

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

#core-editor #core-editor-agenda #agenda #meetings

Andrei Draganescu 5:30 pm on July 21, 2021
Tags: core-editor,   

Editor chat summary: 21 July, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, July 21, 2021, 02:00PM UTC on Slack. Moderated by @andraganescu.

Announcements

Monthly Priorities & Key Project Updates

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

As the project has landed in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., there is now a new tracking issue set up for things identified by the community as great follow up work to improve on it.

Mobile Team

  • Shipping: Block picker search and first iteration of the embed block will be shipping in the next release.
  • In Progress: Scoping the next phase of Global Style Support work focusing on text-related styles.

Task Coordination

@ntsekouras

  • Landed SegmentedControl (PR: 31937)
  • I’m working on porting some more components from g2 and will make explorations for more layout integrations. Related Riad’s PR (PR: 33359)

@torounit

  • I am working on refactoring HierarchicalTermSelector (PR: 33418)

@zieladam

@mamaduka

  • Started refactoring FlatTermSelector into a functional component and utilize core data module for fetching terms.
  • While working on this discovered a few minor issues with the “Most Used Terms” component, which should be fixed now.
  • Also, now users with author roles should be able to set featured images uploaded by other users.

@aristath

  • Autogenerate headings anchors – PR: 30825.
  • Allow enqueing multiple stylesheets per-block – PR: 32510.

@getdave

  • I improved the build tooling by automatically grouping changelog items by feature when it is build on CI PR: 33229.

@ajlende

  • Cropping for the site logo needs reviewers PR: 31607.
  • Working on duotone enhancements we can discuss more during open floor PR: 33466.
  • Related 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. fix for cover block spacing ui PR: 33560.

Open Floor

A test file was added to WP Core in 5.6.0, but added incorrectly, which means that the tests effectively were never run. I’m trying to fix that, but am now finding that 7 out of the 20 tests are failing. Raised by @jrf

We need someone with good knowledge of global styles to help figuring out if the test’s problem is on the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher or JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. side of the global styles.

@torounit surfaced issue 33589

This is probably a bug introduced by the recent work on the “select all” behavior in the block editor.

@ntsekouras surfaced a problem in PR: 1483 – It seems there will be the need for WP version check in patterns

The problem lies that patterns can have blocks with shape that is not supported in a WP version, but themes are also checked against WP version that are compatible. This isn’t the same WP version usually.

@ajlende asked if more people think it might be beneficial to have a system to that allow block supports to detect placeholder state.

General support for the idea was offered.

@mikeschroder raised PR: 32516 and asked if this direction is a good approach.

Looking forward for feedback from folks who know the rich-text package and can provide advice. Does that seem along the right lines for a fix?

#core-editor, #core-editor-summary

Héctor Prieto 1:04 pm on July 21, 2021
Tags: core-editor, , ,   

What’s next in Gutenberg? Site Editing status check (Late July-August 2021)

WordPress 5.8 is already here, an exciting release marked by the inclusion of many Full Site Editing features that have been big-picture focuses in recent times. Because of this important achievement, in contrast to normal monthly updates, this post seeks to review the status of Full Site Editing and summarize the next high-level focuses within 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.

Full Site Editing is the lighthouse goal for phase 2 of Gutenberg. As such, it’s good to remember it is a collection of projects that allow site editing with blocks, bringing powerful capabilities for a smooth editing experience.

WordPress 5.8 includes some of these Full Site Editing projects and features; while some of them will continue as ongoing focuses for subsequent Gutenberg releases (⚒️), others can be considered stable and enter a maintenance phase (✅)

Without further ado, let’s look at the current status of the milestones that have guided Full Site Editing work in the last months and the updated scope for Site Editing.

⚒️ Updated scope for Site Editing projects ⚒️

Site Editing Infrastructure and UIUI User interface

The Site Editing Infrastructure and UI provide foundational work for the rest of FSE projects, mainly in the Site/Template Editor, Template parts, and the numerous APIs that support work around Full Site Editing.

The first two iterations of the site editor milestone introduced 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. The ongoing third one offers the possibility of creating custom block templates in classic themes and is available in WordPress 5.8 for those themes that opt-in to the site editing experience. Work will continue to finalize the Site Editor naming and placement: the current Site Editor as we know it in 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 may evolve for better navigation flows and interactions.

Thanks to feedback from different FSE Outreach Program testing rounds, the next focus for site experience and tooling improvement include:

Overview Issues: ✅ Part 1, ✅ Part 2, ⚒️ Part 3

Global Styles

Global Styles comprises 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, and toggle on or off the available block design tools (typography, colors, dimensions, etc.). All of this can be managed through the theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. configuration file and is one of the key features available in WordPress 5.8. After a few iterations and open testing, this feature is considered stable and moved to a maintenance phase.

The other major part of global styles is the user interface to make edits to blocks globally. With theme.json in place, the next release cycle will have the Global Styles UI as one of its main focuses, allowing users to tweak the theme easily. Color handling will be an important focus, not only to better theme switch but also to seamlessly integrate color palettes with patterns.

⚒️ Global Styles Overview Issue

Theme Blocks

To support the theme building needs outside of the template and template parts infrastructure, there was a need to create many new blocks centered around theme functions. WordPress 5.8 brings several of these blocks, from Site Title, Site Tagline, and Site Logo that allow users to configure site settings with blocks, to the post-related blocks such as Post Title and Post Date, to be used inside a Query 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. to display post data.

Although new theme blocks may be added as the need arises and the existing ones will receive incremental upgrades, the basics of this milestone are complete.

✅ Theme blocks Overview Issue

Query Loop Block

Among the theme blocks, the Query Loop Block has been a significant area of the site editing focus in the past months, deserving its own milestone. Taking some of the 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. infrastructures to the limit, such a powerful block has proven challenging to expose at a user level. As a result of the feedback collected in the FSE Outreach Program, the block has been renamed to clear confusion, and usability enhancements have been implemented before launching it in WordPress 5.8.

With the Query Loop foundations in place, the next iterations will seek to ease the user interactions and flows, even more, thanks to two fundamental Gutenberg tools – block patterns and block variations. The former will continue to help set the inner block structure and content. In contrast, the latter will present the powerful Query Loop’s features in the form of preconfigured blocks and consolidate similar blocks to use the Query Loop Block as their underlying mechanism.

✅ Query Loop Block Overview Issue

Navigation Block

Along with the Query Loop Block, the Navigation Block is another theme block that stands out as a project in its own right. This block has seen great improvements in the last few months, from improved overlays to responsive menus. New blocks are available as well, such as the Home Link block. Shortly, we will see the Navigation block house whole new kinds of blocks thanks to the recent frontend markup adjustments that allow blocks other than links in an accessible way.

Because of its key role in building rich theme blocks, the Navigation Block will be one primary focus during the next WordPress release cycle. Apart from more blocks being available inside the Navigation Block, customization options – such as configuring dropdown behavior or adding fullscreen variants – are an area that seeks improvement. These customizations should be design-driven due to the multiple layouts nested navigation menus can have.

⚒️ Navigation Block Tracking Issue

Site Editing Gradual adoption

Full Site Editing represents a new paradigm in site and theme building in the well-established WordPress ecosystem, and as such, providing the right tools is key to gradual adoption. Tools like the Widgets Editor and Navigation Editor bring block editing capabilities to traditional features that can’t take full advantage of their native block counterpart implementation.

WordPress 5.8 brings the power of blocks to both the Block Widgets Editor 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.. Users will be able to add blocks 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, add widgets and blocks with live preview, and schedule and share directly from the Customizer.

Because blocks can now be added to widget areas, developers are encouraged to phase out their widgets in favor of blocks, which are more intuitive and can be used in more places. Developers can allow users to easily migrate a Legacy Widget block containing a specific widget to a block or multiple blocks. 

On the other hand, the Navigation Editor has also seen its share of iterative improvements in the last months. Together with the Navigation Block, it will remain an ongoing focus for the next WordPress release cycle.

✅ Widgets Editor Tracking Issue

⚒️ Navigation Editor Tracking Issue

Smoothing block interactions

As mentioned with regards to Query and Navigation blocks, the complexity of the editor increases as site editing capabilities are introduced with advanced block structures and customization options. This highlights the need to expand our APIs and interactions — which are well suited for simple block structures — to better support container blocks.

To address some of this, the List View introduced in Gutenberg 10.7, and WordPress 5.8 aims to help navigate these advanced structures more efficiently and should continue evolving further in the future. Internally, the List View is powered by a component available in the post editor List View and advanced blocks like Navigation; all features and blocks having a list of blocks will benefit from the improvements made to this component.

Another challenging editing experience with the increased number of container and inner blocks is adjusting parent block settings when editing a child block.  Users often need to switch between different child and parent blocks to change settings like layout or positioning. In turn, it is necessary to explore Toolbar absorption mechanisms that allow parent blocks to expose their toolbar on their children.

Patterns everywhere

At this stage, it is no secret that block patterns represent considerable potential for users to add many blocks with different preset layouts and settings easily. By using patterns, users don’t need to individually add blocks to achieve rich representations in headers, columns, or Query blocks, as patterns act as a jumpstart blueprint that can be tweaked and adjusted to the user’s needs. 

An example of the improved interaction block patterns is demonstrated by the Query block, which allows users to select block patterns in its placeholder state. This is just the tip of the iceberg in terms of the ways patterns can leverage the editing experience, and as such, efforts will continue improving pattern insertion capabilities.

Thanks to the recently released Block Pattern Directory, patterns can be copied and pasted into the block editor; upcoming Gutenberg iterations will connect and retrieve patterns from this directory, allowing users to choose from huge amounts of beautiful patterns without leaving the editor. Both to ease navigating the big number of patterns users will be able to choose from and accommodate increased pattern complexity and richness, such as in Query or 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. patterns, revisiting the pattern insertion UI will be an ongoing focus in the months to come.

 ⚒️ Pattern Insertion Tracking Issue

Design Tools

Several design tools are needed to ​​ensure a wide range of exquisitely crafted patterns can support powerful settings and rich block customizations. These encompass all tools related to the appearance of blocks and range from colors, typography, alignments, and positioning to filters like duotone, cropping, and background media and will need to integrate seamlessly with theme.json mechanics.

Going further, controls like font size, even if exposed as single values to users in the UI, are built behind the scenes to accommodate different viewport ranges. Apart from providing access to the underlying mechanisms through theme.json, responsive-previewing and device-specific editing will be necessary to support this.

To support the ever-increasing number of tools, 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., while secondary in some regards to the block canvas and toolbar, will need to accommodate many of these tools, whereas the Component System will provide a shared design language between all these controls.

⚒️ Design Tools Overview Issue

How to follow along with Gutenberg

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

Ways to Get Involved

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

Hearing your feedback is crucial to drive upcoming priorities and iterate on our work, so you are more than welcome to join our Full Site Editing Outreach Program!

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

Props to @javiarce for creating the images, and to @cbringmann and @mcsf for reviewing the post.

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

Kerry Liu 4:26 am on July 21, 2021
Tags: , core-editor, ,   

What’s new in Gutenberg 11.1.0? (21 July)

Two weeks have passed since the last 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, which means a new version is available! Gutenberg 11.1 adds the ability to edit 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. border easily, enables drag and drop support for the List View component, and includes many 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 centered around the Widgets Editor and Block Library.

Block supports: border

Take an early look at custom block borders! When borders are enabled in a theme.json file, and a block declares that it supports it with the block supports 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., a new block panel is available that lets us change the border radius, width, style, color, and border units.

Set and style custom block borders

List View drag and drop

Intuitively move and reorder blocks using drag and drop in the List View.

Use the persistent list view to reorder blocks

11.1.0

Enhancements

  • Adminadmin (and super admin) panel available as PWA. (33102, 33310)
  • Block Breadcrumbs: Small chevron icon for breadcrumb separators. (33042)
  • Block Library:
    • Columns Block:
      • Add stack on mobile setting to allow for columns without mobile breakpoints. (31816)
      • Add the percent unit to the default units in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (33468)
    • Latest posts: Remove grey color for dark themes. (33325)
    • List Block: Add link color control to list block. (33185)
    • Post Terms Block: Add a “separator” attribute to post-terms block. (32812)
    • RSS Block: Update block styles. (33294)
    • Tag Cloud Block:
      • Add ability to change number of tags shown. (32201)
      • Remove editor style so editor matches frontend. (33289)
  • Design Tools, Border:
    • Add support for custom border units. (33315)
    • Update border support UIUI User interface. (31585)
    • Set border style none when border width zero. (32080)
  • Link Editing: Add Unlink button to LinkControl popover. (32541)
  • List View: Enable drag and drop in List View. (33320)
  • 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: Adds auxiliary class names for editor styles. (33388)
  • General UI:
    • Block Settings Menu: Don’t render ‘Move to’ if there is only one block. (33158)
    • Disable ‘Post Publish’ button if saving non-post entities. (33140)
    • Preferences: Polish labels and consolidate options in preferences. (33133)

New APIs

  • 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/.: Block editor settings endpoint. (33128)
  • UI Components: Add a SearchControl component and reuse across the UI. (32935)

Performance

  • Improve List View performance. (33320)
  • Pattern Directory: Caching updates. (33052)

AccessibilityAccessibility 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)

  • Improve high contrast mode rendering of icon buttons. (33062)

Bug Fixes

  • Block Breadcrumbs: Fix breadcrumbs htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure and ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings. (33159)
  • Block Editor:
    • Move layout styles to document head (instead of rendering inline). (32083)
    • Warn only in edit implementation when using useBlockProps. (33380)
    • 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.: Remove reset styles. (33204)
  • Block Library:
    • Buttons Block: Remove green background color in button preview. (33116)
    • Embed Block: Include missing attributes when upgrading embed block. (33235)
    • Image Block:
      • Improve “can switch to cover” check. (33095)
      • Fix replace link control styling. (33326)
    • Query 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:
      • Prevent entering 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. values in the Query Loop block configuration. (33285)
      • Update getTermsInfo() to workaround parsing issue for translatable strings. (33341)
    • Search Block:
      • Fix search block button position dropdown accessibility/UXUX User experience issues. (33376)
      • Update search block to handle per corner border radii. (33023)
    • Site Title: Decode entities in site title. (33323)
    • Home Link: Remove padding. (33461)
    • Post Except: Fix excerpt_more filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. and remove wordCount attribute. (33366)
  • Design Tools:
    • Color: Prevent color panel from showing as empty. (33369)
    • Duotone:
      • Avoid rendering duplicate stylesheet and SVG. (33233)
      • Update conditions to hide duotone panel. (33295)
    • 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.
      • Allow themes to provide empty values for color.duotone and spacing.units. (33280)
      • Specify what settings can be part of settings.layout. (33303)
  • Rich text:
    • Fix format deregistration. (31518)
    • Autocomplete: Reset state for empty text. (33450)
    • Run input rules after composition end. (33416)
  • Site Editor: Close 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. when all posts clicked. (33393)
  • Slash Inserter: Fix slash command focus style. (33084)
  • Widgets Editor:
    • Fix moving inner blocks in the Widgets 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.. (33243)
    • Fix inserter size on Widgets Editor 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.. (33118)
    • Merge conflicting wp.editor objects into a single, non-conflicting module. (33228)
    • Retrieve latest widgets before loading sidebars. (32997)
  • Writing flow:
    • Allow select all from empty selection. (33446)
    • Attempt to fix preview end-to-end failure. (33467)
  • Components:
    • Suggestion List: Check if a node exists to scroll into view. (33419)
    • Navigation component: Fix item handling onClick twice. (33286)
  • Editor: Extract snackbars into a separate component. (33355)

Experiments

  • Component System:
    • Promote g2 Popover as Flyout. (32197)
    • Add useControlledValue. (33039)
    • Add normalizeArrowKey. (33208)
    • Add mergeEventHandlers. (33205)
    • Add useCx. (33172)
    • Add useLatestRef hook. (33137)
    • Remove @emotion/css from Divider. (33054)
  • Navigation Block:
    • Add Color Options for Submenus. (31149)
    • Change Navigation block markup on front end only. (30551)
    • Improve handling of open overlay. (32886)
    • Menu item placeholder inheritance. (32512)
    • Pass block attributes with rendering with location. (33043)
    • Refactor of navigation block rendering using location attribute. (33244)
  • Global Styles:
    • Cover against non existing styles. (33127)
    • Missing link color on style properties to css var mapping. (33150)
    • Preset variables not being user on the site editor. (33149)

Documentation

  • Admin PWA: Make readme private. (33216)
  • Handbook:
    • Block API:
      • Apply enhancements included in WordPress 5.8. (33252)
      • Clarify the type of apiVersion in block metadata. (33249)
      • Fixes a typo in the documentation for block supports. (33247)
    • Block Editor API: Changes to support multiple admin screens in WP 5.8. (33262)
    • Custom Block Editor: Fixed bad image syntax and bold text. (32897)
    • Fix API documentation for data reference guides. (33384)
    • 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: Update Gutenberg release documentation to clarify release post workflow. (33328)
    • theme.json:
      • Add examples and highlight backward compatibility. (33421)
      • Update theme.json documentation for WordPress 5.8. (33131)
      • Fix codetabs syntax in theme.json documentation. (33417)
    • Use markdown headings instead of links for API declarations. (33381)
  • Update documentation for link color in WordPress 5.8. (33162)
  • Packages:
    • Add PanelBody for InspectorControls. (33227)
    • Correct wrong setState call. (32808)
    • Remove withState HOC references. (33173, 33222, 33259)

Code Quality

  • Avoid calling gutenberg_ functions within code shipped through WordPress Core. (33331)
  • Block Editor:
    • Refactor the user autocompleter to avoid apiFetch and rely on the data module. (33028)
    • Warn when useBlockProps hook used with a wrong Block API version. (33274)
  • Block Library:
    • Image Block: Fix uncaught error. (24334)
    • Latest Posts Block: Refactor to drop apiFetch usage in favor of using the data module. (33063)
    • Template Part Block: Remove unnecessary function exists check on wp_filter_content_tags. (33182)
  • Components:
    • BlockNavigation: Restructure the BlockNavigation component. (31892)
    • Box Control: Rename VerticalHorizontalInputControls to AxialInputControls. (33016)
    • GradientPicker: Stabilises GradientPicker and CustomGradientPicker components. (31440)
    • Toolbar: Enforce isAlternate on ToolbarDropdownMenu. (33129)
    • ZStack: Remove @emotion/css from ZStack. (33053)
  • Packages: Hoist dependencies for WordPress packages. (33387)
  • Plugin: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Add basic Site Title block coverage. (32868)
    • Add some functionality to createUser and deleteUser. (33067)
    • Enable previously skipped widgets tests. (33121)
    • Skipping more end-to-end tests. (33353)
    • Skip unstable end-to-end tests. (33352)
    • Switch to new puppeteer APIs for emulating conditions. (33410)
    • Update end-to-end tests to use new puppeteer drag and drop api. (33386)
  • Dependencies:
    • Update CopyWebpackPlugin to v6. (33220)
    • Upgrade Husky to 7.0.0 and git ignorance improved. (33183)
    • Upgrade Puppeteer to 10.1. (33327)
    • Upgrade Storybook to v6.3. (33219)
  • NPM Packages: Introduce release types to npm publishing script. (33329)
  • Plugin: Introduce tools folder with configuration files. (33281)
  • Workflows:
    • Release Workflow: Remove “experimental” status from WP 5.8 stable items. (33214)
    • Re-enable manually triggered workflows on forks. (32821)
    • Use NPM caching built into action/setup-node. (33190)

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 11.16.38s26.12ms
Gutenberg 11.06.06s29.55ms
WordPress 5.78.52s36.26ms

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

Thanks to @javiarce for creating the release post assets, @cbringmann for proofreading, and @priethor, @youknowriad, and @get_dave for guiding me through this release!

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

Paal Joachim Romdahl 2:12 pm on July 20, 2021
Tags: , core-editor, ,   

Editor Chat Agenda: 21 July 2021

Facilitator and notetaker: @andraganescu

This is the agenda for the weekly editor chat scheduled for Wednesday, July 21, 2021, 04:00 PM GMT+1.

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

  • WordPress 5.8 final release.
  • What’s new in Gutenberg 11.1.0
  • Whats next in Gutenberg: July and August.
  • Project updates based on the latest site editing scope & 5.8 Priorities:
    • BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor.
    • Navigation Block & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

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

#agenda, #core-editor, #core-editor-agenda, #meetings

annezazu 5:45 pm on July 14, 2021
Tags: core-editor,   

Editor chat summary: 14 July, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, July 14, 2021, 02:00PM UTC on Slack. Moderated by @annezazu.

Announcements

WordPress 5.8 project board

Big celebration for all the hard work there with 107 issues in the Done column. There are a few new items listed but, with an RC4 coming tomorrow, anything that cannot be completed today will likely need to wait for 5.8.1. Both @desrosj and @youknowriad noted this for the group. Don’t let this stop you from testing and finding bugs but do let this set expectations!

Monthly Priorities & Key Project Updates

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

Work continues to focus on bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes and building out this refinement overview issue post release.

Navigation Block & Navigation Editor

Many of the folks working on these projects have been out on vacation to relax, get time away from screens, and get inspiration from the wider world.

Template editor

Work is mainly focused on 5.8 bug fixes/testing.

Patterns

The Pattern Directory is still underway with plans to go live when 5.8 does. You can see the latest in this milestone here.

Styling

The focus continues to look out for fixing bugs that are backported to the Betas/RC.

Mobile Team

Done:

  • Users can now set the text and background colors on blocks.
  • Mobile Gallery Block Refactor (PR) done, waiting on web side now.
  • Started work on supporting GSS Font Settings and specific text color settings.

In Progress:

  • Breakthrough on the Block Picker Search blocking issue, wrapping up the project soon.
  • Embed block about to ship a first iteration of the block.
  • Further investigations for the iOSiOS The operating system used on iPhones and iPads. share extension project.
  • Added some integration tests.

Task Coordination

@zebulan

@zieladam

@toro_unit

@paaljoachim

@mamaduka

@annezazu

  • Still heavily focused on end user documentation in order to get the major new features covered (Query 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., Widgets editor, Block pattern directory, Preferences, etc).
  • Running a hallway hangout today for the #fse-outreach-experiment (all are welcome!) and have been testing 5.8 everyday over the last week+ to find some bugs.

@gwwar

Open Floor

Would it be possible to shadow 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/ Release process? Raised by @vcanales.

Both @vcanales and @gwwar expressed interest in shadowing for the release process for today’s RC. Documentation for managing releases was updated this week with more information including the need to be a part of the Gutenberg development team to help out.

Next step: @vcanales and @gwwar are going to pair up with help as needed from @youknowriad.

Help review the refactored gallery block PR. Raised by @paaljoachim.

Paal raised this PR for the gallery block refactor work as needing reviews with @youknowriad chiming in to say that it’s an important one that might require input from everyone.

#core-editor, #core-editor-summary

Riad Benguella 9:58 pm on July 12, 2021
Tags: , core-editor,   

Miscellaneous block editor API additions in WordPress 5.8

WordPress 5.8 brings several additions and tweaks to 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 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..

Contextual patterns for easier creation and block transformations

We’ve all been there. Staring at a blank page sometimes with an idea of what you want to create; often with a mind as blank as the page. To make the creation process easier, there is now a way to suggest patterns based on the block being used. This is now implemented for the Query block and includes some coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. patterns to start with.

In addition, there is an API to suggest pattern transformations that are contextual to the currently selected blocks. So how this is different to the patterns current behaviour? Previously, patterns insert demo content that must be updated after insertion. With this feature, it’s possible to use some patterns and retain existing attributes or content.

So it’s for existing blocks!

An important thing to note here is that a pattern transform can result to adding more blocks than the ones currently selected. You can see this with an example like the below where we have a Quote block but the pattern consist of more blocks:

This is the first iteration of the feature that covers most simple blocks (without innerBlocks). A new experimental API has been created where we can mark what block attributes count as content attributes. You can see more details in the PR.

In the long run as this work continues and spreads to more blocks, it will be easier to create content and get inspired without leaving the editor.

Pattern Registration API

if you’re creating your own custom block patterns, there’s a new blockTypes property that will allow your patterns to show up in other contexts like the transform menu. blockTypes property is an array containing the block names.

/register_block_pattern(
     'heading-example',
     array(
         'title'         => __( 'Black heading' ),
         'categories'    => array( 'text' ),
         'blockTypes'    => array( 'core/heading' ),
         'viewportWidth' => 500,
         'content'       => ' <!-- wp:heading {"level":3,"backgroundColor":"black","textColor":"white"} -->
    <h3 class="has-white-color has-black-background-color has-text-color has-background">Demo heading</h3>
<!-- /wp:heading -->',
     )
 );

To learn more about block patterns, see this WordPress News article: So you want to make block patterns.

BlockControls group prop

In WordPress 5.8, core blocks toolbars have been updated and made more consistent across blocks by splitting them into 4 areas like shown in the following screenshot.

To do so a new group prop has been added to the wp.blockEditor.BlockControls component. Third-party block authors are encourage to use this prop in their block code to follow the core blocks design pattern.

<BlockControls group="block">
    <ToolbarButton onClick={ doSomething }>{ __( 'My button' ) }</ToolbarButton>
</BlockControls>

#5-8, #core-editor, #dev-notes

annezazu 9:02 pm on July 12, 2021
Tags: , core-editor, ,   

Editor Chat Agenda: 14 July 2021

Facilitator and notetaker: @annezazu

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

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

  • WordPress 5.8 (Project board) & WordPress 5.8 RC 3
  • Project updates based on the latest FSE scope & 5.8 Priorities:
    • BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor.
    • Navigation Block & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

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

#agenda, #core-editor, #core-editor-agenda, #meetings

Paal Joachim Romdahl 8:16 pm on July 12, 2021
Tags: core-editor, , , ,   

Editor chat summary: 7 July, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, July 7, 2021, 04:00 PM GMT+1 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/ 11.0

Gutenberg 11.0.0 release notes. Thanks to @get_dave for writing the notes!

New feature highlights:

WordPress 5.8

WordPress 5.8 project board.

Monthly Priorities

June monthly priorities. (A special update for July and August will be coming.)
Along with Key Project updates.

Global Styles

Update from @nosolosw

  • The focus continues to look out for fixing bugs that are backported to the Betas/RC. The only major thing left at this point is being able to translate strings coming from theme.json at translate.wordpress.org. TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: theme.json strings not extracted for translation.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

Update from @andraganescu

  • The widgets editor is looking stable. This 5.8 RC2 release included several fixes and we’re hoping for a stable period with no new major issues. Currently, there are some problems in testing with WP 5.7.2 so please test using the 5.8 branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch"..

Update from @noisysocks

Navigation Block and Navigation Editor

Update from @andraganescu

  • For the navigation block I want to highlight the merge of @tellthemachines’s PR that decouples the markup if the block between the front end and the editor.

Update from @joen

Update from @get_dave

Mobile Team

Update from @chipsnyder

  • Gallery Block Refactor (PR) – Just needs the experimental feature flag work to wrap. NEEDS a code review:
  • In Progress:
  • Editor Onboarding.
  • Adding search to the block inserter.
  • Embed block.
  • iOSiOS The operating system used on iPhones and iPads. share extension.
  • Wrapping up support items for GSS Colors getting ready to look into GSS Font Sizes.

Full Site Editing Outreach program update

@annezazu

Task Coordination

@mamaduka

@joen

I have some PRs that need reviews to land, but are otherwise solid. If you have green checks, I’d appreciate it:

@get_dave

  • I’ve been working mainly on contributing bug fixes to the Widgets screens.
  • Also focused on facilitating the release of 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 11.0.0, including spending time tweaking documentation and hacking on potential improvements to release tooling.

@annezazu

  • Main focuses: end user docs for the upcoming release and the FSE outreach program (current call for testing + high level feedback items post). Want to try to test 5.8RCs every day until the release.

@aristath

  • Main focus this past week for me was bugfixes for 5.8, lots of testing, and PR reviews.

@jorgefilipecosta

Open Floor

Not getting pinged directly in the issue
when an associated PR is created.

@paaljoachim

Regarding creating a PR. The PR author should also add a comment to the associated issue mentioning that a Pull Request has been made, so that commenters in the issue will get a pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” about the newly created PR. Could some information be added to the PR template to tell PR authors that they need to add a comment to the issue about the PR?

@aristath

Comment: Not all PRs are tied to a ticket… There are a lot of PRs that are the place where the actual conversation takes place, and that is fine.
So if such a comment gets added to the PR template, the wording should be such that makes it clear that if there is a ticket related to the PR, a comment would be welcomed.

Next steps and key projects

@nosolosw

I have seen that we are scoping the next steps and key projects and I think it would be good to re-align the editor agenda topics (key project updates), the monthly priorities post, and this work in the coming weeks.

@annezazu

Comment: I agree with that comment from André! I think first things first — the monthly priorities post needs to be adjusted so the key project updates can fall in line @priethor is on it as far as I know.

E2e tests

@annezazu

Topic: I’d like to talk about e2e testing and what can be done collectively to improve the reliability of these tests. I’ve repeatedly seen e2e tests brought up as a major pain point over time. I’d love to hear what ideas folks have but, for now, I think it might be neat to try having dedicated time to discuss e2e tests during meetings.

Comments:

  • Some of the main points that came up:
  • e2e tests are important to catch regressions, the more we work on them and feel responsible about their stability (and not just relaunch until it pass), the better.
  • Look to improve overall stability.
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. is starting to build e2e tests following models/patterns from Gutenberg.
  • What about forming a project to focus on improving the stability and robustness of the Gutenberg e2e tests? It might provide focused attention and effort as well as a board to collect and promote shared collective insights and discussion.
  • Several tests that can become unstable from time to time, and often times, the reason they break is legitimate just hard to reproduce.

A followup conversation between @hellofromtonya and @youknowriad

  • Current state: e2e test suite is robust and stable.
  • Failed e2e tests are real failures.
  • Problem: difficult to debug and identify why and where new code is legitimately making existing tests fail.
  • This changes the discussion and focus: shift towards => how to surface the why and where to help contributors make their tests more robust as well as fix problems in their source code that are making existing tests fail.

Check out the longer discussion about this topic that happened during the meeting.

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

David Smith 6:45 am on July 9, 2021
Tags: , core-editor, ,   

What’s new in Gutenberg 11.0.0? (9 July)

Two weeks have passed since the last 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, which means the time is now upon us for Gutenberg version 11.0.0 (released 7th July).

With efforts still concentrated on the WordPress 5.8 release, this version of the Gutenberg Plugin is heavily focused on backports 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.

That being said however, it is not without its highlights! Gutenberg 11.0 introduces:

And of course, this release also includes a plethora of updates and fixes for the Widgets editors.

Editing overlay for Template Parts and Reusable blocks

Gutenberg 11.0 improves the user experience when interacting with Reusable blocks and Template parts via the addition of a new “clickthrough” behaviour which requires the block to be actively selected before child blocks can be interacted with.

The new editing overlay and interaction – shown here on a reusable blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..

When the block is not selected, hovering the block results in a blue overlay, whilst clicking anywhere inside the block will act to select the block itself, preventing its children from being selected before the parent.

This mechanic aims to address feedback from users who were surprised at the lack of friction when editing these reusable symbols, which resulted in a frustrating experience.

The new workflow is an improvement that streamlines the experience of working with these powerful blocks.

Support for CSSCSS Cascading Style Sheets. shorthand properties 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. and block attributes

Theme JSON is becoming a powerful way of defining reusable CSS rules across Themes. As usage of this feature grows, it’s important to support common ways of setting style properties.

To this end this release introduces full support for CSS shorthand (eg: margin: 0) and longhand (eg: margin-left: 0)  properties.

For example, the following is an 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. from an example theme.json file which adds unique padding and border values for the Button block:

{
	"styles": {
		"blocks": {
			"core/button": {
				"spacing": {
					"padding": {
						"top": "20px",
						"right": "40px",
						"bottom": "20px",
						"left": "40px"
					}
				},
				"border": {
					"topLeft": "1em",
					"bottomRight": "60px"
				},
			},
        },
    },
}

Aaron Robertshaw has a full working example of custom CSS units in his theme.json gist.

This feature also extends to block attributes which allows for improved UIs to be developed to accommodate properties such as border-radius which can have both unique or uniform values set for each side (as shown in the video below).

CSS short/long-hand properties in action with border-radius.

11.0.0

Enhancements

  • Template Parts & Reusable Blocks: Add editing overlay. (31109)
  • General UIUI User interface: Improve UI/UXUX User experience for block manager search. (32922)
  • Widgets editor:
    • Display shortcuts for navigating regions. (32757)
    • Improve insertion point and drag-n-drop in the widgets screen. (32953)
    • Set 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. form to display only when not hidden. (33015)
    • Stretch Widgets editor layout to full height. (32905)
    • Add ability for Legacy custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. widget to transform into custom HTML block. (32862)
    • Remove the widget switcher block toolbar button for the Legacy Widget. (32733)
    • Wire handle_legacy_widget_preview_iframe to admin_init_hook. (32854)
    • Add to WidgetAreasBlockEditorProvider. (33166)
    • Replace “technical” error notice with a user-friendly version. (33165)
    • Replace legacy widget icon with its new version. (33041)
  • Block Library:
    • Media Text block: allow drag and drop media replacement for Media & Text. (29710)
    • Categories block: Add a label for screen readers. (33060)
    • Post Template Block: Add post-classes in the 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. for Post Template block. (30497)
  • Global Styles and Templates:
    • Allow left/right/center alignments when a layout is defined. (32810)
    • Allow longhand and shorthand properties in theme.json and block attributes. (31641)
    • Add filters to get_block_templates functions. (31806)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data:
    • Allow making context-specific requests using the data module. (32961)
    • Make apiFetch requests abortable via AbortController in @wordpress/api-fetch. (32530)

New APIs

  • Add an 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. to define the default template used for the template mode. (32771)

Bug Fixes

  • Widgets Editor:
    • Adjust widget form margins in the new Widgets Editor. (33040)
    • Adjust Legacy Widget form styles to match editor. (32974)
    • Fix creating and editing non-multi widgets. (32978)
    • Fix wide widget styles to allow floated contents. (32976)
    • Fix to allow adding the same image twice in Widgets Editor. (32951)
    • Fix Legacy Widget edit style bleed. (32871)
    • Fix flaky widgets-related end-to-end tests. (33066)
    • Fix widgets background when loading theme styles. (32683)
    • Fix widget preview not working if widget registered via an instance. (32781)
    • Don’t display adminadmin (and super admin) notices on the Widgets Editor. (32877)
    • Remove classic block in Widgets Editor. (32800)
    • Disable “FSE” blocks in Widgets Editor. (32761)
    • Align widget 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. button. (32738)
    • Fix move to widget area checkmark. (33213)
    • Fix Widget Block: widget_id is undefined when a widget is placed. (33152)
    • Reset z-index on focused widget form. (33122)
    • Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. (33200)
    • Fix legacy widget height overflow. (33191)
    • Fix pasting blocks by setting html block as freeform content handler. (33164)
    • Fix slash inserter for widgets screen. (33161)
    • Add width: 100% to components-base-control inside wp-block-legacy-widget. (33141)
    • Fix error message – bail out if get_current_screen() returns null. (33261)
    • 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.:
      • Fix block toolbar deselection when clicking scrollbar. ([32762]
      • Avoid adding default block to empty widget areas in customizer. (32979)
        (#32762))
      • Fix apparent overflow in Customizer caused by widgets editor. (32749)
      • Fix scroll jitter in Customize Widgets. (32479)
  • Block Library
    • [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.] Button block: Add deprecation for style.border.radius number. (33117)
    • Query loop:
      • Select first Query Loop found from pattern selection. (32737)
      • Fix race condition for making Post blocks inside uneditable. (33037)
      • Fix full width children from scrolling horizontally only in the editor. (32892)
      • Set default block variations not to inherit from global query. (33163)
    • Group block: Avoid rendering the layout configuration twice. (33045)
    • Button block:
      • Use border support provided styles and classes. (33017)
      • Adding buttons should respect the preferred style. (31089)
    • Categories block:
      • Fix broken experience for lower privileged users when fetching Categories . (32994)
      • Fix crash when trying to access categories on insertion. (32989)
    • Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. (32983)
    • Archives block: add custom classes to archive dropdown. (32971)
    • Post terms block: Fix broken experience for lower privileged users when fetching Terms. (32947)
    • Site Title and Site Tagline blocks: readonly view when the user has no the right permissions. (32817)
    • Image block:
      • Fix block validation errors when clearing height/width. (32524)
      • Correctly set image size slug. (32364)
    • Site Logo block: fix broken experience for lower privileged users via permissions handling. (32919)
    • Site Logo block: Update Site Logo block UI and option syncing. (33179)
    • Show fewer warnings when blocks try to render themselves. (33032)
  • Block editor:
    • Fix switcher focus style. (33031)
    • Fix drag and drop indicator above first block and RTL drop indicators. (33024)
    • Fix glitchy block focus style when multi selecting blocks. (32927)
    • Fix collapsing appender when paragraph disabled. (32894)
    • Fix unintended HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. search request in <LinkControl> when showSuggestions is false. (32857)
    • Ensure only valid URLs or anchors within the text are automatically created as links. (32663)
    • Fix drag and drop indices when a block list contains a style element. (32776)
    • Consistent border with focus styles for block appender. (33022)
    • Improve scrolling experience in Safari (32824)
    • Avoid flash of background color when scrolling in Safari. (32747)
    • Refactor appender margin. (33088)
    • Block Inserter: Prevent page scroll when searching a block. (33012)
  • Components:
    • useNavigateRegions: Don’t remove click event if there’s no element. (32816)
    • Stop modifying the parent context and correctly memoize it. (32745)
    • Clear event listeners on unmount in Tooltip component. (32729)
    • Allow decimals in spacing controls. (32692)
  • CSS and styling:
    • Remove “is-dark-theme” rules from mixins. (33058)
    • Set explicit z-index on interface body to ensure it’s pinned under interface 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.. (32732)
    • Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. (32869)
  • Template editor:
    • Fix: Template editor header area is difficult to navigate with screenreaders. (32938)
    • Do not allow users to create templates with blank titles. (32809)
    • TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. (32744)
  • Global styles:
    • Fix a regression where custom-units are forced as an array. (32898)
    • Allow custom properties to merge. (31840)
  • Editor
    • Fix “Select all” behavior in the editor. (33167)
    • Prepublish Panel: Disable the Publish and Cancel buttons while saving. (32889)
    • Revert “Prepublish Panel: Disable the Publish and Cancel buttons while saving”. (33113)

WordPress Core compatibility

  • Block Library: Improve view script integration to account for WordPress Core. (32977)
  • Auto-enable the template editor for themes with theme.json only. (32858)
  • Unify handling for block view scripts. (32814)

Documentation

  • Handbook:
    • Update ESnext code in the block toolbar documentation. (32422)
    • Fix “Gutenberg” typo in dynamic blocks tutorial. (33013)
    • Polish the Gutenberg release docs, performance audit section. (32770)
    • Update filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. in Widget Block Editor documentation. (32759)
    • Block Editor and Block API:
      • Add link color supports to Block API documentation. (32936)
      • Unify Block Editor readme language and example. (31850)
    • Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. (32921)
    • Testing: Update testing overview documentation. (32829)
  • Components:
    • ServerSideRender: Update documentation for placeholder props. (33030)
    • Add ‘area’ key to function doc for gutenberg_get_block_templates. (32746)
  • Widgets: Add technical implementation details for Widgets Customizer. (33026)

Code Quality

  • Block Library:
    • Query Loop: use plain div for wrapper element in patterns. (32867)
    • Post Template block: remove gutenberg domain from Post Template block. (32804)
    • Ensure there is no direct import from core/editor store. (32866)
    • Improve block categories by moving several blocks from Design to Theme. (32568)
  • Typings:
    • Begin adding types, starting with redus-store/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./actions. (32855)
    • Type promise-middleware. (32967)
    • Add types to redux-store/metadata/selectors. (32965)
    • Add types to redux-store metadata reducer. (32942)
    • Redux routine: Add types. (21313)
  • Card component refactor:
    • Remove the g2 implementation of Card. (32764)
    • Update Card component Storybook story. (32763)
    • Update components provider story. (32743)
    • Update to g2 implementation. (32566)
  • Components:
    • Remove duplicated space utilities. (32852)
    • Unit control Utils: Update JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. documentation and add basic test coverage. (32774)
    • Allow for non-polymorphic components. (32796)
  • Editors & Interface:
    • Update pre-publish setting copy. (32874)
    • Update FullscreenMode from class components to functional components. (32925)
    • Remove @wordpress/editor as a dependency from @wordpress/block-library. (32801)
  • Testing:
    • Iframed editor: Add Masonry integration end-to-end test. (33008)
    • Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. (32797)
    • Fix broken the post-template-editor test. (32904)
  • Linting:
    • Promote lint rule to error when validating store string literals. (32537)
    • Cleanup PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Codesniffer warnings and enable fail. (26516)
  • Data: Handle context state updates in core-data reducer on edits. (32991)
  • APIs: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Improve image caret e2e-test. (32832)
    • Add getCurrentUser() to e2e test utils: , and use it for user switching. (33050)
    • Fix WP editor metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. e2e test. (32915)
    • Fix failing PHPUnit test caused by changes in WP core. (32888)
  • CSS & Styling:
    • Restrict imports of @emotion/css. (33051)
    • @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. (32834)
    • Upgrade to Emotion 11. (32930)
  • Linting:
    • Fix eslint-import resolver with extraneous dependencies. (32906)
    • Scripts: Update lint-md-docs script to use ignore-path. (32633)
  • Workflows:
    • Recursively clear node modules when building for ci. (32856)
    • Allow point releases after a new RC is out. (32560)

Performance

  • Add in memory cache for rich link previews data. (32741)

Experiments

  • Navigation Block and Editor:
    • Update the function name and correct the comment. (32918)
    • Correct the case of navigation __unstableLocation. (32783
    • Navigation block: Add an unstable location attribute. (32491)
    • Avoid double encoding of URLs in Navigation Link block. (32840)
  • Site Editor:
    • Fix logic error on site editor useSetting. (32793)
    • Fix oEmbeds not working in block template parts. (32331)

Performance Benchmark

Due to an ongoing issue with the benchmark tests details on the performance of Gutenberg 11.0 are currently delayed. They will be published here as soon as they become available.

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 11.04.82s29.82ms
Gutenberg 10.94.69s29.54ms
WordPress 5.75.51s29.79ms

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

Particular thanks to @bernhard-reiter, @priethor and @ntsekouras for guiding me through this release, and also to @hellofromtonya for a super quick last minute bug fix!

Updated on 2021-07-09: Added performance benchmark.

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