What’s new in Gutenberg 18.7? (03 July)

“What’s new 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/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.

Gutenberg 18.7 has been released and is available for download!

A total of 115 PRs were merged in Gutenberg 18.7, with 7 first-time contributors! With WordPress 6.6 rapidly approaching, many contributors are focusing 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. However, this release still includes some great features and enhancements, including the manual mode for the grid interactivity experiment!

  1. Drag and drop grid items in manual mode
  2. Content panel for template parts
  3. Other Notable Highlights
  4. Changelog

Drag and drop grid items in manual mode

In order to allow more precise manipulation of the grid, all grid items are now fixed in place when using manual mode. Grid items can then be moved around with drag and drop, with 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. movers (in any direction), or by changing the values of column and row in the Dimensions 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.. This new feature is a part of Grid interactivity and is available behind an experimental flag. (#61025)

Content panel for template parts

Template parts now show the content panel in the editor settings. (#62034)

Other Notable Highlights

Text orientation controls have been added to more blocks (site-title, site-tagline, verse, and button block.) (#62727)

The sticky toggle for posts can be found in its new home, the “Status and visibility” popover. (#62782)

The document bar is now displayed when viewing the Style book and Style revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. (#62669)

Changelog

Enhancements

  • Add: Content panel for template parts. (62034)
  • Move Sticky toggle to status popover. (62782)
  • Rename yieldToMain to splitTask and export from wordpress/interactivity. (62665)
  • Update: Check assignable properties on the duplicate action. (62590)
  • Update: Followups to the template and template_lock 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/. addition. (62696)
  • Update: Reverse backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. changes on post type REST API changes. (62751)
  • Align naming modals. (62788)
  • Add writing mode support to other blocks. (62727)
  • Display the DocumentBar for Style Book and Style Revisions. (62669)
  • fetchLinkSuggestions: Allow for partial matching. (62570)
  • DataViews: Support passing the registry to actions callbacks. (62505)
  • Add tooltip on hover of color and typography presets. (62201)
  • Revert change that removes the social link block when pressing backspace in the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Popover. (61344)

Bug Fixes

  • Add context in post actions 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.. (62443)
  • Add html to reset styles for the .editor-styles-wrapper container. (62350)
  • Cherry pick script: Make authenticated requests. (62473)
  • Editor: Fix blocked Post Publish Panel buttons on mobile. (62736)
  • Fix cherry-pick script, add missing –repo arg. (62643)
  • Fix rawHandling, pasteHandling for mixed content with blocks and classic. (62545)
  • Fix: Active template is not highlighted properly in list view. (62811)
  • Fix: Check Capability to create pages on DataViews add new page button. (62592)
  • Fix: Check ability to create patterns on the add new pattern modal. (62633)
  • Fix: Check create capability on duplicate post action. (62620)
  • Fix: Check permissions on duplicate pattern and template part actions. (62757)
  • Fix: Comments and Pingbacks get cleared out when a pattern is edited. (62507)
  • Fix: DataViews: Active page is not highlighted properly in list view. (62378)
  • Fix: Include permission management on permanently delete, rename, and restore. (62754)
  • Fix: List view renders an empty menu when no actions are eligible. (62786)
  • Fix: Post_type template is not used when creating a page in site editor. (62488)
  • Fix: Resetting template part causes notification saying it’s been delete. (62521)
  • Fix: The trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. post action doesn’t take into account user capabilities. (62589)
  • Inspector: Improve handling of long words in post titles. (62691)
  • Revert “Revert test data for WithSlug variation (#62579)”. (62587)
  • Show publish panel only in edit mode. (62813)
  • Site Editor: Improve the frame animation. (62676)
  • DataViews: Remove selection correcting, set initial state. (62796)
  • Pattern overrides: Disallow override for image with caption/href. (62747)
  • Editor: Make VisualEditor a stacking context. (62681)
  • Fix toggle active font logic. (62614)
  • Save Panel: Remove connections icon and fix padding. (62542)
  • Editor: Render editPost slots only in the post editor (same for site editor). (62531)
  • Fix: Don’t allow synced patterns to be inserted on shuffling. (62422)
  • Fix ExcerptPanel decode issue. (62336)

Block Library

  • Add letter spacing inheritance for the navigation block. (62745)
  • Caption utility component: Allow the main CSSCSS Cascading Style Sheets. Class Name to be excluded from the markup. (62485)
  • Fix: Empty style attribute issue in navigation block. (62600)
  • Image Block: Fix Aspect Ratio button position. (62776)
  • Media & text: Update the image replacement logic. (62030)
  • Post Date Block: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warning error. (62783)
  • Template Part: Improve how the 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.) name attribute is handled. (62785)
  • fix: Update block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to design and build documentation. (61905)

Global Styles

  • Allow children of alignfull flow layouts to have root padding. (62670)
  • Prevent duplicate block style variations CSS. (62465)
  • Remove obsolete hook resolving shared block style variations. (62808)
  • Section Styles: Switch away from using init for variation registration. (62640)
  • Skip registration of variation styles when unsupported. (62529)
  • Styles: Lower specificity of figcaption style to allow 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. override. (62689)

Components

  • CustomSelectControl V2: Fix setting initial value and reacting to external controlled updates. (62733)
  • CustomSelectControlV2: Handle long strings in selected value. (62198)

Block Editor

  • Raw handling: Fix too aggressive indented list removal. (62622)
  • Writing flow: Split heading into default block. (61891)

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)

  • Fix custom color palette. (62753)
  • Fix lock modal dialog accessibility and semantics. (62795)
  • Image block: Fix focus style not around whole image when linked. (62556)
  • Pages data view: Update view icons. (62136)
  • Make the fonts management modal dialog more discoverable. (62129)

Performance

  • Improve performance of compute_style_properties method. (62522)
  • Run block variation hook only for matches. (62617)
  • Section Styles: Improve performance and conceptual consistency. (62712)

Experiments

  • Grid interactivity: Allow blocks to be positioned in manual mode using drag and drop. (61025)

Documentation

  • Add VisualEditorGlobalKeyboardShortcuts documentation. (62710)
  • Add changelog entry for splitTask export from wordpress/interactivity. (62805)
  • Add documentation for PostSlug and PostSlugCheck component. (62102)
  • Adds comment on blocks resource referencing wp_block post type. (62722)
  • Changelogs: Standardize sections. (58268)
  • Correct documentation for WP_Block_Parser_Frame class. (62598)
  • Create Block: Add missing changelog entries. (62791)
  • Docs/iAPI: Fix wrong code snippet in data-wp-run example. (62835)
  • Docs/iapi warnings new directives wp 6 6. (62789)
  • Fix async directives API documentation. (62759)
  • Fix: Remove inexistent link from the documentation. (62624)
  • Interactivity API docs: Add wp-async directives doc. (62663)
  • 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: Clarify explanation around query loop variation example. (62605)
  • Small Typo correction in block-library.md file. (62765)
  • Update link to API section in block-editor README.md. (62671)
  • Update old links in wordpress/babel-preset-default. (62616)
  • Updates the reference links in wordpress/compose documentation. (62593)
  • [Developer Documentation] fix link URL. (62725)

Code Quality

  • Autoformat changelogs. (62650)
  • Autoformat e2e-tests package 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/.. (62572)
  • Edit site: Do not autoformat edit-site/lib. (62573)
  • Move dep to dev deps. (62673)
  • Rename readme file with uppercase extension. (62697)
  • Site Editor: Don’t render empty body tag. (62769)
  • Change grid-visualizer folder name to grid. (62810)
  • Add lib-font credits and license in source code. (60973)

Components

  • Remove Framer Motion from DropZone. (62044)
  • CustomSelectControlV2: Fix handling of extra attributes passed to options in the legacy adapter. (62255)

Tools

  • Dependencies: Upgrade @octokit/webhooks. (62666)
  • Rename the wp-env schema to not be a dotfile. (62634)
  • env: Ignore \$schema key in environment configuration parsing. (62626)

Testing

  • Add end-to-end test to ensure block bindings work well with symbols and numbers. (62410)
  • CustomSelectControl: Align v1 and legacy v2 unit tests. (62706)
  • Fix end-to-end tests in dev mode. (62642)
  • Improve maintainability of theme json class tests. (62463)
  • Release automation: Try cherry-picking automation. (62716)
  • Remove changelog checks for branches other than trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (62645)
  • Skip failing image block test. (62781)
  • Skip test: Create a new page, edit template and toggle page template preview. (62799)
  • Tests: Simplify test set up in WP_Block_Supports_Block_Style_Variations_Test. (62637)
  • Theme JSON resolver: Read theme.json files from the styles/ folder only once. (62638)

Build Tooling

  • Generic name for previous version of WP tests. (62853)
  • GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PHP changes workflow: Remove it. (62609)

Various

  • Update Private API opt-in string for WP 6.6. (62635)
  • Update caniuse-lite dependency to latest version. (62611)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @aatanasovdev @afercia @ajlende @akasunil @amitraj2203 @artemiomorales @carolinan @cbravobernal @ciampo @creativecoder @DaniGuardiola @dilipbheda @ellatrix @fullofcaffeine @geriux @graylaurenm @gziolo @itzmekhokan @ivan-ottinger @jameskoster @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @matiasbenedetto @michakrapp @mirka @noisysocks @ntsekouras @oandregal @peterwilsoncc @ramonjd @sabernhardt @SantosGuillamot @saulyz @shail-mehta @sirreal @snehapatil2001 @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @up1512001 @vcanales @vipul0425 @westonruter @youknowriad

Props to @joen for the visual assets, @andrewserong, @talldanwp, @ramonopoly, and @aaronrobertshaw for help drafting and proofreading this post, @bernhard-reiter, @priethor, @youknowriad, @mikachan, @andrewserong, and @ramonopoly for debugging and fixing the release workflow.

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

Agenda, Dev Chat, Wednesday July 3, 2024

The next WordPress Developers Chat will take place on  Wednesday July 3, 2024 at 20:00 UTC in the core channel on Make WordPress Slack.

The live meeting will focus on the discussion for upcoming releases, and have an open floor section.

Additional items will be referred to in the various curated agenda sections, as below. If you have ticketticket Created for both bug reports and feature development on the bug tracker. requests for help, please do continue to post details in the comments section at the end of this agenda.

Announcements

WordPress 6.6 RC2 was released on July 2. We are in a hard string freeze. Note that the dev-feedback and dev-reviewed workflow is required prior to committing to the 6.6 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". (handbook reference).

Forthcoming releases

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

We are currently in the WordPress 6.6 release cycle. The WordPress 6.6 RC3 is scheduled for Tuesday, July 9.

Next maintenance release

No maintenance releases are currently being planned. We will take time to discuss any important tickets that may require a maintenance release.

Next 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: 18.7

Gutenberg 18.7 is scheduled for July 3 and will include these issues. This version will NOT be included in the WordPress 6.6 release and will be included with 6.7.

Discussions

As we’re in the middle of the 6.6 release cycle, we’ll prioritize any items for this release. Please review the Editor Updates section of this agenda for a list of updates on several key features related to this release.

Highlighted Posts

Editor updates

You can keep up to date with the major Editor features that are currently in progress for 6.6 by viewing these Iteration issues.

Props to @annezazu for putting together these updates each week.

Tickets for assistance

Tickets for 6.6 will be prioritized.

Please include details of tickets / PRs and the links in the comments, and if you intend to be available during the meeting if there are any questions or you will be async.

Follow-ups from last week

There were a couple of points raised in last week’s dev chat that would be good to check in with:

  • Can we extend the hard string freeze date to RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3 for major releases?
  • Do we have further information on who can help progress a PR in the WordPress Importer repo?

Open floor

Items for this can be shared in the comments.

Props to @joemcgill for reviewing.

#6-6, #agenda, #dev-chat

Performance Chat Summary: 2 July 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • WordPress 6.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 happening today

Priority Items

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
    • Current release (WP 6.6)
    • Future release
  • Performance Lab 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 other performance plugins)
    • Auto-Sizes for Lazy-Loaded Images
    • Embed Optimizer
    • Image Prioritizer
    • Image Placeholders
    • Modern Image Formats
    • Optimization Detective
    • Performant Translations
    • Speculative Loading
  • Active priority projects

WordPress Performance Trac Tickets

  • @spacedmonkey flagging this Slack thread This cache is using networknetwork (versus site, blog) wide cache, when the cache should be site wide. @joemcgill was working on this
  • @adamsilverstein will be running some performance metrics against RC2 when it is out (I missed testing RC1 because I was away)

Performance Lab Plugin (and other Performance Plugins)

Active Priority Projects

Improving the calculation of image size attributes

Improved template loading

  • @thekt12 I was addressing feedback from Joe and also implementing unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. for https://github.com/WordPress/gutenberg/pull/62794/files ( had some issues with unit test, will connect with Joe to help here)

Open Floor

  • @adamsilverstein wanted to call attention to this post – https://make.wordpress.org/hosting/2024/06/19/the-image-revolution-avif-and-webp/ from @javiercasares and the hosting team about how hosts can enable AVIF / modern image support for their customers – and why they should consider doing it!
    • Only something like 30% of sites are on hosts that currently support AVIF so this is great to see
  • @pbearne We have a question on autoload and the setting 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 there a way to set an option to not autoload if I am using Settings API?” I created a ticketticket Created for both bug reports and feature development on the bug tracker. for this #61522 – Is this something we should look at?
  • @pbearne And a second opinion on adding 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. option load to wp-adminadmin (and super admin)
    https://github.com/WordPress/wordpress-develop/commit/75d83b656609ad6092146fb7183b58beb859feae Is this the right action? Should we have one for Front-end?

Our next chat will be held on Tuesday, July 9, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

Performance Chat Agenda: 2 July 2024

Here is the agenda for this week’s performance team meeting scheduled for July 2, 2024 at 15:00 UTC.

  • Announcements
    • Welcome to our new members of #core-performance
    • WordPress 6.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 happening today
  • Priority items
    • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
      • Current release (6.6)
      • Future release
    • Performance Lab 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 other performance plugins) including:
      • Auto-Sizes for Lazy-Loaded Images
      • Embed Optimizer
      • Image Prioritizer
      • Image Placeholders
      • Modern Image Formats
      • Optimization Detective
      • Performant Translations
      • Speculative Loading
    • Active priority projects
  • Open floor

If you have any topics you’d like to add to this agenda, please add them in the comments below.


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

#agenda, #meeting, #performance, #performance-chat

Hallway Hangout: Section styles and other block style variation updates

WordPress 6.6 expands block style variations in several ways, giving you the ability to do more with the existing feature, such as

  • Define styles for registered variations via `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.`.
  • Style nested elements and blocks.
  • Create “section styles” that are connected to one or more blocks.
  • Overwrite section styles via theme style variations.

At a technical level, the expanded tool set does not add too many new concepts to learn. However, in practice, working with these updates can present challenges and may even have you rethinking your approach to theme design.

You can learn more about the updates here:

Join us for a Hallway Hangout on July 8th, 2024  at 16:00 UTC for an early discussion around how these tools work and what they mean for themes. The zoom link will the provided in the #outreach channel on 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/..

Props for drafting to @greenshady and for review to @juanmaguitar

#hallway-hangout

Recap Hallway Hangout: Exploring Grid Layouts

The conversation revolved around challenges in creating grid layouts 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/, Attendees discussed ongoing experimentation with the grid system in web development, including recent changes to the manual mode including a recent experimental feature that changes manual mode to allow positioning grid items. They also addressed the challenges of using grid layouts with images of different aspect ratios, suggesting the use of a gallery 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. to crop images to fit. Isabel Brison demonstrated the new feature coming to WordPress 6.6 and then shared what she has been working on since then. Behind the experimental flag, new features are implemented. 

Recording of Hallway Hangout. Transcript at the end of the post.

Covered topics

Coming to WordPress 6.6 (see also Dev Notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and 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. Grid layout type)

  • Differences between auto and manual grid layouts in the Post Template, with auto resizing and manual having a fixed number of columns.
  • Ability to resize children of a grid, allowing for more flexibility in layout design.
  • Resize grid cells by pulling on handles, making it easier to visually change the look of the grid. The feature uses container queries to resize items inside the grid based on the size of the actual grid, rather than the viewport.

Working on for WordPress 6.7 

Most of the enhancements are still experimental, so you would need to enable the Grid Interactivity feature via the Gutenberg > Experiments screen. (or use this Playground instance to start testing)

  • New grid system in WordPress with manual positioning.
  • manually position items inside a grid.
  • define number of columns and rows in the grid in Auto mode, with items auto-placing in spaces
  • block movers in manual mode of grid, allowing for overlap and partial overlaps.
  • Grid layouts, auto and manual modes, and image resizing.
  • how manual grid mode has been updated to allow for more flexibility in defining grid layouts.
  • Add more responsiveness to manual grid mode, with minimum column width field for resizing and reflowing.
  • grid behavior with images, including resizing and rearranging.
  • Using a gallery block to display images with different aspect ratios, suggesting it can crop images to fit

Q & A

  • Demo: how to make an image partially overlap with text in a grid layout, but notes that there is no control over row height in the block editor.
  • Suggested: defining column width in fractions, rather than pixels 
  • Suggested: adding controls for aligning and justifying elements in the Grid Layouts

Shared resources: 

Announcements

About Grid Layouts

If you have further discussion or questions in context of this Hallway Hangout, you can leave a comment here or start chatting in the #outreach channel on 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/..

Props to @isabel_brison and @luminuu for review

Transcript (AI generated)

This component. So this is the hardware hangout on exploring grid layout. And Isabel Bryson is gonna demo what’s come what’s possible in WordPress 6.6 and we also when are going to discuss what’s coming in 6.7 so take it away. Isabel,

yes. Okay, so I’m going to share my screen, and what am I? Can you see my screen? Okay, yes, actually, not. Okay. So,

sukat, there

are many things that I can show you. I can’t actually, when big it said that I was going to show you all the cool layouts that you can do. I can’t actually show you all the cool layouts, because there’s so many things, so many different things that you can do in terms of layout with these basic tools that, oh, I was afraid of I say that I’m not a designer, so I’m doing my best here, but I’ll show you the tools that are available, and I can show you what they do. And then you can go and like, make all the cool layouts that you can think of with them. Okay, so first, what’s shipping in 6.6 I’m I think I’m just gonna pop that over there. Okay, what’s shipping in 6.6 is a grid block which was experimental 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 for quite a while, I’m going to say a few months, maybe even longer than that, but we’ve all we’ve enhanced it. So for 6.6 the gridlock has a bit more functionality than it did up until recently, in the plugin. And I’m not going to say we’re shipping a grid layout, because that the actual layout had already shipped. So the layout has been in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. The layout block support has been in core since 6.2 or 6.3 I think, and it’s just been available as something that you could add to any custom block that you might build. And there was one, there was one block using it so far, which is the post template block. So post template has a sort of list variant and the grid variant, and that grid variant was created with the grid layout, but now we have a grid block, which is, it’s basically just a variation of the group block, and it creates a grid layout. So you can, you can add it. So when you gonna just go here, you can, you can type a group and and you’ll see the grid as one of the featured layouts, featured variations of the group. Or you can just directly type grid from the inserter, and it’ll appear. And I’m just going to show you the ones I’ve already got ready here. So the grid that was in the plugin until recently, only had, really only two options, which was auto. The Auto option will create a grid with as many columns as will fit in in the container given a minimum column width. And that’s the sort of default. The default What should I say? It’s 9pm words are failing me. So the default state of the grid is this auto layout, and it will resize automatically. So when, when your grid container becomes smaller, you’ll have as many columns as will fit in there, given that the minimum width is, in this case, it’s 15 REM. But it could be anything. It could be in pixels. It could be an M or REM, okay. And then you have the other option, which is manual, which are is slightly different, because you for the manual grid, you’ll define a number of columns, and the grid will always have that number of columns no matter what size it is. So you can CCC, this is the manual grid. So in comparison with the auto grid, which resizes and the blocks reflow. The manual grid will will always have the same number of columns. And in addition to that, so this is these, these sort of two manual, auto variations were the ones that were initially shipped in the block layout support. And the the new, the new, new thing that we did for 6.6 is the ability to resize the children of the grid. So before you could only have you can only have a grid with items, basically with items only with having the span of one column and one row. So each. Item would just fit neatly into one grid cell, and anything else that you wanted to do on top of that, you’d have to basically write your custom CSSCSS Cascading Style Sheets., which is possible, but it’s a bit of a pain. And that’s not what the block editors of app you want to be able to do stuff with the UIUI User interface. And so we came up with, not, well, we, I said, basically, I and one of my colleagues, Rob Anderson, we too, worked on this for few months, up to 6.6 so that’s the particular we that. I mean when I say we, in this case, and we created this thing, this sort of these resize handles, where you can actually change the size of the block by pulling on the handles, and it will become bigger or smaller as you resize it with the handles. So that’s sort of a handy way of like being able to visually change the whole sort of look of the grid and play around and move things around stuff. Yeah, so that’s, I guess, the so to make, to make that workable. I don’t know if you can see because it doesn’t have very high contrast, but hopefully you can see that there are little grid lines visible. So in addition to the handles, the handles are more visible because they have this sort of bright blue color, but there are these sort of thinner grayish grid lines that are running through the whole grid. And those are, those are that they show you what the tracks of the grid are and how many cells the item that you have is taking up. Yeah, so pretty much. I mean, this is what’s going to ship in, 6.6 I’d add that this is kind of a detail when you have them. So the auto grid that reflows when you resize the screen, it’s sort of, there’s a little bit of responsive behavior built into it, so that the items that span multiple columns and rows will also resize as you resize the grid. Because if that didn’t happen, you’d end up with a very, very messy layout. So that’s we just built that in to sort of so that it would work a bit more efficiently. And that is, if you’re curious about that sort of thing, we built that behavior using Container queries. And so the items inside a grid will resize depending not on the size of the viewport, but on the size of the actual grid. So if you stick this grid into, say, a roadblock that has other things in it, and suddenly it becomes really small, then the items will reflow inside the grid. Yeah. So this, I’m pretty much this is what’s shipping in, 6.6 does anyone have any questions at this point? I

Are you big? You’re muted so

we don’t have any questions mute in the chat, but if you have any question, just be free and unmute yourself and just so you don’t have to type it, it’s probably easier. This is a highway hand, so it’s not as strictly structured as a developer. So you’re welcome to,

yeah, yeah. I mean, please, if there’s anything that you don’t know, what you’re wondering, if it’s possible to do this or that, please, please ask. Because I’ve let I’ve been working on this thing for so long that I can no longer see the things which might be obvious to other people. It’s like, oh, that’s not intuitive. Or like, how do you do this? Or can you do that? I’m like, you know, I’ll probably forget to say stuff. So please ask all the questions that you might have.

Yeah, I have a question. So container query are relatively new for browsers, right? Are they now supported by every browser? Yeah,

they’ve got decent support. Let me see actually, do we have, can I use contain the query? So there we go, can I use container queries? Okay, it doesn’t look too bad. It’s 90, almost 92% of browsers. So the thing is, yeah. And the thing is this, the thinking behind using Container queries in this particular instance is that, are they? If a browser doesn’t support them, they’ll just not work. And then any items that have, you know, multiple column span will sort of throw off the the layout of the grid a bit. Because what happens so when you have a grid, what. Where a certain number of columns is defined. And when you have this sort of auto reflowing grid, say, you know, you say minimum column width is 15 REM, and then the window starts going down, and the grid becomes smaller. Then, then, say, becomes smaller than 30 REM. So it can’t, it really can’t fit two columns in anymore, so it’d go down to one column. But if an item inside that grid has a spat is spanning more than one column, then the grid goes, Ah, I can’t go down to one column because I have a multi column item in here. And so it does this weird, dodgy thing where it keeps the first column with the width that you that you stipulated. So it’ll be like a 15 REM column, and then it’ll create like an a second auto column. But that column will not have 15 REM because that no longer fits, and so it’ll just be like a very narrow second column. And so this means that layouts can look extremely weird. And that was the reason why we thought, let’s do a container query, because you never know where, where the grid’s going to be. And so this can happen, like, if you’re using a grid inside another container, then media queries won’t really do the job there. And so container query was the best way to solve the problem. And I guess for the small percentage of browsers that don’t support it, I mean, the worst that can happen is the layout will look slightly off. You won’t lose any content. All the blocks will still be displayed. It’s just there. Some might be bigger than others. You know, it might not be of a uniform size sort of thing.

Excellent. Any other question.

Nope. Keep on going.

Okay, so, um, I want to also show you the stuff that I’m really excited about right now, which is what I’ve been building in the past few days, which is what is hopefully going to ship with, 6.7 now, I say hopefully, because you never know this is WordPress, and this thing that we’re Building is highly experimental. So the first part of it is, and I think the biggest piece here, which is what we in. I think, I mean, when we started working on this sort of multi span thing, we thought it would be really neat to get this into 6.6 but then it became obvious that we wouldn’t have time to make it stable. It’s pretty complex thing to build, so now we hopefully targeting it, targeting it at 6.7 and that is the ability to position items inside the grid. So I can show you what I mean here. So this is what I’m showing you now. Is in Gutenberg trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision., but it’s behind an experiment flag, so you can go, where are we? Okay, so you, you know you’re in here. You’ve got the Gutenberg plugin. You open up this experiments page, and you select, you check this box which says grid interactivity, and you save it, and then you go back to your editor, and you can see all the new stuff that was merged yesterday in the pull request. And it’s going to so the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). for 18.7 was just today, so this is going to be behind that experiment flag in 18.7 for anyone who wants to try. So what we have here is a grid. Yep, this is a grid, and it’s set to manual. You’ll notice that beside the column control, now there’s a row control in here, so you can define the number of columns and rows that you want. And these grid items are not positioned as they usually are on other grids. So in the grids that we saw previously, all the grid items are sort of side by side. And if you if I make this one smaller, then something else will flow in and take its place. It’s there’s never an empty space in this grid. The items all sort of follow on another, so they’re being auto placed inside the grid. And now what we have is the ability to place items manually in certain parts of the grid. So you could grab one of these and move it somewhere else, or you can use these. We change the block movers a bit when you’re inside this manual mode of grid. And so you can actually use the block movers to move up, move left, move down. You can move things on top of other things, which can be really confusing. If the blocks are precisely the same size, it’s this is one of the things that I’m hoping that we’ll get plenty of testing and feedback on. And folks. Will, you know, give us their opinions on if it works well, because we do want to provide the ability for blocks to overlap other blocks, right? Because you could, you could maybe have a really big block, and then maybe you want this block to fit on top of, oh, wait, that went under. This shoe is handy when you’re doing this sort of thing, because you can move things in markup order. Wait, where are we? Where’s the other block? Okay, see, this is one of those things that is basically the reason why this is an experiment. Okay, so where did you go. So we haven’t got the interaction 100% right here. I reckon this could still use some work. Okay, so say this, this picture takes up four cells, and I can drag this picture, maybe put it on top of that one. And so you can have an overlap, and you can have sort of partial overlaps, because maybe this picture could be a bit bigger, too, and then it were what happened there was supposed to overlap. The other one. Never mind smoking a bit buggy. Okay, still an experiment. This is what happens when you have experiments. They’re usually not very stable, but it’s super exciting, because this can allow you to do almost anything. You can create all sorts of like, really cool layouts with this. So this, I beg you please go and test this and write issues if you come across bugs and tell me how we can improve it. Because this really needs, I think this really needs some real world use. And and folks going, Oh, hey, this doesn’t work. Or maybe it should do this instead. Or maybe we could add this functionality, and it would help a lot. You know, that sort of feedback is really useful. And so auto So, yeah, so what? What’s happening here, basically, is we, we hijacked that manual mode where you previously you would only define the number of columns, and we make it work in a way that you can now place all the grid cells wherever you like. The auto mode is still the same as it was. I think this is this grid is in auto mode. Yeah, that’s in auto mode. So auto mode still works the same. It’s still resizable. Uh, manual mode is not resizable. But there is a pull request in progress at this very moment that I would also ask you to check out and test if you’re feeling adventurous, and that is a pull request that will add, it’s a bit more responsiveness to this, to this, so I can show you that. Ah, yeah, this is the one that has the recycling I’ve got, like branches in different tabs, trying not to get confused with which is which. Okay, so in this pull request, this is in progress so highly, highly unstable, I’m hoping that maybe it can be merged behind the experimental flag in the next few days to see if more folks might be able to test it. So this is so still our manual grid with our items positioned wherever we like, but now you’ll see that in addition to the columns and rows, we also have a minimum Column Width field, and that allows us to define a minimum column width, which, in addition to the number of columns, means that our grid will always have maximum number of columns, whatever we define. But minimum column width means that when the columns become less than that width, they will resize and reflow, and so you’ll end up with basically a one column grid. And the other thing is, we’re experimenting with this so that folks can still have a way of defining a grid with fixed number of columns, like the manual mode that is currently in core and about to ship in 6.6 where you can only define the number of columns. You can’t position the elements. We have kind of moved that into auto mode, and so there’s an in auto you now can define number of columns, and you can define minimum column width, and if you define both, you get maximum number of columns that you defined, and the minimum width means that they’ll break and reflow. Or you can just wipe the minimum column width and you’ll just have the number of columns, and that means that they won’t reflow, which is the current manual mode, or you can just define minimum column width, and you can not define any columns. And then, okay, what happened? There? Zero columns? Uh huh. This might be a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority., as I said, highly unstable. Let me make a note of that before I forget, columns should be resettable to the intent is that you can have, you know, just minimum column. It’s defined, and it will give you as many columns as fit on the on the window or in the container. Yeah. So that is still in progress, and that’s like the latest highly experimental thing. Other things that are coming. Is there a question? I see a hand, hi? Yes,

I have a quick question. Hi. I had noticed that all of the images you’re using are landscape images. Are they also all, all of them the same pixel resolution as well, pixel dimensions.

Ah, that’s a good question. They probably are, because at some point I just saved a bunch of pictures from my phone into my computer to use test images. But did were you wondering what this might look like with a different, reshaped image or vertical

right either in the middle, either introducing both landscape and portrait into the same grid? Yes.

So what happens there is, let’s say I replace one of these image. Replace, okay, replace. I do have There we go. That’s a vertical image. Yes. And so what happens is, this is sort of default grid behavior. The grid rows are going to assume whatever the size of the biggest element in them is. And so if you have one vertical image and a bunch of horizontal ones in in the same grid row, then the horizontal ones might look a bit odd, but what you can do is you can make that one take up two rows. Okay. Now these rows look huge. What is going on here? I think this might look better if that were, yeah, so you can kind of play with it. So if you wanted this to look really wanted the images to sort of line up really well, you’d probably be better off using a gallery block, because the images inside the gallery block can be sort of cropped to fit, and they always look all right. And the gallery block isn’t using grid yet, but that’s something that I hope will be able to change in a little while. So there’s actually, there’s, there’s an experimental PR that I haven’t worked on for a while. I had it up here on playground. That’s what a gallery block would look like if it were using grid. And I hope that this link still works. Okay, yeah, and so this would be a grid where each image actually occupies multiple columns and rows, so that we can sort of distribute them around in a way that doesn’t look too even. So they’re all sort of different sizes, and it looks pretty organic. And these images are a mix of vertical and horizontal. Say, for instance, this image here originally was horizontal, but the thing that the gallery does to the images inside it is you have, I think it might so that’s the gallery block, right? I can never find my way around when it’s just like, so there’s a setting crop images to fit. Yes, it was right here in front of you. So if you don’t crop images to fit in the gallery, they’ll just however, you know they’ll have whatever aspect ratio they usually have, but you can crop them to fit, and they’ll suddenly look very pretty. So, yeah, so in the case of having different images with different aspect ratios, that is probably what I’d recommend, although you can also try. I mean, I’m using images for the gridlock because I had to have some content for the demo. And this is what, you know, I like cat pictures, and so I’m going to use cat pictures, yeah. But yeah. And as I said, I mean, I’m not really a designer, so I’m sure there are loads more use cases, so more interesting and useful,

yeah? So Hans get asked if if it possible to retry this issue. Well, Hans, good. Which issue was that? Was it that overlapping issue that you so you can try to reproduce it?

Which? Oh, wait, which? Which issue was? Yeah. It, I

don’t know. I’m scared. Could you unmute yourself and try that again?

Yes, this issue you showed some time before, where you write on the issue on, yes, my English skirts are very bad.

Where was it the issue that, uh, well, that’s another one. That’s a known issue, actually. So interestingly enough, when the grid visualizer goes slightly off screen, this second horizontal scroll bar appears. I’m trying to figure out why, why that happens. Haven’t figured it out yet. Okay, so this kind of went off a bit when we added this portrait image, that the issue that I made a note of earlier was not being able to remove the number of columns from here, it just assumes that there’s always one column minimum, that that shouldn’t happen. We should be able to remove the number of columns and it will just act like, like auto mode currently acts, which is, let me see if I have Okay. It seems

as a issue that Burgett has written the chat I think,

oh, okay, so that’s a PR.

Where’s the chat? Yeah,

I just shared the PR link to your manual placement to set manual grid mode and our responsive behavior in both modes.

Oh, thank you. 62777, yeah, that’s actually okay. Yes, I should actually share the link to, where is it? Improvements to grid layout? Yes, this is the tracking issue. So there are a bunch of known bugs and known enhancements, well, things that we want to build. So what we have here in the list of things that we want to build for 6.7 is, apart from the positioning, being able to make both kinds of grid responses increase it fund a little bit on that. Okay, thank you. So, so what we have is, apart from the making responsive, which is this PR in progress that I showed to you, it’s a bit flaky. Never mind. It’ll be better before it’s an experiment, yeah. And what we also want to do is allow dragging blocks from outside the grid, which you currently can’t drag them into a specific position. And that’s that’s very annoying. We need to get that to work and also allow adding a new block to any position. So say you’re in here, you’ve got empty grid cells. You should be able to click on one of these grid cells, and an inserter would appear, and you’d be able to add any block in there and that. I think that’s probably the most important feature, if we think about it, because if you consider that, say, if you had a grid that was sort of like container block for a whole template, you could potentially build a whole template just by sort of clicking and dragging create the 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 then create so that would actually be a really cool way of building templates. If it well, if we can get it, we will get it when we get it to work seamlessly, yeah. So that’s one of the things, yep. And then there’s some not quite sure how lists you should behave, because ListView gives you a list of blocks in markup order. Currently, if you drag and drop in the ListView, it changes the markup order. If the block has a position, it won’t change it visually, which is really weird. So we need to fix that, improve the design of the block movers when the grid is in manual mode. Yeah, that’s them. So having these block movers in manual mode, having basically four buttons, which is like, move up, move down, move left, move right. Maybe not great. Maybe it should be a sort of arrangement like you have on the keyboard, where you have left, right, top, bottom, one on top of the other, that sort of thing. By the way, if you’re wondering what this looks like with actual icons, I can show you. I always have button text labels enabled because I get really confused with the icons. They all look the same to me. But yeah, so basically, right now, this is four arrows each pointing in whatever direction. So it doesn’t look great. We probably need to improve that. Text labels going again, and what else do we have on the list?

Improving them? Movers bug causing double scrollbar. Yes, we know about that one. And then there’s a few code improvements to be done that won’t really affect the interaction. If you are yet. I’ll have to add that columns should be resell. I’ll just work on that on the PR. I don’t think it’s worth adding to this list because it’s, it’s sort of part of that PR that I’m working on right now, if you find anything else with with the stuff that’s already merged into trunk. So what’s in the plugin behind that experiment flag? If you find anything else that’s dodgy, or if you have any ideas for other functionality that might be useful here, please, please create an issue or add a comment to this tracking issue, either way, you know, like, just let us know about it

cool. So are there additional questions, or if that was too fast, do you want Isabel to kind of repeat some of that, I think we can ask her. So for that, I saw that you wanted to have one picture overlap the others. Is that also possible with a different block? So if I have a picture, well, I know there’s a group block or a cover block, where I can do particular layering. But is there a sensor to just put a paragraph on top of that image? Or,

yeah, I mean, you could say I have paragraph here, and I could potentially put this on top of an image, okay, yeah, or it could just partially overlap. If I had a big image, the paragraph might be like, if I have an image occupying these four grid cells, then maybe that paragraph, oh, I just resized the paragraph. See, this is not super

intuitive. Yeah, it’s hard to kind of aim for it,

and then I have to try and resize the image. And then, yeah, I guess I could move it down, or I could move it, yeah, right,

yeah. So gives a little bit more positioning, yeah? So I’m not sure what the I’m not sure what advantage would be, but it’s just kind of the idea to be able to do that minimal,

yeah, I mean, you do already have the cover block. I guess I think it might be more. So I did this little experiment with images, and I just had a bunch of PNGs with with the background cut out, and so I was just sort of playing around with them and and I put them inside the grid, so each of these is occupying multiple grid cells, and that’s how you can make them kind of overlap with each other. And I was testing this and seeing what it would look like if that so I could show you here, maybe it’s easier. So the top one is not responsive. The grid cells always stay in the same place in relation to one another. So you can make it go really small. It kind of it’s weird, because the rows don’t really change their height. I think one thing that might be interesting would be to have a control for the row height to like, to be able to to set a specific row height. But then, yeah, I keep working on this, I keep coming up against what I think is sort of the hard limits of not having customizable responsive behavior in the block editor, because you can do so much stuff, and it’s kind of like the bottom this bottom image here, I made that responsive. And so it’s kind of interesting, because it gets to a certain size, and things start piling on top of one another, and that works, but you don’t really have much control over it. And so if you do want that finer grained control, then we really, in the end, we’ll need to have some sort of of functionality whereby you can define, if not break points, define sort of sizes. I don’t know. I’m not quite sure what that might look like, but I think this, this is interesting work to do, because it’s really, you know, this is as far as you can go with grid, pretty much. And you can maybe tweak one or another thing, but you can’t get finer grain control than this.

Yeah, like that has this population on the picture. Yeah.

I have a question. Yes, Jessica, have you thought of implementing the fraction unit? So the FR unit for grid specifically, because now it’s only pixels rem and M,

we will. I don’t think I mean with we have column numbers for the controls. You mean we have column numbers and we have the minimum column width needs to have a number like, that’s in, that’s in sort of an absolute unit, yeah. So it does. So the grid itself, if we look at the rule, what we have here uses, so this is repeating five columns, and it uses a min, max of 011, fraction. And that’s because it’s not resizable, so that if the minimum size is zero, then it’ll always have five columns, whereas the other grid under it has a slightly different rule. This is a bit more I’m not sure if you can see that, try, like, make that bigger. So here, this rule has a repeat, but it’s auto fill. And it has this very, very sort of hacky looking computation in it, which goes, get the, you know, min max will be, sort of Max, 120 pixels, which is, I think, what I added in minimum column width. And then it’s, sort of, it grabs the number of columns that you define as the maximum number of columns, and it uses it to make sure that this never goes over whatever number of columns you defined here as a maximum, which I think here is five, but it can go under that number of columns if because it’s got A minimum width. So, yeah. So, so we do,

let’s say if I wanted a column to have a width of two fractions. So that’s currently not possible without writing x or CSS. No,

but I don’t think, okay. I mean, that would make sense if we had a way to define each column individually, is that what you’re getting at? Because, potentially, yes, yeah, okay, then you basically have to write out the whole rule, really. So if you’re saying, like, if you could customize grid template columns, like you can when you’re writing CSS, and you can just go, you know, one fraction, two fractions, 100 pixels, and you can have three columns with all different sizes. Ah, I yeah, I’m not sure that’s, I don’t think, well, that’s not something that you can sort of translate into UI. I don’t think that would always be down to writing rules at that sort of level of fine grainedness, because otherwise the fractions are sort of relative to each other, so they also behave a bit weirdly. But like so if you wanted, I don’t know, I think basically I don’t know I’d have to, I’d have to have, like, a specific like, this is the CSS I want to write, sort of thing, and try to figure out if, if we could, but I think at one point, it only makes sense to create UI for this up to a certain point. And if you’re what you’re trying to do is, I want this grid that’s very specific, and it has like a 16 REM column, and then the rest is sort of fractions, but they’re not all the same size, like one is one fraction, and the other is two and the other then at that point, I think you really have to write the CSS, because it would be really hard to translate that into controls. That the goal with the controls is that people who can’t write CSS can understand them and can work with like if the controls are basically write the CSS that you want in here, then at that point, maybe it doesn’t make sense. Maybe we should just write the CSS.

No, that’s totally okay. I think this is the this is the hard part of implementing such a feature, because you have to first think of like, as you said, the end users who have no idea how CSS works. And then also, I come with my question from a more advanced view as a developer, maybe from an enterprise project or such. So there’s always this big gap in between those worlds, and I think it’s kind of hard there to, like, decide, okay, what goes what’s possible, and what makes sense, and what should be kind of maybe an extension, or have Some, some possibility to extend existing features and, like, overwrite them with, I don’t know, somewhere in the editor, or even 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., or somewhere else where it’s not accessible by the end user. Yeah,

and that makes a lot of sense, and particularly for Enterprise. Use cases. Now I’m thinking, for instance, with some of these controls, it might be a good idea to have a way to disable them. So if you’re building your enterprise website and you don’t want your users to be messing around with column spans or changing the type of grid, maybe you can hide those controls so only the theme developer has access to them, and not the end user. So that’s one thing. We’ve already done that for a couple of layout controls, and I think we might want to to do that for probably most of them, to give. To give. What website owners and theme creators for enterprise use cases are tools that they can use to basically disable all the foot guns that we have for less advanced users in the editor.

Yeah. Sounds good. You

Well, yeah, I like that. That function name kind of remove foot guns so people can shoot themselves in the foot. Yeah,

yeah. I think it’s, it’s good, like, I think in principle, there should be ways of, sort of gating especially advanced functionality, yeah. I mean having, having ways of building more custom grids, potentially, yeah, and that’s something that could also make sense for an enterprise. Yes, it’s also something to think about.

All right, yeah, so, um, thank you much for sharing. Do I have any other Do you want to show something else?

Uh, no, I’m good. I think I can stop sharing my screen now, if nobody has any more questions,

yeah, I’m scared. Jessica, do you have any more questions?

Maybe one more about another fairly specific developer question. Have you thought of adding possibilities for the justify and align properties that you have with grid so you can align those elements specifically.

Yes, that would actually be a good addition. I’m thinking, I don’t think there’s an issue for it. I’m pretty sure there isn’t, or I would have come across it by now. But yeah, I think that’s that’s definitely something that should be added.

I mean, because we have this controls already with the regular group block, but the row and, yeah, what’s it called stack?

Stack, block, row and stack, yeah, which are variations of Flex Layout? So, yeah, I think the same controls for grid would make sense. And I think we’ll, we’ll have to build them in sooner or later, hopefully sooner.

Excellent. Also, if

anyone is a developer and is interested in working on these things, because basically, up until now, it’s been myself and Rob. We’ve just been doing all

the work. I thought it would be actually, Lauren, I did not expect it’s only two of you working on this. So for that, yes, it’s pretty amazing work.

This is mainly why layout has been so slow to evolve. It’s like there’s not a lot of people working on it. And, I

mean, that’s what you don’t see usually. So I’m in other spheres. And of course, I have my own work to do, so I’m just partially always looking at things and seeing, like, is there progress or is there no progress? So these are information that’s often like falling, falling behind, and you just don’t notice until either someone tells you, or you’ll get to know what the actual situation is.

Yeah, yeah, true. I mean, it’s not super visible, unless you’re in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ all day and seeing who’s working on what at night? No one. No one can do that. It’s a huge project. Yeah,

yeah, but this was really cool, so I’m glad that you kind of showed us what you’re working on and what’s an experiment, so we can start kind of testing it and getting our creative juices going in thinking, Well, I’m since the beginning, I actually wanted to do a Mondrian kind of layout for a website, and never really kind of worked through that. But this actually is there a way to change the size or the color of the gutters.

I mean, you can you can so you can use regular block spacing to change the size, but currently it only works for both. So you that’s actually something that I think is an open issue for it somewhere to have more fine grain control over. So. Being able to change the vertical gutter and the horizontal gutter separately, and not having it all change at once, because right now we only have, like, one block spacing, one value you put it in, and that’s it. Let’s control through the block spacing. What you can do in terms of changing the color is you can give the whole grid a background color, and then you can add whatever blocks inside with different colors, and then it will look as if the gutters have that color. Yeah, so,

all right, Hans GERD had another question in the chat, is it possible to set a hover? It’s not, has nothing to do with the grid, but is there a hover button, a hover control for the button

in theme JSON, to say, remember, be able to set that as an element to the button. Element,

yeah, in the elements, theme JSON, button, yeah, yeah, yeah. It should be, should be possible in hand skirt to set a hover color in through the theme JSON, similar to the link in link, you have it in the UI, but for the button, you don’t, but you could put it in the same JSON for that. Okay, all right. So this, if you’re all okay with it, I’m gonna give you six minutes back of this. Harvey hang I really thank you so much Isabel for taking the time out of your evening in Australia. And to show this off, we have have it recorded. So I will write a little post on the make blogblog (versus network, site) so other people can see it as well. And I hope you have already two testers here for the experimental Gutenberg stuff.

Yes, thank you.

And I will get through that too. So Well, we’ll see you all and the next hallway hangout. Remember, July 9 is about the block extensibility for the site editor and the post editor, they are merged now and tune in. All right. You all have a good evening, good afternoon and see you at the next time. Bye, thanks. See you. Bye.


#grid-layout, #hallway-hangout, #summary

Editing custom fields from connected blocks

WordPress 6.5 introduced the Block Bindings API, which, among other things, allows users to easily connect blocks to custom fields. For example, users can directly connect paragraph content without the need to create a custom 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 it will show the selected post 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. value.

Until now, when this connection existed, the UIUI User interface to edit the paragraph was locked, preventing users from modifying its value.

WordPress 6.6 introduces the possibility of editing the value of the custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. directly from the block when they are connected.

You can see the potential of it in this quick demo:

As can be seen in the video, whenever a block attribute is connected to the Post Meta source, it automatically connects to the custom field value while editing.

Among improvements to the UI to clarify when a block is connected, it comes with some functionalities that are worth mentioning as well:

Custom fields can be updated from 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.

While using blocks in the query loop, if they are connected to Post Meta, they are also editable.

When multiple blocks are connected to the same custom field, their value is synced

Users can only edit the custom fields from posts where they have permission

Right now, this is restricted to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. sources like Post Meta or Pattern Overrides, but the idea is to open the relevant APIs to be used by any external source as well.

Read more about this iteration for Block Bindings at #60956

Props to @juanmaguitar for review

#6-6, #block-bindings

Updates to the Interactivity API in 6.6

The Interactivity 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. development for WordPress 6.6 has been focused on maintenance. Its updates include new features and directives, a better debugging experience, and improved code quality.

Table of Contents

New async directives

WordPress 6.6 includes three new directives aimed at improving performance:

  • data-wp-on-async
  • data-wp-on-async-document
  • data-wp-on-async-window

These async directives optimize event callbacks by first yielding to the main thread. That way, complex interactions won’t contribute to long tasks, improving the Interaction to Next Paint (INP). You can read more about this approach in Optimize Interaction to Next Paint.

These directives are recommended over the sync ones (data-wp-ondata-wp-on-document, and data-wp-on-window), but you can use them only when you don’t need synchronous access to the event object, specifically if you need to call event.preventDefault()event.stopPropagation(), or event.stopImmediatePropagation(). The directives in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks have been updated to use async where available.

When you must resort to using the non-async directives, the @wordpress/interactivity package now exports a splitTask function which can be used to manually split yield an action to the main thread after calling the synchronous event API. Please see the documentation on async actions for how to implement this.

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ pull requests: #61885 and #62665

Support for derived state props inside wp_interactivity_state

Since WordPress 6.5, developers can define the initial state of interactive blocks in the server with wp_interactivity_state(). Directives referencing these state properties are evaluated to render the final HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. However, derived state props, defined as getters in 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/., were a feature missing in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher.

In WordPress 6.6, the wp_interactivity_state() function now accepts derived state props using Closures (anonymous functions). This feature is equivalent to the getters already used in JavaScript inside the store() function exposed from the @wordpress/interactivity package.

const { state } = store( 'myPlugin', {
	state: {
		taxRate: 0.21,
		shippingFee: 4,
		get priceWithTax() {
			const context = getContext();
			return context.basePrice * ( 1 + state.taxRate );
		},
		get totalPrice() {
			return state.priceWithTax + state.shippingFee;
		}
} );

In the same way, the Closures can access the current Interactivity API context by calling the new wp_interactivity_get_context() function―equivalent to their JavaScript version, getContext(). This function returns the current context for either the current namespace―when omitted―or the specified one. Also, wp_interactivity_state() can be used when the value depends on other parts of the state.

wp_interactivity_state( 'myPlugin', array(
	'taxRate'      => 0.21,
	'shippingFee'  => 4,
	'priceWithTax' => function() {
		$state = wp_interactivity_state();
		$context = wp_interactivity_get_context();
		return $context['basePrice'] * ( 1 + $state['taxRate'] );
	},
	'totalPrice'   => function() {
		$state = wp_interactivity_state();
		return $state['priceWithTax']() + $state['shippingFee'];
	}
) );

It’s important to note that using Closures for derived state is not always necessary. When the initial value is static, and the Closure will always return the same value because the values it depends on do not change on the server, regular values can be used instead:

$basePrice    = 100;
$taxRate      = 0,21;
$shippingFee  = 4;
$priceWithTax = $basePrice * ( 1 + $taxRate );
$totalPrice   = $priceWithTax + $shippingFee;

wp_interactivity_state( 'myPlugin', array(
	'basePrice'    => $basePrice,
	'taxRate'      => $taxRate,
	'shippingFee'  => $shippingFee,
	'priceWithTax' => $priceWithTax,
	'totalPrice'   => $totalPrice,
) );

Read more about this new feature on the 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. #61037 and in the GitHub Issue #6394

Integration with Preact Devtools

The Interactivity API runtime uses Preact internally to transform directives into components and manage all DOM updates. Since WordPress 6.6, developers can use Preact Devtools to inspect interactive blocks and check the component tree for all rendered directives.

To enable this feature, the SCRIPT_DEBUG constant must be enabled. This constant makes WordPress serve an extended version of the Interactivity API runtime that’s compatible with the Preact dev tools.

In the future, there are plans to improve the displayed information by including the names of the directives used in each of the elements, among other enhancements.

Read more about this new feature on the TRAC ticket #61171 and in the GitHub PR #60514

Interactivity API warnings in 6.6

In WordPress 6.6, both the server-side directives processing and the JavaScript runtime will warn developers when the directives, the namespace, or the markup cannot be evaluated.

To enable this feature, the SCRIPT_DEBUG constant must be enabled.

Warning messages will be shown for the following cases:

Unbalanced HTML tags

If the processed HTML contains any unbalanced 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.), the server processing will bail out. This causes the flash effect on page load. Now, developers will find which tag is missing within a warning message.

One example could be <span data-wp-text=”hello” />

Unsupported HTML tags

Some tags, like SVG or MathML ones, are not yet supported by the HTML API, which is used internally by the Interactivity API. Directives inside them or in their inner tags won’t be server-side processed. Now, a warning will appear if any directives are found in those positions.

Non-parseable data inside data-wp-context

The context data provided to data-wp-context directives must be a valid 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. stringified object.

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. namespace inside data-wp-interactive

The value passed to data-wp-interactive directive cannot be an empty object {}, an empty string, or a null value. Namespaces must be non-empty strings.

Props to @darerodz, @westonruter and @luisherranz for co-authoring this post
and to @fabiankaegy and @juanmaguitar for review

#6-6, #dev-note, #dev-notes, #dev-notes-6-6, #interactivity-api

Summary, Dev Chat, June 26, 2024

Start of the meeting in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., facilitated by @joemcgill. 🔗 Agenda post.

Announcements

  • WordPress 6.6 RC1 was released on June 25. We are now in a hard string freeze. Note that the dev-feedback and dev-reviewed workflow is required prior to committing to the 6.6 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". (handbook reference).
  • WordPress 6.5.5, a security release, was shipped on June 24.
  • Gutenberg 18.6.1 was released on June 25.

Great work getting all of these milestones done this week :tada:

Forthcoming Releases

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

We are currently in the WordPress 6.6 release cycle. The WordPress 6.6 RC2 release is scheduled for next Tuesday, July 2. Please review this post for an update about the Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). Phase.

@meher brought up a discussion from the #6-6-release-leads channel about the string freeze in the release candidate stage. We discussed when the soft string freeze should happen and if it should exist, when the hard string should happen, how these two different freezes are different and if there are any exceptions.

@audrasjb highlighted the glossary items:

Hard freeze:
See String freeze. A hard string freeze or a hard freeze is announced when all the strings of the upcoming release are frozen including the strings of the About page. A hard freeze is the final string freeze before a release.

Soft freeze
See String freeze. A soft string freeze or “soft freeze” is announced when all the strings of an upcoming WordPress release are frozen, except for the strings of the About page.

@desrosj suggested we decide on the course of action for this release (6.6) and then do the research suggested here to adjust the practice going forward.

@audrasjb also found an example of a string change after the hard string freeze here.

@joemcgill summarised the next steps as follows:

  • We’re currently operating in a Hard Freeze for 6.6
  • @audrasjb is going to check with Polyglots to see if we can extend that date to RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3
  • If we really do need Hard Freeze to start at RC1, we will update our docs for future releases

We’ll aim to have an update and share by next week’s Dev Chat.

Next maintenance release

No maintenance releases are currently being planned. However, we discussed follow-up tickets that were opened following the 6.5.5 release.

@audrasjb noted:

The most annoying post-6.5.5 ticketticket Created for both bug reports and feature development on the bug tracker. was #61488.
It was fixed in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. and is waiting for potential backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. to branch 6.5. Question is: do we need a 6.5.6 for this?

@jorbin noted that we’re waiting to see how #61489 shakes out, and we should allow for a day or two if possible so that 6.5.7 does not need to follow quickly behind.

Next 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: 18.7

Gutenberg 18.7 is scheduled for July 3 and will include these issues. This version will NOT be included in the WordPress 6.6 release.

Discussion

The main discussion was around 6.6 this week, so we moved straight onto the Open Floor section.

Open Floor

@grantmkin asked if we could discuss this issue to allow themes to side-load single block plugins, which could help seamlessly open up more creativity and options baked into 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:

As I’ve been looking into the idea of canonical block plugins, one point of feedback I’ve received from theme designers is a desire to use such blocks in theme templates and patterns. One example shared was the desire for a tabs block to use in a product page template. If you’re releasing the theme for general use (rather than it being specific to an individual site) you’re currently limited to using coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. And naturally, we’re conservative about adding new blocks to core. So I’m curious about possibilities for making more blocks available for use in themes and patterns.

There were several comments and questions raised, including:

  • Sounds a lot like 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 dependencies for theme. – @afragen
  • So not just starter content for themes, but starter blocks?  Interesting, seems pretty reasonable desire for themes. – @jeffpaul
  • I wonder what a fallback would look like if a block was no longer available in the repo as well? Would it just no longer show, or would there be a way for the external block to fall back to core blocks? – @joemcgill
  • In principle the idea of blocks like this is good because keeps them outside theme. – @karmatosed

@poena highlighted if the plugin that has that block is not installed, the user will be prompted to install it. If they don’t install it, they can keep the block as is, or delete it. So what is the problem we’re trying to solve with side-loading single block plugins?

@poena also noted that themes in the wordpress.org theme directory are not allowed to require plugins. That does not mean that those themes are not allowed to recommend and use block plugins.

@joemcgill encouraged folks to keep the convo going in the GH issue.

@mmaattiiaass also raised a discussion about the WordPress Importer project:

I would like to discuss the current state of WordPress-importer project. I think it’s an important piece for production sites, and it seems to be unattended.
Example: the font assets can not be imported automatically because that functionality wasn’t shipped to the users. There’s a PR adding that functionality that has been sleeping for months without any review despite being flagged as a blockerblocker A bug which is so severe that it blocks a release. for the font library in the WordPress 6.5 release.

@jeffpaul noted that the Import component team is vacant: https://make.wordpress.org/core/components/import/.

@joemcgill offered to do some research to find some answers.

Finally, @azaozz asked for more reviews on #60835:

#360835 is a fix for few bugs introduced in WP 6.5. It’s been ready for about two months now. Yes, there are some different opinions there but the best way to iron out any differences is to have more reviews, right? 

@joemcgill highlighted that as an aside, it seemed like one of the things that has stalled the refactoring efforts is that there was an expectation set that there would be a proposal posted on make/core outlining the plan for more top-level directories like the /fonts directory. Joe offered to follow up with any updates for this.

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

Props to @joemcgill for proofreading.

#6-6, #core, #dev-chat, #summary

Performance Chat Summary: 25 June 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • Early WordPress 6.6 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2 performance results [GitHub issue]

Priority Items

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
  • Performance Lab 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 other performance plugins)
    • Auto-Sizes for Lazy-Loaded Images
    • Embed Optimizer
    • Fetchpriority
    • Image Placeholders
    • Modern Image Formats
    • Optimization Detective
    • Performant Translations
    • Speculative Loading
  • Active priority projects

WordPress Performance Trac Tickets

  • Last 2 performance tickets for 6.6 #59595 (merged) and #59600 (punted)

Performance Lab Plugin (and other Performance Plugins)

  • @thelovekesh added testing steps on https://github.com/WordPress/performance/pull/1247 which is ongoing PR for adding Web Worker Offloading plugin. As per last discussion on merging it in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision., this PR is ready for that
  • @westonruter hopes to pick up Web Worker Offloading next week
  • @mukesh27 the Extend core’s Autoloaded Options Site Health test if present (in WP 6.6) is merged
    @mukesh27 opened a couple issues related to Modern Images Formats and the implementation of the picture element. Those are up for grabs for anyone wanting to contribute
  • @westonruter Related to that, I found a downside to using the picture element in the first place, in that it is not currently possible to add fetchpriority=high preload links for picture elements since the link 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.) doesn’t replicate all of the picture element’s sourcing features: https://github.com/WordPress/performance/issues/1312
    • @joemcgill Does adding fetchpriority directly to the image not work in this case?
    • @westonruter Yes that does, but the problem occurs when there are varying LCP elements for different breakpoints. So Image Prioritizer will need to explicitly avoid adding a preload link when the LCP element is a picture.
    • @joemcgill I would think that picture would make that easier, because each source would have it’s own media attribute
    • @westonruter Otherwise, it adds preload links for the LCP element in each breakpoint. The problem with the picture element is the type not the media.
      • Unless, would a browser skip requesting a preload link for an image when it has a type that is not supported? I didn’t think it did. But I’ll need to check that
  • @westonruter Related to Image Prioritizer, I’ve opened several other issues for enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. ideas on top of Optimization Detective.

Active Priority Projects

Improving the calculation of image size attributes

Optimized Autoloaded Options

  • The 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, and 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. has now been psoted https://make.wordpress.org/core/2024/06/18/options-api-disabling-autoload-for-large-options/

Improved template loading

  • @thekt12 I am working on review from @joemcgill here –
    https://github.com/WordPress/gutenberg/pull/62794/files
  • @joemcgill #59600 and #57789 have a lot of overlap and the former is mostly irrelevant at this point. We fixed the biggest problem #59600 with blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. patterns, but still have some things we wanted to progress in 6.7 for the WP_Theme_JSON system. However, the maintenance of that system between the GB repo on the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. repo has made executing and testing changes reliably pretty challenging. I opened this issue to discuss how we can improve this process going forward. I’d be happy for folks here to give feedback.
    • In terms of our tracking issue, I’ll post an update in light of the final 6.6 changes we were able to make and update any remaining tasks we want to pursue.

Open Floor

  • @joemcgill FYI: there’s a new channel, #pluginreview-plugincheck to have discussions related to maintaining the Plugin Check plugin that we helped build.
    • @thekt12 mentioned most PRs show errors
    • @joemcgill I’ve seen that on occasion as well, but not causing any merge checks to fail, and not consistently with the same message. Could be flaky e2e tests. 
  • @mukesh27 As the Performance Lab plugin has added support for WebP, AVIF, and Picture elements, what is the tentative WordPress version we are targeting for merging these features?
    • @joemcgill WP already supports uploading those versions, and gives site owners the ability to convert uploaded files to those formats using a 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., but there are currently no plans to make either the “default” format that is used for the intermediate sizes that WP creates.
    • @westonruter And merging picture element support will require a lot of testing and there will certainly be many theme and plugin compatibility issues
    • @joemcgill #55443 is probably the best ticketticket Created for both bug reports and feature development on the bug tracker. to revisit for this

Our next chat will be held on Tuesday, July 2, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary