Ari Stathopoulos 6:35 pm on October 12, 2021
Tags: , ,   

Proposal for a Performance team

We (the undersigned) believe that WordPress needs an official Performance team responsible for coordinating efforts to increase the performance (speed) of WordPress.

This proposal outlines why we believe that this is necessary, how we envision such a team might function, and some potential initial areas of focus. It is authored by contributors from Yoast and Google.

What problems are we trying to solve?

Users expect and prefer fast experiences (consciously or otherwise). Research shows that fast websites can provide a better user experience, increase engagement, benefit SEO, increase conversion, and be more economically and ecologically friendly.

References:

The benefits of improving performance driving investment across the web [ref]. This further raises users’ expectations, and thus may comparatively ‘harm’ slow(er) things.

Compared to other platforms (e.g., Wix, Shopify, Squarespace), WordPress is falling behind. Other platforms are on average faster – and becoming increasingly faster – than WordPress websites (see The HTTP Archive’s Core Web Vitals report), and are actively investing in (and marketing) coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. performance-as-a-feature [1, 2].

We can see the impact of this investment in the widening gap between the proportion of WordPress sites which achieve ‘good’ Core Web Vitals scores, vs other platforms.

Performance graph for CMSs on desktop clients.
Performance graph for CMSs on mobile clients.

This gap continues to widen, despite the availability of many performance plugins and performance-focused themes. This suggests that there’s a discovery and/or education problem, or an updating/staleness problem – neither of which the 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 ecosystem solves for. 

In order to meet the increasing needs and expectations of site owners and end-users, WordPress needs to be actively investing in performance in WordPress Core and beyond (e.g., core code, themes & plugins requirements, setup and onboarding processes, adminadmin (and super admin)/editing experiences, education for content creators).

We believe that:

  • Performance is a fundamental part of user experience, and WordPress should aim to deliver a good user experience.
  • Achieving reasonable performance levels shouldn’t be plugin territory, but part of core (aka, “performance by default”), because;
    • All WordPress users (of all types) need a well lit path to good performance.
    • Average end-users can’t be expected to be performance experts.
    • Achieving high levels of performance requires technical considerations to be ‘built-in’ across the whole stack; and as this is often not the case with themes/plugins, performance solutions are limited to ‘brute-forcing’ performance solutions over non-performant behaviour (e.g., output buffering).
    • The plugin ecosystem doesn’t help users who don’t know that they need help, or who are poorly served by the plugin ecosystem.
  • Users determining which CMS to choose are / will be increasingly influenced by performance (and the associated UXUX User experience/SEO/conversion factors), and we’ll lose ground to faster platforms.
  • ‘Democratizing publishing’ requires that published content be discoverable; which will be less likely to occur via search engines (which influence or account for the majority of new content discovery) for slow(er) sites.

Web Vitals metrics provide a standardized and accepted mechanism for evaluating performance.

Plugin territory

Whilst we argue that some (perhaps most) performance considerations should be part of core, there are definitely areas that should remain firmly in ‘plugin territory’. For example, the following areas should be handled by plugins:

  • Integrations with specific CDNs
  • Template transformation processes (e.g., AMP)
  • Any non-standardized performance technology
  • Any experimental standards (e.g., browser APIs / capabilities with limited adoption)

These distinctions will need exploring and lines will need drawing (and maintaining) as part of the team’s activity.

Why a team?

Performance is already a focus in Trac and a label in the Gutenberg GitHub repository; but these alone don’t attract enough attention to the issues, nor unify efforts and priorities. Experienced and active contributors are not necessarily performance experts.

A team gives more visibility to the effort: contributors that are not interested in working on Core as a whole can be attracted by working on performance specifically. It also opens up contributing to new types of contributors, like performance or data analysts.

A performance team could also attract contributions from different groups; browsers, hosting, SEO companies, etc.

Resources and efforts

In practical terms, the creation of a performance team requires the following:

  • A performance 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.) on Make websites
  • A performance channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.
  • A meeting every two weeks; time to be determined
  • Two team representatives for administrative purposes: they will be responsible for: 
    • Giving a quarterly report to the project leadership
    • Assigning roles in the website
  • A team lead/product owner. They will be responsible to create a mission statement for the team, highlight the areas to tackle, outline the scope and the roadmap for the improvements that need to be made.
  • Representation in (and influence on) other Make verticals and processes (e.g., themes, plugins, etc)

Next steps

Next steps should be discussed and determined as part of the process of exploring and responding to this proposal.

In the case that there are no objections, the next major steps are likely to be:

  • Set up Slack channel and meeting schedule, and make.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/ infrastructure.
  • Benchmark performance and define ongoing/future measurement & success criteria
  • Identify priority projects for CWV improvements with high-level timelines
  • Assign responsibilities for the projects identified

Props

Thanks to the following for this involvement in outlining this proposal.

@francina, @adamsilverstein, @tweetythierry, @joostdevalk, @jonoaldersonwp, @flixos90, @aristath (in no particular order)

#performance, #proposal, #team

Birgit Pauli-Haack 2:29 pm on October 7, 2021
Tags: ,   

Proposal: Gutenberg Developer Hours series of events.

  • Summary: Proposal for a new event: Every other week, invite WordPress developers to meet with 3 developers and discuss your 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/ development questions, code, ideas, and approaches. Follow-up w/ video and resources.
  • Start Date: Soon.
  • Trial period: 4 events.
  • Producer: Birgit Pauli-Haack + Gutenberg Developer Volunteers. 

Background: 

I used to do in-person walk-in clinics for a volunteer internet service provider, where we answered all kinds of questions. If there was a moment with no questions, I would pull a topic out of my hat, talk for five minutes and get another 10 questions that triggered in people’s heads. The place was always packed. Not everyone is comfortable dealing with an unknown set of questions, but when done right, it’s quite fun and interesting. Of course, there were always questions that were too specific or too advanced. We would take note of it and answer them either the following week or via email directly to the attendee. 

I would like to try this in a remote setting with a panel of three developers from the community, who are experienced with working with blocks, and call it Gutenberg Developer Hours. 

Details on Gutenberg Developer Hours

I have heard from many in the community that although there is developer documentation available, it’s hard to get started. When developers hit roadblocks, it also takes a long time to troubleshoot errors and bugs. 

This is an offering to developers new to Gutenberg, to get questions answered or obtain advice on architecture or approach. Having a panel helps with the broad set of topics, distributes the load and takes away the fear of being confronted alone with a question, one might not be able to answer. 

Attendees could bring code issues and talk about those, “I’ve been working on this project, but I hit a roadblock and I have no idea where to go from here.”

As a moderator, I can jump in and ask questions to bridge the silence if we, attendees and panelists, run out of audience questions.

Furthermore, if a question gets too specific or too advanced, the moderator makes a note of it, discusses with the dev team and gets back to the attendee with a response after the event. That could be:

  • an invitation to office hours, 
  • a set of documentation, or 
  • a blogblog (versus network, site) post inspired by the question. 

It’s certainly part of the trial to find out where the boundaries of this support offerings are. 

At the beginning, I envision a frequency of every other week, once there is a pool of volunteer developer panelists available to schedule.

To get attendees interested, it might help to have a short educational segment that people are interested in for the first two or three shows.

The panelists could also pick a topic like:

  • How to tap into Gutenberg filters and hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.?
  • How to add a button to the toolbar?
  • What is a store in ReactJS? 
  • How to add 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. Styles?

For promotion, social channels like Twitter and Facebook and make.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/ will be used.

Each show will be recorded and transcribed. The moderator will communicate the recording part with the attendees and If an attendee rather wants to ask their question outside the recording, the moderator can hit the pause button. 

In post-production, the recording can be cut into smaller educational units and publish it publicly on WordPress.tv. The producers can pull specific questions that stumped the panel and write a separate tutorial about it. The show is not a ‘webinar’ but a normal Zoom meeting, so people can see each other and share their screens and code.

At least for the trial, registration is required. The producers will, of course, respect the attendee’s privacy and use email addresses only for communication regarding the specific Gutenberg Developer Hour session.

I already approached a few developers to be our resident experts with the idea, they committed to want to try it. Depending on the feedback, this initiative can be started fairly soon. If you are a Gutenberg developer with some experience and would like to be part of this initiative, please let me know in the comments.

Administrative tasks:

  • Schedule the Gutenberg Developer Hours, one at a time. 
    • Set-up Zoom space, with registration.
    • Announce the next session via social channels, Make/Project, Gutenberg Times, and other available channels. 
  • Connect with the volunteers on a regular basis so they can schedule themselves. 
  • Recruit volunteers as panelists, moderators and content producers. 
  • Published post with resources and solutions.

If you want to be part of the team working on this initiative, let us know in the comments. I will connect with you via 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/.. Your comments and suggestions are appreciated.

Please don’t hesitate to connect with me on WP Slack @bph if you have additional questions.

Thank You to @annezazu, @daisyo, and @sparklingrobots for collaboration and refinement of the initiative.
Props @jeffpaul and @audrasjb for peer review.

#gutenberg, #new-contributors

Ryan Welcher 5:38 pm on October 20, 2021
Tags: ,   

Check out & contribute to the updated Gutenberg Examples

This week, a major portion of the work to update the Gutenberg Examples repository was completed. The repository 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. examples, while accurate, were out of date and didn’t reflect the most current approach to block registration.

These examples can be used in many ways. You can read through them to learn how to create blocks, check out the repository and modify them to see how they work, or use them as a starting point for your own blocks.

All example blocks now use block metadata files and leverage the most recent version of the Block API. Updates were also made to the developer experience to introduce ESlint and Prettier configurations that can be used by IDEs, and to leverage the most recent version of the @wordpress/scripts package.

Share your examples

While the existing examples cover a lot of topics and use cases, it would be great to expand the list and help more folks do more with blocks. In particular, examples covering more advanced block related topics or topics that are not strictly related to creating blocks but still part of the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ developer toolkit, such as SlotFill, are very much needed.

If you’re looking for a way to contribute and grow community knowledge, please consider opening an issue or pull request with your example suggestion.

Special thanks to @mkaz and @gziolo for their help with code review and to @annezazu, @mkaz, @chanthaboune, @sparklingrobots, and @audrasjb for reviewing this post

#developer-documentation, #gutenberg

Josepha 9:51 pm on September 3, 2021
Tags: ,   

WordPress 5.9 Planning Roundup

Happy September no matter where you are in the world! Since we’re halfway through the alpha period for the next big release of WordPress, it’s time to gather all the pieces of planning into one place. This post will include all the best guesses and targets for dates, features, and squads.

This release will follow the same general cadence as the other releases this year, with a long alpha period (132 days) and a short 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. period (14 days) before the release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). phase.

Proposed WordPress 5.9 Schedule

These are my best guesses at the milestones:

MilestoneDateDays from
Alpha (trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. open for 5.9 release)June 30, 2021
Go/no go DateOctober 12, 2021
October 14, 2021		104 days after Alpha
Feature freeze/Bug FixesNovember 9, 202142 days after go/no go
Beta 1November 16, 20217 days after Feature Freeze
Release Candidate 1November 30, 202114 days after Beta 1
General releaseDecember 14, 202114 days after RC1
WP5.9 Schedule

This schedule puts Beta 1 the week of a major US holiday and a few major commerce dates worldwide. It does avoid putting RC1 during that week.

Proposed WordPress 5.9 Scope

The main goal for 2021 is getting full site editing to all WordPress users. For WP5.9 the following features are in the suggested roadmap:

  • Blocks + intrinsic web design
  • Navigation menus
  • Interface for theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.
  • Refining editing flows for 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
  • New default theme
  • Additional design tools

There are also a few roadmap hopefuls out there.

  • Pattern insertion + creation
  • Unzip/Rollback Failsafes
  • PHPUnit Tests
  • Improved compatibility with PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 8.0 and 8.1

Proposed WordPress 5.9 Leads

  • Release LeadRelease Lead The community member ultimately responsible for the Release.: Matt Mullenweg
  • Release Coordinators:
  • Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. Lead:
  • Editor Tech:
  • Editor Design:
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Tech:
  • Theme Lead:
  • Technical Writer: Jonathan Bossenger
  • Docs Lead:
  • Marketing & Comms: Josepha Haden
  • 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) Lead:
  • Test Lead:

How to help!

I think we will need a slightly larger release squad for this final release of the year, so I’m opening calls for volunteers. As we approach the go/no go date and get a better idea of what features will really land in the release, we’ll get more squad leads assigned.

However, there are a couple of roles we really could use some volunteers for right now:

  1. Triage Lead
  2. Release Coordinators

If you’re interested in lending a hand, please share your interest in the comments!

Props to @francina for early versions of this post, and @jeffpaul + @desrosj for wrestling calendars with me.

#5-9, #planning

Paal Joachim Romdahl 3:23 pm on October 19, 2021
Tags: , , ,   

Editor Chat Agenda: 20 October 2021

Facilitator and notetaker: @paaljoachim

(Let me know if you would like to become a part of the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor meeting facilitators and notetakers team.)

This is the agenda for the weekly editor chat scheduled for Wednesday, October 20 2021, 04:00 PM GMT+1.

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

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

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

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

glendaviesnz 12:45 am on August 20, 2021
Tags: , , , ,   

Gallery Block Refactor Dev Note

The problem

If you have ever added a custom link to an image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and then tried to do the same on a Gallery image, you will understand the frustration and confusion of not having consistency between different types of image blocks. This inconsistency is because the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Gallery block stores the details of the included images as nested <img> elements within the block content. Therefore, the images within a gallery look and behave different from images within an individual image block. There are some long-standing open issues related to this:

The only way to fix this with the Gallery block in its current state is to try and replicate the additional functionality that the Image block has in the Gallery block, and vice versa. While this would be possible, it would lead to an additional maintenance overhead to keep the UIUI User interface and underlying code in sync between the two blocks.

Changes made

To make the behavior of images consistent between the Image Block and Gallery, while avoiding code duplication, the core Gallery block has been refactored to save the individual images as nested core Image blocks using the standard core innerBlocks APIs. To make this work with the innerBlocks 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., the gallery structure also had to change from an ordered list to a collection of figure elements within a figure. This structure change also brings the core Gallery block into line with the W3C WAI guidelines on the grouping of images.

The structure change means that Gallery images now have the ability to add custom links, or custom styles, for each image. An example of the flexible Gallery layouts this opens up can be seen below.

Gallery images will also automatically inherit new functionality that is added to the Image block, including those added by plugins. Below is an example of a Gallery block making us of the Image wave style and vintage 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. option added by the CoBlocks 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.

Other benefits include being able to use the standard move, drag and drop, copy, duplicate, and remove block functionalities. Keyboard navigation also benefits from the adoption of the standard block model by the Gallery block.

What theme and plugin authors need to do before 5.9

To support the new Gallery block format, plugin and theme authors should aim to do the following before the December release of this change in WordPress 5.9.

  • Add additional selectors to target the new nested image block in both the editor and front end (existing selectors must remain to support the existing gallery block content). The new structure can be seen below. 
<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-default is-cropped">
	<figure class="wp-block-image size-large">
		<img
			src="http://localhost/image1"
			alt="Image gallery image"
			class="wp-image-71"
		/>
	</figure>
	<figure class="wp-block-image size-large">
		<img
			src="http://localhost/image2"
			alt="Image gallery image"
			class="wp-image-70"
		/>
	</figure>
</figure>

Example CSSCSS Cascading Style Sheets. with selectors for old and new gallery formats:

.wp-block-gallery .blocks-gallery-item img,
.wp-block-gallery .wp-block-image img {

.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery.has-nested-images .wp-block-image figcaption {

Test block transformations. Temporary transformation filters have been added to handle the transformation of 3rd party blocks to and from the new core gallery block format. However, block plugins with gallery transforms should still be tested with the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ plugin to ensure these transformations work correctly.

In the future, the temporary transformation filters may be deprecated, and plugin authors will then need to update their transformations to handle the new Gallery format. Notice will be given ahead of this change being made.

Additional context and considerations

Other existing solutions

Third-party block developers are currently solving some of the problems caused by the limitations of the core Gallery block by implementing their custom Gallery blocks. These include some of the missing functionality, like the ability to add custom links to individual images. This can be problematic for site owners and content editors due to a large number of Gallery blocks that offer very similar functionality, but none of which appear to provide a close match to the functionality available with individual core Image blocks.

There do not appear to be any examples of plugins that already solve this problem in a way that utilizes Image blocks as inner blocks.

Backwards compatibility considerations

This is a breaking change due to the fundamental change in the underlying Gallery structure. Due to the large number of Gallery blocks already in use, along with themes and plugins that may rely on the existing structure, the following steps have been taken to mitigate the impact of this change on theme and plugin developers as much as possible:

  • For the initial release in the Gutenberg plugin, there will be no automatic migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of existing gallery content. This means that all existing gallery content will behave the same in the editor and front end as it does now, so will be compatible with existing plugins and themes. Only new gallery blocks added after this change will have the new structure in the editor and the front-end.  The plan is to add automatic migration of existing gallery content when loaded in the editor to the 5.9 WordPress release.
  • Two temporary transformation filters have been added that will handle the transformation of 3rd party blocks to and from the new core gallery block format.

Possible edge cases

The refactored Gallery format has been tested against the following sample block libraries that have existing transforms to and from the core Gallery block:

The following themes have also been tested to make sure that both the existing gallery content and the new format galleries display correctly:

  • TwentyNineteen
  • TwentyTwenty
  • TwentyTwentyOne
  • Astra
  • Arbutus

While the refactored gallery works effectively with these plugins and themes, there may be edge cases in other plugins and themes that have not been accounted for. Themes that heavily modify the gallery CSS based on the existing <ul><li></li></ul> will definitely need to be updated if the same style changes need to be applied to the new gallery format.  Therefore, it is recommended that theme and plugin authors test the changed gallery block well in advance of the 5.9 release.

Additional details about this change 

Previous discussions about this change can be found on the main pull request or call for testing.

Updated Oct 18 with additional information on Transformation, and CSS selectors.

#5-9, #core-editor, #dev-notes, #gallery, #gutenberg

Riad Benguella 5:29 pm on June 29, 2021
Tags: , ,   

On layout and content width in WordPress 5.8

WordPress 5.8 introduces Global Settings and Global Styles. They allow theme authors to control and style the available features in the editor and the different blocks using a 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..

By using a theme.json file, in addition to the Global styles and settings capabilities, theme authors opt-in into the layout feature for 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. containers.

Layout config

Historically, themes had the responsibility to provide CSSCSS Cascading Style Sheets. styles in order to support aligning content (left, right). With the introduction of the block editor in WordPress 5.0, new alignments has been added to the mix (wide, full). In addition to that, the block editor allowed users to use container blocks (group, columns blocks) which potentially can change how their inner blocks are positioned and aligned. Taking all these variations into consideration has become a very difficult task for theme authors. To address these issues, WordPress 5.8 introduces the layout feature and config.

How do I migrate my theme

Themes that have a centered content area, need to define a layout setting in their `theme.json` file:

{
   "settings": {
       "layout": {
           "contentSize": "800px",
           "wideSize": "1000px"
       }
   }
}

The block-editor will automatically read this config and provide the corresponding styles in the editor. It will allow all alignments to work properly without requiring the `add_theme_support( ‘align-wide’ )` call.

Themes are still required to provide the corresponding styles in the frontend of their sites, something like:

.entry-content > * {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content > .alignwide {
    max-width: 1000px;
}

.entry-content > .alignfull {
    max-width: none;
}

.entry-content > .alignleft {
    float: left;
	margin-right: 2em;
}

.entry-content > .alignright {
    float: right;
	margin-right: 2em;
}

Note:

It’s not possible for WordPress to generate these styles automatically for all themes because the entry-content className in the example above is not mandatory and may not exist. In the future, with the introduction of the upcoming block themes, these styles won’t be needed anymore.

Nested Blocks

For themes with the layout config enabled, container blocks (like group blocks) do not automatically inherit the layout config. Meaning the blocks added inside the containers will by default take all the available space and not have any wide/full alignments options unless the user defines the wide and content sizes for that particular container block or “inherits” the config from the default layout.

This also means that themers can drop any alignment specific CSS that was added specifically to support nested blocks.

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

annezazu 4:02 pm on October 13, 2021
Tags: , ,   

Editor chat summary: 13 October, 2021

This post summarizes the weekly editor chat meeting (agenda here) held in Slack. Moderated by @annezazu.

Announcements

  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 11.7 is set to be released today with some wrangling around any critical bug fixes. 
  • It’s the last day to explore the current #fse-outreach-experiment call for testing. Share your feedback here!
  • The WordPress 5.9 Go/no go is coming up tomorrow. Stay tuned for more insights after that completes. 
  • Share your full site editing related questions by October 27th!
  • Check out this post to get a peak of the future from @critterverse on design explorations for 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. theme switching.

Monthly Priorities & Key Project Updates

The overarching plan for October has not yet been shipped yet so we based today’s conversation on the Mid September Plan. As a reminder to those working on these projects, async updates are both welcomed if you can’t make the meeting and needed.

Mobile Team

Shipped

  • Use theme colors in htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. mode

Fixes

  • Small fixes for embed block and help screen

In Progress

  • Embed block improvements
  • GSS Font size, line height, colors

Navigation Block & Navigation Editor

The crew working on these projects had a hallway hangout today to chat through the state of their work. There is a longer takeaway here from @spacedmonkey until notes are posted but for now, here’s a TLDR: Focus is on the navigation block / experience in FSE and the nav editor is blocked until the block lands.

Template editor

In 11.7, there are two changes impacting this general area of work:

Patterns

A PR landed for 11.8 that changes the initial patterns shown to be from a featured list of patterns from the directory rather than an underwhelming alphabetical order. This should really help folks see the power of patterns more readily!

Styling

Shipping:

 In Progress:

Task Coordination

Feel free to add items to this post if you weren’t able to make the meeting. As a reminder, never be shy in sharing what you’re working on! It can sometimes be intimidating to see sponsored contributors share all they are doing but remember it all counts and is so appreciated.

@mamaduka

  • I’m continuing exploration for remaining individual block locking items. Some decisions are needed before I can start building UIUI User interface, and I would appreciate your feedback.
  • I created a small PR to hide the “Move to” option when the block is locked.
  • I will try address Andre’s feedback re parent/child theme.json merging feature this week.
  • Also created PR to correctly use data for customTemplates from the 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.

@annezazu

@colorful-tones

@mciampini

  • I will continue supporting folks working on WordPress components.
  • This week in particular, I believe we’re going to focus on improving  the ColorPicker, FontSizePicker, ToggleGroupControl  any other control components used in Global Styles 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., while coordinating the adoption of ToolsPanel in the Typography Tools

@jffng

  • I’ve been working on this PR that adds a Pattern block — giving themes a way to translate strings that appear inside block templates.
  • Keeping an eye on this overview issue in Twenty Twenty-Two where we’re tracking some issues which would really help the next default theme

Open Floor

Lovely kudos to the team. Shared by Steve Dwire.

Just want to give a big thank you to everyone contributing so much.  I’m finally getting back to theme development after years of neglect, and most of my to-do list is already being addressed by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team.  THANK YOU!

Please help review this PR that would move an API from experimental to stable. Raised by @fabiankaegy.

As noted by Fabian, this PR touches many areas and would be a huge win 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 developers, particularly because it would make building custom blocks with inner blocks so much easier.

Next step: @annezazu will follow up to see if we can get a review in place or figure out what the priority is.

How can we liven up these open floor moments and use the GitHub Discussions section better? Raised by @annezazu.

For a while now, the open floor section of the meeting has been fairly quiet/uneventful, which feels a bit like a missed opportunity to connect and share ideas. We chatted about both re-sharing interesting discussions from 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/ Discussions section in the meeting and having a nice interplay where perhaps a discussion from Core Editor ends up there to continue async. Many folks don’t check that part of GitHub right now so it might help bring larger attention and use there. If other folks have ideas/suggestions, do share in future meeting since this seems to be a longstanding pattern.

On hallway hangouts, a PR ahead of 5.9, and speaking at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Italia. Raised by @overclokk.

The topic of language barriers with hallway hangouts was brought up as not everyone is comfortable speaking in English but might still want to join hallway hangouts. This was a great chance to share that hallway hangouts don’t require speaking – you can join, listen in, and leave whenever you want. At the same time though, it would be neat to see them done in other languages and to have folks join who aren’t as comfortable with English in order to give feedback about how we can make them more inclusive.

From there, we chatted briefly about an issue raised that impacts block themes and that is important to review ahead of 5.9. Finally, we all sent good vibes and luck to @overclokk ahead of his FSE presentation!

Help review the Autogenerate heading anchors PR. Raised by @paaljoachim.

This PR impacts larger work around a table-of-contents block so it would be lovely to continue to move this forward.

#core-editor, #core-editor-summary

Robert Anderson 3:01 am on June 29, 2021
Tags: , , , ,   

Block-based Widgets Editor in WordPress 5.8

WordPress 5.8 introduces a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based widgets editor to the Widgets screen (Appearance → Widgets) 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. (Appearance → Customize → Widgets). The new editor allows users to add blocks to their 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. areas using the familiar block editor interface introduced in WordPress 5.0. This gives users powerful new ways to customise their sites using the rich library of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third party blocks. Existing widgets and third party widgets will continue to work and can be used alongside blocks.

Opting out of the block-based widgets editor

The block-based widgets editor is enabled in WordPress 5.8 by default. There are several ways to restore the classic editor:

  • A theme author may include remove_theme_support( 'widgets-block-editor' ). Learn more.
  • A site administrator may use the new use_widgets_block_editor 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.. Learn more.
  • A user may install and activate the Classic Widgets plugin.

New Widgets screen

The widgets.php adminadmin (and super admin) screen (Appearance → Widgets) now loads a block-based widgets editor which exists in the @wordpress/edit-widgets package.

The editor is built using ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. and is similar to the editor used for posts and pages (@wordpress/edit-post) and uses many of the same subsystems: @wordpress/interface and @wordpress/components for UIUI User interface, @wordpress/block-editor for block editing, @wordpress/data and @wordpress/core-data for persisting changes, and so on.

A new filterable function, wp_use_widgets_block_editor(), is used by widgets.php to determine whether to load the new block-based editor or the classic editor.

The Widgets screen is extendable via block editor APIs such as registerPlugin, registerBlockType, registerBlockVariation, and so on.

The Widgets screen uses new 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/. endpoints which are detailed in a seperate dev note.

New Customizer control

The Widgets section in the Customizer (Appearance → Customize → Widgets) now loads a new control (WP_Sidebar_Block_Editor_Control) which contains an embedded block-based widgets editor that exists in the @wordpress/customize-widgets package.

The editor is built using React and uses @wordpress/block-editor and @wordpress/components to implement its block editing interface. It does not use @wordpress/data or @wordpress/core-data to persist changes. Instead, the existing Customizer JavaScript API is used.

A new filterable function, wp_use_widgets_block_editor(), is used by WP_Customize_Manager to determine whether or not to log the new block-based editor control or the classic editor control.

The block-based widgets editor in the Customizer is extendable via block editor APIs such as registerBlockType, registerBlockVariation, and so on.

New block: Legacy Widget

Existing widgets and third party widgets can be edited in the block-based widgets editor via the new Legacy Widget block. This block has an identifier of core/legacy-widget and exists in the @wordpress/widgets package. The Legacy Widget block is compatible with most third party widgets.

Broadly speaking, the Legacy Widget block has three states:

  1. Select. When first inserted, the block displays a list of widgets available to choose from. The list can be customised using the widget_types_to_hide_from_legacy_widget_block filter.
  2. Edit. When selected, the block displays the widget’s control form fields. This is determined by the widget’s WP_Widget::form() implementation.
  3. Preview. When not selected, the block displays a preview of how the widget will look once saved. This is determined by the widget’s WP_Widget::widget() implementation. A “No preview available.” message is automatically shown when widget() does not output any meaningful HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. Learn more.

The Legacy Widget block is not available in other block editors including the post editor, though this can be enabled for advanced use cases.

New widget: Block

Blocks added to widget areas are persisted using the same widget storage mechanism added in WordPress 2.8. Under the hood, each block is serialised into HTML and stored in a block widget. This is represented by a new WP_Widget_Block subclass that extends WP_Widget. A block widget is a specialised case of the HTML widget and works very similarly.

If blocks are added to a widget area, and then the block-based widgets editor is disabled, the blocks will remain visible on the frontend and in the classic widgets screen.

Tips to prepare for the new block-based widgets editor

Use the widget-added event to bind event handlers

The Legacy Widget block will display a widget’s control form in a way that is very similar to the Customizer and is therefore compatible with most third party widgets. Care must be taken, however, to always initialise event handlers when the widget-added jQuery event is triggered on document.

( function ( $ ) {
    $( document ).on( 'widget-added', function ( $control ) {
        $control.find( '.change-password' ).on( 'change', function () {
            var isChecked = $( this ).prop( 'checked' );
            $control.find( '.password' ).toggleClass( 'hidden', ! isChecked );
        } );
    } );
} )( jQuery );

Use block_categories_all instead of block_categories

The block_categories filter has been deprecated and will only be called in the post and page block editor. 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 developers that wish to support the widgets block editor should use the new block_categories_all filter which is called in all editors. See #52920 for more details.

Allow migrating from widgets to blocks

Many core and third party widgets have a functionally equivalent block. For example, core’s Recent Posts widget is analogous to core’s Latest Posts block.

In order to avoid duplicate functionality, is is recommended that plugin authors provide a way for users to convert their existing widgets to any equivalent block. WordPress 5.8 provides a mechanism for doing this using block transforms:

  1. Configure your widget to display its instance in the REST API by setting show_instance_in_rest to true in $widget_options.
  2. Add a block transform to your block from the core/legacy-widget block.
  3. Hide your widget from the Legacy Widget block using the widget_types_to_hide_from_legacy_widget_block filter.

There is a guide containing more detailed instructions in the Block Editor Handbook.

Don’t use @wordpress/editor

Many legacy widgets call the wp.editor.initialize() 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/. function to instantiate a TinyMCE editor. If a plugin or block uses the @wordpress/editor package and enqueues wp-editor as a script dependency, this will re-define the wp.editor global, often resulting in a wp.editor.initialize is undefined error.

Don’t use functions like is_admin() that won’t work in a REST API request

Because the Legacy Widget block makes REST API requests in order to render widgets, admin-only functions like is_admin() and is_plugin_available() are not available.

Written by @andraganescu and @noisysocks.
Thanks to @talldanwp, @isabel_brison, @kevin940726, and @get_dave for reviewing.

#5-8 #dev-notes #feature-widgets-block-editor #widgets #block-editor

Kjell Reigstad 5:13 pm on October 6, 2021  

Introducing Twenty Twenty-Two

A collection of screenshots featuring the Twenty Twenty-Two theme

WordPress 5.9 will feature a brand new default theme named Twenty Twenty-Two. It arrives during an exciting time for WordPress themes. With the advent of Full Site Editing and Global Styles, themes are changing structurally and functionally to enable far more avenues for customization than users have come to expect in the past. To take advantage of these new abilities, Twenty Twenty-Two has been designed to be the most flexible default theme ever created for WordPress.  

A reliable starting point

To find inspiration for this theme’s design, I did not have to look far. Thanks to a bird feeder attached to the outside of our kitchen window, my family’s daily breakfast routine involves a rotating cast of cardinals, doves, finches, jays, and tufted titmice. The birds are always up to something interesting: Sometimes they’re lining up patiently to take turns eating, other times they’re playfully performing aerial gymnastics. 

While the birds’ exact behavior is unpredictable, they are remarkably reliable overall. The exact lineup changes somewhat, but every single morning there’s a group of birds eating breakfast with us. Throughout all of the tumult the world has seen in the past couple years, this consistent, entertaining routine has been a welcome starting point to my day. 

That routine is the inspiration for this years’ default theme. Like the birds, Twenty Twenty-Two is designed to be light and resilient, with a hint of playfulness. The theme uses the lightweight Source Serif Pro for headlines, paired with a sensible sans-serif for support. Its color palette is drawn from nature, and layout elements sit gently on the page.

Above all, the theme is designed to be reliable. Its design choices are intentionally subtle, and its foundation will be built strong. It’s our hope that this theme will suit your site through many seasons. 

Homepage and archive page mockups for the Twenty Twenty-Two theme.

Endlessly customizable

Twenty Twenty-Two will take advantage of a wide networknetwork (versus site, blog) of page templates, headers, footers, and other patterns so that users can easily make the theme their own. In another nod to the behavior of birds everywhere, these will offer a balance between fun and utility: some are irregular and unpredictable, while others are straightforward and traditional. Together, these patterns will act as a window into all of the possibilities that the theme enables.

A variety of page layouts and block pattern mockups for the Twenty Twenty-Two theme.

In addition, Twenty Twenty-Two will ship with a range of alternate color schemes so that folks can drastically change the appearance of their site. Users will also be able to change fonts, image treatments, and more on a site-wide level. These new controls open up a wide array of drastically different customizations for the theme:

Twenty Twenty-Two is designed with the acknowledgement that its default appearance is not most people’s endpoint. Everyone deserves a truly unique website, built on a solid, well-designed foundation, and Twenty Twenty-Two aims to help them achieve that.

Built for Full Site Editing

To take advantage of these new customization features, Twenty Twenty-Two will be built for Full Site Editing first. The theme aims to use as little CSSCSS Cascading Style Sheets. as possible: our goal is for all theme styles to be configured through theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. and editable through Global Styles. The theme development team will work closely with 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/ contributors to build design tools in 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 that enable this goal. 

As a block theme, Twenty Twenty-Two will likely require WordPress 5.9 to run. If the Twenty Twenty-Two and 5.9 release leads determine that there is need in the community for broader theme support, we will explore ways to bridge that gap.

Next steps

Kjell Reigstad (@kjellr) is leading design for Twenty Twenty-Two, and Jeff Ong (@jffng) is leading development. The two of us are looking forward to your involvement and support though the process!  If you are interested in contributing to Twenty Twenty-Two, make sure you are following this blogblog (versus network, site). 

Theme development will happen on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. Once the theme is stable, it will be merged into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and its GitHub repo will be deprecated. An empty repository has been created here that you can follow if you’d like: 

https://github.com/wordpress/twentytwentytwo

Starting on Monday October 11th at 3:00 PM UTC, there will be weekly 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/. meetings in #core-themes to coordinate development of the theme.

The future of default themes

The community has produced a dozen best-in-class themes together, and we’ve come to look forward to a new one arriving at the close of each year. That said, themes are in a transition period today, and it seems like this may be a reasonable time to step back and to re-evaluate the annual cadence with which we build default themes. 

Innovations like theme.json, block templates, and block patterns are making theme development far simpler, and are providing new ways for users to customize their sites. There’s reason to believe that the community can leverage all this to build more frequent and diverse theme and customization solutions for our users in the coming years. 

We’re all still navigating these new opportunities (and in the meantime, we have a theme to build!) so let’s regroup after the 5.9 release to discuss future paths forward for default themes. 

Learn more

For information about about previous default themes, you can read the following posts:

If you’re interested in learning more about Block Themes and Full Site Editing, here are some resources for you: