A new system for simply and reliably updating HTML attributes

This call for feedback will be open until September 9th.

Let’s introduce a reliable tool WordPress could use to adjust the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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. markup. The current practice of using basic replacements seems fine at a first glance but is easy to break. The system proposed here will help avoid these common pitfalls.

Consider this example of adding a style HTML attribute in the cover block:

preg_replace( '/class=\".*?\"/', '${0} style="' . $styles . '"', $html );

It assumes a specific HTML structure:

  • There is a class attribute
  • The style attribute isn’t already defined, as browsers ignore the repeated attributes.
  • There is no other attribute ending with the string class="", such as data-replace-class="…" or title='how to set the class="" attribute'
  • The existing class attribute uses double quotes and no single quotes or no quotes.
  • Regular HTML does not contain the class="" substring, for example in a post describing how to use the class attribute in an HTML document.

These assumptions are typically true, but only until they’re not. For example, applying a padding produces a markup such as below where the browsers ignore the second style attribute:

<!-- Formatting applied for clarity -->
<div
    class="wp-block-cover"
    style="background-image:url(/img.png);"
    style="padding-top:4px">

The original preg_replace could be patched, but eventually another assumption would break. The deeper, fundamental problem is that string replacements are not the right tool for updating HTML. They’re used out of necessity as WordPress does not provide any better tools. Well, let’s change it!

Let’s introduce a dedicated tool for reliably updating the HTML markup. It’s called WP_HTML_Walker:

$w = new WP_HTML_Walker( '<div></div>' );
$w->next_tag();
$w->set_attribute( 'style', $styles );
$updated_html = (string) $w
// <div style="display: block"></div>

Simple string replacements don’t account for nuances in HTML

The problem of updating HTML attributes frequently appears in block-related work. Recently @dmsnell and I (@zieladam) investigated how HTML attributes are typically updated in the WordPress codebase while exploring adding a CSS class to all Gutenberg blocks. We found the typical approach is to use string replacements similar to the one covered above.

Here are a few examples already in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. where we run into these nuanced problems:

The Site Logo block attempts to remove the href attribute:

// Remove the link.
preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );

However, it also unintentionally removes all the attributes, including class and style.

The gallery block adds a CSSCSS Cascading Style Sheets. class:

preg_replace('/' . preg_quote( 'class="', '/' ) . '/', 'class="' . $class . ' ', $content, 1);

However, if there’s no existing class attribute, it will skip over 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.) without adding the required class. The same technique is used in the duotone feature, and the block supports API.

As a side note, it’s easy to lean on the existing pattern of using more complicated functions such as preg_replace(). Calling preg_quote() in this example isn’t appropriate and the entire regular expression pattern does nothing more than a basic str_replace().

The block-supports APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. attempts to find the first HTML tag:

preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );

However, it also matches non-tags like text hearts and mathematical expressions (<3, f(x) = {x, x<5; -1, x>=5}), DOCTYPE declarations, and HTML comments.

The media library adds the srcset attribute:

preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );

However, a > character inside a tag attribute (e.g. title="why tacos > burritos")  would break the srcset functionality and potentially introduce a vector for injection attacks.

The list goes on, and it’s not just blocks.

Here’s an example from shortcodes:

if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {

Media Embeds:

if ( preg_match_all( '#<(?P<tag>' . $tags . ')[^<]*?(?:>[\s\S]*?<\/(?P=tag)>|\s*\/>)#', $content, $matches ) ) {

Media Galleries:

preg_match_all( '#src=([\'"])(.+?)\1#is', $gallery, $src, PREG_SET_ORDER );

Twentynineteen:

preg_replace( '/<a\s.*?>/', $link, $item_output, 1 );

And many, many other places. The point is, this is how WordPress does it today.

Many features demand a more reliable way of updating HTML attributes. Block theming code, in particular, tends to modify block markup to apply visual styling:

The only way to reliably update HTML attributes is to follow the HTML specification. However, doing that from scratch every time a CSS class is added would only cloud the entire codebase with HTML parsing nuances and distract from the work being done. That’s why @dmsnell, @gziolo, and I (@zieladam) want to move this complexity into Core. It would be exposed as a tailored and restricted API that’s easy to use, hard to mess up, and easy to find.

The new system tokenizes HTML

WP_HTML_Walker (Pull Request 43268) recognizes HTML tags and updates their attributes. It’s reliable because it implements the same official HTML specification as WebKit, Chrome, Firefox, and other major browser engines.

Unlike full-fledged HTML parsers, the walker avoids handling malformed markup, semantic problems, and building a document tree. Any problems that are present on the input are passed on to the browser. The walker doesn’t fix HTML just as it won’t break HTML.

The tradeoff is that it only offers a simplified API to modify HTML attributes. If you want to replace an img tag with a full-fledged figure layout, this API won’t offer that functionality. Similarly, the walker won’t help you replace all the child nodes of a particular div with a completely new markup. This system is focused on finding specific HTML tags and adding, removing, or updating the attributes on those tags.

Remove the href attribute from an anchor tag:

$w = new WP_HTML_Walker( $html );
$w->next_tag( 'a' );
$w->remove_attribute( 'href' );

Add a style attribute to the first tag in the document:

$w = new WP_HTML_Walker( $html );
$w->next_tag();
$w->set_attribute( 'style', 'display: none' );

Add a CSS class to the first tag having the wp-block-media-text__content class:

$w = new WP_HTML_Walker( $html );
$w->next_tag(array(
    'class_name' => 'wp-block-media-text__content'
));
$w->add_class( 'wp-foo-bar' );

Add the srcset attribute to all image tags:

$w = new WP_HTML_Walker( $html );
while ( $w->next_tag() ) {
    if (
        isset( $w->get_attribute( 'src' ) ) &&
        ! isset( $w->get_attribute( 'srcset' )
    ) {
        $srcset = build_srcset( $w->get_attribute( 'src' ) );
        $w->set_attribute( 'srcset', $srcset );
    }
}

Processing HTML using this Core API could help avoid a broad array of mistakes that appear due to the oversimplification presented by the array of ad-hoc solutions. A common interface for operations on block markup would alleviate competition between changes. You can check the refactoring PR to see how this new API could improve code readability in the existing core blocks.

Why build a new API instead of using DOMDocument?

Using DOMDocument was extensively discussed. It’s not installed on every host so a polyfill would still be necessary. And even if it was available everywhere, it’s based on libxml2 designed to parse XML. Libxml2 does not implement the WHATWG HTML parsing spec, does not support HTML5, and brings with it a variety of parsing failures and quirks.

Like many DOM libraries, DOMDocument is a heavy interface that rewrites entire documents after several stages of transformation. In contrast, the walker exposes a focused interface closer to what string functions offer. For the kind of modifications occurring in WordPress this is a more natural and convenient approach.

If this resonates with you then please speak out before September 9th

This post will be open for feedback for the next three weeks until September 9th. After that @dmsnell, @gziolo, and @zieladam would like to merge the new API into the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 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 to power adding CSS classes to Gutenberg blocks, block layout improvements, and changes in CSS style variations.

Also see the WP_HTML_Walker Pull Request.

Props to Dennis Snell (@dmsnell), Grzegorz Ziółkowski (@gziolo), Andrei Draganescu (@andraganescu), Carolina Nymark (@poena), and Ramon Dodd (@ramonopoly) for their reviews and help in putting this proposal together.
#core, #editor, #gutenberg, #proposal

Summary, Dev Chat, August 17, 2022

Weekly WordPress Developers Chat – start of the meeting on Slack.

1.Welcome

Agenda
Last week’s summary.
Writing the summary is a great way of following dev chat, so do volunteer if you would like to get involved.

2. Announcements

Gutenberg 13.9 has landed! Well done to everyone involved.

3. Blogblog (versus network, site) posts of note!

The month in WordPress.
All about the next default theme:

A week in Core.
Please join this conversation about merging experimental APIs by September 7. (An audit of those APIs.)
Gutenberg is standardizing the way contributors name npm scripts. Should CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.?

4. Upcoming releases

a) The 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. is 6.1.
Helpful links:
The development cycle.
The bug-scrub schedule, and the Handbook on bug-gardening.

@audrasjb reminded the group that there’s very little more than a month left before betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1, so the Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. leads will do a final scrub of tickets marked “early” in order to puntpunt Contributors sometimes use the verb "punt" when talking about a ticket. This means it is being pushed out to a future release. This typically occurs for lower priority tickets near the end of the release cycle that don't "make the cut." In this is colloquial usage of the word, it means to delay or equivocate. (It also describes a play in American football where a team essentially passes up on an opportunity, hoping to put themselves in a better position later to try again.) them to the next milestone.

With that he brought up tickets #22176 and #36308 and pinged their owners, @JonnyHarris and @antpb for immediate action.

@audrasjb: linked this Trac report for early tickets.

b. 6.0.2 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). and Final Release Party Dates 
@webcommsat reposted this @annezazu update from the 6.0 channel:
After finalizing with @sergeybiryukov, the following dates are confirmed for 6.0.2:

  • RC on August 23, 2022
  • Final on August 30, 2022

Release parties will be in #core around 16:00 UTC (the time we’ve been holding release parties) with wrangling here in #6-0-release-leads as needed. Hope to see you all there.

@audrasjb raised a question about changesets already merged to 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.: Should committers start to 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. those to 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". 6.0?  

The discussion on Slack

5. Components and tickets

@sergeybiryukov:

Build/Test Tools: The Memcached container was moved into the Docker Compose config. This allows a developer to use the persistent Memcached object cache on their local development environment via the LOCAL_PHP_MEMCACHED environment variable. See ticketticket Created for both bug reports and feature development on the bug tracker. #55700 for more details.

Database: Better compatibility with MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. 8.0: #49364 and #51740 for more details.

General: New helper functions for required field indicator and message, for better reusability: #54394 for more details.

Login and Registration: New is_login_screen() function helps check whether the current request is for the login screen: #19898.

I18Ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: New WP_Textdomain_Registry stores text domains and their language directory paths: #39210.

Thanks everyone who worked on those tickets! 

Date/Time, Permalinks: No major news this week 

@webcommsat and @marybaum:
In Help/ About:

#56357: New ticket opened for the About Page for 6.1, to add it to the milestone

In Quick/Bulk Edit:

  • #41494: further tests requested to replicate the issue. Number of tests done to replicate have not returned same result. If anyone is still facing the issue reported, please update the ticket.
  • #16502: Continues in review.
  • #52501: Will raise again with #polyglots

6. Open floor

@webcommsat: Not directly core related, but there are lots of ways to depict code and development in photographs. Look out for a post tomorrow on the Photos blog for a challenge for World Photography Day.
 

Props to @webcommsat and @marybaum for the summary.

#dev-chat, #summary

WordPress Development Setup

Lately I’ve been seeing more mentions and questions about “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/”, “In Core or in Gutenberg”, “Core vs. Gutenberg”, “Merging Gutenberg”, “On TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. or on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/”, etc. I agree, the current WordPress development setup is somewhat complex. Two repositories, different release cycles, merging… This post won’t answer all questions, but hoping it will help to clarify some of them.

Core is Gutenberg and Gutenberg is Core

The code that is currently on WordPress.org Trac, and the code that is currently on GitHub are two parts of the same application. When a new version of WordPress is released, the code from both places is combined.

Why is Gutenberg being developed on GitHub or why is Core not being developed there?

Developing Gutenberg on GitHub makes it possible to test new features and iterate faster. Also, it was more convenient to start there. On the other hand Trac is hosted on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ and has a mirror on GitHub. That mirror allows patches to be submitted as PRs, and code to be discussed inline (something like the best of both worlds). However the WordPress Tickets (a.k.a. Issues) are discussed on Trac and new releases are made from the build repository on WordPress.org.

Is Gutenberg a WordPress feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins.?

No. Gutenberg is part of Core. “Gutenberg” is the code name of the WordPress blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. It has faster development cycle than the rest of WordPress, and is released as a 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 first.

By design the Gutenberg development cycle doesn’t align with the rest of WordPress’ development cycle. Merging code from both parts of the project before a WordPress release is not the same as merging a feature plugin. As Gutenberg is released as a plugin first, the code that is being added from GitHub to Trac has already been tested. Because of this the merges can happen later in the overall development cycle, usually during 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..

Seems there may be some room for improvement here as merges can happen faster. Every time the Gutenberg plugin is released the code probably can be merged, even when the rest of the WordPress code is in alpha. However for this the process of merging would have to be simplified and improved.

Thanks to @gziolo and @zieladam for the reviews and suggestions.

X-post: Proposal: Updating WP_MEMORY_LIMIT

X-comment from +make.wordpress.org/hosting: Comment on Proposal: Updating WP_MEMORY_LIMIT

What’s new in Gutenberg 13.9? (17 August)

“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 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.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


The Gutenberg 13.9 is now available in the WordPress 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 repository. It continues the iteration and polishing on various fronts, such as UIUI User interface, interaction, and engine work.

Almost 50 people contributed to this release and 4 of them are first-time contributors.

Table of contents

  • Changelog
  • Performance benchmark
  • Contributor props

Changelog

Enhancements

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

  • Archives: Add a control to make block’s dropdown label invisible. (43025)
  • Media&Text: Add help to ImageSizeControl. (40642)
  • Navigation: Move overlay colors to the responsive wrapper. (42875)
  • Navigation: Extract navigation block utils. (42865)
  • Navigation: Fix link inheritance in overlay. (42929)
  • Post Author: Rendering htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for the author description at the editor. (42109)
  • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Add link target and rel attributes. (42853)
  • Post Title: Do not add rel attribute if empty. (42855)
  • Query Pagination: Correctly position the “next” link on the first page. (42764)
  • Query Title: Add a search title variation. (42662)
  • Quote: Unwrap on Backspace at start. (42808)
  • Search Block: Remove margins from the input. (42959)
  • Transforms: Add group unwrap. (42685)

Components

  • BaseControl: Add box-sizing reset. (42889)
  • BorderControl: Add box-sizing reset. (42754)
  • BoxControl: Export applyValueToSides util function. (42733)
  • ComboboxControl and FormTokenField: Enhance components with custom render callback for options. (42597)
  • ComboboxControl: Add support for uncontrolled mode. (42752)
  • Flex: Convert component to TypeScript. (42537)
  • FontSizePicker: Add 40px size variant. (42716)
  • List View Expander: Fix icon in RTL mode. (42997)
  • Placeholder: Convert component to TypeScript. (42990)
  • Popover: Rewrite Storybook examples using controls. (42903)
  • Popover: Tidy up code, add more comments. (42944)
  • ResizableBox: Change tooltip background to match other tooltips. (42800)
  • Storybook: Add global CSSCSS Cascading Style Sheets. switcher. (42747)
  • StyleProvider: Convert component to TypeScript. (42541)
  • Swatch: Convert component to TypeScript. (42162)
  • Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. (42844)
  • Typography Panel: Fix font appearance control width. (42795)
  • UnitControl: Update unit dropdown design. (42000)
  • Update control labels to the new uppercase styles. (42789)

Reusable Blocks

  • Make template part and reusable block creation language consistent. (43032)

CSS & Styling

  • Rename solid color. (42918)
  • Tab style subpixel fix. (42892)
  • Navigation: Try to keep :Where just for paddings. (42967)

Global Styles

  • Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. (42544)
  • Enable alpha (opacity) in Global Styles color pickers. (43045)
  • Add block spacing to root block support UI. (42797)
  • Elements: Update the load order of the CSS in the Site Editor. (42863)
  • Heading element UI controls. (42176)
  • Theme JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. (42776)
  • Upsize typography panel components. (42718)

Design Tools

  • Cover: Show Resize Tooltip on Drag. (23522)
  • Update color button style. (41838)
  • Add explicit bypass for fluid font size calculation. (42757)

Post Editor

  • Post Template: Update template title selector. (42091)

Site Editor

  • Add author nicename template creation ability. (42165)
  • Add fallback template content on creation. (42520)
  • Add a ‘View Site’ link in the site editor. (42331)
  • Update clear customizations copy for templates. (41765)

Widgets Editor

  • Format Library: Add missing keyboard shortcut description in customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.. (43044)

Block Editor

  • Rich text: Add character shortcuts for wrapping selection. (42469)

Block Directory

  • Modernize DownloadableBlockListItem tests. (43026)

Bug Fixes

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 issue where changing the id of the recursion provider can result in focus loss. (42916)
  • Site Editor: Don’t disable the Save button. (42842)

Components

  • Block Styles: Truncate long button labels. (42975)
  • ColorGradientControl: Fix awkward padding in popover. (43018)
  • ColorPicker: Fix layout overflow. (42992)
  • External link component: Add a check for on page anchor links. (42259)
  • Icons: Fix storybook library icon names. (43034)
  • InputControl: Fix acceptance of falsy values in controlled updates. (42484)
  • InputControl: Fix incorrect size prop passing to Text. (42793)
  • Popover: Anchor correctly to parent node when no explicit anchor is passed. (42971)
  • Popover: Fix arrow placement and design. (42874)
  • Popover: Improve iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. offset computation. (42417)
  • Popover: Make sure that ownerDocument is always defined. (42886)

Block Library

  • Disabled blocks passed to BlockTypesList are no longer draggable. (42751)
  • Fix drag and drop performance when dragging over the insertion point. (42806)
  • LatestPost: Fix issue with floated featured images overflowing focus style. (40663)
  • List v2: Fix Cmd+A. (42858)
  • Media&Text: Round position attribute on focal point save. (33915)
  • Navigation: Fix current-menu-item class logic. (42849)
  • Navigation: Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. permissions warning by avoiding using trashed wp_navigation posts (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. implementation). (42982)
  • Separator: Fix the block CSS classes in the editor. (42769)
  • Social Link: add missing ‘width’ and ‘height’ attributes. (41373)
  • Social: Include has-visible-labels on edit component. (42791)
  • Tag Cloud: Fix alignment issue when align center. (43017)
  • Writing flow: Fix Shift+Arrow partial selection for lists & quote. (42885)

CSS & Styling

  • Layout: Fix flex direction column. (42939)
  • Layout: Merge CSS rule for block gap. (43052)
  • Style Engine: Include 6.1 CSS 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., ensure style engine can output CSS functions like clamp. (43004)
  • Style engine: Disable stylesheet optimization temporarily. (43051)
  • Style Engine: Defensive guarding for when style does not define ‘individual’ property. (43122)

Global Styles

  • Fix styles declarations returning before all properties output. (42954)
  • Fluid typography: Migrate fluid typography algorithm to JS for site editor. (42688)
  • Spacing presets: Prevent % spacing size units being stripped by sanitize_title. (43101)
  • Specify priority in remove_action. (43073)

Block Editor

  • Inserter: Avoid warning when CRA is displayed. (42723)
  • Pasting: Dismiss pasted image if file:// schema detected. (42785)
  • Prevent multiselection via dragging when already dragging blocks. (42877)
  • Quote: Fix raw transform handler. (43093)
  • Rich text: Fix error when attempting to remove placeholder on composition start. (42821)
  • Paste from 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/.: Interpret paragraph markup. (43114)

Post Editor

  • Decode the post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for the button label. (42930)

Site Editor

  • Internalization fixes for site editor template creation. (42762)
  • Fix error in compileStyleValue. (43116)

RichText

  • Firefox: Fix issue where it selects a nearby contentEditable. (42777)

Build Tooling

  • Fix: CSS files don’t build in dev mode on Windows. (42041)
  • Fix: Script name error in main package.json. (43089)

Testing

  • Fix: Just another end-to-end test. (42947)

CreateBlock

  • Remove i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. references from save properties. (43035)

Accessibility

  • Shortcuts: Add Ctrl+Y for redo on Windows. (42627)
  • Change shortcut text for redo tooltip on Windows. (42830)

Performance

  • Lodash: Refactor away from _.isMatch(). (42271)
  • Lodash: Refactor away from _.zip(). (42926)
  • Lodash: Refactor away from _.delay(). (42966)
  • Lodash: Refactor away from _.startsWith(). (43019)
  • Lodash: Refactor away from _.isPlainObject(). (42508)
  • Lodash: Refactor away from _.maxBy(). (42914)
  • Lodash: Refactor Calendar block away from moment. (43029)
  • Lodash: Remove completely from @wordpress/dom package. (42912)
  • Lodash: Remove completely from @wordpress/element package. (42898)

Experiments

Style Engine

  • Enqueue block support styles. (42452) (42880)
  • Prettify combined selectors. (43003)
  • Prettify output. (42909)
  • Rename global function. (42719)
  • Combine style-engine stores for block-supports. (42970)
  • Add optimize flag and combine functions into wp_style_engine_get_stylesheet. (42878)

Documentation

  • Add examples for core/blocks actions. (42637)
  • Add examples for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./viewport package. (42921)
  • Added the allowedFormat details in richtext readme. (42426)
  • Adding @example entries to the public 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. exposed in core/blocks. (42745)
  • Cover: Fix rendered content PHPDocPHPDoc (docblock, inline docs) type. (43099)
  • Create Block: Update document links in templates. (42839)
  • Fix return type of home link attribute function. (42901)
  • Fix textual consistency about block attributes. (43075)
  • Link plugins GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ release pages. (42736)
  • Document the cherry-picking automation. (42932)
  • Fixed broken external link to Mozilla Developer documentation. (43065)
  • Release Docs: Troubleshooting failed “Bump version” job. (42936)
  • Release docs: Update performance test instructions. (43015)
  • Remove the emoji characters to fix the handbook rendering. (43028)
  • Update broken internal link. (43094)
  • Update theme-json.md to include new element support and :Ref. (42412)
  • Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. (42969)

Code Quality

  • Add mutations data and helper functions to useEntityRecord. (39595)
  • Remove old WordPress 5.8 code. (42818)

Block Library

  • Add separate callbacks for selecting a classic or navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. in the nav block. (43057)
  • Avoid reliance on status constants when consuming useCreateNavigationMenu hook. (42704)
  • Home Link: Use ‘sprintf’ in the render callback. (43024)
  • Nav block: Extract hook for inner blocks. (42743)
  • Nav block: Normalize to function expressions. (42744)
  • Normalize usage of Notifications in Nav block. (42706)
  • Remove duplicate speak calls from navigation block. (43079)
  • Site Title: Use home_url instead of get_bloginfo. (42857)
  • Page List: Fix indentation in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher file. (42852)
  • 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.: Try filters with ToolsPanel. (42629)

Site Editor

  • Navigation Menu 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.: Remove unnecessary Fragment. (43021)

Style Engine

  • Tweak Declarations filtering logic slightly. (43215)
  • Minor tweaks. (43111)

Global Styles

  • useGlobalStylesOutput: Use memo for derived values. (42917)

Tools

Env

  • Use git for wp-env‘s default WordPress version. (42826)

Testing

  • Migrate deprecated node matcher tests to playwright. (42759)
  • Migrate group block tests to Playwright. (42801)
  • Migrate missing block tests to Playwright. (41680)
  • Migrate Convert Block Type test to Playwright. (42760)

Build Tooling

  • Lodash: Refactor away from _.flatMap(). (42360)
  • Standardize script naming in main package.json. (42368)

Performance Benchmark

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

Post Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.19s40.25ms
Gutenberg 13.83.21s36.88ms
WordPress 6.03.03s28.02ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.81s26.64ms
Gutenberg 13.83.74s26.08ms
WordPress 6.02.95s20.01ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @hellofromtonya @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @ndiego @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo

The following PRs were merged by first time contributors:

  • @fellyph: Rendering html for the author description at the editor. (42109)
  • @merkys7: Fix social-link block missing ‘width’ and ‘height’ attributes. (41373)
  • @Smit2808: Added the allowedFormat details in richtext readme. (42426)
  • @theminaldiwan: Fixed alignment issue of tagcloud block when align center. (43017)

Kudos to all the contributors that helped with the release!

Props to @gziolo @priethor @andrewserong @joen @bernhard-reiter for the assistance with the release.

#gutenberg #gutenberg-new

Dev chat agenda, August 17, 2022

1. Welcome

Last week’s summary thanks to @webcommsat.

If this is your first dev chat, or if it’s not, welcome! And thanks for sharing an hour of your valuable time with the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Team! If you’re in the house, please say hey with an emoji.

2. Announcements

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/ 13.9 lands at about the same time dev chat starts.

If you’ve got an announcement to share, this is the time.

3. Blogblog (versus network, site) posts of note

The month in WordPress.

All about the next default theme:

A week in Core.

Please join this conversation about merging experimental APIs by September 7. (An audit of those APIs.)

Gutenberg is standardizing the way contributors name npm scripts. Should Core?

Have you seen a post Core people should know about? Add it to the comments.

4. Upcoming releases

The next major is 6.1.

Helpful links:

The development cycle.

The bug-scrub schedule, and the Handbook on bug-gardening.

5. Component maintainers and tickets

Ticketticket Created for both bug reports and feature development on the bug tracker. time! Look for reports from component maintainers among others.

6. Open Floor

Post your topic in the comments!

#agenda, #core, #dev-chat

Performance team meeting summary 16 August 2022

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

Announcements

Focus group updates

Images

@adamsilverstein @mikeschroder

GitHub project

Feedback requested

Object Cache

@tillkruess @spacedmonkey

GitHub project

  • @tillkruess: Focused on getting the Object Cache Site Health test merged into core in https://github.com/WordPress/wordpress-develop/pull/2890 with @furi3r; core developer feedback appreciated

Feedback requested

Site Health

N/A

GitHub project

  • We’re seeking 1-2 POCs for this group; if you’re interested, please comment here or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” 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/.
  • See above re: Object Cache Site Health check

Feedback requested

Measurement

N/A

GitHub project

  • We’re seeking 1-2 POCs for this group; if you’re interested, please comment here or ping in Slack
  • @shetheliving: Reminder about the performance testing environment work started back in March: https://make.wordpress.org/core/2022/03/22/performance-team-meeting-summary-22-march-2022/. This has stalled out since then; if anyone is interested in picking it back up, let us know.

Feedback requested

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

@aristath @sergiomdgomes

GitHub project

  • @adamsilverstein: For the preload resources work, proposed a new, more declarative way to specify preloads in https://github.com/WordPress/wordpress-develop/pull/3089; appreciate any feedback.

Feedback requested

Infrastructure

@flixos90

GitHub project

  • N/A

Feedback requested

Open Floor

  • @olliejones: There’s a Site Health and Troubleshooting plugin, and similar but not identical functionality in core. Is there any plan to incorporate that 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 into core? Or do Performance Lab modules need to target both environments?
    • @shetheliving: Someone manages that plugin, but not sure who; might be worth asking in the #meta channel

Our next chat will be held on Tuesday, August 23, 2022 at 11am EDT in the #core-performance channel in Slack.

#core-js, #core-media, #performance, #performance-chat, #summary, #hosting-community

A Week in Core – August 15, 2022

Welcome back to a new issue of Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Let’s take a look at what changed on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. between August 8 and August 15, 2022.

  • 35 commits
  • 61 contributors
  • 35 tickets created
  • 3 tickets reopened
  • 31 tickets closed

The Core team is currently working on the next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope., WP 6.1 🛠

The team has also started working on Twenty Twenty-Three, the next bundled theme that will be included with WP 6.1 🎨

Ticketticket Created for both bug reports and feature development on the bug tracker. numbers are based on the Trac timeline for the period above. The following is a summary of commits, organized by component and/or focus.

Code changes

Administration

  • Improve performance of List Tables – #34564

Application Passwords

  • Allow a Super Adminadmin (and super admin) to set an application password on a site they’re not a member of – #53224

Build/Test Tools

  • Add @covers tags to the comments tests – #39265
  • Add @covers tags to the import tests – #39265
  • Add @covers tags to the l10nL10n Localization, or the act of translating code into one's own language. Also see internationalization. Often written with an uppercase L so it is not confused with the capital letter i or the numeral 1. WordPress has a capable and dynamic group of polyglots who take WordPress to more than 70 different locales. and i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. tests – #39265
  • Add @covers tags to the options tests – #39265
  • Move the Memcached container into the Docker Compose config – #55700
  • Bring some consistency to serialization tests – #55652
  • Use named data provider for is_serialized_string() tests – #55652
  • Update @covers tags for the load tests – #39265

Bundled Themes

  • Remove closing PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 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.) at the end of files – #40039
  • Twenty Eleven: Correct inline translator comment – #40039

Coding Standards

  • Rename the $file parameter to $path in some WP_Filesystem_* methods – #55647
  • Restore correct regex formatting in dbDelta()#55647

Database

  • Ignore display width for integer data types in dbDelta() on MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. 8.0.17 or later – #49364, #51740

Docs

  • Clarify that register_taxonomy() only accepts lowercase values for the $taxonomy parameter – #56352, #55646
  • Consistently document the $excluded_terms variable in get_adjacent_post()#56348
  • Correct and improve the documented types for various functions and hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.#55646
  • Miscellaneous inline documentation improvements – #55646
  • Remove code tags from WordPress function names within inline documentation – #55646
  • Revert two changes that need to instead be made upstream in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ repo – #55646
  • Use third-person singular verbs for function descriptions in wp-includes/functions.php, as per docblocks standards – #55646
  • Various docblockdocblock (phpdoc, xref, inline docs) fixes in Core TaxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., as per docs standards – #55646

Editor

  • Document the arguments for registering 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. style – #55646

Formatting

  • Add support for Enums in is_serialized()#53299

General

  • Add required fields helper functions for better reusability – #54394

I18N

  • Introduce WP_Textdomain_Registry to store text domains and their language directory paths – #26511, #39210

Login and Registration

  • Introduce is_login_screen() function – #19898

Media

  • Cache parent posts in query-attachments AJAX endpoint – #56037

Posts, Post Types

  • Prevent categories from being overwritten when updating a post using wp_insert_post()#19954

Query

  • Be better at forcing data types for query vars – #17737

Taxonomy

  • Add a test file that was missed in [53893]#56215
  • Introduce the is_term_publicly_viewable() function – #56215
  • Prevent non string taxonomy names generating warnings or errors – #56338, #56336

XML-RPC

  • Correct the documented arguments for XML-RPC server methods – #55646

Props

Thanks to the 61 people who contributed to WordPress Core on Trac last week: @costdev (11), @SergeyBiryukov (9), @pbearne (6), @ironprogrammer (5), @patopaiar (5), @hellofromTonya (5), @jrf (5), @antonvlasenko (5), @peterwilsoncc (4), @audrasjb (4), @mukesh27 (3), @johnbillion (3), @desrosj (3), @sabernhardt (3), @dd32 (3), @nacin (2), @leewillis77 (2), @yahil (1), @ocean90 (1), @milindmore22 (1), @vishalkakadiya (1), @NomNom99 (1), @manishsongirkar36 (1), @yoavf (1), @swissspidy (1), @juliobox (1), @bengreeley (1), @dipakparmar443 (1), @grapplerulrich (1), @bobbingwide (1), @johnjamesjacoby (1), @chaion07 (1), @mikeschroder (1), @shetheliving (1), @spacedmonkey (1), @JavierCasares (1), @netweb (1), @markoheijnen (1), @georgestephanis (1), @dcowgill (1), @dave1010 (1), @tellyworth (1), @johnregan3 (1), @ryokuhi (1), @joedolson (1), @ayeshrajans (1), @konradyoast (1), @dennisatyoast (1), @albatross10 (1), @scribu (1), @ilovecats7 (1), @donmhico (1), @iandunn (1), @wonderboymusic (1), @robmiller (1), @chriscct7 (1), @tazotodua (1), @davidbaumwald (1), @xknown (1), @TimothyBlynJacobs (1), and @kitchin (1).

Congrats and welcome to our 3 new contributors of the week: @dipakparmar443, @dave1010, @albatross10 ♥️

Core committers: @johnbillion (12), @sergeybiryukov (6), @audrasjb (6), @azaozz (5), @peterwilsoncc (2), @desrosj (2), @swissspidy (1), and @ocean90 (1).

#6-1, #core, #week-in-core

Performance Chat Agenda: 16 August 2022

Here is the agenda for next week’s performance team meeting scheduled for August 16, 2022, at 15:00 UTC.


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

Editor Chat Agenda: 17 August 2022

Facilitator and notetaker: @zieladam

This is the agenda for the weekly editor chat scheduled for 2022-08-17 14:00 UTC. This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Gutenberg 13.9.0 RC3 Released Monday 15th of August.
Thank you to @andrewserong for handling the release!

Key project updates:

Task Coordination.

Open Floor – extended edition.

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

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

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