CSS Chat Summary: 17 June 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • @notlaura asked for feedback on the meeting format as the recurring agenda is currently quite sparse. Please let us know if you have any specific items you’d like to see on the agenda!

Project updates

Custom Properties (#49930)

[ 25 minutes later… ]

  • @notlaura used the time to clone the PR and investigate making updates, while @danfarrow made some progress on the documentation
  • This format was quite successful and I think we’ll try it again in future!

Open floor / CSSCSS Cascading Style Sheets. link share

  • @danfarrow shared a CSS Tricks post about new features in Safari 15 which includes support for a theme 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.-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.) to set a custom colour for the top part of the browser chrome
  • @notlaura pasted a section of the article which mentions Google’s FLoC targeted advertising technology, then contrasts it with Apple’s Private Relay “a technology very specifically to making web browsing untrackable”

With that we finished the meeting a few minutes early. Thanks everyone!

#core-css, #summary

CSS Chat Agenda: June 17, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, June 17, at 5:00 PM EDT. This 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/..

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

  • Housekeeping
    • Check in on agenda format
  • Project Updates
  • Open Floor + CSS Link Share

#agenda, #core-css

DevChat Notes – June 16, 2021

Thanks to @peterwilsoncc and @jeffpaul for leading the 05:00 and 20:00 UTC dev chats respectively.
Agenda followed for both the meetings.

Link to 05:00 UTC devchat meeting archive in Slack // Link to 20:00 UTC devchat meeting archive in Slack

Thanks to @nalininonstopnewsuk and @webcommsat for the dev chat notes. 

Blogblog (versus network, site) post highlights

Thanks to all everyone who published items and helping document and share knowledge across the project.

Blog posts that need attention

  • 5.8 Beta 2 Post – Testing required for 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. to help ensure as smooth a release as possible. Thanks to all those involved in testing, contributing to Beta 2 and the post.

Beta 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. scrubs

We are now in the Beta period where focus shifts to tasks and regressions found in Beta releases.

Bug scrub schedule for 5.8

Next milestone: Beta 3 on Tuesday 22 June 2021.

Final Beta release before 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). 1 on Tuesday 29 June 2021.

Contributors needed/ attention:

  • Theme contributors to test the new blocks in the default themes. Contact @jeffpaul or @desrosj

More information from the Slack discussion 

  • Open Trac Tickets that need various forms of assistance (patches, testing, etc). Josepha called especially all sponsored contributors to help get over the finish line.
  • Contributors skilled on WP-CLI needed for Meta Ticket 5737 – block.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. strings not being extracted  
  • Feedback on:
    • Core Trac Ticket #53428 part of the work to style new coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks for the default themes, and related 
    • Core Trac Ticket #53389  Bundled Themes: Add styling for blocks added in 5.8, and 
    • Core Trac Ticket #53398 Twenty Twenty-One: Polish new blocks added in 5.8

Updates related to 5.8

  • About Page and MarComms
    • A timeline for the About Page has been set so that the copy can be ready for Beta 3. Two days set aside for fact-checking. Deadline for final copy and design is RC1. Marketing post on plans for discussion on the text.
    • Design to date on the About Page ticket
    • Josepha: From that content we will also build some of the other marketing pieces including the release post. If you want to give it an early, pre-editing read there are links in #marketing. This will be more than content on the About Page. 
    • Thank you to everyone who contributed to the marketing collaborations and to @chantabourne, @marybaum and @webcommsat for organizing, supporting contributors, and giving time. You can still add to the text discussions on content for multi-purpose use – details in the #Marketing channel on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Josepha has extended the collaboration for 15-16 hours to give extra time.
    • Josepha shared there would be additional broader marketing aspects when new role (advertised in February) joins
    • @mkaz: WordPress News has been publishing articles and podcasts highlighting many of the upcoming changes too.
    • @clorith: highlighted @desrosj has started identifying things and making individual items for them, which he suggested would be the right way forward. Highlighted the need more clarity on what is an isn’t included in 5.8, and some sanity checks on some of the defaults going in
    • @oglekler: Core Trac Ticket #52762: Suggestion for an About Page 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. to dashboard  
  • @youknowriad: follow-ups highlighted
    • Make sure default themes are adapted properly for the default template
    • Request for help from themers (test and adapt the theme styles as needed) 
    • TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. a bug related to media uploads
    • Provide a way to define a different default template per theme

Component maintainers updates

  • @sergey: build / test tools, date/ time, general, Ii8N, Permalinks: no major news this week
  • @audrasjb: no major news from upgrade/ install, menus, widgets
  • @clorith and @afragen: Site Health’s got nothing big this week

Open floor

@mkaz: we’ve started publishing dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. around 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. More to come during the next few weeks.

@chanthaboune: request for “some general signal boosting on what FSE in and isn’t in WordPress 5.8. There’s a lot of confusion, but also a lot of documentation (both existing and to come) so we can use some help spreading that around.”

@chanthaboune: “I wanted to underline how much I appreciate the thoughtfulness and care that has gone into this release. I know you have plenty of options about where you can spend your time, and this release is going to be a great building block for full site editing. Big thank you to everyone working on this as we head into our final weeks of this marathon!”

#5-8, #dev-chat

Block Editor API Changes to Support Multiple Admin Screens in WP 5.8


WordPress 5.8 is the first coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. release where the post editor is no longer the only adminadmin (and super admin) screen that uses 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. The updated widgets editor screen will also support blocks.

During the development process, we found several WordPress 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. defined on the server depended on the $post object that is not present on the widgets screen. So, we decided to deprecate some of the existing filters and introduce context-aware replacements.

These updates enable us to iteratively bring the block-based paradigm to different screens. For example, the navigation editor screen can leverage the new WP_Block_Editor_Context class and will receive more capabilities over time. There are also new methods introduced that allow code reuse for the functionality that needs to be shared between the screen that uses the block editor.

Related 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.#52920.

Class

WP_Block_Editor_Context

A class representing a current block editor context.

The expectation is that the block editor can have a different set of requirements on every screen where it is used. This class allows defining supporting settings that can be used with filters.

Example:

$post_editor_context = new WP_Block_Editor_Context( array( 'post' => get_post() ) );

Functions

get_default_block_categories

A new method that makes it possible to share default block categories.

Example:

print_r( get_default_block_categories() );

get_allowed_block_types

A new method to handle better the list of allowed block types depending on the editor context.

Example:

print_r( get_allowed_block_types( $post_editor_context ) );

get_default_block_editor_settings

Most of settings defined on the client in the @wordpress/block-editor package in store/defaults.js file are now available on the server with the new get_default_block_editor_settings method.

Example:

print_r( get_default_block_editor_settings() );

get_block_editor_settings

A new method ensures that the editor settings can differ depending on the editor’s context.

Example:

$post_editor_settings = array(
	'richEditingEnabled' => user_can_richedit(),
);

print_r( get_block_editor_settings( $post_editor_settings, $post_editor_context ) );

block_editor_rest_api_preload

The logic that preloads common data used with the block editor by processing an array of 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/. paths got abstracted in a new method.

Example:

$preload_paths = array(
	'/',
	'/wp/v2/types?context=edit',
);

block_editor_rest_api_preload( $preload_paths, $post_editor_context ) );

Filters

Several existing block editor filters that depend on the $post object get deprecated:

  • allowed_block_types
  • block_categories
  • block_editor_preload_paths
  • block_editor_settings

New filters are introduced as their replacements that are context-aware.

allowed_block_types_all

Filters the allowed block types for all editor types, defaulting to true (all registered block types supported).

Note: Replaces the deprecated allowed_block_types 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..

Example:

function filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		return array( 'core/paragraph', 'core/heading' );
	}
	return $allowed_block_types;
}

add_filter( 'allowed_block_types_all', 'filter_allowed_block_types_when_post_provided', 10, 2 );

block_categories_all

Filters the default array of categories for block types.

Note: Replaces the deprecated block_categories filter.

Example:

function filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		array_push(
			$block_categories,
			array(
				'slug'  => 'custom-category',
				'title' => __( 'Custom Category', 'custom-plugin' ),
				'icon'  => null,
			)
		);
	}
	return $block_categories;
}

add_filter( 'block_categories_all', 'filter_block_categories_when_post_provided', 10, 2 );

block_editor_rest_api_preload_paths

Filters the array of REST API paths that will be used to preloaded common data to use with the block editor.

Note: Replaces the deprecated block_editor_preload_paths filter.

Example:

function filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
	}
	return $preload_paths;
}

add_filter( 'block_editor_rest_api_preload_paths', 'filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );

block_editor_settings_all

Filters the settings to pass to the block editor for all editor type.

Note: Replaces the deprecated block_editor_settings filter.

Example:

function filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		$editor_settings['maxUploadFileSize'] = 12345;
	}
	return $editor_settings;
}

add_filter( 'block_editor_settings_all', 'filter_block_editor_settings_when_post_provided', 10, 2 );

#5-8, #dev-notes, #gutenberg

A Week in Core – June 14, 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 June 7 and June 14, 2021.

  • 63 commits
  • 105 contributors
  • 57 tickets created
  • 6 tickets reopened
  • 65 tickets closed

Please note that the WordPress Core team released WordPress 5.8 beta 1 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

Administration

  • Adjust Internet Explorer message to be a bit more clear – #48743
  • Escape the values of data-colname – #40401
  • Introduce dashboard notice to discourage use of out of date browser – #48743

Application Passwords

  • Allow enter key to submit profile form – #52849

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

  • Add a type property to allow Core to identify the source of the editor styles – #53175
  • Add the Site Logo block’s server implementation – #53247
  • Allow themes to add inline styles for all blocks when using lazy styles loading – #53358
  • Fix typo in the typography block support – #52991
  • Ignore generated CSSCSS Cascading Style Sheets. files in Page List and Post Template blocks – #52991, #53309
  • Include the page list block server-side code – #53309
  • Package updates for 5.8 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 – #52991
  • Package updates for WordPress 5.8 beta 1 (batch2) – #52991
  • Prevent duplicate queries – #53280, #53176
  • Ensure that the block editor can be used on the page post type – #45537

Boostrap/Load

  • Add 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. to allow disabling of object cache – #53322

Build/Test Tools

  • Ensure that we are using https:// urls – #39589
  • Silence jQuery Migrate console warnings when running E2E tests – #52860
  • Update devDependencies for bundled themes – #52624
  • Update several devDependencies#52624

Bundled Themes

  • Introduce block patterns for Twenty Eleven – #51106
  • Introduce block patterns for Twenty Ten – #51107
  • Twenty Nineteen: Fix pullquote styling in editor when block has alignment – #53112
  • Twenty Nineteen: Set a default color for button links in the editor – #52555
  • Twenty Thirteen: Add “No Shadow” style to button block – #51223
  • Twenty Twenty: Ensure custom primary color is applied to text in the editor – #50120
  • Twenty Twenty: Regenerate the RTL editor stylesheet – #50120
  • Apply an alignment fix – #53246
  • Extraneous white space at end of line – #51189
  • Use single quotes when there are no variables withi/n the string – #48743

Comments

  • Return valid comment reply link if comments are paginated – #51189

Documentation

  • Correct DocBlockdocblock (phpdoc, xref, inline docs) formatting for some revision tests – #52628
  • Document the usage of $wp_widget_factory global in WP_Customize_Widgets::sanitize_widget_instance()#53394
  • Update documentation for some WP_Customize_Widgets methods per the documentation standards – #52628

Emoji

  • Update the Twemoji library to version 13.1.0 – #52852

Feeds

  • Avoid notices in get_post_comments_feed_link()#52814

Login and Registration

  • Improve the unknown username error message – #52915
  • Wrap long site titles to a new line – #52776

Media

  • Add new functions to return the previous/next attachment links – #45708
  • Allow multi-uploads in Galleries – #53169
  • Ensure that post_id variable is initiated ahead of usage – #39589
  • Restore AJAX response data shape in media library – #50105

Permalinks

  • Limit pagination for posts with comments – #50233
  • Revert the changes stemming from pagination limits – #50233

Privacy

  • Improve naming of user confimed action email filters – #44314

RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

  • Check and return errors for insertions to revisions – #30009

Script Loader

  • Fix 404 errors for the jquery-masonry script when SCRIPT_DEBUG is true#47353

Site Health

  • Display a list of file formats supported by the GD library – #53022

Tests

  • Fix typo in a get_bookmarks() test name – #52625
  • Fix typo in a retrieve_widgets() test name – #52625
  • Ignore EOL differences in some tests using multiline string assertions – #52625
  • Introduce some E2E tests for the Quick Draft dashboard 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. – #523905
  • Use assertSameSets() in some newly introduced tests – #52625

Themes

  • Fix 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) issues with controls in themes screen – #52649

TinyMCE

TinyMCE

  • Fix initialization when the editor is in a postbox by delaying it until document.readyState === 'complete'#52133, #52050

Upgrade/Install

  • Built files should not be included in the $_old_files list – #53367
  • Remove parsing of readme.txt files for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or theme requirements – #48520, #48515, #meta2952, #meta4514, #meta4621
  • Update the $_old_files list for 5.8 – #52991, #52846, #53246, #53367

Widgets

  • Don’t decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities ahead of the widget constructor – #53138
  • Make new WordPress installations use blocks in widget areas instead of widgets – #53324
  • Ensure that HTML entities are converted in widget descriptions – #53138
  • Improve unit tests for RSS Widget – #53278
  • Prevent infinite 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. in PHP8+ if the 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 widget instance is incorrectly defined – #53278

Props

Thanks to the 105 (!) people who contributed to WordPress Core on Trac last week:

@audrasjb (10), @SergeyBiryukov (8), @desrosj (8), @hellofromTonya (7), @sabernhardt (5), @isabel_brison (4), @whyisjake (4), @dd32 (3), @johnbillion (3), @alexstine (3), @adamsilverstein (3), @kjellr (3), @melchoyce (3), @antpb (2), @jorbin (2), @jorgefilipecosta (2), @peterwilsoncc (2), @beafialho (2), @jeffpaul (2), @aristath (2), @davidbaumwald (2), @mukesh27 (2), @chanthaboune (2), @youknowriad (2), @poena (2), @ocean90 (2), @azaozz (2), @DrewAPicture (2), @nosolosw (2), @boniu91 (1), @geekpress (1), @mikejolley (1), @ntsekouras (1), @scruffian (1), @mcsf (1), @sumitsingh (1), @Chouby (1), @onemaggie (1), @danieldudzic (1), @devnel (1), @timothyblynjacobs (1), @notlaura (1), @metalandcoffee (1), @paaggeli (1), @MrPauloEn (1), @mkdgs (1), @dway (1), @spikeuk1 (1), @herrvigg (1), @patkemper (1), @promz (1), @pondermatic (1), @andraganescu (1), @hellofromtonya (1), @noisysocks (1), @Boniu91 (1), @williampatton (1), @joyously (1), @Otto42 (1), @afragen (1), @wpgurudev (1), @hannahmalcolm (1), @achbed (1), @coffee2code (1), @coreymckrill (1), @rmccue (1), @marybaum (1), @dlh (1), @lukecarbis (1), @xkon (1), @helen (1), @TZ-Media (1), @pento (1), @Mista-Flo (1), @pbiron (1), @lifeforceinst (1), @birgire (1), @garrett-eclipse (1), @kapilpaul (1), @jontyravi (1), @david.binda (1), @joedolson (1), @glendaviesnz (1), @flixos90 (1), @gitlost (1), @spacedmonkey (1), @kraftbj (1), @justinahinon (1), @hareesh-pillai (1), @rellect (1), @knutsp (1), @grantmkin (1), @ArnaudBan (1), @Fantasy1125 (1), @swissspidy (1), @mor10 (1), @cameronjonesweb (1), @jeherve (1), @netweb (1), @afercia (1), @chaion07 (1), @sumanm (1), @carike (1), @devrekli (1), and @engahmeds3ed (1).

Congrats and welcome to our 6 new contributors of the week! @pondermatic, @lifeforceinst, @Fantasy1125, @cameronjonesweb, @sumanm, and @devrekli ♥️

Core committers: @desrosj (16), @whyisjake (10), @sergeybiryukov (8), @ryelle (8), @youknowriad (7), @joedolson (5), @antpb (4), @jorbin (3), @azaozz (2), @peterwilsoncc (1), and @noisysocks (1).

#5-8, #meta2952, #meta4514, #meta4621, #week-in-core

CSS Chat Summary: 10 June 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

Project updates

Color Scheming (#49999)

  • @colorful-tones plans to try out @ryelle’s Try Custom Properties PR to get familiar with the concepts involved
  • For developing documentation around the initiative we have this publically editable Google doc which welcomes your contributions!
  • As #49999 is a long ticketticket Created for both bug reports and feature development on the bug tracker., and has effectively served its purpose, @notlaura suggested switching to the sibling ticket #49930 as the canonical ticket for this work instead
  • @notlaura also suggested that for clarity we should now refer to this project as Custom Properties
  • @ryelle gave us a timeline note that we wanted to get these into 5.9 early, which would mean having something ready around August. She would like to have the whole framework in place, using the --experimental flag as previously discussed

Visual 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. Testing (#49606)

CSSCSS Cascading Style Sheets. Audit (#49582)

  • @colorful-tones has now updated the CSS coding standards docs with a note & link to the CSS Audit repo
  • @danfarrow reported that the 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/ Actions issue has been resolved
  • @notlaura updated the ticket with a comment & the most recent links
  • The project can now be retired from the regular CSS Chat agenda

Open floor / CSS link share

Thanks everyone!

#core-css, #summary

What’s new in Gutenberg 10.8? (9 June)

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 has come for a new version! Gutenberg 10.8 focuses on stability and performance, while also introducing enhancements to the Template Editor and enables more design tools for blocks, among many other things!

Performance Improvements

This release puts a focus on performance by providing iterative improvements. For instance, Gutenberg now allows passing of __experimentalLayout to a memo’d object so re-renders are not triggered when layout data doesn’t change. Thanks to this, blocks like BlockList don’t need to re-render so often, optimizing the editor performance.

More 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. Design Tools

To extend the design capabilities of blocks, more design tools have been enabled in this release, including support for font-weight for the heading block and support for custom fonts for the List block. As with other design tools, you can easily configure them in your theme.json file. 

Furthermore, it is now possible to add custom margin and padding to the Navigation link block.

Template Editor Enhancements

Gutenberg 10.8 also introduces a couple of enhancements for the Template Editor for a better user experience. Now, the title area in the Template Editor corresponds to the current post title. Also, the appearance of the template details popover has been enhanced with more detailed information and an improved layout. 

These improvements help users understand what post and template are being edited with a more clear and descriptive interface.

10.8

Enhancements

  • Block Editor:
    • Update Modal styling. (31639)
  • Block Library:
    • Archives Block: Show the label for archives block dropdown. (30527)
    • Audio Block: Add an example preview. (32333)
    • File Block: Add an example preview. (32350)
    • Heading Block: Add support for font-weight. (27639)
    • List Block: Add font family to the list block. (27510)
    • Page list block: Add active page classes. (32134)
    • Site Logo: Use option instead of theme-mod. (32229)
  • Components:
    • BoxControl: Add allowReset option. (32345)
      General Interface:
    • Remove opacity animation on canvas. (32266)
  • Design tools:
    • Add Letter-spacing and enable this for site title and site tagline. (31118)
    • Block Supports: Allow skipping spacing support serialization. (31973)
  • Reusable Block:
    • Add Convert to Regular Blocks button to ellipsis Dropdown. (32310)
  • 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/.:
    • Improve parsing and retrieve additional data in REST url-details endpoint. (31763)
  • Template Editing Mode:
    • Don’t display snackbar with the Welcome Guide. (32076)
    • Update the appearance of the template details popover. (32042)
    • Update the title area in the template editor. (32037)
  • Block-based Widgets:
    • CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.:
      • Add preferences menu group label to widgets and customize 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. (32259)
      • Display wide widgets as popovers in Customizer. (31736)
    • Editor:
      • Link to widgets.php instead of themes.php?page=gutenberg-widgets. (32299)

Bug Fixes

  • Block Library:
    • Image Block: Fix image border radius. (32393)
    • List Block: Fix theme.json styles for the core/list block. (32343)
    • Latest Posts: Limit latest posts 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. width to 100%. (32245)
    • Legacy Widget Block:
      • Fix legacy widget block preview 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.. (32300)
      • Fix legacy widget previews. (32260)
    • Search block: Fix vertical alignment of the search button text. (32340)
  • Block Editor:
    • Block Variation Transforms: Make focus style valid CSSCSS Cascading Style Sheets.. (32305)
    • Fixed Random Collapse of Colors Setting Section. (32388)
    • Block Toolbar:
      • Always close the options menu after toggling the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (31921)
      • Fix toolbar alignment in widget block editor. (31991)
    • Iframe: Fix embed dimensions with missing wp-embed-responsive class. (32057)
    • Patterns: Fix allowed patterns check. (32376)
  • Block-Based Widgets:
    • Editor:
      • Fix error when saving empty Legacy Widget block. (32359)
      • Assume light theme when editor canvas background color isn’t set. (32477)
    • Customizer:
      • Center the welcome image in the narrow viewport of widgets customizer. (32264)
      • Fix aspect ratio of welcome image. (32302)
      • Fix deselecting block when inspector is opened. (32361)
      • Fix escape key events in customizer closing the editor. (32175)
      • Fix some smaller styling issues and bugs in Widgets Customizer. (32072)
      • Fix creating and replacing legacy widgets in customizer. (32005)
  • Components:
    • SuggestionsList: Try to use a unique “key”. (32344)
    • Update Dropdown’s close-on-blur logic to work inside dialogs. (32133)
  • Editor:
    • Allow non-latin characters in slugs. (32232)
    • Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. (32341)
  • General Interface: Fix overlap of Notices and block toolbar. (32238)
  • Template Editing Mode: Remove metaboxes from template mode. (32315)
  • Fix the layout definition in the template mode. (32425)

Performance

  • Buttons: Move options to constants to avoid unneeded renders. (32356)
  • Experimental Layout: Pass the same object when no data changes. (32380)
  • Navigation: Avoid rerendering when the placeholder does not change. (32357)
  • Update Welcome Guides to use external image URLs. (32026)

Experiments

  • Block Editor:
    • Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. (32063)
  • Component System:
    • Add missing Divider, Heading type reference in tsconfig. (32104)
    • Adds a new ZStack component. (31613)
    • Adds new ItemGroup and Item components. (30097)
    • Add new BaseField Component. (32250)
    • Fix Shortcut polymorphism. (31555)
    • Promotes the Elevation component to a full export. (31614)
  • Global Styles:
    • Bugfix: Generate classes from preset slugs in the same way (server & client). (32352)
    • Fix Logic to enable custom colors, gradients, and font sizes. (32200)
    • Fix incorrect useCustomUnits import. (32248)
    • Group typographic block supports under a typography key. (32252)
    • Letter spacing should also respect skip serialization flag. (32459)
    • Skip typography serialization. (32444)
  • Full Site Editing:
    • Align block hover and select styles across list view, site editor, select mode. (31277)
    • Alignment styles: Centre blocks using grid not margins. (32231)
    • Avoid duplicate skip-links in WP 5.8+. (32346)
    • Remove now-obsolete get_template_hierarchy(). (32116)
    • Templates: Remove now-obsolete gutenberg_get_template_paths(). (32066)
  • Navigation:
    • Block:
      • Fix css bleed from navigation. (32384)
      • Fix collapsing 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. of 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.. (32081)
      • Lock the document from scrolling when the modal is open. (32269)
      • Refactor Navigation block paddings/margins to inherit global styles. (31878)
    • Editor:
      • Allow block attributes passed to block renderer by way of wp_nav_menu. (31911)
      • Hide sidebar when a menu isn’t selected. (32090)
      • Fix the visible widget area toolbar. (32262)
      • Fix block toolbar position after scroll. (32212)
      • Move modal state to ManageLocations component. (32078)
  • Site Editor:
    • Fix broken template part converter modal styles. (32097)
    • Remove title attribute from NavigationItem inside the site-editor. (30744)

Documentation

  • Handbook:
    • Fix broken contributors readme files. (32272)
    • Fix misspelling in the Widgets Block Editor section. (32242)
    • Mark all experimental components in the handbook. (32147)
    • Update the create a block theme tutorial. (31269)
    • Update iOSiOS The operating system used on iPhones and iPads. Simulator device command in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native documentation. (32383)
  • Packages:
    • Navigation Editor: Augment and improve Nav Editor (and block) documentation. (31891)
    • Components: Fixed documentation for units attribute in Unit Control. (31901)

Code Quality

  • Block Editor:
    • Rich text:
      • Contextual default shortcut removal. (32327)
      • Remove inline display warning. (32013)
    • Colors: Remove __experimentalUseColors hook. (31438)
    • Remove usages of withState from edit-post and editor. (32349)
  • Block Library:
    • List View: Simplify the BlockNavigation component. (31290)
    • Navigation: Simplify htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. selector in nav burger menu. (32303)
    • Remove “class=” wrapper to already wrapped attributes. (29214)
    • Query Block: Remove query context leftovers. (32093)
  • Blocks Package: Make getBlockSupport support any lodash path.. (32322)
  • Block Supports: Avoid a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice when render_block() is called without attributes. (32135)
  • Components:
    • Button: Deprecate isPrimaryisSecondaryisTertiary and isLink props in favour of variant prop. (31713)
    • Combobox: Remove duplicated ComboboxControl component. (32397)
    • Dashicons: Add types to Icon . (32219)
    • Disabled: Add types to Disabled components. (32105)
    • Remove all withNext wrappers. (32205)
    • Rename ViewOwnProps to PolymorphicComponentProps. (32053)
    • Require explicit children prop for all components. (31817)
    • UIUI User interface Context: Delete unused types from context. (32254)
    • UI Popover: Remove unused content property from types definitions. (32049)
  • Compose:
    • Add types to useRefEffect and clipboard 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.. (31603)
    • Add Types to withGlobalEvents as any. (32290)
    • Add types to useWarnOnChange. (32288)
    • Add types to useViewportMatch. (32287)
    • Add types to useDropZone. (32286)
    • Add types to useDragging. (32285)
    • Add types to useThrottle and typecheck useFocusOutside. (32170)
    • Add types to useKeyboardShortcut. (32168)
    • Add types to useResizeObserver and type checking to useIsomorphicLayoutEffect. (32111)
    • Add types to useFocusReturn. (31949)
    • Add types to usePrevious. (31944)
    • Add types to useReducedMotion and useMediaQuery. (31941)
    • Add types to useMergeRefs. (31939)
    • Add test to useMergeRefs for disabling refs + better documentation. (32044)
    • Add types to useDebounce. (32015)
    • Deprecate withState in favor of useState. (32368)
    • Simplify compose function documentation and point to lodash documentation for it. (32324)
  • Global Styles:
    • Avoid enqueuing global styles twice when running on WordPress 5.8. (32372)
  • Keyboard Shortcuts:
    • Multi select: select all: Restore ref callback. (32318)
  • Linting:
    • Fix eslint warnings in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data package. (32198)
    • Fix eslint warnings in the edit-navigation package. (32196)
    • Fix eslint warnings in the edit-post package. (32195)
    • Fix eslint warnings in the edit-site package. (32156)
    • Fix eslint warnings in the edit-widgets package. (32155)
    • Fix eslint warnings in the editor package. (32153)
    • Fix eslint warnings in the nux package. (32145)
    • Fix eslint warnings in the rich-text package. (32142)
    • Fix eslint warnings in the reusable-blocks package. (32141)
  • Navigation Editor:
    • Fix React warning. (32165)

Tools

  • Babel presets: Prefix build with node command for Windows environments. (#32258). (32329)
  • Workflow:
    • Limit when workflows run on forks. (32114)
    • Only calculate the compressed size on pull requests when necessary. (32161)
    • Performance Tests Workflow:
      • Polish Bash script. (32284)
      • Run suite atop latest stable major WordPress version. (32244)
      • Use latest WP 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". for release tests. (32277)
  • End to End Tests:
    • Fix inserting cover block intermittent failure. (32014)
    • Navigation Editor:
      • Fix failing end-to-end tests. (32043)
      • Skip “Change detection” tests. (32151)
    • Move the Query and PostTitle end-to-end tests out of the experimental directory. (31691)
    • Multi select: Add end-to-end test for gruadual select all. (32304)
    • Remove redundant widget 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. endpoint tests. (32298)
    • Skip tests that are failing with the latest WordPress core. (32228)
  • Eslint: Ignore some eslint rules in react-native folders. (32143)

Performance Benchmark

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

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.85.78s42.03ms
Gutenberg 10.76.75s41.96ms
WordPress 5.76.95s42.81ms

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

Thanks, @ntsekouras for managing the release and @priethor for helping and guiding me with the release post.

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

CSS Chat Agenda: June 10, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, June 10, at 5:00 PM EDT. This 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/..

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

  • Housekeeping
  • Project Updates
    • Color Scheming (#49999)
    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSS deprecation path (#53070), Visual 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. Testing (#49606)
    • CSS Audit (#49582) – A check in before removing from weekly agenda
  • Open Floor + CSS Link Share

#agenda, #core-css

Dev Chat Summary: June 09, 2021

@peterwilsoncc and @desrosj led the weekly meetings of the WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team, respectively at 05:00 UTC and 20:00 UTC. Here is the meeting agenda.

Link to 05:00 UTC devchat meeting on the core channel on Slack

Link to 20:00 UTC devchat meeting on the core channel on Slack

Blogblog (versus network, site) Post Highlights

@audrasjb shared the weekly recap of code changes and contributors in the latest issue of A Week In Core: 07 June 2021. Thanks to the 72 (!) people who contributed, the 12 (!!) new contributors, and the 11 💖 core committers who helped land these changes last week.

@annezazu shared Editor team updates on Full Site Editing, Navigation BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., Mobile Editor, and Block Based Widgets Editor from their last meeting: Editor Chat Summary: 02 June 2021.

@danfarrow shared CSSCSS Cascading Style Sheets. team updates on Color Scheming, CSS Audit, and CSS Deprecation Path, but click through to the meeting notes for a CSS Trick that you won’t believe! For more information, see CSS chat summary: 03 June 2021.

@priethor shared details on what’s coming up in Gutenberg including final polishes for WordPress 5.8, Widgets Editor, Navigation Editor, Full Site Editing various milestones.

Kudos to @adamsilverstein for publishing the first dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. of the release covering the addition of WebP support. Click through to learn how WebP helps you, how to create and use WebP images, plans for the future, and some FAQ items.

@chanthaboune announced a new Make/Project site for all-project communications and cross-team collaboration, so drop your email in that subscribe form and stay up-to-date on all the important topics across the WordPress project.

@jorbin shared the dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. on Bootstrap/Load Changes in 5.8.

@chanthaboune also shared initial designs on a forthcoming News blog design update, its so lovely go check it out.

Blog posts that need feedback

@annezazu has a reminder for us that the current FSE call for testing has one week left until June 16th, so please try crafting a Polished Portfolio.

WordPress 5.8 update

A ‘Big Thank You’ to everyone that helped get everything in order so that 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 could be packaged on time this week! The 5.8 Beta 1 post does not itself need feedback so much as testing from anyone and everyone able to in order to help ensure as smooth a release as possible next month.

Please check the post for details on highlights from the release and links to get you on your way to testing. As it’s still in development, it’s not recommended to run on a production siteProduction Site A production site is a live site online meant to be viewed by your visitors, as opposed to a site that is staged for development or testing. but testing on development and staging servers would be most helpful. The simplest way of testing is to use the beta tester plugin. In terms of ongoing development, WordPress 5.8 now focuses on tasks in the milestone and on regressions (bugs) found during the beta testing cycle.

Our next milestone will be Beta 2 in SIX days on this coming Tuesday, June 15th.

@chaion07 led the final 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 this past week. The next bug scrub is due to be run on Monday, June 14, 2021, 20:00 UTC.

Components check-in and status updates

  • Plugins: The Requires PHP and Requires at least 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 headers could previously be specified either in the plugin’s main PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher file or in readme.txt as a fallback. This has now changed for WordPress 5.8, only placing them in the plugin’s main PHP file will be supported from now on. Same goes for themes, the Requires PHP and Requires at least headers should be placed in the theme’s style.css file instead of readme.txt. The reason for this change is that any data in readme.txt is meant for the Plugin or Theme Directory only, and not for WordPress core. Core should retrieve all the necessary data from the plugin’s main PHP file or the theme’s style.css file instead. See changeset [51092] and ticketticket Created for both bug reports and feature development on the bug tracker. #48520 for more details. Thanks @afragen for working on this!
  • Help/About: Work will begin this week on the 5.8 About page. Join in on the discussion over on #52775.
  • All other components: No major updates to report.

Open Floor

@webcommsat pointed out on the video content in Matt’s talk at WCEU which would be valuable to re-highlight when those features land too. Additoionally, Abha thanked everyone for the Contribute to WP resources, workshops and discussion areas at WCEU. The content will continue to be available on the site and we are adding new resources submitted. It will help bridge and encourage people to discover Make WordPress materials and the Learn Project.

Props @desrosj for peer review prior to publishing.

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

Bootstrap/Load Changes in 5.8

WordPress 5.8 brings some small changes to the Boostrap/Load component.

  • timer_float is a new function that can be used to reliably determine the total time from the start of php execution. See #39163
  • Inline comments were updated to make it clearer in wp-config-sample.php where custom configuration variables should go and wp-load.php to help improve the understanding of error level reporting. See #37199 and #41902
  • Fatal error recovery was updated to not say an email was sent when it was impossible to send the email. See #52560
  • enable_loading_object_cache_dropin is a new 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. to allow disabling of the object cache dropin. See #53322

Thank you to all of the people who contributed to the Bootstrap/Load component in 5.8.

Props to @desrosj for review and edits.

#5-8, #bootstrap-load, #dev-notes