High Level Feedback from the FSE Outreach Program (May 2022)

Overview

This post summarizes the top pieces of feedback of the current experience to help inform the next steps and as a follow-up to various previous editions. Compared to the previous related posts (March 2021, July 2021), this one seeks to focus on more specific and common items different types of folks might try to accomplish rather than more general themes that continue to come up. This is to help provide more specifics to designers and developers working on these various related features. The aim is that by examining FSE from the vantage point of common flows, contributors can improve specific features in a way that brings everything together intuitively. For example, this doesn’t go into depth around problems that come up when using FSE at scale, like needing to have more ability to sort templates

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

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

Provide a better setup state when creating a new template or template part

When creating a new template or template part, the initial options offered to users are quite limited and, after creation, it’s not clear how to fully apply what was just created across the site. Tied to this, the difference between the Template editor in the Site Editor vs the Post Editor continues to be jarring with folks not clear around when and how best to use each at a glance. 

  • Provide better initial default options after creating a template or template part. This could be prioritizing patterns or starting with the closest template in the template hierarchy. 
  • Show which templates use a given template part.
  • When replacing the current template part,  make it clearer which one is currently in use
  • Unless you add a container blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. when creating a new template, any text runs to the edges. Below is a quick video example:

The most immediate issue when creating a new author template is that it was devoid of default blocks. Where was the—at minimum—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? The empty template would make sense if I was building something from scratch. However, this is not a from-scratch project. It was built from a theme with existing archive.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and index.html files, ancestors in the template hierarchy. Since the author template is merely a more specific version of the archive template, it should be a copy of its “parent” in the hierarchy. Users will most likely want to make modifications rather than start from scratch. Using an ancestor template as a base means that they are less likely to unnecessarily deviate from the existing layout, especially with more complex designs.

@greenshady in this WP Tavern article.

Unify the Template Editor in the Post Editor with the Site Editor

For example, a template for posts/pages can only be added via the Template Editor in the Post Editor rather than in the Site Editor. This difference in functionality isn’t made clear at any point though, leading some to not be aware of the Template Editor in the Post Editor at all. Below is a short video discussing some of the differences:

The slightly different variations of the template editing screen were just too confusing for me. As someone who has been trying to work in the FSE for a few months now, I was completely thrown off by the slightly different screen you got when you launch the template editor directly from a post vs the template editor you get when you go to edit site, and then select a template to edit.

@​​beckej in this comment.

Improve the process of applying and viewing a template in action

After creating a new template that you might want to use for a page/post, it’s not clear that you have to assign it to that post/page. To ease this workflow, after a user creates a new template, they could be prompted to apply it to all child pages of a parent page. The same is true for creating new template parts and needing to actually apply them to each template you might want to use it in. 

On a related note, after someone creates an author template or date template, they would have to know the relative link for their site to see the template in action. It would be great to connect the dots a bit more in the interface so that folks can see their changes after a new template has been created. This came up during a recent call for testing around creating an author template with folks not knowing how to see the template without being linked to an example.

I really do not know which template affects which pages/posts. So I assume that a Page template affects all the pages. 

@paaljoachim in this comment.

Make it clearer that editing a template part will update everywhere it’s used

Currently, it’s very easy to edit a template part without realizing any changes you make can potentially have a site-wide impact. This touches on a few issues: 

Tied into this is the general experience of when and why to use template part focus mode, since the advantages of doing so aren’t always clear and the general mode matches the appearance of the Template Editor in the Post Editor (dark background, back button, etc). 

I went down a weird rabbit hole where I couldn’t figure out why we had the header block and the header template parts. I mean, what if I wanted to have two different headers with wildly different information in them? Whenever I changed the main header block (anything living inside it), it changed it in all the header template parts, and I found that very confusing and frustrating. I ended up removing the header block inside the header templates and keeping things just in groups. That made way more sense to me.

@aurooba in this comment.

Make multi-entity saving more user-friendly

Building off of a need to have more granular information in multi-entity saving for Styles, the following are repeat items that have continued to come up: 

Improve theme block placeholders

Placeholders need to be greatly improved as folks are accidentally deleting theme blocks like the Post Content block not realizing that it’s what will display their actual content in the template itself. The more robust the placeholders can be, the more visual clarity there can be between editing a template vs post/page. Keep in mind that when user content is displayed but not editable, there needs to be a clear way for folks to understand why they can’t edit their content directly. 

I found it a bit strange adding a 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. block and a duotone 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. without seeing what the result would look like.  

@paaljoachim in this comment.

Ease the process of editing a template for currently viewed page/post

When you are viewing a page, it’s not always clear what template is currently in use, and it  takes numerous steps just to get to a specific template in use outside of your homepage (wp-adminadmin (and super admin) > Appearance > Editor > W Menu > Templates > Select correct template). There are a few issues related to this to explore, including:

Add ability to bulk add items to Navigation Block, including pages, categories, etc.

This was previously possible with the prior Appearance > Menus screen but a known pain point with the current Navigation Block experience. In time, this should also include expanding beyond just posts/pages and being able to add additional items like categories in bulk

Open up more ways to set the site icon

Without using the Site Icon block, there’s not a current way to set this for your site. It’s also not clear that one has to add that block and that, after adding it, you’ll see an option to set your site icon. 

Provide consistent dimension controls across blocks 

In nearly every call for testing, folks are left wondering why certain controls exist in some blocks and not in others. This current experience of dimension controls needs to be standardized and expanded appropriately

The different controls for different blocks makes it really hard to make something that is consistent and nice. I decided it would be cool to make the user pictures a little bit bigger, like that might make the comments more inviting. Since I made the commenters pictures so big, I said, let’s add in a Post Author block so that the post author’s picture will be shown too! Wait, the AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. block in the Comments Query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. and the Post Author have completely different control? I can make the avatar any size, but the post author I have a dropdown with 3 choices? I can but a border radius on the avatar block, but not the post author block? If it’s a picture, I should have all the same tools available to me as any other block that uses a picture.

@beckej in this comment.

Offer more ways to see how changing Styles will impact the entire site 

The Styles system is powerful and vast to the point that the current experience makes it difficult to know just how much is being adjusted with a few clicks: 

Improve the experience of changing font sizes using the default options

Whether you’re selecting from the default options or trying to set a custom size, the UXUX User experience is fairly quirky. Finding the custom size option is somewhat cumbersome and, if you select one of the default sizes but want to switch back, you have to “reset” the font selection from the ellipsis menu. The presentation of the font sizes isn’t easily known either, with “t-shirt” sizes currently being considered. Regardless, this is an extremely basic action to take that now takes numerous steps to complete as the video below demonstrates:

Ease switching to a block theme/between block themes

Switching to or between a block theme should feel seamless and there are a few issues to help get the experience where it needs to be:

Simplify various ways of creating common layouts

This covers a large number of use cases, from using the same width for the rest of your content in a new template to wanting to have a site logo next to a site title. Beyond relying on patterns to set a header or footer layout, it’s incredibly difficult to create your own as you often need to use a group/row/stack block first and foremost. From there, getting the spacing right is incredibly difficult. This is true of individual experiences like with the Navigation Block and of trying to combine multiple blocks into one layout:

Users who want to even slightly change the spacing and positioning of content have to have deep knowledge of container blocks, design tools (often locked away in ellipsis menus), and the spacer block. While the spacer block is the most user-friendly option for controlling spacing, the problems below remain: 

  • It’s not clear when to use spacer blocks. 
  • Spacer blocks often aren’t robust enough. 
  • Design tools are hidden in the ellipsis menu. 
  • It’s not clear if one needs to use container blocks to have more control over layout/spacing. 

Still trying to get “edge space” – ie margin from edge to orange borders I tried toggling on the “inherit default layout” This didnt make any different to the margin. It just changed the padding. I also added a zero to the block spacing field. Nothing changed. I tried changing the layout toggle to 80 % wide. This changed the internal padding of the block and didnt move the block away from the edges…Why are some settings in the block toolbar and some in the inspector? Why aren’t the same settings (where appropriate) in all similar blocks – ie padding, margins, width available in both groups, and columns?

@alixnotes in this comment.

Thank you to @priethor for helping to review this post at various stages.

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

Core Editor Improvement: Choose your Style

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

With Gutenberg 12.5 and the soon to be released 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/ 12.8, a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme author can now bundle multiple sets of Styles with their theme, allowing anyone using the theme to quickly switch between them as shortcuts for customization. These different Style presets can change both settings available, like turning on/off font weight, and style options, like the default color palette. For a practical example of what this looks like, check out the quick demo below showing off how a theme could offer both light and dark Style presets:

You can experience this for yourself locally by using the Twenty Twenty Two theme, creating a new styles folder in the root of the twentytwentytwo theme folder, and dropping this gist in there. 

This Styles feature gets even more exciting when it’s paired with new enhancements like the fonts API in theme.json coming to Gutenberg 12.8. That opens the door for a wide range of styles per theme — look for more and more themes to leverage this in the coming months. The following video shows off some new creative possibilities that are opened up by these new features in combination: 

If you’re a block theme author looking to take advantage of this new feature, dig into the documentation now to learn how to create different style presets and align with the necessary theme structure

Thank you to @kjellr for the demos and help writing this post. 

#block-themes, #core-editor, #full-site-editing

State of the Customizer with block themes in WordPress 5.9

With WordPress 5.9 bringing support for block themes, this results in a few changes to how the 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. works and how one can preview themes.

At a high level, this post covers how 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 cannot be previewed due to the introduction of the Site Editor and how the Customizer itself will only appear if a non-block theme is activated or a site has a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that interacts with the Customizer.

Previewing block themes

If you activate a non-block theme like Twenty Twenty-One, open the Customizer, and click on the Change button in the Active theme section, you will see a warning message displayed for each block theme. Please see the example below:

A warning message is displayed for each block theme in the Customizer

It is displayed because the Customizer doesn’t support block themes. They can be customized in the Site Editor instead.

As a result, to customize a block-based theme, you need to activate it first. If you’re concerned about doing so, it’s recommended that you set up a test site first to explore the theme.

Also, it is not possible to preview inactive block themes because the Site Editor only works with the currently activated block theme. This means that the Live Preview button is not displayed for inactive block themes.

Once the ability to preview any block theme in the Site Editor is implemented, it will be possible to enable the Live Preview button for block themes as well.

Previewing non-block themes

Previewing non-block themes works the same way as in WordPress 5.8. Nothing has changed here.

Customizer and block themes

WordPress removes the Customizer from the Appearance menu if a block theme is enabled. Why? Block themes are customizable within the Site Editor rather than the Customizer.

However, if any callback function is registered for the customize_register action, the Customize menu item will be added. This is necessary to ensure compatibility with plugins that still require the Customizer to be present in the Appearance menu.

Because the Customizer shows up conditionally, various links have been adjusted depending on the type of active theme to ensure a smooth user experience.

For example, if a block theme is activated, the link in the Welcome banner leads to the Site editor. However, if a non-block theme is active, it leads to the Customizer.

Summary

If you need to preview or edit a block theme, activate it first. Previewing non-block themes will continue to work the same way.

WordPress will only add the Customize menu item if a non-block theme is activated or a plugin interacts with the Customizer (please see the customize_register action).

TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #54549 (warning messages for block themes in the Customizer), #54460 (change links depending on the type of active theme), #54337 (conditionally show the Customizer in the Appearance menu).


Props to @annezazu and @hellofromtonya for technical review and proofreading; props to @audrasjb for proofreading; props to @desrosj for providing general feedback on this post.

#5-9, #block-themes, #customize, #customizer, #full-site-editing

Submit Full Site Editing questions by Oct 27th

With the Go/No Go session happening this week ahead of WordPress 5.9’s release in December 2021, let’s use this time to dig into any general questions you all might have around Full Site Editing! As it’s possible, please focus questions specifically around WordPress 5.9 as those will be the most high impact to address and not on larger strategic decisions. You are welcome to submit questions using the form below or to leave them as a comment on this post by October 27th:  

Keep in mind that because, depending on the questions it’s likely that some answers might take the form of “people are working to figure this out and feedback is welcome here,” rather than a definitive answer. This is especially true for features/milestones that are planned for future releases. 

When and where will you share the answers? 

I’ll share a recap post on this blogblog (versus network, site) (Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.) as soon as I possibly can and aim to do so no later than November 1st, 2021. If there are a ton of questions, they will be grouped with corresponding answers for easy review. You can see what the outcome will look like based on the first round and second round. I will work in the open as I go in a collaborative Google doc that will be shared in #fse-outreach-experiment for anyone who wants to collaborate or check in on the work. 

Once the post is published, I will follow up via email with everyone who left their email and a question in the form. For anyone who leaves a question as a comment on this post, I will @ your username in the recap post so you don’t miss out too!

What else will this effort help with?

While the main outcome will be a lovely list of answers to grow community knowledge, this collective effort will also be useful for future documentation updates, potential tutorials, hallway hangout topics, and more.

For more information about the FSE outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.

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

What’s next in Gutenberg? Site Editing status check (Late July-August 2021)

WordPress 5.8 is already here, an exciting release marked by the inclusion of many Full Site Editing features that have been big-picture focuses in recent times. Because of this important achievement, in contrast to normal monthly updates, this post seeks to review the status of Full Site Editing and summarize the next high-level focuses within 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.


Full Site Editing is the lighthouse goal for phase 2 of Gutenberg. As such, it’s good to remember it is a collection of projects that allow site editing with blocks, bringing powerful capabilities for a smooth editing experience.

WordPress 5.8 includes some of these Full Site Editing projects and features; while some of them will continue as ongoing focuses for subsequent Gutenberg releases (⚒️), others can be considered stable and enter a maintenance phase (✅)

Without further ado, let’s look at the current status of the milestones that have guided Full Site Editing work in the last months and the updated scope for Site Editing.

Site Editing Infrastructure and UIUI User interface

The Site Editing Infrastructure and UI provide foundational work for the rest of FSE projects, mainly in the Site/Template Editor, Template parts, and the numerous APIs that support work around Full Site Editing.

The first two iterations of the site editor milestone introduced 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. The ongoing third one offers the possibility of creating custom block templates in classic themes and is available in WordPress 5.8 for those themes that opt-in to the site editing experience. Work will continue to finalize the Site Editor naming and placement: the current Site Editor as we know it in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party may evolve for better navigation flows and interactions.

Thanks to feedback from different FSE Outreach Program testing rounds, the next focus for site experience and tooling improvement include:

Overview Issues: ✅ Part 1, ✅ Part 2, ⚒️ Part 3

Global Styles

Global Styles comprises 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, and toggle on or off the available block design tools (typography, colors, dimensions, etc.). All of this can be managed through 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. configuration file and is one of the key features available in WordPress 5.8. After a few iterations and open testing, this feature is considered stable and moved to a maintenance phase.

The other major part of global styles is the user interface to make edits to blocks globally. With theme.json in place, the next release cycle will have the Global Styles UI as one of its main focuses, allowing users to tweak the theme easily. Color handling will be an important focus, not only to better theme switch but also to seamlessly integrate color palettes with patterns.

⚒️ Global Styles Overview Issue

Theme Blocks

To support the theme building needs outside of the template and template parts infrastructure, there was a need to create many new blocks centered around theme functions. WordPress 5.8 brings several of these blocks, from Site Title, Site Tagline, and Site Logo that allow users to configure site settings with blocks, to the post-related blocks such as Post Title and Post Date, to be used inside a Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. to display post data.

Although new theme blocks may be added as the need arises and the existing ones will receive incremental upgrades, the basics of this milestone are complete.

Theme blocks Overview Issue

Query Loop Block

Among the theme blocks, the Query Loop Block has been a significant area of the site editing focus in the past months, deserving its own milestone. Taking some of the 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. infrastructures to the limit, such a powerful block has proven challenging to expose at a user level. As a result of the feedback collected in the FSE Outreach Program, the block has been renamed to clear confusion, and usability enhancements have been implemented before launching it in WordPress 5.8.

With the Query Loop foundations in place, the next iterations will seek to ease the user interactions and flows, even more, thanks to two fundamental Gutenberg tools – block patterns and block variations. The former will continue to help set the inner block structure and content. In contrast, the latter will present the powerful Query Loop’s features in the form of preconfigured blocks and consolidate similar blocks to use the Query Loop Block as their underlying mechanism.

Query Loop Block Overview Issue

Navigation Block

Along with the Query Loop Block, the Navigation Block is another theme block that stands out as a project in its own right. This block has seen great improvements in the last few months, from improved overlays to responsive menus. New blocks are available as well, such as the Home Link block. Shortly, we will see the Navigation block house whole new kinds of blocks thanks to the recent frontend markup adjustments that allow blocks other than links in an accessible way.

Because of its key role in building rich theme blocks, the Navigation Block will be one primary focus during the next WordPress release cycle. Apart from more blocks being available inside the Navigation Block, customization options – such as configuring dropdown behavior or adding fullscreen variants – are an area that seeks improvement. These customizations should be design-driven due to the multiple layouts nested navigation menus can have.

⚒️ Navigation Block Tracking Issue

Site Editing Gradual adoption

Full Site Editing represents a new paradigm in site and theme building in the well-established WordPress ecosystem, and as such, providing the right tools is key to gradual adoption. Tools like the Widgets Editor and Navigation Editor bring block editing capabilities to traditional features that can’t take full advantage of their native block counterpart implementation.

WordPress 5.8 brings the power of blocks to both the Block Widgets Editor and the 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.. Users will be able to add blocks in 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, add widgets and blocks with live preview, and schedule and share directly from the Customizer.

Because blocks can now be added to widget areas, developers are encouraged to phase out their widgets in favor of blocks, which are more intuitive and can be used in more places. Developers can allow users to easily migrate a Legacy Widget block containing a specific widget to a block or multiple blocks. 

On the other hand, the Navigation Editor has also seen its share of iterative improvements in the last months. Together with the Navigation Block, it will remain an ongoing focus for the next WordPress release cycle.

Widgets Editor Tracking Issue

⚒️ Navigation Editor Tracking Issue

Smoothing block interactions

As mentioned with regards to Query and Navigation blocks, the complexity of the editor increases as site editing capabilities are introduced with advanced block structures and customization options. This highlights the need to expand our APIs and interactions — which are well suited for simple block structures — to better support container blocks.

To address some of this, the List View introduced in Gutenberg 10.7, and WordPress 5.8 aims to help navigate these advanced structures more efficiently and should continue evolving further in the future. Internally, the List View is powered by a component available in the post editor List View and advanced blocks like Navigation; all features and blocks having a list of blocks will benefit from the improvements made to this component.

Another challenging editing experience with the increased number of container and inner blocks is adjusting parent block settings when editing a child block.  Users often need to switch between different child and parent blocks to change settings like layout or positioning. In turn, it is necessary to explore Toolbar absorption mechanisms that allow parent blocks to expose their toolbar on their children.

Patterns

At this stage, it is no secret that block patterns represent considerable potential for users to add many blocks with different preset layouts and settings easily. By using patterns, users don’t need to individually add blocks to achieve rich representations in headers, columns, or Query blocks, as patterns act as a jumpstart blueprint that can be tweaked and adjusted to the user’s needs. 

An example of the improved interaction block patterns is demonstrated by the Query block, which allows users to select block patterns in its placeholder state. This is just the tip of the iceberg in terms of the ways patterns can leverage the editing experience, and as such, efforts will continue improving pattern insertion capabilities.

Thanks to the recently released Block Pattern Directory, patterns can be copied and pasted into the block editor; upcoming Gutenberg iterations will connect and retrieve patterns from this directory, allowing users to choose from huge amounts of beautiful patterns without leaving the editor. Both to ease navigating the big number of patterns users will be able to choose from and accommodate increased pattern complexity and richness, such as in Query or 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. patterns, revisiting the pattern insertion UI will be an ongoing focus in the months to come.

 ⚒️ Pattern Insertion Tracking Issue

Design Tools

Several design tools are needed to ​​ensure a wide range of exquisitely crafted patterns can support powerful settings and rich block customizations. These encompass all tools related to the appearance of blocks and range from colors, typography, alignments, and positioning to filters like duotone, cropping, and background media and will need to integrate seamlessly with theme.json mechanics.

Going further, controls like font size, even if exposed as single values to users in the UI, are built behind the scenes to accommodate different viewport ranges. Apart from providing access to the underlying mechanisms through theme.json, responsive-previewing and device-specific editing will be necessary to support this.

To support the ever-increasing number of tools, the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., while secondary in some regards to the block canvas and toolbar, will need to accommodate many of these tools, whereas the Component System will provide a shared design language between all these controls.

⚒️ Design Tools Overview Issue


How to follow along with Gutenberg

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts and an updated Site Editing overview issue that breaks down the upcoming work into more concrete next steps.

Ways to Get Involved

While the above items are our focuses, don’t forget that you can always help with triage, testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a course on Learn WordPress for how to do triage on GitHub! Check it out and join us.

Hearing your feedback is crucial to drive upcoming priorities and iterate on our work, so you are more than welcome to join our Full Site Editing Outreach Program!

If there’s anything we can do to make contributing easier, let us know in the comments or #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.


Props to @javiarce for creating the images, and to @cbringmann and @mcsf for reviewing the post.

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

High level feedback from the FSE Program (July 2021)

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

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

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

Improve settings experience

This section pulls together everything from feature requests for additional options for different blocks, desire for more control over spacing especially for the Column and Query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blocks, general confusion around why certain settings exist in one place and not another (example with the Query loop block, with Color settings, and Columns block), and how to navigate the complexity of settings with more powerful blocks. As a specific example tying in these various items, let’s say you want the Query loop blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to display 3 posts from a certain categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and you want to set various colors for different parts of the set of posts. To accomplish that, you would have to interact with the block sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings first to set the category before using the block toolbar to select the number of visible posts. To set various colors, you’d have to use List View or navigate through the nested blocks before opening up the block sidebar settings once more to make sure you’re styling what you want.

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

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

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

Refine Placeholders & Initial Configuration Steps

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

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

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

Ensure reliability and robustness of the the saving process 

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

Expand abilities of theme blocks

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

Increase usability of overall experience

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

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

DevChat meeting Summary – May 5, 2021

Agenda for the two meetings. Thanks to @peterwilsoncc and @jeffpaul for leading the 05:00 and 20:00 UTC devchats respectively.

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

Announcements and news

These posts need your feedback:

  • @ryokuhi published a proposal on Make/Accessibility about a new Trac workflow keyword that the 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) team would like to consider.  If you feel particularly opinionated or passionate about this, please comment on the post.
  • @jeffpaul and @desrosj published a request to Component Maintainers, Feature plugin authors, and the Gutenberg team to share plans / help needed for 5.8 (primary focus will be FSE).  Please comment on the post to help ensure we’re tracking the right work for the release.
    • @youknowriad noted that required Gutenberg changes in Core are made as filters/extensions points and brought to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as 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/ merge that happens regularly
    • @mkaz shared the WordPress 5.8 Must Haves project board on GitHub as outline of Gutenberg work for 5.8

5.8 Review

  • Schedule confirmed including 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. scrub schedule
  • @youknowriad shared that trunk is already on Gutenberg 10.4, @gziolo is working on updating it to 10.5 and the big changes (Global styles infrastructure in themes.json and FSE blocks) are coming in 10.6
  • Feature freeze on Tuesday May 25th (19 days from now) defined as “During the following two weeks, there will be no commits for new enhancements or feature requests. Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. will focus on defect work (aka outstanding bugs)
  • BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 on Tuesday June 8 (33 days)
  • RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1 on Tuesday June 29 (54 days)
  • Release on Tuesday July 20 (75 days)
  • Current list of tickets that are on the 5.8 milestone, list of good-first-bugs tickets

Component maintainers and committers update

  • @sergeybiryukov shared Plugins update that Parameter names in 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 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. functions now use consistent terminology when referring to actions, filters, and callback functions via #50531
  • @sergeybiryukov shared Themes update that #49487 removes the “Featured” tab on Add Themes screen to match an earlier change in the Theme Directory
  • @webcommsat shared About/Help update that ticketticket Created for both bug reports and feature development on the bug tracker. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. continues with @marybaum
  • @audrasjb shared Menus update that #21603 is being reviewed
  • @audrasjb shared Upgrade/Install update that the last meeting recap includes a project for the next few releases

Open Floor

Props to @audrasjb, @webcommsat and @marybaum for reviewing this post.

#5-8, #accessibility, #dev-chat, #docs, #fse, #full-site-editing, #github, #learnwp, #summary, #updater

Full Site Editing Scope for WP5.8

The first go/no go date is next week (April 14, 2021), and I’d like to offer a roadmap and some high level clarifications for folks following along.

Full site editing is a collection of projects and together they represent a big change, arguably too much for a single release. The most important context to share is that it isn’t shipping as the full, default experience for users. One of the clearest pieces of feedback from the Phase One merge process was that there wasn’t enough time for our extenders (agencies, theme authors, 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, site builders, etc.) to prepare for the upcoming changes.

With that in mind, this merge process won’t be an on/off switch. The focus now is not on a full and nuanced user experience, but more of an open public 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. within WordPress 5.8.

With that context, let’s take a look at what is coming up in the next week and beyond..

Next Steps

Go/No Go Dates

On April 14 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 will ship v10.4 and shortly thereafter will be the go/no go demo.

The scope is the same as the past few months and focuses on the interface that allows for template editing, a number of new theme-building-oriented blocks, and design tools. This part of the FSE merge will not change the users’ default experience, but instead will focus on bringing tools to the extenders in our community so that they can experiment with their users in mind.

  • Block theme building based on the theme.json configuration file. (https://github.com/WordPress/gutenberg/issues/29891)
  • Site-editing-oriented blocks, such as the Query block, Template Part block, and Site Logo block.(https://github.com/WordPress/gutenberg/issues/28744)
  • Along with the query block, a collection of patterns and contextual pattern transformations. (https://github.com/WordPress/gutenberg/issues/30508)
  • 7 Gutenberg plugin iterations (10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6)

Beta Dates

On June 8 the WordPress 5.8 release will reach its beta period. 

The components below are some of the most complex, and the user experience of them will be key. They are all high priority to complete (hopefully for WP5.8), but will be punted if they aren’t ready in time for Beta.

Later Dates

On July 20 the WordPress 5.8 release will reach general availability.

The components below came up frequently in user testing as being confusing and need more attention. Polishing these components has been moved out of the focus for WP5.8 for proper prioritization.

  • Making the saving flow more intuitive when in the template editor and making changes to multiple areas of a site.
  • Phased rollout of user-interface for Global Styles and interactions with the template editor & template parts.

The Demo

This has been scheduled for April 14. 

Attending

  • Matt Mullenweg – Project Lead (advocating for the vision/mission of WordPress, and aggregate body of users)
  • Matias Ventura – Gutenberg project lead (host of the demo)
  • Helen Hou-Sandi – Lead developer (advocating for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., and extender community)
  • Josepha Haden Chomphosy – Executive Director (advocating for the community of WordPress, and aggregate body of users)

Agenda

  • Matias will demo the features intended for WP5.8
  • Discussions and implementation questions

Afterward

  • Blocking items (if any) will be gathered and shared publicly
    • If yes: A plan to prioritize and address issues prior to the second go/no-go date of April 27 will be shared
    • If none: A plan to merge to Core will be shared

#5-8, #core-editor, #full-site-editing

High level feedback from the FSE Program (March 2021)

After a few months and a few rounds of testing for the Full Site Editing Outreach Program, this post summarizes the top pieces of feedback of the current experience to help inform ongoing efforts for an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia. Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing yet, for example, Global Styles. If you want a more in-depth look at feedback across the testing calls and a full summary of all issues rather than a sampling, please review the summary posts. If you want to help give feedback, join the calls for testing or test whenever you’d like. 

Previewing content

Across both calls for testing, it quickly became clear that previewing changes is a workflow people rely upon and miss deeply in the current experience, whether it was a desire to preview changes to a template or to preview the entire site. A “Preview Site” option is currently under discussion, along with exploring a possible browsing mode allowing a user to browse around their site within the editor. 

Saving Process

While the saving experience was reliable technically and generally intuitive, it has left a lot to be desired and resulted in a fair bit of confusion around expected behavior. This is likely because multi-entity saving (saving multiple aspects at once) is a new WordPress concept and one that underpins every interaction in the Site Editor. Whether it was mentioning desired features, finding bugs, or confusion around how to accomplish a task, this proved to be a robust area of feedback. 

The distinction between editing the entire site vs. specific content

Similar to the saving process feedback, this is another area where features technically work but are difficult to distinguish across the experience. For example, one can edit a template directly, but it’s not always clear when one is editing a template or editing an item of content. Beyond just clarity in what one is editing, there needs to be the right amount of friction when switching between content that impacts the entire site vs. content on an individual post/page. This is an area of active iteration and exploration to get the right amount of friction in place, as you can see in open issues like this one around clarifying template vs. content editing, and this one around refining the experience of editing a template part in isolation.

Rethinking Width/Alignment

Currently, alignment in Full Site Editing works to optimize traditional themes that provide their own alignment styles. This approach has served the project well until this point, but it’s a key area to reconsider to ensure a true and reliable WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience. Thankfully, work is already underway in an important PR by @youknowriad to reimagine how this dynamic should allow for more control over alignments/widths when using the Site Editor. 

General Usability Improvements

As this work moves into a place of refinement, there are numerous enhancements to consider to improve overall usability of the Site Editor. This is a “catch-all” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. but an important one nonetheless, as it will help the Site Editor experience move from functional to delightful. What follows is a sampling of items both to get a sense of the kinds of issues raised and the spread: 

Improving Placeholders

Placeholders for some of the newer blocks in the site editing experience prove to be both a powerful way to guide people and a point of confusion. This feedback mainly came into play with blocks like the Query Block (including 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. variations like Posts Lists), Social Icon Block, Featured Image Block, and the Navigation Block. Each currently gets users started in different ways. In the long run, it seems that users will benefit from a standardized, consistent way to interact with placeholder content across all blocks. This is particularly important when viewed through the context of editing a template where you might mostly see placeholder content. 

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

Bringing the power of blocks to Widgets

With many existing WordPress sites and themes not yet able to take advantage of Full Site Editing, work is underway to bring the power of blocks when adding, editing, and managing widgets on your site. This is being done to help both bring benefits sooner rather than later to more parts of the site building process for users and to pave the path towards a future full site editing first experience. You can think of these changes as an upgrade of what’s currently possible. For example:

  • With blocks, 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 will now allow users to create layouts in sidebars, headers and footers, in a way that hasn’t been possible before with columns, separators, spacers, etc.
  • By supporting blocks, widget areas will also support visual rich text editing by default, without the need to edit HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. textareas or embed HTML editors.
  • 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 widget areas allow users to edit their theme’s template content in an inline and unified experience, removing the need to keep an abstract mental model of mapping boxes to front end results.
  • Many complex widgets which were based on shortcodes are available as blocks (for instance form widgets), and visually editing them is a lot more fluid and intuitive than the esoteric value hunting of shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. editing.
  • The new block based widget editing experience will have a smooth transition process that will allow developers to replace their widgets with blocks that have similar functionality.
  • Last, but not least, as part of WordPress’ efforts to maintain compatibility with existing themes, content, and workflows, blocks within widget areas will be fully editable from the 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. as traditional widgets currently are.

To get more visual, here are two ideas for block powered Widgets sections to bring the above to life:

While this is a stepping stone, it’s one that will ultimately offer an improved experience overall with more modern and expanded functionality thanks to the years of work put into creating the block editor. 

To make sure that users can experience the full power of blocks in Widgets, we need to build more blocks for our Widgets! Building a post using blocks is inherently different than setting up your Widgets screen using blocks, and this is a great chance for our community of developers to to test out working in this area. To give feedback, check out this call for testing and share your feedback directly in GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ here. To help with the development process or to follow the project more closely, you’re welcome to participate in #feature-widgets-block-editor 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/.. Finally, join the fun and check out the many resources below for building blocks:

  • Block Creation tutorial that teaches you how to write a block 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.
  • Block Submission tutorial that gives some tips and suggestions for ensuring your block is ready for the Block Directory.
  • Learn WordPress workshop on Intro to 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/ Block Development
  • Block Checker tool which will help you discover any issues that might prevent your plugin from working.

#core-editor, #feature-widgets-block-editor, #full-site-editing