Changes to Core JavaScript Office Hours

Attendance at the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Office hours has been low for the last few weeks so at the most recent chat those that were present decided that we’d move to a bi-weekly cadence for now. Here’s a quick summary of what is happening:

  • Core 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/. office hours will be bi-weekly at the same time slot (15:00UTC) with the next meeting happening July 27th.
  • Items can still be suggested/added to the open rolling agenda here.
  • Whenever there is something requiring more attention, the suggestion is to schedule a dedicated meeting for interested parties to gather together in the #core-js SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel to have the discussion.

A reminder that the #core-js channel and office hour chats are intended to cover JavaScript across all of WordPress core, all JavaScript infrastructure, tools that build, lint, or test JavaScript code and higher-level discussions about coding styles, libraries used, etc. So has some distinction (even though there can be some overlap) from the kinds of discussions that happen within the #core-editor Slack instance which focuses predominately on 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/ project and its implementation within WordPress.

#javascript

Dev Chat Agenda for July 14, 2021

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

Blogblog (versus network, site) Post Highlights

5.8 Schedule Review

  • RC 2 released last week and RC 3 yesterday, now under hard string freeze
  • Email to 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/theme authors on Field GuideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the WordPress release cycle. The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page. went out last week
  • No further 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. scrubs scheduled, so please highlight issues of concern directly in #core
  • 5.8 release in SIX days on Tuesday, July 20th

Components check-in and status updates

  • 5.8 plans and help needed
  • Check-in with each component for status updates.
  • Poll for components that need assistance.

Open Floor

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

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

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

#5-8, #agenda, #dev-chat

A Week in Core – July 12, 2021

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 July 5 and July 12, 2021.

  • 49 commits
  • 44 contributors
  • 67 tickets created
  • 28 tickets reopened
  • 62 tickets closed

Please note that the WordPress Core team released WordPress 5.8 RC 2 last week. Everyone is welcome to help testing 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. of WordPress 🌟

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

Build/Test Tools

  • Add assertions to ensure version-controlled files are not modified during CI, and fix the grunt clean command – #53606
  • Replace assertInternalType() usage in unit tests – #53491, #46149
  • Use caching built into actions/setup-node#53584
  • Add missed file update in [51370]#53497
  • Expand tests for get_block_editor_settings()#53458
  • Move loading compatibility layers for PHPUnit 6+ and 7.5+ closer together – #53363
  • Update the wp-api-generated.js fixture – #53606
  • Use more appropriate assertions in various tests – #53123, #53363
  • Use more appropriate assertions in various tests – #53363
  • Use more appropriate assertions in various tests – #53363
  • Use more appropriate assertions in various tests – #53363
  • Use more appropriate assertions in various tests – #53363
  • Use more appropriate assertions in various tests – #53363

Bundled Themes

  • Correct customzier typo – #53598
  • Correct comment formatting in inc/block-patterns.php#53359, #52627
  • Update 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 to match the latest versions of core/* blocks – #53617
  • Remove inline comment that is not relevant in WordPress Core – #53576
  • Remove mention of “FSE” in Core – #53497
  • Twenty Fifteen: Use strict comparison in inc/custom-header.php#53359

Coding Standards

  • Only check collation in wpdb methods if the query is not empty – #53635
  • Add missing semicolon to endforeach keywords in media templates – #46103
  • Fix WPCSWordPress Coding Standards A collection of PHP_CodeSniffer rules (sniffs) to validate code developed for WordPress. It ensures code quality and adherence to coding conventions, especially the official standards for WordPress Core. issue in [51404]#53363
  • Fix WPCS issues in [51367]#53363
  • Remove wrapping HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tags from translatable strings – #53359
  • Rename the $ID variable to $user_id in wp_insert_user() and wp_update_user()#53359

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.

  • Skip animations when they have no duration – #53562, #53542

Documentation

  • Correct the @since tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) for the user_erasure_fulfillment_email_headers 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.#44314, #53461
  • Miscellaneous docblockdocblock (phpdoc, xref, inline docs) improvements – #53399
  • Some documentation improvements for wp_check_widget_editor_deps()#53437, #53569
  • Update the IRCIRC Internet Relay Chat, a network where users can have conversations online. IRC channels are used widely by open source projects, and by WordPress. The primary WordPress channels are #wordpress and #wordpress-dev, on irc.freenode.net. link from Freenode to Libera.chat – #53590

Editor

  • Merge conflicting wp.editor objects into single, non-conflicting object – #53437
  • Fix for 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.: color.duotone and spacing.units should allow empty sets – #53175
  • Update packages with latest fixes for 5.8 RC2 – #53397
  • Update packages with latest fixes for 5.8 RC2 – #53397
  • TinyMCE: ensure initialization runs in all cases on ‘interactive’ and ‘complete’ readyState. Fixes a rare 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. when the init code is inserted in the DOM after the page has finished loading – #53632

Help/About

  • Update placeholder links on About page – #52775
  • Update the About section for 5.8 – #52775

Internationalization

  • Correct recurring lenghts typo – #53600
  • Translate _doing_it_wrong() messages in wp_check_widget_editor_deps()#53437, #53569

Multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site

  • Log error/warnings/notices from ms-files.php#53493

Posts

  • Allow the list of wrapper blocks to be filtered – #53604
  • Fix Spelling in inline docsinline docs (phpdoc, docblock, xref)[23105], [51375], #53604
  • Prevent an empty excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. when groups and nested column blocks are present – #53604

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Add the $request parameter to methods checking permissions – #53593
  • Ensure a 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.’s widgets property is a list – #53612

Script Loader

  • Update jQuery version to 3.6.0 following the update in [50520]#52707

Users

  • Return earlier from wp_update_user() in case of error – #53627

Widgets

  • Use wp_sidebar_description() to retrieve a sidebar’s description#53646

Widgets

  • Warn when wp-editor script or wp-edit-post style is enqueued in widgets editor – #53437, #53569

Props

Thanks to the 44 people who contributed to WordPress Core on Trac last week: @audrasjb (4), @SergeyBiryukov (4), @desrosj (4), @aristath (3), @zieladam (3), @johnbillion (2), @ntsekouras (2), @jorbin (2), @nosolosw (2), @andraganescu (2), @TimothyBlynJacobs (2), @spacedmonkey (2), @timothyblynjacobs (2), @sabernhardt (2), @kapilpaul (2), @jrf (2), @isabel_brison (1), @johnjamesjacoby (1), @pbearne (1), @empatogen (1), @gziolo (1), @mikaelmayer (1), @spytzo (1), @hellofromTonya (1), @alanjacobmathew (1), @ryokuhi (1), @javiarce (1), @kellychoffman (1), @chanthaboune (1), @stevehenty (1), @iandunn (1), @peterwilsoncc (1), @kevin940726 (1), @felipeelia (1), @Collizo4sky (1), @walbo (1), @azaozz (1), @youknowriad (1), @vishitshah (1), @dlh (1), @mukesh27 (1), @nielslange (1), @mikeschroder (1), and @dd32 (1).

Congrats and welcome to our 2 new contributors of the week! @mikaelmayer and @spytzo ♥️

Core committers: @sergeybiryukov (19), @desrosj (13), @johnbillion (3), @noisysocks (2), @jorbin (2), @ryelle (2), @azaozz (1), @mikeschroder (1), @jorgefilipecosta (1), @ocean90 (1), @timothyblynjacobs (1), @peterwilsoncc (1), @iandunn (1), and @youknowriad (1).

#5-8, #week-in-core

Miscellaneous block editor API additions in WordPress 5.8

WordPress 5.8 brings several additions and tweaks to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..

Contextual patterns for easier creation and block transformations

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

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

So it’s for existing blocks!

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

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

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

Pattern Registration API

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

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

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

BlockControls group prop

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

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

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

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

Editor Chat Agenda: 14 July 2021

Facilitator and notetaker: @annezazu

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

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

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

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

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

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

Editor chat summary: 7 July, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, July 7, 2021, 04:00 PM GMT+1 in Slack. Moderated by @paaljoachim.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 11.0

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

New feature highlights:

WordPress 5.8

WordPress 5.8 project board.

Monthly Priorities

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

Global Styles

Update from @nosolosw

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

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

Update from @andraganescu

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

Update from @noisysocks

Navigation Block and Navigation Editor

Update from @andraganescu

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

Update from @joen

Update from @get_dave

Mobile Team

Update from @chipsnyder

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

Full Site Editing Outreach program update

@annezazu

Task Coordination

@mamaduka

@joen

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

@get_dave

  • I’ve been working mainly on contributing bug fixes to the Widgets screens.
  • Also focused on facilitating the release of Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 11.0.0, including spending time tweaking documentation and hacking on potential improvements to release tooling.

@annezazu

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

@aristath

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

@jorgefilipecosta

Open Floor

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

@paaljoachim

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

@aristath

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

Next steps and key projects

@nosolosw

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

@annezazu

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

E2e tests

@annezazu

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

Comments:

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

A followup conversation between @hellofromtonya and @youknowriad

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

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

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

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

Two weeks have passed since the last GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ release, which means the time is now upon us for Gutenberg version 11.0.0 (released 7th July).

With efforts still concentrated on the WordPress 5.8 release, this version of the Gutenberg Plugin is heavily focused on backports and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

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

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

Editing overlay for Template Parts and Reusable blocks

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

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

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

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

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

Support for CSSCSS Cascading Style Sheets. shorthand properties in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. and block attributes

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

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

For example, the following is an excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. from an example theme.json file which adds unique padding and border values for the Button block:

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

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

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

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

11.0.0

Enhancements

  • Template Parts & Reusable Blocks: Add editing overlay. (31109)
  • General UIUI User interface: Improve UI/UXUX User experience for block manager search. (32922)
  • Widgets editor:
    • Display shortcuts for navigating regions. (32757)
    • Improve insertion point and drag-n-drop in the widgets screen. (32953)
    • Set Legacy WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. form to display only when not hidden. (33015)
    • Stretch Widgets editor layout to full height. (32905)
    • Add ability for Legacy custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. widget to transform into custom HTML block. (32862)
    • Remove the widget switcher block toolbar button for the Legacy Widget. (32733)
    • Wire handle_legacy_widget_preview_iframe to admin_init_hook. (32854)
    • Add to WidgetAreasBlockEditorProvider. (33166)
    • Replace “technical” error notice with a user-friendly version. (33165)
    • Replace legacy widget icon with its new version. (33041)
  • Block Library:
    • Media Text block: allow drag and drop media replacement for Media & Text. (29710)
    • Categories block: Add a label for screen readers. (33060)
    • Post Template Block: Add post-classes in the loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. for Post Template block. (30497)
  • Global Styles and Templates:
    • Allow left/right/center alignments when a layout is defined. (32810)
    • Allow longhand and shorthand properties in theme.json and block attributes. (31641)
    • Add filters to get_block_templates functions. (31806)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data:
    • Allow making context-specific requests using the data module. (32961)
    • Make apiFetch requests abortable via AbortController in @wordpress/api-fetch. (32530)

New APIs

  • Add an APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to define the default template used for the template mode. (32771)

Bug Fixes

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

WordPress Core compatibility

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

Documentation

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

Code Quality

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

Tools

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

Performance

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

Experiments

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

Performance Benchmark

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

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

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.04.82s29.82ms
Gutenberg 10.94.69s29.54ms
WordPress 5.75.51s29.79ms

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

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


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

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

Dev Chat summary, July 7, 2021

With just two weeks left in the 5.8 release cycle, @jeffpaul led the devchat on this agenda.

Announcements

RC 2 has landed! And it needs you, to help test it in as many ways as possible and chase down any last-minute bugs. For details, check out the RC 2 release post here.

As it happens, @desrosj reported in and said the release is in great shape:

The milestone only has three 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. tickets remaining that may require changes (excluding release related task tickets and two tickets needing only to be backported). We are in great shape heading into RC3 and final release. 

@desrosj

Blogblog (versus network, site) Post Highlights

In the afternoon chat, @jeffpaul led off with the RC 2 release post above, and it is indeed worth a second read, if you’re so inclined.

Other posts of note:

The 5.8 Field Guide is out. Docs lead @milana_cap has done a masterful job of pulling it all together. So if you’re getting a theme or 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 ready for 5.8, the Guide is your most reliable source of timely, topical information on the changes that will affect your products and the processes you use to get them out the door.

Catch up on the latest feedback the Full Site Editing crew has received with this post from @annezazu. And while we’re at it, here’s the FSE team’s latest chat summary.

And @audrasjb is back with another Week in Core, celebrating 52 contributors (five who are brand-new!) and nine committers who got things going this week.

@jeffpaul thanked the authors and everyone who commented or otherwise helped share news or knowledge this past week and shared this reminder:

We are now in the RC period. That means we’re in a hard string freeze, and the final planned 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)., RC 3, is now just FIVE days away, on July 13. The 5.8 release is TWELVE days away, on July 20.

(Ed. note: Where has the year gone?)

With no seemingly urgent business connected to the release (see @desrosj on the state of the milestone, above) @jeffpaul referred the group to a post from @mapk on care and influence in the WordPress community.

Components check-in

@sergeybiryukov reported in on Build/Test Tools. Referring the community to this ticket on PHPUnit 8.x, he described the challenges that come with adding support for PHPUnit 8.x and 9.x, since they’re not compatible with versions of PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher older than 7.1.

@marybaum commented that Help/About is looking good and then took a minute to thank all the people involved with the About page.

Open Floor

Pivoting from @sergeybiryukov‘s discussion of PHPUnit 8.x and 9.x, @azaozz opened a discussion of when WordPress might stop supporting PHP versions earlier than 7.1. The upshot, according to @sergeybiryukov: WordPress ends support for a PHP version when it’s running fewer than 5% of sites. At the moment, 8.83% of WordPress sites run PHP 5.6, and 5.23% are running on PHP 7.0.

Marketing Rep and Help/About co-maintainer @webcommsat would like to know what your favorite 5.8 feature is, so the Marketing team can write some social-media posts about it. You can share your favorites with her or @marybaum directly or in threads on this week’s marketing meeting, which run asynchronously through Friday.

@webcommsat would also like some more posts on key features in the release. To add one or more, use the commenting feature in this Google Doc.

#5-8, #core, #dev-chat, #summary

CSS Chat Agenda: July 8, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday July 8 at 21:00PM UTC.

The meeting will be held in the #core-css 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/..

  • Housekeeping
  • Discussion: Custom Properties (#49930)
    Continue discussing the workflow for adding Custom Properties to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Open Floor + CSS Link Share

If there’s any topic you’d like to discuss, please leave a comment below!

#agenda

High level feedback from the FSE Program (July 2021)

This post summarizes the top pieces of feedback of the current experience to help inform ongoing efforts after the 5.8 release and as a follow up to a similar post from March. You might notice that some areas of feedback match the original post but that the specifics are different. This is to be expected due to efforts being consolidated around 5.8, causing some feedback to fall in priority. 

Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing yet, for example, Global Styles. It’s also not going to go into great detail about all of the hard work that has gone into addressing these items already, whether through PRs or sharing designs that offer solutions.

If you want a more in-depth look at feedback across the testing calls and a full summary of all issues rather than a sampling, please review the summary posts. If you want to help give feedback, join the calls for testing or test whenever you’d like!

Improve settings experience

This section pulls together everything from feature requests for additional options for different blocks, desire for more control over spacing especially for the Column and 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. blocks, general confusion around why certain settings exist in one place and not another (example with the Query loop block, with Color settings, and Columns block), and how to navigate the complexity of settings with more powerful blocks. As a specific example tying in these various items, let’s say you want the Query loop 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 display 3 posts from a certain categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and you want to set various colors for different parts of the set of posts. To accomplish that, you would have to interact with the block 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. settings first to set the category before using the block toolbar to select the number of visible posts. To set various colors, you’d have to use List View or navigate through the nested blocks before opening up the block sidebar settings once more to make sure you’re styling what you want.

While work is underway to add in more styling options, normalize block level controls in a more intuitive way, and create more consistent dimension controls, this remains an area ripe for continued iteration to create a more cohesive experience. 

Make editing modes distinct (Site, Template, Query Loop block, etc)

Since the calls for testing began to focus on items related to 5.8 in the last couple of months, understanding how best to navigate template editing mode and the Query Loop block became major focuses of feedback. For example, this partially led to the decision to make the Query Loop block’s post content blocks view only. However, while lots of work has been done to provide clarity around what one is editing and adding the right amount of friction, this was still repeated feedback in nearly every test as an area that needs refinement considering how new this functionality is. For example, sharing information in the sidebar upon entering the template editing experience could go a long way in getting a user acquainted with this new experience. 

Refine Placeholders & Initial Configuration Steps

With new blocks and new features, the initial placeholders and configuration steps become key to get right in both setting expectations and guiding a person to create what they want. This cuts across many aspects of the full site editing project including template editing mode, the Query Loop block, Navigation block, integrated patterns, and more. For example, if one is adding the Query Loop block with the intent to show a collection of posts, it makes sense to display multiple posts at default rather than just one with the latest implementation. Currently, feedback points to work needing to be done to standardize approaches where it makes sense and to improve each experience overall. 

Solidify WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. & Desire for previewing content

Across nearly all of the calls for testing, these two interconnected themes of feedback formed where people missed the ability to easily preview content often due to distrusting the current WYSIWYG experience. Some of the pain points with WYSIWYG have been improved thanks to a change in how layouts and alignments are declared but others are left up to theme authors to resolve, like removing the small margin visible in the editing experience. However, the reliance on previewing remains, especially when more complex interactions arise like previewing a template while editing a post to see how changes might land. 

Ensure reliability and robustness of the the saving process 

Because multi-entity saving (saving multiple aspects at once) is a new WordPress concept and one that underpins many interactions in the site editing experience, this is a key area of feedback to address, especially since the act of saving is so crucial to trust. Generally speaking, feedback falls into the following areas: inconsistent behavior, desire for more functionality, and enhancements to make it clearer what is being saved

Expand abilities of theme blocks

Since many of the tests relied on interacting with the new theme blocks, numerous enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. requests were raised to improve the experience of using each. Rather than listing this under improving the settings experience, this felt worthy of a separate call out as leveling up these individual theme blocks will unlock more creative power in using these new features. Whether folks wanted more styling options in the Post Title block or to easily add pages in bulk to the Navigation block, people are already looking forward to the next version of these various blocks. 

Increase usability of overall experience

This is a “catch-all” category but an important one nonetheless, as it will help various parts of the site editing experience become more intuitive and streamlined. Similar to last time, what follows is a sampling of items both to get a sense of the kinds of issues raised and the spread:

#core-editor, #fse-outreach-program, #full-site-editing, #gutenberg