Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (1 June)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@ndiego @annezazu @elmastudio and a Marcy joined us for a time.

Video Recording:

Topics

Briefly touched on two recent blog posts to be aware of:

What’s missing and what’s stopping people from switching to 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

  • Responsiveness continues to come up with Ellen sharing how she built their own system to handle this for now, knowing that they can always switch over. She believes this is one of the main reasons people are holding back from switching to block themes.
  • We chatted briefly through intrinsic responsiveness ideas related to this and how that’ll ease much of these tensions in time.
  • Onboarding to the FSE experience was brought up, particularly around how confusing it is that the 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. label still exists since that seems to imply it’s not usable. There’s an open discussion around removing the beta label (in time) on this exact topic.
  • The question came up around “How do we get folks to use block themes if there’s a beta label?” and how difficult that can be.
  • @poena has a post on switching over to a block theme, Ellen is working on a post for a 10 step process, and there are clear areas that can be improved to ease this process from a technical point of view in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (see “Ease switching to a block theme/between block themes” in this post).
  • People are very confused about when to switch in general though, even if folks like Ellen are building things that are ready to go for production sites.

Communicating the value of FSE

  • Nick has done some hardcore testing with folks who are new to the site editor and when watching them go into the experience and they change the typography of paragraphs but then can’t with headings! Why? We need to take a look at consistency across the tools we’re providing people. People get very frustrated and confused when one block has controls and another doesn’t. 
  • Block themes truly is a better experience for getting a design into WordPress but the confusion added is a bit sad for the project that it gets a rough reputation.
  • Right now, it feels like more of a communication issue to the end user around what they should actually do and what they can do with consistent communication. Figma does this well.
  • This has come up in DevRel for WP Engine. When you’re talking about the basics of how to do XYZ, this should be on Learn and in docs. When you’re talking about the cool, cutting edge stuff, we need more of that. “Here’s how to learn the basics of creating a block theme but here’s how to take it to the next level.” 
  • We discussed how if we can standardize block settings across all core blocks but allow agencies to turn on/off easily that’ll be huge for the user experience.

Patterns and opening up tooling

  • We spent some time chatting about issues for unifying the pattern modals and patterns as sections work since having consistency in the interfaces for patterns and in the larger editor can really help folks take advantage of what’s possible.
  • In many ways, it feels like users can rely on patterns and/or learn by doing over time as they explore more tools. As a result, exposing those tools doesn’t feel as risky as a pattern can guide the experience and, if they do want to dive in more, they can have access to the tools outright.
  • We discussed how valuable locking is when it comes to patterns as a way to curate and guide the experience more.
  • We went back and forth on the question of “How do we get people excited about what’s possible rather than worrying about folks breaking things?”

Difficulty with terminology

Naming of bock themes and the theme directory

  • We talked about how there have been different names for block themes, like “full site editing theme” or “block-based theme”. This is causing confusion and also differs from what shows up in the Theme Directory.
  • We discussed how difficult it is to find block themes in the directory since the tag you have to use is “full site editing” , which both isn’t intuitive and hard to find.
  • This led to questions around having a separate menu item for themes or improving the 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..
  • Ellen shared how it’s unattractive to put free themes in the directory – “who clicks on FSE to filter?” Discoverability is so low – it’s not featured enough. She shared that they don’t put any effort into free themes. 
  • We all felt that the entire theme directory was due for an overhaul but were curious about what some quick solutions could be for now to make it more attractive and interesting to add block themes there.
  • Perhaps there could be a block label in the section below:
Image of the theme directory filtering showing the number of themes, a popular, latest, and feature filter label.

Limitations of the pattern directory

  • In talking about the theme directory, we discussed how neat it would be to find patterns associated with different themes, partially as a way to entice people to download that specific block theme and improve the user experience.
  • Ellen brought up how it’s not possible to add patterns to the pattern directory that use third party blocks. This sometimes prevents submissions for block themes who have specific blocks for their theme. 
  • We discussed how the pattern directory is overwhelming for users yet also limited: you can’t use named variables for color palette + can’t use third party blocks + no curation. 
  • The crux of the problem is t hat block themers are creating blocks to fill gaps with core right now which then limits what can be added to the pattern directory.
  • We discussed how there perhaps could be a filter to allow for third party blocks vs Core blocks. For those who want to venture into needing third party blocks, they could then opt in by filtering to show those.
  • @shaunandrews recently shared a post about 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 dependencies so some of that thought/design could likely be re-used there.
  • Nick shared how for the new feature in 6.0 where block themes can feature specific patterns from the directory, it’s still not granular enough. It would be nice to be ale to disable all patterns but then bring in a few from the directory to feature. There’s an issue open for this topic already!
  • We ended the call talking about how these dynamics often fragment the community  – people building premium themes or patterns rather than using the Core pathways. This then moves everything away from Core distribution channels and harms the community/branding/experience of WP.
  • Ellen described it as feeling like you’re building against something.
  • We ended the call talking about how important it is to share feedback, engage in discussions, and help influence the direction of where things go so we can get to where we need to.

#fse-hallway-hangout, #fse-outreach-experiment, #fse-outreach-program

FSE Program Rallying Recipe Reviewers Summary

This post is a summary of the fourteenth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Shout out to @alixnotes for being the sole first-time contributor for this call for testing. Get excited – you will soon have a testing contributor badge on your WordPress profile!

High-level summary

Across many of the responses to this call for testing, it was quickly clear that folks found the Template Editor via the Post Editor uniquely confusing, especially after growing used to the Site Editor. Because of how the Template Editor interacts or doesn’t with the Post Editor, a few folks struggled to understand when they were editing the template vs the post itself. In terms of the next editions of the List and Quote 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., there was general excitement around the new capabilities, especially once some refinements and bugs are addressed around keyboard controls for the List block.

To help ground the following feedback, here are some quotes about the overall experience to keep in mind: 

The new Quote block worked well. It is now possible to add nested blocks inside it, one of the features I have long needed as a writer here at the Tavern when quoting from third-party resources…Overall, I am eager to see the finalized versions of these blocks. They will bring back some of the missing functionality from the classic editor and give users the flexibility to do even more.

@greenshady in this WP Tavern post. 

I only got halfway through the FSE #14 because I got too frustrated with the comments part of the challenge. I spent 40 minutes on it, and here’s my biggest takeaway. 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.

I really prefer not to use the Post Editor template system and instead keep all templates in the Site Editor. As it creates a consistency in how templates are created. The Post Editor template system is very different compared to the Site Editor template system. It creates a confusion in how templates are created. I look forward to being able to create multiple Post and Page templates in the Site Editor and have a simple system to where I can choose which posts and pages to attach any template to.

@paaljoachim  in this comment.

For any designers and developers who want to see someone walk through the experience, I want to also mention the following videos to check out and skip around to see the call for testing in action:

Here’s an example of what was created from @greenshady for this call for testing (he went above and beyond per usual): 

Page showing a simple recipe on spaghetti tacos with tips from readers.

Here’s another example of what was created with a lovely color palette by @alixnotes:

Page showing a simple recipe with an image of macaroni

Confirmed Bugs

One of the testers for @courane01’s session experienced the editor crash when testing list view and attempting to modify a color but I was unable to replicate this across a few different attempts. Outside of that, the following bugs were found:

When I added a sibling list item, the cursor was not in the item to start typing; I had to manually place the cursor in the list item.

@antigone7 in this comment.

Feature Requests 

Since this test explored two experimental iterations of current blocks (List and Quote), much of the feature requests centered on these items. 

It would be nice if I could copy and paste a list and have it automatically detect that and make it a list.

@courane01 in this comment.

I assumed that the Add citation would be an inner block. I also assumed that I would be able to add padding/margin to the block. Both things are missing. 

@paaljoachim  in this comment.

A new template can only be created by going to a post and clicking on “New” in the settings under Template on the right. It would be much more intuitive if you could create a new template directly in the editor.

@hage in this comment.

Markdown-based lists are also not transformed into a List block when pasted into the editor. The formatting is lost, and each item gets absorbed into a Paragraph block.

@greenshady in this WP Tavern post. 

General Usability

As lightly mentioned in the high level overview, much of the feedback fell into this categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with folks confused by the Template editor via the Post Editor, unsure of when they were editing the post vs template, and struggling to get layouts to cooperate (especially when it came to width controls). Sometimes these issues all combined with folks editing post content rather than the template and unable to adjust the width as they wanted as a result. Additional quotes are added below to better provide context:

For this final item, here’s a quick video demonstrating the problem so folks can better understand this specific pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life in the template creation process:

I also had difficulty making the Comments section the same width as the Content Group. If I used a Group Block to contain the Comment 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., then the comments themselves could be reduced in width (using the Inherit Layout option) , but the borders were still the full width.

@antigone7 in this comment.

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 arn’t the same settings (where appropriate) in all similar blocks – ie padding, margins, width available in both groups, and columns?

@alixnotes in this comment.

Still in the template editor I went to view the post. Then trying to get back to the template editor I got the page editor which informed me that there was a saved version that contained changes. (I have been caught by this before – on my own site when making changes in the templates and then going to the page editor, if I had clicked on the revert to saved I potentially might have lost all the changes that I had just tried to make. This is confusing!).

@alixnotes in this comment.

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.

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 Avatar block in the Comments Query 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.

#fse-outreach-program, #fse-testing-summary

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (25 May)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@ndiego @karmatosed @shaunandrews @beckej @fabiankaegy @dhansondesigns @codemanas Colin Duwe

Video Recording:

Topics

Style variations

  • Started off checking in on the new Global styles ongoing roadmap overview issue.
  • Ed discussed how he wishes there were options to pick and choose only certain parts of style variations rather than whole variation.
  • In order for that to be an option, there needs to be a combination of improvements/changes including more granularity with saving, the ability to partially switch styles, and exposing more style options. This is somewhat touched on here.
  • Overall, the resounding question was “How can we make it less overwhelming for users?” especially if they might want to take advantage of aspects of the style variations without switching entirely.
  • Right now, there are two extremes without much ease for middle ground options: all the options to customize in Styles vs wholesale full switching between styles (with variations). 
  • What could we offer for theme developers? If we can extend this for themers, they can manage more granular options for their users rather than CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

How can we curate the experience? 

  • Colin brought up a very important topic around curating the experience for folks, especially clients. He asked whether there was an issue that summarized the various approaches being taken (there is not and I followed up after around perhaps creating a Discussion issue).
  • This led to a conversation around various curation options 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., template locking, and 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. locking, including being able to control who can do block locking with filters.
  • The question of “How can you build a theme and lock things down/curate for clients?” at the same time came up.
  • For example, clients need to be able to edit the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. and 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. but don’t touch the logo on the left! You could lock various items down to ensure things aren’t deleted. 
  • In general, there was agreement that the power lies between theme.json and locking options. 
  • During this conversation, a few folks from the agency world mentioned how theme.json is only useful if it works in tooling for existing agencies and design systems. For example, people are struggling a bit switching to theme.json from CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.
  • While, in time, folks should be able to rely on the site editor to build a theme, it’s a big workflow change regardless and not everyone is going to build from there. This is where the power of import/export functionality will be key.
  • Trying to push towards doing these things in theme.json but the amount of uncertainty around even just simply adding a theme.json feels nerve wracking. 

Explore options for standardizing and extending theme.json design tokens for spacing

  • We touched on the desire to standardize spacing options and have the same t-shirt sizing/spacing scale that is being done with typography controls. This will help guide the user while also give them flexibility to choose from some presets.
  • By having standardization, it’ll be easier to have content portability/theme switching/etc.
  • This conversation led to a discussion around how inconsistent the dimension controls are across blocks. It’s hard to know why one option is available in X block but not Y. There’s a sense they should all be available.

Split block tools between “settings” and “appearance” 

  • The initial reaction from two folks was “Ahhh two sets of tabs!” when first seeing some of the designs.
  • When thinking about the various tools, this brought up the question of “What’s a primary or secondary tool for each block?”. It seems wise for an audit of some sort to occur.
  • These pain points relate to both blocks not all having the same controls + understanding what’s in block toolbar vs 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..
  • For folks in the agency world, there’s also an element of how different people need to look at each set of tooling (visual vs content focus) depending on what they are doing (are they a designer or a copy person?).
  • Keynote was shared as an example of an application that manages this experience quite well.
  • We went through the 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. block as an example of current pain points.

Rows/stacks/group: variations or new blocks?!

  • Right now, the transformation is in sidebar rather than transform menu. There’s an issue open to add the variations to the transform menu.
  • We briefly talked about when does it make sense to have as a standalone block with different controls being exposed rather than variations that comes with inherent limitations? 

New Blocks Adoption label

  • We ended by briefly touching on a new label for items that block adoption for these features.
  • If folks have any they want with that label, please do just let me know and I can add it in!

#fse-hallway-hangout, #fse-outreach-program

FSE Program Testing Call #14: Rallying Recipe Reviewers

This post is the fourteenth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental 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. 

Overview

This call for testing focuses on taking a few blocks for a practical spin to create a fun, interactive recipe focused site that has a customized commenting experience to rally your recipe reviewers. 

New Quote 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.

For your favorite recipe reviewers who leave behind their own tweaks to your recipes, you’ll explore adding in quotes from them using the new quote block. Currently, this is still in the experimental stage so get excited to report some bugs. Specifically, this new quote block supports using nested blocks, meaning you can add headings, lists, and more within a quote. 

New List Block 

Get ready to get detailed – your recipes require lots of ingredients with alternatives in case folks don’t have them. We’ll rely on the new list block to accomplish this since it includes a different UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. to explore. 

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. blocks

Pulling from this specific call for testing, there are a ton of blocks for you to explore and build your desired commenting experience, with more to come as more functionality is supported in each block: 

  • Comments Query Loop: An advanced block that displays post comments and allows for various layouts and  configurations.
    • Comment Template: Contains the block elements used to display a comment, such as  the title, date, author, 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. and more.
    • Comments Pagination: Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin
      • Previous Page: Displays the link to the previous page of comments.
      • Page Numbers: Displays a list of page numbers for comments pagination.
      • Next Page: Displays the link to the next page of comments.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.9.3 (downloadable here).
  • Use the Twenty Twenty-Two theme.
  • Use 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/ 13.1 or the latest version (latest version). 

Testing Instructions

Setup Instructions: 

  1. Have a test site using the latest version of WordPress (5.9+). It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes.
  3. Install and activate 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 13.1.
  4. By the end of these steps, you should see a navigation item titled “Editor (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.) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes. 

Testing Instructions:

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content. 

Add a new recipe post

  1. From your dashboard, head to Gutenberg > Experiments and turn on both the Quote and List experiments by checking the checkbox by each and saving (screenshot of what you want to see). 
  2. From your dashboard, head to Posts > Add New. 
  3. Title the post “May Macaroni” and add in a brief sentence for now (“Welcome to my latest monthly recipe where I’ll share the recipe I’m most excited to make in the month ahead”). Publish the post. 
  4. View the post on the front end and quickly add a few comments to the post. They can be brief like: “Great recipe!” & “Can’t wait to make this”. 

Create a custom template for recipes

  1. Return to the Post Editor where you just published your post, open the Post Settings, and, under Templates, select the “New” option.
  2. A name field will appear. Title the template something recipe related, like “Recipe Template”, and hit the create button. This will open up the template editor. 
  3. Customize the template as you’d like to start. For example, you can add in a 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. template part that matches the wider site, change the font size of the post title, and more. You are likely going to want to add in a Header and Footer Template part at this stage using whatever method you like to add blocks. Remember that you can search for “header” and “footer” too! 

Customize commenting functionality 

  1. Where you see fit, add in the Comments Query Loop block. When you do so, various child blocks will be included. This is where using List View can help you get a sense of what’s there. 
  2. Explore the settings available for each block and begin customizing. This includes removing or adding additional blocks mentioned above under “Comments Query Loop blocks”, adding custom colors, changing font size, etc. You could also wrap the Comments Query loop in a Group block in order to add custom bordersHere’s a screenshot for inspiration that shows what you can do if you have time.
  3. As you go, save changes and view your post to see what you’re creating live on your site. As much as you can, try to make the comments area an engaging and welcoming spot for your recipe reviewers.  

Write your recipe with quote and list blocks

  1. When done, save changes to your template and hit “back” to return to your post itself. 
  2. Add a list block and begin listing ingredients (pasta, cheese, pepper, milk, pepper, etc). Here’s a recipe you can pull ingredients from in case you’re like me and need some inspiration. Notice how you can still hit return to add new list items and that you can use the + sibling inserter to add sub items. 
  3. Under a few ingredients, use the + sibling inserter to add in some alternatives. For example, you can list types of cheeses (provolone, cheddar, goat cheese). Aim to create something like this screenshot
  4. Add another list block and switch to numbers in the toolbar to list out cooking steps. These can be simple: Boil water, add pasta, cook for 10 min, add cheese, and taste. Try adding some sub items once more. For example, you can list different cook times depending on how folks like their pasta. 
  5. After the ingredients and steps are listed, add a heading block titled “Recipe Insights”. 
  6. Add in a quote block and create a quick quote from the point of view of a reader of the site who might have some tweaks to offer. Be sure to include some different blocks like another List block, Headings, etc. Here’s a screenshot of an example
  7. Create a few quotes as you so desire and have time. 
  8. Update the post and make any additional changes you’d like to the post or Recipe Template itself. 

Make yourself some pasta and pat yourself on the back. Thanks for testing and remember to leave a comment below about your experience!

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by May 18th, 2022

You are always welcome to join a social learning space to go through this call for testing on May 2nd. All are welcome to join and we hope to see you there!

#fse-outreach-program, #fse-testing-call

FSE Program Authoring an Author Template Summary

This post is a summary of the thirteenth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Shout out to @hage, @antigone7, @robglidden, @azhiyadev as first-time contributors. Get excited – you now have a testing contributor badge on your WordPress profile!

High-level summary

To help ground the following feedback, here are some quotes about the overall experience to keep in mind: 

The most frustrating thing to me is still, hands down, the lack of a clear, consistent visual cue or affordance to insert 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. on a new parent level after an existing block. Most of the time, when adding a block using the [+] square, the new one is inserted right there, still as a “child” block. List view often comes to the rescue and helps a lot. Without it, everything would be much, much harder to build..This, and the current lack of consistency in styling and spacing options between blocks (some have margins, some don’t, some have colors, some don’t, etc.) is still, in my opinion, one of the main factors keeping users from jumping ship from site builders. 

@piermario in this comment.

Outside of the user-experience issues noted below, everything went well. No editor crashes. No problems saving. And the front-end matched what I was seeing in the editor.

@greenshady in this WP Tavern post.

Outside of these quotes, a few items proved to be repeatedly mentioned by folks who gave feedback on this test: 

To provide a visual of what this test accomplished, here’s what @greenshady created in his write up for this call for testing:

Author template with a nice header showing a menu, site title, and author description on a light beige background.

Confirmed bugs

Listed below are confirmed bugs that break expected functionality or the experience of different features. 

Previously reported

New Issues

Feature Requests

Most requests in this section touch on items that would improve the experience of an option (quick inserter prioritizing patterns) or block (No results block) rather than a list of desired new functionality. This reflects the fact that much of what folks wanted to do in this call for testing they could reasonably accomplish compared to prior calls.  

New Issues

Previously Reported:

I did not know about the “No Results block”. That was interesting to learn about. Perhaps it should automatically be added with the default text if there are no author posts to show.

@paaljoachim in this comment

The Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. block under the 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. doesn’t have an option to adjust the excerpt length. (The Latest Posts block does have this option.)

@piermario in this comment.

Working with the block felt odd at first. Where does it go? After the Post Template? Before?…It was also odd to visually edit a feature that is conditionally displayed. There should be an indicator that its contents may or may not be shown on the front end…Overall, the No Results block is a welcome addition to the theme-blocks toolset. I would like to see the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. fleshed out a bit. Theme authors will likely start using this more when 6.0 lands, and I could see users inadvertently trying to delete it, thinking it is part of the default output.

@greenshady in this WP Tavern post.

General Usability Feedback

Once more, this call for testing showed the desire to avoid starting from scratch, more consistency across the experience (especially with what options are available to customize blocks), and more connection points between new options. In particular, the inability to link to the Author Template one customized in this call for testing using the Post Author block was repeated numerous times as a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. The missing connection there lowers the impact the new author template could have. While this won’t be available for WordPress 6.0, expect to see the option to do so included when the new Post Author Name block is included in a future WordPress release:

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 HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. and index.html files, ancestors in the template 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 post

I feel that menus were a lot more intuitive and easier to manage with the previous system. I wish there were a way to basically tie back the new blocks to a similar interface, which had become familiar and was easy to use even for non-experts.

@piermario in this comment.

I find it difficult in viewing the author template on the frontend and had to use your advice: yoursiteurl.com/author/[username].

@paaljoachim in this comment

I had expected that after locking the group block at the header, the cover block contained in it (for example) could also not be moved. But that was possible without any problems. In my opinion, another option would make sense here: Lock all blocks contained in the block. If a group block contains several other blocks, it would be very time-consuming to lock all of them.

@hage in this comment

#fse-outreach-program, #fse-testing-summary

Help Wanted: Test WordPress 6.0

It’s coming – WordPress 6.0 is scheduled for release on 24 May 2022. And to make it there we’re calling all testers 📣 to kick the tires and help ensure its 400+ updates and 500 bug fixes handle like a dream.

For a list of when each pre-release build will be available, check out the WordPress 6.0 Release Schedule. And drop on by the #core-test Slack channel for a quick Howdy, where we’ll be running scheduled team meetings, as well as impromptu test scrubs throughout the release cycle.

Table of Contents

Testing Environment

Please only test on a development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and not on a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer., or use a tool like this to set up a development site.

Once your development site is set up, please install and activate the WordPress Beta Tester Plugin and configure it to:

  • Update channel: “Bleeding edge”
  • Stream options: “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./RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only” (you may need to save channel changes before this option appears)

If you need more detailed steps, here are the full instructions.

Testing Tips

At a high level, there are a few tips to keep in mind to get the most out of helping to test:

  • Test across different browsers.
  • Test in different languages.
  • Compare features on different screen sizes, including tablets and mobile.
  • Use just your keyboard to navigate, or use a screen reader.
  • Test with both 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 classic themes.

Important Note: Anything marked as [Technical] is best for those comfortable with more advanced testing steps.

Key Features to Test

The following list identifies some important new and modified features in WordPress 6.0, and should be the focus of testing efforts from here through release day. Items identified as [Major] constitute functionality that requires the most review.

Editor

Style Switching with Variations [Major]

Building on WordPress 5.9’s Styles interface, the editor now supports multiple style variations, enabling site owners to easily switch between a theme’s default or custom designed styles. Styles can be applied to the base site, or to any block. Variations can also be pre-configured by theme authors in theme.json.

With WordPress 6.0 Beta 3 or newer and the Twenty Twenty-Two (TT2) theme active, you’ll have access to preview and test the Styles variations feature.

For detailed steps around how to test Styles, please see this previous call for testing and the official Styles documentation.

For any block theme authors, please see this post to learn more about how to adopt and test this feature.

Expanded Template Types [Major]

We’ve received a lot of constructive community feedback regarding template types that were introduced in 5.9, and this area continues to evolve, introducing author, date, categories, tag, and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. types. You can find each of these template options in the Site Editor when viewing the overall Templates List:

For detailed testing steps on creating custom templates, please see this previous call for testing.

Easier Template Part Creation [Major]

Now site editors can add existing or create new template parts and patterns with the block inserter (using the + icon or typing / at the start of the block):

For information on testing this feature, please see this previous call for testing.

Writing Improvements

Numerous general improvements that can streamline content creation debut in 6.0. Here are some new features to help test directly: 

  • By popular demand, select text across multiple blocks (it’s like magic).
  • Pick a pattern on page creation. Start with Twenty Twenty-Two, but you can also try this with other themes.
  • Wikilink style internal link completer shortcut, for quick internal links. Trigger with [[ inside a text block.
  • Customize buttons and ensure that styles for new buttons are copied from the adjacent buttons.
  • Gallery block: Add/edit media directly from block toolbar and use gap support to create new layouts. 
  • Improved style preservation between block transforms, and new transform options:
    • Logo to Title
    • ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. to Content
    • TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. Cloud to Categories
    • Calendar to Archives
    • Paragraph to Code
    • Group to Row
  • The Tag Cloud block now supports outline style and min/max font sizes. Find these options in 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..
  • Social icon label visibility can now be toggled.

Try using each of these options in a new post or page and report back any rough points you encounter.

Block Styles Redesign with Preview

It’s now easier to peek into several block styles with a redesigned interface and a snappy hover preview. To test this feature, add your favorite block that comes with several block styles (Quote, Image, Table, etc) open the sidebar, and explore the style options.

List View Enhancements

List View has a few enhancements to explore and give feedback on. For testing, it helps to try out List View in a template or post/page that has different types of blocks and lots of them. Please test the following new options: 

  • Select any block you’d like and List View will open to the exact location.
  • View the structure of your content thanks to a refined interface that shows a collapsed view at default.
  • Use new keyboard shortcuts (shift + click) to select multiple blocks to bulk modify (reposition, delete, etc.), including the ability to drag and drop.
  • Quickly see any locked blocks at a glance thanks to lock status being reflected. 
  • Explore 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) improvements with better keyboard controls and improved screen reader announcements.

To learn more about this feature, see the official List View documentation.

Blocks

Cover Block as 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. [Major]

WordPress 6.0 introduces another top item on many a user’s wish list: setting featured images to Cover blocks. Try this feature in conjunction with a template for your posts or page since this means you can now have your Post Title block layered on top of your featured images.

More information on testing featured image cover blocks can be found at PR 39658.

Comments Block [Major]

The comments 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., once relegated to the world of PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. footer includes, is now a full-fledged block. Add and style comments visually!

For more information on testing the Comments Query Loop block, see this current call for testing.

Block Locking UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. [Major]

Previously only available to theme developers, the power of the block locking 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. is now available to site editors in 6.0. Lock down important blocks to prevent accidental changes. The API now also supports reusable blocks. You can find the locking options in the ellipsis menu of each block:

Testing details can be found as part of the Authoring an Author Template call for testing.

Navigation Block

Progress continues with styling and usability around the Navigation block, which was first introduced in 5.9. Test out the most recent interface improvements and styling options.

More detailed testing information for the latest iteration of the Navigation block can be found as part of the previous Hyping Headers call for testing.

Design

Expanded Block Design and Layout Options

More options and finer-grained layout control can be found with the following list of visual updates. Please explore creating what you can as part of testing and remember that this is just a glimpse as many design tools are already currently available:

  • Use the Group block variations, Stack and Row, to create different layouts. 
  • Select your size when using the Featured Image block.
  • Border controls have been greatly expanded with an updated controls panel.
  • Layout transforms when multi-selecting (new flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
    ) for quick creation.
  • Try to create a customized sidebar with gap support, margins, and typography controls using a Group block in a Columns block.
  • Add borders to Columns blocks.
  • Take advantage of gap support being added to the Gallery Block to have access to a wider variety of layout possibilities.

Theme/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 Development [Technical]

Webfonts API [Major]

The new Webfonts API promises to streamline the registration of locally hosted web fonts, providing theme developers more flexibility and consistency across sites.

As of WordPress 6.0 Beta 3, theme authors are now able to implement webfonts via theme.json, and the official Webfonts API will be available to extenders in a coming version of WordPress.

For implementation and testing guidance on the Webfonts API, please see PR 37140.

Block Theme Export [Major]

Explore the new additions for block theme exports as this feature continues to evolve toward codeless visual block theme building:

Try making changes and exporting in order to ensure those changes are captured correctly. 

Style Switching with Variations [Major]

As mentioned above, the Styles interface now supports multiple variations, which can be preset in a theme. Information on adopting and testing this feature can be found at this previous #core post. Keep in mind that to test this you need to use a block theme that supports this feature and/or add in your own style variation to the current block theme you are using. 

Where to Report Feedback

If you find any issues, it’s best to share them on the alpha/beta forums, or on Trac if you are more technically savvy and comfortable. Please share feedback as soon as you can before the release on 24 May 2022.

A big thank you to @annezazu and @juanmaguitar for reviewing and contributing to this post.

#6-0, #fse-outreach-program, #full-site-editing

Changelog

  • 2022-05-10
    • Added links to forums and TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. for tester feedback.
  • 2022-05-03
    • Noted that builds of WordPress 6.0 Beta 3 and later include TT2 styles variations and bring webfonts support to theme.json.
    • Updated styles variations demonstration video.
    • Clarified that the official Webfonts API will be available in a future version.

FSE Program Hyping Headers Summary

This post is a summary of the twelfth call for testing for the experimental FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Shout out to @itsjustdj as the sole first-time contributor for this call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!

High-level summary

The feedback this time around focused on the edges of the experience, especially in terms of design tools, and on some key problem areas that have repeatedly come up around navigating the entirety of the experience, like knowing what templates are used where. On the whole though, there were no deal breakers, big crashes, or show stopping problems found. Here’s what a few people had to say about the experience that can help frame the following more specific feedback:

On the whole, this went surprisingly well. In a year, the site editor has become far more powerful…Without responsive controls on layout-type containers like the Columns 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., designing anything complex with the site editor can sometimes feel like one giant hack…There are tons of improvements with block design tools in comparison to last year…I hit no spacing-related problems in this experiment. That feels gratifying to say after over a year of testing FSE features. The experience of designing from within the site and template editors feels pretty smooth these days. The holdups are more about missing capabilities than anything.

@greenshady in this WP Tavern post

The Typography settings are particularly satisfying to play around with. It’s nice to have lots of design options before having to use custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..

@itsjustdj in this comment.

Most of these things are editable in FSE, but it feels like it is up to the creator to explore and it feels a little like a scavenger hunt. I wish there was a way to surface the most important decisions in a linear way. Some kind of “Start Here” guided walkthrough that pros would ignore, but help casual users understand the capabilities of Full Site Editor.

@beckej in this comment.

The ease of laying out the 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. with rows/columns and dropping in site elements (logo/site title/navigation) was awesome.

@cdils in this comment.

Here’s an example of what @greenshady created in his write up on this call for testing:

Header of a pizza restaurant with three different menus in separate locations over top of a picture of pizza.

Of note, since most feedback fell into the usability and feature request categories, the format of this post breaks down by feature more than recent ones that tend to stick with Bugs, Feature Requests, and General Usability headings to make it easier for those working on specific features to follow.

Potential bug

For the first time in this program’s history, zero bugs were found that could be replicated. However, there was one report that I was unable to replicate or find similar reports for that I’ll share below in case someone else can:

I added a spacer block below the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. and later went to delete it. It moved the content of my site around and my navigation menu was gone, so I reloaded which lost anything that wasn’t saved. It also crashed when I was adding Header Dark Small to the Blank template.

@courane01 in this comment. Check out the comment for more details.

Templates and template parts

With more options available for templates and template parts, there’s an increasing need for better organization and more clarity in the interface to understand the impact of changes, big or small (adding a new template vs editing a template part). This is compounded by the fact that most folks don’t have a strong grasp on the template hierarchy built into WordPress. With newer modes like the focus template part mode, there was also some confusion around why this should be used. This is partially due to lack of awareness around how it can be used in the future as a gradual adoption pathway and due to those pathways not yet existing visually in the editor.

The subtle differences between the FSE screen and the “Focus Mode” screen are a little confusing. Specifically, I really LOVE the new “Replace” button to choose between an existing template or a Pattern. But I wish I could “Replace” with a Pattern even in focus mode. If I came to this screen to really work on my header, why would I have less options here than I have when looking at the full site?

@beckej in this comment.

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.

Trying to select the correct group, row, or block in the layout can be hit or miss. When I think I’ve selected the correct one, I accidentally edit something else.

@itsjustdj in this comment.

Isolated mode. I do not see a purpose why I should use it. As I can instead just edit the template directly in the site editor.

@paaljoachim in this comment.

There was a small dot in an accent color under the “Added by” column on the Template Parts screen that (I think) indicated the original template part had been edited. Something a little more obvious there would be nice (for instance, under “Added by” maybe it says [Theme Name], edited by [user]).

@cdils in this comment.

Design tools

Since this test focused specifically on using the Navigation block, various missing customization options came up, particularly for anyone trying to do anything more complex than the average menu. The feedback here echoed previous rounds and underscores the importance of the work that’s underway to expand what’s currently available

The Navigation block may be my least favorite thing about the site editor. I have yet to see how it will offer a universal system that plays well with the 1,000s of design variations that theme authors will want to employ. Classic nav menus are still vastly superior for custom design.

@greenshady in this WP Tavern post

Patterns

With patterns being increasingly integrated into the site building experience, new pieces of feedback are arising around pattern management. This includes everything from naming best practices to when options should appear to swap between patterns and more. 

Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue.

@beckej in this comment.

General Usability Feedback

Cutting across the entire experience, familiar feedback came in that touches on some key pain points in the current version of site editing. All of these items have been previously reported:

Of note, it feels important to call out recent work in progress in the dedicated UI for navigation structure, since this both improves the information architecture by grouping site wide tools and implements a form of browse mode many have asked for to make it easier to see more parts of your site as you create. 

Clicking Header or any template section is somewhat difficult, as it easily selects blocks inside of it.

@paaljoachim in this comment.

I miss some of the common controls that were part of every WordPress Customize screen. I wanted to edit my site to have a static homepage and a blogroll elsewhere. I feel like homepage settings, custom css, menus should be somewhere in the FSE experience.

@beckej in this comment.

#fse-outreach-program, #fse-testing-summary

FSE Program: Answers from Round Four of Questions

This post is part of a wider series that provides answers to questions gathered through the FSE Outreach Program. This round of questions was started on March 16th and ended on March 30th. Thank you to everyone who submitted a question so our knowledge can grow together! Stay tuned for future rounds and join the FSE Outreach Program if you’re keen to both learn more about these features and help shape how they evolve.

Continue reading

#fse-answers, #fse-outreach-program

FSE Program Testing Call #13: Authoring an Author Template

This post is the thirteenth call for testing (lucky number 13!) as part of the Full Site Editing Outreach Program. For more information about this experimental 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. 

Overview

Ahead of WordPress 6.0, new features and options are rapidly being added that expand upon the foundation 5.9 set. The result is this test that walks you through creating a template for your author pages, locking blocks to prevent removal or movement, new design options, a new No Results 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 more. Simply put, this was the most fun I’ve ever had writing any test for this outreach program.

Expanded template options

To put things in perspective, 5.9 saw the launch of the Site Editor where you could only create a limited number of additional primary templates. Ahead of 6.0, the options are now far more open with the ability to add the following: Author, CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., Date, TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post., TaxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies.. Stay tuned for more options here in the future! This test will focus on creating an Author template.

Direct ability to lock blocks

Similarly, while the block locking API was released in 5.9, an interface for it didn’t exist until now. What you’ll explore in this test around locking the ability to move or remove a block is just a start too with more work to be done around further permissions like being able to disable the ability to lock / unlock globally or per user role. Having a quick and easy way to prevent unwanted changes is a huge step, whether to help pass off work to a client or to reduce the chance of mistakes for your own sake. 

Customize what no results look like

The 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. block is also getting even more powerful with the new addition of a No Results block that allows you to customize what folks will see when nothing matches the query at hand. This means you can both have an elegant design for displaying content and for guiding people when there’s not. For inspiration, here’s what I came up with on my test site while writing this:

No results

No results page with a message saying an author doesn't have any posts yet and a nudge to sign up for a newsletter.

Results

List of recent posts from an author and a thank you message.

More design tools

Finally, with each release, more and more design tools and dimension controls are being added to allow you to customize things to your liking (or leave them as is). Don’t overlook this as part of the test, especially when you get to the stage of styling what you’ve created. 

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.9.2 or the latest version (downloadable here).
  • Use the Twenty Twenty-Two theme. If you’d like to repeat the test or switch things up, you can always use a different block theme.
  • Use 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.9 or the latest version (latest version). 

Testing Instructions

Setup Instructions: 

  1. Have a test site using the latest version of WordPress (5.9.2 as of writing this). It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the `Full Site Editing`  listed as a feature. 
  3. Create at least two posts with different titles.
  4. Create a new user on your site by going to Users > Add New. Set the Role to at least the level of “Author”. Here are instructions to follow.
  5. Install and activate 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.9.
  6. By the end of these steps, you should see a navigation item titled “Editor (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.) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes. 

Testing Instructions:

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content. 

These instructions are more general as they will change depending on what theme you are using. In general, you should explore a few things with this test so, if the steps don’t align with what you see, either switch to the Twenty Twenty-Two theme for ease of use or ensure you cover each of the features mentioned in the Overview section. 

Create an author template

  1. Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 
  2. Once there, open the W menu (if you have a set site icon, you will see that instead) > Templates. This will open up the template list.
  3. Choose “Add New” > Select “Author”. This will open up a new blank template that displays the latest post from a single author. 

Add your structure

  1. As you’d like, add any 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. or Footer template parts. You can do this by searching directly for “Header” or “Footer” or by adding the template part block and selecting the one you’d like. 
  2. In between the template parts, add a Group block. Within the Group block, add a Columns block set to 70/30. 
  3. In the larger Column, add a Query Loop block and select whichever option you’d like.
  4. While selecting the Query Loop block, open the block settings 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. and ensure the option “Inherit query from template” has been selected. 
  5. While still focused on the Query Loop block (you might find the List View helpful at this point), use the quick inserter to add a No Results block. Here’s a quick video in case you get stuck here. 

Customize the No Results block

  1. Customize the No Results block as you’d like. This block will display content when no results are found. You can add something like “Check back for future content from this great author that we are lucky to have write with us” and/or you could add the “Subscribe Callout” pattern to nudge folks to subscribe to the site. 
  2. Once done, select the overall No Results block > Open the three dot menu > Select “Lock” > Check “Prevent Removal”. This will prevent folks from accidentally removing this without unlocking it first since it might not be obvious at first what the role is of this new block.

Style the rest

  1. From there, select the smaller Column and add whatever you’d like as a sidebar. For example, you can add a latest post block to show all posts on the site regardless of author or you can add social icons. 
  2. Select the overall Group block that you originally added and open the block settings sidebar. Explore some of the new styling options like Border control, padding, block spacing, color controls, and more. 
  3. Do the same with any other block you’d like before selecting the option to Save. For example, you can alter the font appearance, font size, colors, and more. 

Lock and view

  1. As you see fit, lock any block you’d like to as well either to prevent removal or movement. For example, you could lock the Header and Footer template parts to prevent them from being moved.
  2. Once done, view the author page of the account you are logged into to see posts displayed and view the author page of the account you created that doesn’t currently have any posts. You can find the author page by going to yoursiteurl.com/author/[username]. Here are the examples from my test site: author with posts, author without posts.

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing while creating the header?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by April 21, 2022

#fse-outreach-program, #fse-testing-call

FSE Program All Things Media Summary

This post is a summary of the All Things Media exploration for the FSE Outreach Program. Coming out of a pause from 5.9, it was so encouraging and wonderful to see the wider community help out with this exploration in the following ways: 

Shout out to the following folks as first-time contributors to a call for testing: @patrick-b, @ndiego, @beckej, @lidialab. Get excited – you now have a testing contributor badge on your WordPress profile!

High-level summary

While normally, there are some overall sentiments to share, this exploration was so wide ranging it’s hard to pull out a few quotes to ground the following feedback in. Instead, here are some patterns seen across the varying areas below that help bring together the feedback more cohesively: 

  • Emphases on making attribution easy while also allowing for the ability to 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. out images that require it, as few seem keen to use images that would. 
  • Inconsistency with tooling, whether using duotone to select a custom color or trying to crop an image in a gallery 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.
  • Desire for more expansive options, including featured images and adding YouTube videos as a background. 
  • Simplifying layout controls and increase in patterns to make it easier to place your content exactly as you’d like in a 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. or as a full width visual. 

In each section, the items are divided when appropriate into previously reported vs new categories in order to better understand what was underscored as part of this exploration compared to what was found. 

Confirmed bugs

Listed below are confirmed bugs that break expected functionality or the experience of different features. 

Previously reported: 

New issues: 

The default dimension is highlighted as 100% but in-fact if clicking on 100% again usually modifies the image size on the editor. It is a bit confusing.

@alanjacobmathew in this comment

Feature Requests

Throughout each of these feature requests, there’s a clear desire for better and more consistent tooling, from background support in Group blocks to having a focal point picker for 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.. It’s obvious there’s a dance to get right in adding more features while also creating a more consistent and intuitive experience in handling media in the Site Editor. 

Previously reported: 

New: 

Where one can define specifics on upload. Is it a bmp or other none web format have it be converted to a jpg. Have larger images downscaled to a kind of max image size. Etc. 

@paaljoachim in this comment

A uniform way to import images from external sources. There’s some inconsistency here that can be very confusing.

@trynet in this comment.

Having a way to include Featured images in a variety of blocks, such as Cover, would be amazing. This is in scope for 6.0, but it’s the biggest thing I would like to see regarding media and would enable a lot of interesting patterns.

@ndiego in this comment.

However, I would like to see a range of filters available to users. If this is too much for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., perhaps a standard filter-registration system for developers might be in order.

@greenshady in this WP Tavern post

General Usability Feedback

As seen in other calls for testing, the experience of easily manipulating a Header proved difficult, whether trying to add a background image, trying to get alignments exactly right with your Site Logo, or in using various aspects of duotone. Tied to this, confusion continues around Layout controls with simple tasks li