Updating core jQuery to version 3 – part 2

A 3-step plan was outlined for upgrading the version of jQuery bundled with core in June 2020.

The first step was included with WordPress 5.5, which stopped enabling jQuery Migrate version 1.x by default.

As part of #50564, part two of this process was committed, which updated the bundled jQuery version to 3.5.1. Alongside this, jQuery Migrate was also updated to version 3.3.2.

For the duration of WordPress 5.6, the migrate script will remain enabled by default, to capture any unexpected uses of deprecated features.

Do note that the Migrate script for version 3 is not compatible with features that the previous migrate script provided a polyfill for. The features that previously were marked as deprecated are no longer available. The purpose of jQuery Migrate version 3.3.2 in WordPress 5.6 is to help with updating (migrating) all jQuery based 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/. from jQuery version 1.12.4 to 3.5.1.

When testing the changes, it is recommended to enable SCRIPT_DEBUG. This will load jQuery Migrate in debug mode, and output stack traces in your JavaScript developer console.

As this is a major upgrade to the jQuery library, please make sure you test your plugins and themes as thoroughly as possible before the release of WordPress 5.6 to avoid any preventable breakage.

The jQuery Core Upgrade Guide provides details on what features are deprecated, and removed, and how to upgrade your code accordingly.

#5-6, #dev-notes, #jquery

A year of (subtle) changes

On December 4, 2019, I published a post with a recap of the feedback received for the WordPress 5.3 retrospective. It included a list of “Next Steps”. This post aims to check what was done and what wasn’t.

Done

  • Continue with the release squad model.
  • Mentorship model: focus leads of 5.3 help 5.4 and so on.
  • Make an open call for volunteers. Team reps and previous release leads can nominate people that:
    • Are willing to take part in this.
    • Are a good fit.
  • Add a Design Focus Lead.
  • Add another Documentation Focus Lead to ensure a timely publication of 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. and 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. and facilitate the addition of a “docs-updating” stage.
  • Add a Test Focus Lead.
  • A private channel for the release team. It provides the new focus leads a safe space to learn and ask questions that they might feel intimidated by asking in the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. channel. No decisions are made in the channel.
  • Continue using a sticky post to announce 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 and publish in advance the list of bugs that will be tackled.
  • Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. team
  • Avoid introducing new technologies without a prior discussion and/or updating external libraries close to 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.

Work In Progress

  • Write a description for each role involved.
  • Add some tasks to the release coordinator role:
    • 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.” component maintainers and core committers at the beginning of the cycle and every few months to ensure there is a clear picture of availability
    • Ping active component maintainers weekly to give a status report. This could be done in two steps: automated post on the Core blogblog (versus network, site) followed by ad hoc pinging in case of no reply.
    • Office Hours to facilitate cross-team collaboration
  • Rethink the roles of the release to give better credit. Define roles (are they even needed beyond the squad?) and be generous with props.
  • Publish the agenda for the dev chats 24 hours prior to the chat with a more structured model.
  • Call for tickets and component focuses
  • Recap of the above with reasoning behind the decisions taken regarding the features that will be considered
  • Propose schedule, scope, and focus leads at the beginning of the release cycle and publish all the milestones.
  • Communicate the release to a wider audience – Marketing Team
  • Increase the release cadence – Release Model Working group (dormant)

Not addressed

  • Reviewing and updating the release cycle documentation
  • Creation of a TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board for birds-eye project management

Next step

Focusing on the low hanging fruits proved to be a good idea, and in fact the above report shows that the smaller the tasks were, the easier they were achived.

I will ping people that are somehow involved with the “Work in Progress” and the “Not addressed” tasks to check what can be done to move them forward or close them.

Thank you all!

#retrospective

Editor chat summary: Wednesday, 9 December 2020

This post summarizes the weekly editor chat meeting on Wednesday, 9 December 2020, 14:00 UTC held in Slack.

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

We had a minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. to fix three bugs. The details of the fixes can be checked in the release page.

WordPress 5.6

WordPress 5.6 was recently released, more details can be found here.

The release contains several enhancements to the editor. @isabel_brison made an overview post with the changes https://make.wordpress.org/core/2020/12/03/wordpress-5-6-core-editor-overview/.

Besides the editor enhancements, the 2021 theme is also a big step. It will have an equivalent 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. version that will test how robust is FSE and Global Styles to allow third-party themes.

@youknowriad said: Nice work @isabel_brison and others leading the editor side of the release. And the message was well supported on the chat using 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/. reactions. Thank you for all the work made leading the editor side of this release @isabel_brison!!


Monthly Plan and key project updates.

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. and 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. screen

Widgets and customizer screen are still continuing with explorations going on to find the best way to add blocks support in customizer. 

Global Styles

We merged an update that makes client preset metadata match the server. ” – https://github.com/WordPress/gutenberg/pull/27453. And now we are also not passing some metadata to the client like selectors https://github.com/WordPress/gutenberg/pull/27449.
The work to make 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. translatable continues.
We are making some changes, namely removing some presets we are not totally convinced yet they should exist.
We already have some traction on the work to enhance our components to allow a better UXUX User experience on Global Styles; @q proposed the addition of some utils.
We also have some progress on the Global Styles extensibility with some filters being proposed https://github.com/WordPress/gutenberg/pull/27509.

Full site editing

The Query block now inherits the global query so FSE themes can add a query block in the index or archive templates and it will work for all archives, properly getting the query context from the visitor’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: https://github.com/WordPress/gutenberg/pull/27128.

Template-parts now have a UIUI User interface to select the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element that will be used for their wrapper: https://github.com/WordPress/gutenberg/pull/27101 so they can define easier if it’s, etc.

The inserter was also improved and behaves as popover. The editor now has an outline mode used in both Site Editor and Template mode.

Native Mobile APP Updates

  • File block merged and usable.
  • Post’s Save dialog fixes.
  • Background and text color support in Group, Paragraph and Quote blocks
  • Use new link picker in various blocks: Button, Image, Gallery
  • Improvements on Separator block style
  • E2E tests execution improvement.
  • Release process documentation improvements.

An app release is going to be skipped because of New Year’s and people taking holidays on these days.

Task Coordination

@annezazu

Helped a bit with 5.6 Q&A docs, light GH triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., continued working with @noisysocks on updating the features page and updating the issue templates, worked on FSE program preparation (including adding a welcome bot there and digging into current/recently merged PRs!), and dug in a bit to block directory adoption. Plans to do much of the same in the week ahead!.

@itsjonq

Continued the efforts of improving the Component System for Gutenberg.
The latest update is a (draft) pull-request to bring in the UI libraries/systems Has been working on (aka. “G2 Components”) https://github.com/WordPress/gutenberg/pull/27594. @itsjonq gave a thank you to @youknowriad and @gziolo for thoughts/guidance on integration.
@itsjonq said that t’s just the beginning, but it’s looking very promising. As always, @itsjonq tries Livestream design/dev updates on Twitch several times a week.
@itsjonq is also posting weekly updates on the project blogblog (versus network, site):
https://g2components.wordpress.com/.

@paaljoachimm

Design triaged Bigger font for various handbooks.
Worked on several documentation tasks namely: Improving the intro page of the Block Editor Handbook and Re-examining introduction tutorials.

@youknowriad

Has been on working on some follow-ups to the addition of the “template mode” in the post editor.
The idea is that as we add features and enhancements, the code base becomes more complex as we take shortcuts so it’s important to circle back and “clean” the code a bit. Has been doing that with some a11yAccessibility 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) 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., extracting common components and removing unnecessary complexity. Still has a few follow-ups planned. Some refactorings and some more features.

@jorgefilipecosta

Worked on an update that makes client preset metadata match the server. And another one that makes sure we are not passing some metadata to the client like selectors.
Did multiple reviews on Global Styles related work.
Proposed a solution to remove some of the presets we have being back-compatible with markup that uses them.
For the next week, plans on helping the effort to improve our WordPress components with PR reviews comments, feedback, etc. Wants to merge the Gutenberg side of theme.json i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. and iterate and merge the typography presets removal. Also plans on making some progress on the design tooling visibility issue.

@cguntur

Would like to help with the Gutenberg documentation.

@aristath

For next week his main focus will be splitting core block assets loading and revisit progressive loading for FSE.
Would also love it if we could focus on removing auto-drafts for theme-provided templates but that one is a bit tricky as it touches lots of things.

Open floor

@bph bring to the attention of the participants of the chat an issue/question https://github.com/WordPress/gutenberg/issues/27321. @youknowriad shared some guesses of what may be the cause of the issue and @ntsekouras offered to followup and share his findings on the issue.

Skipping coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats of 23rd and 30th December

@paaljoachim share the following in the agenda:

I suggest that we skip having a Core Editor meeting the 23rd and 30th December as many will be having their Christmas holiday

People discussed this suggestion, there was no opposition to this suggestion so participants of the chat decided to skip the chats of 23rd and 30th December.

Starting the FSE Outreach Program

@annezazu said the following:

After digging into some recent FSE related PRs and talking with a few people, I wanted to raise the idea of starting the #fse-outreach-experiment after the next Gutenberg release. I think this PR from @youknowriad on a template editing mode is a great place to start but wanted to hear thoughts. Right now though, there aren’t a ton of things lined up to do next. I think this will be okay though as it’ll give an extended period of time for people to test (might be good with this time of year) and it’ll make it easier to tweak what we’re doing after this first round. How does that sound to you all? P.S. I welcome people flagging possible additional things to run through for the group. I try my best to stay on top of things but definitely miss stuff.

@youknowriad shared he agrees that the template editing mode is a good flow to test. He believe the feature in itself is still a little bit rough around the edges but testable.

@annezazu supported riad’s thoughts and concluded that she will get to work fleshing out the details to kick off the program. She welcomes any collaborators who might be interested!

For anyone reading this summary, you can be a part of the program by joining #fse-outreach-experiment channel.

One week RC period

@youknowriad said:

The last releases saw a couple bugs being introduced and to address that I’d like us to discuss the possibility to try a one week RC in Gutenberg 9.6.

The participants of the chat showed support for this idea. The plan is to start having a one week RC period. The next release will still follow the normal schedule, so we give more time of notice to allow publishing the notes of the meeting (this post), and we have a fuller release otherwise it would be just a one-week release which would be very small.

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

Call for Volunteers – Early bug scrubs for WordPress 5.7

In preparation for WordPress 5.7, tentatively scheduled for a March 9th, 2021 release, it would be beneficial to start running weekly 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 around the tickets flagged as early.

Tickets marked with the early workflow keyword are a priority and should be committed as soon as possible in the release cycle. Indeed, tickets that are committed early can be tested during the alpha cycle, and other tickets may depend on them to be committed.

Alpha has been open for business since November 17th, so there are already some tickets in the report.

Who?

Leading a Bug Scrub is something any interested community member can do! Please comment below if you’re interested in running one bug scrub or two 🙂

When?

To make sure we have at least some dates in the books, Let’s schedule two sessions on the same day, to allow for maximum participation across the globe.

If more scrubs are going to be needed before we formally kick-off the cycle, they will be added along the way.

Call for volunteers

If you are interested, please pick a date and a time and say it in the comments. Thank you.

#5-7, #bug-scrub

The FSE Outreach Program is Officially Starting!

In May 2020, @chanthaboune announced a new experimental outreach project dedicated to Full Site Editing. Most recently, @matveb shared a wonderful post summarizing where Site Editing is today. Building on both, I’m excited to announce that, despite 2020’s best attempts to derail efforts, the program will officially launch with the release of 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/ 9.6! Right now, it’s likely that this release will be done 1 week later than usual to give a longer RC period so expect the program to begin around December 23rd. This cycle will focus on testing this PR that introduces a template editing mode. For additional context, you can see the discussion around picking this PR here. Hopefully, aligning the call for testing with the current Gutenberg version will make it easier for more people to participate in testing. 

Please keep in mind that this is the program’s first iteration. We’re starting with this first item and expecting the outcome to be a comprehensive list of issues that the Gutenberg team can work on as capacity allows. We’ll also allow an extended time to test this first item to accommodate this time of year. 

Moving forward, this program will eventually offer a few items to test back-to-back, with an easy and quick way to integrate feedback into Gutenberg releases. Remember, feedback outside of this program is always welcome and necessary as well — think of it as doing the work to pave the way for future iterations! 

What are the immediate next steps? 

I will be posting on Make Test once Gutenberg 9.6 is released around December 23rd with an extended time to give feedback. The post will include a testing script, resources for setting up a testing environment, and where to share feedback. I will also share that post in the #fse-outreach-experiment channel to alert everyone who has opted in. 

How can I join this program/follow along?

To join the FSE outreach experiment, create a WordPress slack account, join the #fse-outreach-experiment channel, and subscribe to the Make Test blogblog (versus network, site) to be notified about future posts. 

Who should join this program?

This is a great program for you if you want to test new features coming to WordPress, and: 

  • You build WordPress sites for yourself or for others.
  • You manage or maintain WordPress sites for yourself or for others.
  • You publish content using WordPress.

If you’re not sure, join anyway and see for yourself!

Thanks in advance for all who join in on this experiment and who help make it better with feedback/questions/etc. I’m thrilled to get started!

Ultimately, this is an awesome way to help build WordPress’s future, and I hope you’ll join the fun. 

#core-editor, #full-site-editing, #gutenberg

Dev chat schedule for the end of the year

In the past, CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev-chat took a pause between Christmas and the beginning of January.

This year we will try a new approach: keep the show going!

The following dev-chats are going to happen regularly.

  • December 16, 2020, 05:00 AM UTC and 08:00 PM UTC
  • December 23, 2020, 05:00 AM UTC and 08:00 PM UTC
  • December 30, 05:00 AM UTC and 08:00 PM UTC
  • January 6, 05:00 AM UTC and 08:00 PM UTC

Call for volunteers

Anyone can host dev-chat. We are looking for volunteers to host the following sessions:

If you are interested, raise your hand in the comments and say which slot you can cover.

Thank you!

#devchat

CSS Chat Summary: 10 December 2020

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

Housekeeping

@notlaura congratulated everyone who worked on the 5.6 release.

CSSCSS Cascading Style Sheets. Audit (#49582)

@danfarrow shared his updated version of the audit report (featuring sticky headers & dark mode!)

@notlaura reported having the style property values audit working, and making progress on her config PR which is nearly ready.

@ryelle reported a new PR to tweak report generation in order to decouple audits from specific templates, which would reduce the number of templates required.

Some great progress happening!

Color Scheming (#49999)

@danfarrow reported having fixed his wp-env problems and generated 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. diffs based on the initial PR from @tellthemachines.

We discussed how this feature could be incorporated into wordpress-develop, and agreed that the tests would be best run manually. The discussion concluded with a positive sense that this tool could meet one of the goals of the CSS audit project.

@ryelle reported that her public demo site for reduced adminadmin (and super admin) colours shouldn’t be used at the moment as it needs updating.

Open floor / CSS link share

@notlaura shared a link to Houdini.how, a community-driven resource library to learn about CSS Houdini.

And with that the meeting concluded. Thanks everybody!

#core-css, #summary

Dev Chat Summary: December 9 2020

Hello! Here’s what happened in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev chat on Wednesday, December 9, 2020, 05:00 UTC and Wednesday, December 9, 2020, 20:00 UTC.

05:00 UTC core dev chat

@thewebprincess facilitated the meeting and took notes. Find the full Slack archive here.

20:00 UTC core dev chat

@francina & @johnbillion facilitated the meeting and @laurora took notes. The full Slack archive can be viewed here.

Announcements

WordPress 5.6 aka “Simone” was released yesterday (8 December 2020). The release squad was entirely made of people identifying as women and non-binary folx. You can read more about the release in this blog post. At the time of the meeting, @helen shared that it’s already exceeded 3 million downloads.

The annual State of the WordState of the Word This is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/. will be taking place Thursday 17 December at 1600 UTC. If you’d like to submit a question, the deadline is Friday 11 December! This post has more information.

Updates from Component Maintainers/Focus Leads

Build/Test Tools:

@desrosj is continuing to work on 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/ Action workflows and backporting the local Docker environment to the remaining older branches.

@desrosj has been working one repo at a time to convert the Travis configurations to workflows. If you maintain any repositories under the WordPress GitHub organization and want to help with the transition, feel free to DM him.

Open Floor

@afragen requested some extra eyes on #51976. If you’re able to help out, please add your comments to the ticketticket Created for both bug reports and feature development on the bug tracker.. And also added that if you’re after a larger challenge to take a look at #51928, noting that patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. might need to be moved to #51857.

Next Dev Chat meetings

The next meetings will take place on Wednesday, December 16, 2020, 05:00 UTC and Wednesday, December 16, 2020, 20:00 UTC in the #core 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. Please feel free to drop in with any updates or questions.

#5-6, #5-7, #dev-chat, #summary

CSS Chat Agenda: 10 December 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, December 10, at 10:00 PM UTC. 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
  • Updates
    • CSS Audit (#49582)
    • Color Scheming (#49999) – 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)
  • Open floor + CSS link share

#agenda, #core-css

Status Check: Site Editing and Customization

As we approach the end of 2020, it’s good to do a brief recapitulation of where we are standing with one of the major focus areas for 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/ Phase 2: site editing with blocks. If you are curious about the more detailed tasks ahead of us, the overview issue for full site editing is the best way to follow the updates and progress.

Header area showing blocks

In this post I’ll describe the current state of all the primary projects and comment a bit on how they fit together. Worth noting this doesn’t cover the other projects still under the phase 2 umbrella (like the widgets screen updates).

For all the following items, keep in mind that they tend to illustrate the maximum amount of customization options — the ability to lock down templates, capabilities, design tools, etc, is still a prime focus to account for the different needs of different sites.

Site Editor

The site editor allows editing blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes and all their template files. It allows the user to swiftly navigate between the template hierarchy and make edits across an entire site. To accomplish this, it introduces some new interface elements, areas to manage, and the ability to browse the different templates a theme has to offer. Since the entire template is built with blocks, it leverages all the preview tools that have been built for blocks and patterns so far, allowing users to quickly visualize their contents.

Template navigation showing a quick preview for a full page template

The site editor engine is capable of knowing what elements of a site are being modified — whether a site option, a template part, or some local content, providing a much more powerful and flexible update flow. A site title block accurately saves its data as the site name option, not in the content, for example. While we are not yet focusing on editorial flows (that’s one of the aims of Gutenberg Phase 3) these foundational pieces can allow all sorts of integrations down the road, being very granular around what is being updated in a session.

Update design flow with checks for every element that has been modified

The site editor opens up the ability to edit and customize parts of the site that used to be only accessible through code editors or ad hoc interfaces. For example, being able to edit the 404 template with the same familiar block tools. For pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and block developers, that means all the blocks being created can now be used in plenty more places of a site without any extra work.

Editing the 404 template

Most of the infrastructure needed to power this editor is already built. What remains to be done is stabilizing loading flows, refining design and interactions, introducing semantic template areas (such as headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer), and connecting the creation flows with what block patterns offer.

  • ⚒️ Overview Issue and next steps: 24818

Block Themes

The site editor depends on the ongoing focus of building themes with blocks to take advantage of the block editor interface. This year has seen a lot of great collaboration between the theme and editor development groups, which is paramount to ensure the WordPress block editing platform is powerful enough to support all the theme building needs and simple enough for users to interact with ease and confidence. This is an exciting area of collaboration, and something that needs the continued help and feedback from the community. If you are interested in helping shape these projects, the theme-experiments repository can be a good start to peek through.

To support this effort, outside of the template and template parts infrastructure, there’s an obvious need for creating many new blocks centered around theme functions. These includes blocks for the site title, navigation block, post title, content, 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., author, date, 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., and plenty more.

Block inserter listing a featured image block

In the future, rich layout tools — such as full site grid support — will be able to cascade down through the entire experience of the block editor, allowing interactions like snap-to-grid and overcoming a lot of the hurdles alignments currently impose.

The current focus here is on producing a version of Twenty Twenty One using only blocks to help us identify what blocks or block capabilities are still missing. There are also some options for gradual adoption in themes that continue to be discussed.

  • ⚒️ Overview Issue and next steps: 22724

Navigation Block

Out of all the theme related blocks, the navigation block has stood out as its own fundamental project for some time. The work that went into this block has allowed the various block APIs it depends on to evolve and mature substantially, including new support for horizontal inner blocks, a fully fledged block list view, and many more.

Displaying the navigation block

These are wonderful results of this specific project because it lifts up the available block tools for all third-party blocks. We are building the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks with the same tools that are offered through the standard block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. As an example, many of these capabilities are employed in the Buttons and Social Icons blocks.

With everything expressed in blocks, the opportunities for extending the navigation are also enormous — imagine adding with ease to your navigation a Search block, Social Icons, or a Cart block from WooCommerce. With the navigation becoming a more flexible container it opens a lot of integration points for already existing blocks. Each child block can be responsible for its own set of tools and capabilities while the user is presented with a unified way of building things.

Ultimately, the power of combining blocks is going to allow all sorts of menus to become possible. Themes will be able to provide more than one header pattern for users to choose or swap between them.

The biggest remaining challenge with the navigation block is also one of flexibility and ease of use. Flexibility needs to be balanced with intuitiveness and there’s more work to be done to get the user experience in a great place to be widely released. There’s also some work in ensuring smooth compatibility with current themes.

  • ⚒️ Overview Issue and next steps: 27593

Query Block

This is another major area of the site editing focus which also takes some of the block API infrastructure to the limit. If you are curious about block development tools and their latest capabilities, the Query block is a good one to explore, as it leverages nested blocks, inner blocks templates with live updates, block variations, contexts, etc.

Generally, the query block is responsible for controlling fetching and rendering of post types. It is naturally a core ingredient of block themes. It comes with a LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block that is responsible for iterating on the results and rendering a template. One cool thing is that interacting with the Loop in the editor automatically updates the template used for all posts in that query. You can add a featured image, change the order of title and date, add a block to display the author, and see it all reflected instantly.

A featured image inserted within the Query block

The next steps for this block are ensuring it plays well with the template hierarchy (global query), defining more user friendly block variations, and creating patterns that use it to build great layouts.

  • ⚒️ Overview Issue and next steps: 24762

Global Styles

There are two major areas that fall underneath the global styles umbrella: centralized theme configuration and an interface for manipulating visual aspects of blocks globally.

Theme configuration absorbs things like declaring color palettes, presets, different supports and settings, as well as being able to toggle on or off the several block design tools that are available (typography, colors, dimensions, etc). It will also allow themes to specify how blocks should look by being able to specify all their default attributes. This accomplishes many goals at once, ensuring that the editor is more connected with how themes wants things to render, provides a solid interface for the mobile apps to understand block configuration, and opens the door for further performance optimization on the front-end since WordPress will be able to load the right styles for blocks when they are actually being used in the page instead of needing to load styles for all, all the time (like themes have to do now with widgets even if they might not be used).

The other major part of global styles is the interface for the user to make edits to blocks globally. This ranges from being able to set the color for Links across blocks to modifying how all Headings ought to look. Global styles operates both at the site level as well as allowing changes to each registered block. A lot of the tools that emerge from this work continue to be released in each major WordPress version in the form of block tools.

  • ⚒️ Overview Issue and next steps: 20331

🕰 Timeline

In terms of timelines, all of these are in advanced stages and can be used in the Gutenberg plugin already. The main hurdle to include the work in major WordPress releases are the various dependencies between each project when it comes to ensuring a great user experience. The immediate focus is then on completing the milestones, stabilizing the work, and doing as much testing with different kinds of users as possible. For that last purpose, there will be some calls for testing announced soon as part of the Site Editing Outreach Program.

#full-site-editing, #gutenberg

CSS Chat Summary: 03 December 2020

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

Housekeeping

@notlaura thanked @danfarrow for running last week’s meeting and hoped that US folks had a happy & socially distanced Thanksgiving.

CSSCSS Cascading Style Sheets. Audit (#49582)

@ryelle reported having spent some time on the CSS audit repo, and asked @danfarrow what else he wanted to do before his PR was ready to commit. @danfarrow suggested it could be committed now and he would continue working in a new PR, so @ryelle merged it there and then.

@ryelle mentioned the config PR and posted a link to an npm package cosmiconf that might be useful. @notlaura reported having made some progress on the feature and will have a working version soon.

We had a short discussion about naming the reports in the repo’s /public folder, agreeing that historical reports could include the relevant WordPress release number in the filename to form a useful archive.

@ryelle is working on a 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/ action to automate the report generation so the details can be worked out within that PR. She added that we will want to move the project over to the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ GitHub in the next few weeks, a prospect which was received with celebration.

@notlaura asked @danfarrow to update #26350 (the !important audit ticketticket Created for both bug reports and feature development on the bug tracker.) with a link to the relevant section of the report and offered a brief roadmap of the next actions: once her config feature is complete we can update the CSS audit ticket and liaise with design to see if they want any additions to the report.

Color Scheming (#49999)

@danfarrow reported still struggling with wp-env and the remainder of the meeting comprised of @ryelle helping him figure out what was going wrong with his setup (thank you!)

As we ran out of time there was no open-floor / link share, so with that the meeting ended. Thanks everybody!

#core-css, #summary