X-post: Proposal: Migrate e2e to Playwright!

X-post from +make.wordpress.org/test: Proposal: Migrate e2e to Playwright!

What’s new in Gutenberg 11.6 (29 September)

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.6 has been released! This release includes a number of nice enhancements and as usual 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.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo 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.’s toolbar!

Locking control at block level

Alongside template level locking, now you can lock individual blocks to prevent moving or removing them; you can do this by adding a lock attribute on the block settings. Block-level lock takes priority over the templateLock feature and currently, you can lock moving and removing blocks.

The toolbar of locked blocks will have the movers hidden, and the Remove block option won’t be available either.

Query Pagination uses Flex Layout

Following previous releases bringing Flex Layouts to blocks, Gutenberg 11.6 improves the Query Pagination block to support the flex layout along with a justification option, for automatic best-fit.

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means 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. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and 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. are inherited.

The writing flow has also received some enhancements in this release: the Richtext format toolbar now shows a visual clue for hidden active items and, when using the quick inserter and clicking the Browse all button, your current filter value is now passed to the main inserter without the need to type it again, making this switch between inserters seamless.

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like 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., and is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

  • Post Title block: Add typography formatting options. (31623)
  • Query Pagination block: Use flex layout. (34876)
  • Site logo: Add site logo crop. (31607)
  • Cover: Move cover min-height into dimensions panel via SlotFill. (34065)
  • Group Block: Add information about selected element types for Group Block. (33976)
  • Image Block: Create two-way data binding for ImageSizeControl. (34649)
  • Columns Block: Update block description of columns block. (34705)
  • Gallery block: Add toolbar button to convert old galleries to new format. (34606)

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass 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. value when clicking Browse All. (34912)

Components

  • ColorPicker: Enhance the new color picker design. (34598)
  • ColorPicker: Add reset timeout to ColorPicker’s copy functionality. (34601)
  • ToolsPanel: Refine component behaviour. (34530)
  • Resize Handles: Fix stroke width of resize handles. (34949)
  • ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. (28289)
  • ServerSideRender: Delayed loading state of ServerSideRender component. (35033)

Global Styles

  • Add a simple Global Styles preview to 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.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

Widgets Editor

  • 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. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

  • FSE: Add basic support for child themes. (34354)

New APIs

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.

  • Introduce lock control at the block-type level. (32457)

Design Tools

  • InspectorControls: Wrap block support slots in ToolsPanel. (34157)

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 file block accessibility by adding aria-describedby to download button. (28062)
  • Button Block: Add prefix to the description ID. (34900)
  • Snackbar: Fix focus loss on dismiss. (34736)

Performance

  • List View: Try disabling async mode provider around selected block in ListView. (34519)

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Prevent external styling of editing UI. (34727)
  • Page List Block: Fix gap in vertical page list. (35026)
  • MediaPlaceholder: Fix media library button opening the file upload modal. (34894)
  • QueryPagination: Fix layout support. (34897)
  • Query Pagination: Fix center alignment. (34739)
  • Group block: Lower CSSCSS Cascading Style Sheets. specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

  • Fix Dropdown/DropdownMenu toggle closing in all UAs. (31170)
  • Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. (34721)
  • ToolsPanel: Allow SlotFill injection of panel items. (34632)
  • ToolsPanel: Remove / re-register panel items if the panelId changes. (34726)
  • ToogleGroupControl: Fix update when unmounted. (34756)
  • Unit Control: Always display current unit value if valid. (34768)

Template Editor

  • Fixes left & right floats for blocks that are direct children of .wp-site-blocks. (34635)
  • Fix new template form onSubmit logic. (34988)

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

  • Add missing field _invalid in menu item REST API. (34670)
  • Fix ‘menu_exists’ response status code. (34888)
  • Remove parent and position validation from menu item REST API endpoint. (34672)
  • Filters are incorrectly applied in the __experimental/menu-items controller. (34857)
  • Fix the parent menu item field in REST API responses. (34835)

Themes

  • Fix block gap added to the block templates skip link. (34986)

Widgets Editor

  • Fix disabled blocks logical error on Widgets screen. (34634)
  • Prevent welcome guide overflow x scroll. (34713)

Experiments

Navigation Block

  • Add a Submenu block for use in Navigation. (33775)
  • Initialize responsive modals with window onload event. (34544)
  • Enable open on click for Page List inside Navigation. (34675)
  • Hide theme-provided underlines when menu item is in setup state. (34486)
  • Only capture toolbars on the parent Navigation block when not in vertical mode. (34615)
  • Polish wavy underline. (34954)

Navigation Editor

  • Add initial navigation editor user documentation. (34985)
  • Adjust header toolbar icon styles. (34833)
  • Consolidate menu name and switcher. (34786)
  • Update Navigation Editor to support new submenu block. (34281)
  • Use response messages returned from API for notices. (34903)
  • Add global inserter to Navigation Editor. (34619)
  • Save menu items using the REST API. (34541)
  • Add space between menu name and switcher button. (34960)
  • Keep Navigation Editor snackbar from overflowing notices. (34661)
  • Navigation Editor: Avoid crash when transforming navigation link. (34980)
  • Correctly display notices. (34852)
  • Display error notice inside modal. (34884)
  • Fix navigation editor missing appender not showing appender when no blocks selected. (34678)
  • Fix navigation editor undo button being active when editor loads. (34839)
  • Open link control if submenu parent is link. (34798)
  • Stop submitting Create Menu form in busy state. (34983)
  • Fix saving locations using the “Manage Locations” popup. (34714)

Site Editor

  • Site Editor – add basic 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 support. (34460)

Documentation

Handbook

  • Minor copy improvements. (35015)
  • Update versions to include 5.8.1. (34789)
  • Fix typography.customLineHeight value in the compatibility table. (34791)

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the 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. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

  • Add tests for slug to class/css variable conversion. (34787)
  • Refactor the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data store to thunks. (28389)
  • Remove some low impact APIs that were deprecated on WP 5.3. (34537)
  • Rewrite FocusableIframe as hook API. (26753)
  • Rich text: Only merge neighbouring equal formats when applying a format. (35016)
  • Writing Flow: Merge place caret at edge functions. (30481)
  • Site editor: fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice: Undefined index: __unstableType. (34735)
  • Use rest_is_field_included function in menu endpoints. (34673)
  • Remove duplicate Theme JSON block gap key. (34774)

Block Editor

  • Global shortcuts: Use React events (portal bubbles & contextual). (34539)
  • Rename experimental prop used in BlockControls. (34644)
  • Update callers to handle when getBlockType returns undefined. (34891)

Block Library

  • Latest Comments: Add missing parameter to widget_comments_args. (29403)
  • Navigation submenu block: Replace global shortcut event handlers with local ones. (34812)

Components

  • ColorPicker: Replace global shortcut event handlers with local ones. (34508)
  • Delete the createComponent utility function. (34929)
  • Refactor away from the createComponent function: CardMedia (34915), ControlLabel (34927), Elevation (34916), FlexBlock (34917), FlexItem (34918), Grid (34919), HStack (34920), Heading (34921), Scrollable (34922), Spacer (34923), Surface (34924), Text (34925), Truncate (34926), VStack (34928).
  • Remove all dashicon usages from Storybook stories. (33984)
  • Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. (34966)

Global Styles

  • Fix Global Styles double border. (34906)
  • Rename globalStyles to styles. (34946)

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.

  • Add a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky 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. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

  • Fix package lock inconsistencies. (34790)
  • Update caniuse package to the latest version. (34685)
  • VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. (34269)
    • Replace usages of workspaceRoot with workspaceFolder. (34887)
  • Bump jest-dev-server to v5. (34560)
  • ESLint Plugin: Update eslint jsdoc dependency. (34338)
  • Storybook: Remove G2 prefix from the Components section. (34734)
  • Block Editor: Update react-spring to 9.2.4. (30979)
  • Move react-native-url-polyfill to dev dependencies. (34687)
  • Use Jest related rules only when the package is installed. (33120)
  • Ensure that all *.asset.php files are included in plugin.zip. (34875)

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.67.6 s38.38 ms
Gutenberg 11.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

Thanks to @priethor, @mcsf, @matveb, and @jameskoster for helping with the release!

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

Toolbar component update: September 2021

19 tickets closed during the 5.8 cycle, and some of the remaining bugs are already in the 5.9 milestone.

So what else should happen soon? To help set priorities for upcoming releases, please check out the groups of open tickets below. Hopefully you’ll find a ticketticket Created for both bug reports and feature development on the bug tracker. that interests you.

Content and arrangement

The first two tickets here suggest a long-term direction for the toolbar content and the order of links.

  • Audit toolbar links and content: includes exploration in the now-inactive Toolbar Experiments 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.
  • Rearrange top-level toolbar items to make more sense with full-site editing.

These four are potential short-term enhancements.

Showing the right elements in the right context

Interactivity

One major proposal is replacing the hover interaction for expanding dropdown menus so that would require intentional clicking (or touchscreen tap, Space or Enter key) with JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. enabled. A change this big needs plenty of testing early in a release cycle, and the code is not ready for that yet.

Ultimately, a good implementation of this could keep users from accidentally opening the profile dropdown when they navigate near the Publish button. And it could fix up to three reported bugs:

Two tickets address long dropdown menus:

Other potential fixes and improvements can help the user experience.

CSS-focused changes

The first three CSS tickets below are bugs.

These three are enhancements.

Developer-focused features

Options/preferences

Props to @marybaum for reviewing and editing this post, plus @sergeybiryukov for reviewing it.

#toolbar

CSS Chat Agenda: September 30, 2021

The next weekly CSSCSS Cascading Style Sheets. meeting is today Thursday, September 30 at 21:00 UTC in the #core-css channel in 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/..

Meeting Agenda

  • Announcements & Housekeeping
  • CSS Custom Properties (#49930)
  • Open Floor / CSS Link Share

See you there!

#agenda

X-post: 30 days of translation celebration!

X-comment from +make.wordpress.org/polyglots: Comment on 30 days of translation celebration!

Editor Chat Summary: 29th September 2021

This post summarises the weekly editor chat meeting (agenda here) held on 2021-09-29 14:00 UTC in Slack. Moderated by @get_dave.

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

WordPress 5.9 “Go, no go” date and priorities

  • The “go, no go” review date for WordPress 5.9 is coming up on October 12, 2021.
  • Gutenberg 11.6.0 was the final full release of the Gutenberg Plugin prior to that date (although we’ll have an RC for 11.7.0 on the 6th October which can be used for the “go/no go”).
  • The main goal for 5.9 is getting full site editing to all WordPress users.
  • The key “candidate” features are listed in the suggested roadmap.

Updates based on the scope for Site Editing projects

Updates were requested for the key projects:

Global Styles

@youknowriad provided an async update on the agenda:

  • We’re making some good practice hoping to be in a good shape for 5.9.
  • We’ve been iterating on the designs proposed in this overview issue.
  • We’ve landed the drill down Navigation 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. and we are iterating on the different panels and components. (you can follow the updates on the issue)

Also related to this, @mciampini provided an update from the folks working on the components package:

Shipping:

In Progress:

  • We’re now moving to use the NavigatorProvider components in other contexts in Gutenberg, including the preferences modal.
  • This will help us to validate 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. of the component and reduce overlap with the existing Navigation components that specifically render the “W” sidebar in the full site editor.

Template Editor

No one was available to provide an update. I asked around and @kevin940726 let me know of progress on the Template Part Focus Mode:

  • Merged #34679 to add the “Edit template part” button in ellipsis menu.
  • Merged #34732 to add the back button in the focus mode (isolated template part mode)
  • Rob is working on #35170 to show the ellipsis menu in the list view
  • I just merged #35202 and opened #35239 to add template areas to top bar and the inspector

Patterns

No one was around at the time of the meeting, but having asked around, @ntsekouras provided an update for us:

Navigation Editor

@get_dave provided the update:

  • Discussion is ongoing on the best way to ensure interoperability and compatibility between Nav blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and Nav Editor.
  • Proposal to utilise a new classic Menu block in the Nav Editor continues. Any feedback welcomed.
  • Folks (particularly @spacedmonkey / @Jonny Harris) have been working hard on backwards compatibility. Any more feedback on this Issue would be a great help.
  • Lots of 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 continue to roll in for the Editor. Great work by everyone involved.

Would particular like to highlight the need to provide feedback on the ongoing discussion regarding the proposal to utilise a dedicated classic Menu block in the Editor.

Navigation Block

@joen provided the update:

  • Working on navigation things around improving the setup state for url-less menu items (ultimately to help enable nav block patterns).
  • Continuing with light navigation related things such as URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org dialog improvements for the basic mode of the menu, and mockups for transforms to switch to advanced building.

Block based Widgets Editor

No one was around to provide an update but one improvement I’m aware of is that you can now edit the title of the Widget Group block directly.

Seems like a small change but it really helps improve the flow of a block which is critical for solid backwards compatibility.

Native Mobile Team

@antonisme provided the update:

Shipped

  • Embed block improvements and fixes
  • Use tarball instead of git 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.) for reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-native-editor forked dependencies
  • Added native version of Dashicon component for mobile

Fixes:

In Progress:

  • Launching soon a way to contact support from inside editor
  • Additional Embed block improvements
  • GSS Font size, line height, colors

Task Coordination

The following items were shared by folks to update us on what work is in progress or where help is needed:

@shaunandrews:

  • I’m working up a some designs around block controls (like height, width, border, background, etc) and their groupings (dimensions? shape? layout?).
  • Check out the #design channel for some more info. I hope to write up some thoughts this week.

@mamaduka:

  • Helping with PR reviews/testing.
  • Worked on a few small PRs of my own.
  • I’ve PR that should fix editor crash when dragging multiple blocks into innerBlocks. I’m not very familiar with this part of the code, and I would appreciate extra eyes on it.
  • Also started working on useSelect call optimizations because of missing dependencies across the codebase.

@annezazu:

  • Still working through feedback on the current exploration on block theme switching.
  • Shipped a YouTube video about the Query Loop block.
  • Kicked off a post that I hope turns into a wider conversation about an approach for adopting FSE features.
  • Helped with the latest / News post.
  • Cleared unlabelled issues backlog.
  • Working on the next call for testing for the outreach program.
  • Midway through a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor improvement post on 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) improvements.

@welcher:

@get_dave:

@mciampini:

  • I will continue refining the Navigator* components and the ItemGroup and Item components.
  • Helping with PR reviews around the @wordpress/components package.
  • Helping Riad with the updated Global Styles sidebar.

Open Floor

Adding locking capabilities to Reusable Blocks

  • @paaljoachim explained that at the moment it is too easy to make an accidental change to a Reusable block.
  • We soon should get a lock mechanism in place as per the overview Issue on locking.
  • @johnstonphilip queries whether locking is enough to ensure that the user understands the action they are taking is destructive across other pages.
  • @get_dave noted that the Update/Publish flow now separates out changes to the current Post vs Reusable Blocks (similar to how the Site Editor handles saving template parts).
  • @get_dave recommend raising an Issue to suggest having a more explicit warning inline on the Reusable Block to flag that you are making changes to a global entity.

Getting useInnerBlockProps and LinkControl out of “experimental” status

  • @fabiankaegy brought up two tickets related to features that are currently marked as __experimental which he thinks are at the point where they can be moved out of the experimental state.
  • @get_dave responded re: <LinkControl> to say:
    • There are still a number of items I’d like to see ticked off the tracking issue prior to merging (help with these appreciated).
    • It is quite powerful, but we should look at reducing the complexity of the component itself before committing to it.
    • Due to look at the architecture soon to see what improvements can be made – @youknowriad has mentioned this in the past.
  • @get_dave noted that @ellatrix has a PR to stablise useInnerBlocksProps and that more reviews and input are needed to get this to land.
  • It was agreed that given how long the components have been around that we should look to standardise both.

Wrap up

Thanks to everyone who attended the meeting!

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

Dev chat summary – September 29, 2021

@audrasjb led the chat on this agenda. You can also read the Slack logs.

Highlighted blogblog (versus network, site) posts

Bringing to your attention some interesting reads and some call for feedback and/or volunteers:

Worth mentioning:

Thanks to the 23 contributors of the past week, including 4 new contributors! Kudos to the 5 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. committers of the week, too.

A Week in Core – September 27, 2021

Upcoming releases updates

Next 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.(s)

@desrosj and @circlecube are still leading the 5.8.x releases. They published a schedule for 5.8.2 and –if needed– 5.8.3.

The 5.8.x point releases are coordinated in the #5-8-release-leads 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. This channel is public and will be archived once 5.9 is released.

@costdev pointed out that a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. for ticketticket Created for both bug reports and feature development on the bug tracker. #53801 leads to a change in both Core and in the @wordpress/widgets package and asked for advices for how to ensure that any changes are committed at the same time to minimise issues on either end. @audrasjb answered that there is already an issue for this ticket in the 5.8.2 Gutenberg project board.

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.

Concerning the next major release —WordPress 5.9— a planning roundup was published a couple weeks ago.

Worth noting that @chanthaboune proposed a review of the upcoming 5.9 key features in the last issue of the WordPress.org podcast.

@audrasjb ran a first 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. scrub last week to review the tickets marked early. He will run another one on Thursday September 30, 2019 at 20:00 UTC.

Reminder: everyone is welcome to run a bug scrub on the #core Slack channel. If you are interested, please read this handbook post: Leading bug scrubs and get in touch with @audrasjb or @francina for details.

Also, @audrasjb silently scrubbed the Future Release queue and moved a dozen of tickets (in various components) to 5.9, with refreshed patches when needed. Most of them are ready and waiting for review/commit.

Component maintainers updates

Build/Test Tools – @sergeybiryukov

PHPUnit 9.5.10 and 8.5.21 were released with a breaking change: PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher deprecations are no longer converted to exceptions by default (convertDeprecationsToExceptions="true" can be configured to enable this). See changeset [51871] and ticket #54183 for more details.

This is also included in the Changes to the WordPress Core PHP Test Suite dev notedev 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., which is highly recommended to read as it includes other important changes 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 theme authors using the WordPress Core test framework as a basis for their integration tests.

Upgrade/Install – @afragen

@afragen shared that there is currently a lot of activity on a 9 years old ticket: #22316. He added a new PR which is ready for review.

@audrasjb added that the design of the feature was discussed during the last #core-auto-updates weekly meeting.

@joyously asked if it is supposed to handle initial installation or deactivation and uninstall also? @audrasjb answered that it only handles initial installation, because a dependency could exists without the “base” plugin.

@joyously asked what value does this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. add to the existing implementation. @clorith answered that It surfaces which plugins would enhance (or enable) functionality, so yes it has value. @audrasjb added that it standardizes a process which currently has many different implementations.

@afragen encouraged testers to install the PR, add a test plugin with a couple of dot org plugin slugs in a comma separated list in the Required Plugins 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.. Removing or changing the header name will deactivate those dependencies from being displayed.

Toolbar – @sabernhardt

@sabernhardt shared a draft of a Toolbar component update post.

He also pointed out that a docs update (#54191) was just committed today.

Open Floor

From @marybaum and @annezazu: there is a new testing call in the Full Site Editing Outreach Program.

@costdev noted that the Administration component doesn’t have a maintainer currently listed. He asked for a review of #53152. @sergeybiryukov moved it to milestone 5.9.

@pbearne asked for a review of #54020. He’s available to make a simpler patch if needed.

@webcommsat shared that tomorrow (30 September) is the last day of #WPTranslationDay 2021. Everyone is welcome to come and join the polyglots teamPolyglots Team Polyglots Team is a group of multilingual translators who work on translating plugins, themes, documentation, and front-facing marketing copy. https://make.wordpress.org/polyglots/teams/. for the final event and the celebrations from 16:00 UTC.

#5-8-x, #5-9, #dev-chat, #summary

Dev Chat Agenda for Sept 29, 2021

Here is the agenda for this week’s developer meeting to occur at September 29, 2021, at 20:00 UTC.

Blogblog (versus network, site) Post Highlights and announcements

Bringing to your attention some interesting reads and some call for feedback and/or volunteers:

Next releases status update

  • Next 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.: WP 5.8.2
    👉 WordPress 5.8.2+ Release Schedule
  • Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: WP 5.9
    👉 WordPress 5.9 Planning Roundup

Components check-in and status updates

  • Check-in with each component for status updates.
  • Poll for components that need assistance.

Open Floor

Do you have something to propose for the agenda, or a specific item relevant to the usual agenda items above?

Please leave a comment, and say whether or not you’ll be in the chat, so the group can either give you the floor or bring up your topic for you accordingly.

This meeting happens in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack.

#5-8-2, #5-9, #agenda, #core, #dev-chat

Editor chat summary: Wednesday, 22 September 2021

This post summarizes the weekly editor chat meeting on Wednesday, 22 September 2021, 14:00 UTC held in Slack.

What’s next in 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/? (Mid-September 2021)

@jorgefilipecosta said the post with the goals for the Gutenberg project in September is published and referred that the priorities are the template Editor, Patterns, Global Styles 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., the design tools., and the Navigation 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./navigation editor work.

As a follow-up @ntsekouras brought attention to an experiment to trigger some discussions – a Patterns explorer, asking people to share their thoughts.

Project Updates

Mobile Application

Shipped

  • Improve error handling for embed block
  • Improve Reusable Blocks inserter UIUI User interface

Fixes

  • Fix image block height and border 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.
  • Fix back icon color in dark mode

In Progress

  • Additional Embed block improvements
  • GSS Font size, line height, colors

Components package

Shipping

  • Completed a migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. away from the createComponent function. This simplifies the process of adding new components to the library, using the more straightforward View component.
  • Following up on the recently expanded contributor guidelines, we simplified the structure of the guidelines and added a table of contents.

In Progress

  • @youknowriad merged a PR that introduces a navigation component 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., which moves us closer to the updated designs. We’re experimenting now with a revised Navigator component that may provide greater flexibility for the design.

Navigation Editor

Lots of work happening on priority items. Thanks to everyone who is contributing so much work.

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/. interactions have been improved and more issues identified.
• Started looking at ways to add links in Bulk.
• Using Theme JSON to control the block in the editor has been ruled out.
• Another Hallway Hangout is on the cards – dates/times to be confirmed.

Task Coordination

@annezazu

Hallway hangout for adoption pathways for FSE with Marcus & Dave, continue amplifying the current block theme switching exploration (please check it out!), did some light triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., and shared a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor improvement post on the new Widgets Group block!

@ntsekouras

  • Query Pagination with `flex` layout(#34876, #34897).
  • Pass the search value to inserter, when clicking Browse All(#34912).
  • Delayed loading state of SSR component(#35033).
  • Pattern Explorer experiment(#35006).

@jorgefilipecosta

For the next week, the plan is to continue iterating on the design and address the remaining follow-ups we have thinks like changing the border of the input field from a gray to slightly different gray changing the dimension of inputs from 30px to 40px, changing the focus look on the range control.

@mciampini

Will keep supporting @jorgefilipecosta and other folks working on the @wordpress/components package, including most of the work that is being done on the new Global Styles sidebar.

Open floor

Responsiveness

Roman Axelrod asked the following:

It was mentioned earlier, but… At time moment, core editor doesn’t provide options of setting different styling rules for each device / breakpoint (Preview modes: Desktop, Tablet, Mobile).

Right now, the rules are global. For example if I set padding: 60px to Group block from the right sidebar of the editor, this rule is going to appear on Desktop and Mobile.I curious if we are going to have the same functionality that all popular page builders have? Usually they provide a list of breakpoints and ability to “overwrite” styling rules of previous breakpoint. It gives ability of adapting the design by requirements.Is this something that we can expect soon? Are we going to have something like this in 2021?

@jorgefilipecosta said he thinks that is not something on the roadmap for 5.9, but allowing to control how things look depending on the dimensions of the place where they are rendered is something that will end up existing.

Custom Fields

Roman Axelrod asked the following:

Are there any plans or ideas of using Custom Fields in core blocks?
For example, imagine the situation where I have 20 pages. All pages have a “Hero” section that contains titletextbutton on the left and image on the right.
The design is the same but the content is different and unique for each page (kind of a template).Now let’s say, after I built these 20 pages, we realized that the Heading block should be 5px bigger.
How should I fix that? It might be annoying to go page by page and update the font-size of each heading.As a reference, Elementor page builder provides this kind of option – they call it “Dynamic Content”.
I thought that the block-template-parts of FSE will solve this case. But this is still not there. Are there any thoughts/discussions about similar cases?

@jorgefilipecosta answered the following:

Hi Roman, maybe the solution to your issue is to define a CSSCSS Cascading Style Sheets. variable that represents the size. Theme.json provides a mechanism for declaring the css variables, and then instead of using 5px as value you use the css variable as the value. Changing the variable will then change the size in every place.

Roman followed up asking about how non-developers would be able to change those values. @jorgefilipecosta said that If one wants to allow a user to change a CSS variable, one could do it by registering a custom sidebar to change the variable. Maybe one day core offers something that automatically renders a UI where users could change variables registered using theme.json, but it is not part of the road map for now.

Developer Hours online

@bph made a big announcement during the core editor chat:

There will be a make core post with more info, this is just a heads-up, about a trial initiative to hold “Developer Hours online” every other week, with a group of Gutenberg developers, a short topic and then answering attendee’s Block and Theme building questions, with screen sharing of code and follow-up post. Depending how the trial goes, we might expand it. If you want to be part of that initiative let me know or comment on the post.

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

Implementing a Webfonts API in WordPress Core

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 theme developers have been able to enqueue scripts and styles for years, but fonts have always been more complicated to enqueue. Following ticketticket Created for both bug reports and feature development on the bug tracker. #46370 and last September’s proposal to add a fonts enqueue API in WordPress Core, we now have a patch ready.

With the recent advancements in 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/, global-styles, and an effort to consolidate options and UIs in the site-editor, a Webfonts 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. is becoming a necessity as it will allow theme developers to define fonts in their theme.json files.

In this first iteration, we are mirroring the scripts & styles enqueueing functions for consistency. Since enqueueing a webfont entails enqueuing a stylesheet (or adding inline styles) to enqueue the font files themselves, the webfonts API functions act as wrappers for the stylesheets API (with the appropriate modifications where needed).

The intention for this initial iteration is to provide a basis we can build upon and improve in the future – which is why it was kept minimal. More improvements and functionality will be added in the future, but in order to improve it, it has to be there.

The patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. adds the following functions:

  • wp_register_webfont
  • wp_deregister_webfont
  • wp_enqueue_webfont
  • wp_dequeue_webfont
  • wp_webfont_is
  • wp_webfont_add_data

The syntax of all these functions is identical to their style counterparts, so wp_register_webfont is the same as wp_register_style and so on. The only difference is the use of $params in lieu of $deps for practical reasons.

Notes:

  • The styles registered for webfonts automatically get a webfont- prefix to avoid conflicts with any similarly named stylesheets. This provides a clear distinction between normal styles and webfonts styles, while keeping the implementation simple.
  • Since webfonts don’t have dependencies, the $deps argument was replaced with $params. These params can be used to register a webfont from local files, and auto-generate the CSSCSS Cascading Style Sheets. for @font-face.

Enqueuing a webfont from 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

To use a webfonts API (Google Fonts, Adobe fonts, etc), we can use the URL provided by the API directly:

add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_webfont(
		// The handle
		'dancing-script',
		// URL to the webfont CSS - can use any public API.
		'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&display=swap', 
	);
} );

This is identical to what we would previously do using the wp_enqueue_style function, but now using a more appropriately named wp_enqueue_webfont function. With the example code above, the webfont will be enqueued and the stylesheet’s handle will be webfont-dancing-script.

Generating CSS for a webfont

It is possible to generate the CSS for a webfont using the provider parameter and the wp_webfont_generate_styles function.

A provider is an object with details about the provider’s implementation and a method to get (or generate) the CSS from that API.

Generating styles for bundled font files

To generate styles for bundled font-files, set the provider to new WP_Fonts_Provider_Local().

$my_font_styles = wp_webfont_generate_styles( array(
	'provider'     => new WP_Fonts_Provider_Local(),
	'font-family'  => 'My Font',
	'font-display' => 'swap',
	'font-style'   => 'normal',
	'font-weight'  => '400',
	'src'          => array(
		get_template_directory_uri() . '/fonts/font.woff2',
		get_template_directory_uri() . '/fonts/font.woff',
	),
) );

Generating styles for Google fonts

To generate styles for a Google font, set the provider to new WP_Fonts_Provider_Google.

$roboto_styles = wp_webfont_generate_styles( array(
	'provider'    => new WP_Fonts_Provider_Google(),
	'font-family' => 'Roboto',
	'font-weight' => '400',
) );

Using the generated styles

You can attach the styles to an existing stylesheet using wp_add_inline_style:

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue theme stylesheet.
	wp_enqueue_style( 'my-theme-styles', get_theme_file_uri( 'style.css' ) );
	// Get webfont styles.
	$roboto_styles = wp_webfont_generate_styles( array(
		'provider'    => new WP_Fonts_Provider_Local(),
		'font-family' => 'Roboto',
		'font-weight' => '400',
	) );
	// Add webfont styles.
	wp_add_inline_style( 'my-theme-styles', $roboto_styles );
} );

Alternatively, you can use the wp_enqueue_webfont function:

add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_webfont( 'roboto-400', '', array(
		'provider'    => new WP_Fonts_Provider_Local(),
		'font-family' => 'Roboto',
		'font-weight' => '400',
	) );
} );

This will internally call wp_enqueue_style with a blank $src, and attach the webfoot styles to the defined $handle.

Adding implementations for more 3rd-party APIs

At the moment of this writing, Google-Fonts is the most popular API for web fonts, and the only one publicly available, free, with OpenSource-compatible fonts.

Adding implementations for more APIs in the future can be done by extending the WP_Fonts_Provider class.

The $params argument

The $params argument is formatted as an array and accepts all valid CSS props of @font-face as its array keys. Any extra args are ignored. The list of valid descriptors was taken from MDN.
Defining a font-family is mandatory, and skipping that results in no CSS getting generated.

The src

If we’re enqueueing a webfoot from bundled files, then we can use the src to define the files. If we only want to define a single file for the webfont, then we can add it as a string ('src' => $url).
If we have multiple files for the webfont (different formats to support older browsers), then we can use an array ('src' => [ $url1, $url2 ]). In this case, the URLs get internally reordered for browser support (woff2, woff, ttf, eot, otf). SVG for webfonts is not supported because they have been deprecated (see caniuse.com/svg-fonts), so if provided it gets removed (like any other 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. type).

Note: The src can also accept data-urls.

Variable fonts

The font-variation-settings property accepts either a string (normal), or an array of key/value pairs (e.g. ["wght" => 637, "wdth" => 100]) and returns a string of these values (e.g., wght 637, wdth 100).

Props @jonoaldersonwp, @sergeybiryukov for reviewing