FSE Program: Sign up for usability testing by June 24th

Building off of the high level feedback and in line with the goals around refinement and unification for 6.1, the outreach program is going to try something new and pair up members of the program with community designers. The aim is to directly learn what kind of refinement is needed by watching someone use the current experience. In the process, perhaps this effort can also engage folks in a new way who might not have been able to participate as much before!

Description

Designers will be paired with 1 or more folks, depending on their capacity and interest, from the outreach program based on ideal timezone matches. Once paired, they will then find time between June 20th and July 1st to record a 15 minute call on Zoom going through one of two tasks: Creating & applying a new 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.; using and customizing patterns. 

Designer & Participants: Sign up by June 24th, 2022

Before signing up, keep in mind that you will need to be available to help between June 27th to July 8th to record at least one 15 minute session:

For both parties, please ensure you are in #fse-outreach-experiment for updates, reminders, etc and generally checking Make Slack for coordination. 

Details for designers

After the sign up forms close, you’ll receive a 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/. DM from @annezazu (that’s me) on or before June 27th with more information, including who you are paired with along with a one pager of all the details you’ll need. 

Next Steps

A recap of all of the videos will be shared on Make Test for posterity. 

Thank you to @critterverse for collaborating with me on this effort.

#fse-testing-call, #fse-usability-testing, #usability-testing

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

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 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 Testing Call #12: Hyping Headers

This post is the twelfth 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

With WordPress 5.9 out in the wild, it’s time to start revisiting some common workflows that we’ve tested earlier versions of that have new tools, options, and more to explore. In the case of this test, we’re going to customize 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. using everything from the navigation block to template part focus mode to then reuse this personalized header in a different template. Along the way, we explore how patterns are integrated into the experience, new dimension control options, and improved 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. for the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. While going through the experience, think about what would make it even easier and more intuitive to use as that’s ultimately the aim!

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 (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.6 (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. 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 four different pages with different titles to add to your menu under Pages > Add New. No content in the pages are needed. 
  4. 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.6.
  5. 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 intentionally more general to help you make the Header you create your own, to find more points of friction, and in case you are using a different block theme. At a high level, 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 if you aren’t using it already or ensure you cover each of the features mentioned in the Overview section. 

  1. Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 
  2. Using the List View, select your overall Header provided by your theme. If you’re using the Twenty Twenty-Two theme, you will see that it has provided multiple header options by selecting the “Replace” option in the block toolbar. Select whatever header you’d like to edit. Here’s a screenshot of what to expect here if you have this option.
  3. From there, enter the isolated template part mode to focus just on editing the Header in isolation. You can find this mode by selecting the overall Header template part > Opening the three-dot menu > Selecting “Edit Header”. You can learn more about this mode and the various ways to find it in this post
  4. Once there, build out and customize your navigation block by adding the four pages you created earlier. Keep in mind that you can create draft pages that you will need to publish later in order to have them show up on the front end of your site.
  5. Continue to customize your Header to your liking, whether by using dimension controls in blocks like the Group or Row blocks (depending on what your theme offers), by adding any additional blocks (Site Tagline, Site Icon, etc), or by exploring more options in the navigation block.
  6. When done, select “Back” to return to your homepage template and make any additional changes you might want when seeing the template part in the wider template once more.
  7. From there, select Save and go through the saving 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
    to save all the changes you’ve made. 
  8. After saving, open the W menu > Templates and select another template where you’d like to ensure it uses the Header you just customized (for example, the Blank template). Open that template and, if the Header isn’t in place, add it in however you see fit before saving. 

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 or reusing 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 and more intuitive?
  • 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 March 16th, 2022

#fse-outreach-program, #fse-testing-call, #full-site-editing

FSE Program Exploration: All Things Media

With WordPress 5.9 shipped, the big pieces of full site editing are out in the open ready for feedback. Rather than digging once more into these pieces for now, let’s leave that to the wider world to absorb and switch into an aspect of site building that can be very make or break: the role of media. Whether it’s setting 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. or adding 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. image, there are tons of ways media touches all parts of building a great site. 

Like last time, the focus of this exploration is to think with a more long term, “wishful thinking” perspective in order to gather useful insights that will help inform the design of media related experiences going forward. This is achieved by guiding you through some common tasks for site building with media, and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen.

As you look over the post, remember that you can engage with all of the items or just one of them! Either way, it’s all helpful.

Brief Overview

Part of why we’re doing this call for testing is because there are a few new projects and tools around media in the WordPress project that you might have missed: the WordPress Photo Directory and Openverse. 

The WordPress Photo directory is currently in 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., and aims to offer a curated source of high-quality images. By adding your photos there, the photos will automatically appear in Openverse, a search engine for openly licensed media with over 600 million items to use free of charge. Right now, these are standalone tools but, in the future, there will be huge opportunities to integrate them directly into the WordPress experience. This exploration will help inform this very early work that’s also in line with various 2022 goals

To read more about the WordPress Photo Directory and Openverse, check out this comprehensive post sharing everything you need to know.

Task 1: Explore what’s currently possible 

These tasks are purposefully open ended as there’s often a few ways to accomplish them. When you respond below, share what approach/steps you took and why! Any bugs you find too, report away in your comment. 

  • Add 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. to a Cover 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. with an image or video in it and add text over top, adjusting the opacity as needed. 
  • Add an image to the background of your header.
  • Add a caption to an image. 
  • Crop or rotate an image in a gallery block. 
  • Add an external non-copyrighted photo to your post as a featured image. Bonus points to share where you searched for the image and where you normally do so.
  • Change the size of your featured image for your posts by editing your post template. 

For this exploration, it would be advantageous to use a block theme since this is meant to capture media in the context of full site editing. As a result, please follow these steps:

  1. Set up a test 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
  2. Install and activate a block theme from the options listed in the theme directory

Task 2: Describe what you’d like to see

As you go through the above experiences, consider the following questions as a way to reflect on what you’d like to see in the future. This could be everything from being able to use a featured image as a background of a cover block to having more built in controls to style your images to rethinking featured images in general. Don’t hold back and don’t worry about how practical an idea might be. This is just to get a sense of what folks might want to do in the future.   Answer one, all, or none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • How would you like to see Openverse or the WordPress photo directory integrated into the experience?
  • What comes to mind when you think about Patterns and media?
  • What workflow improvements can you think of? What was hard to accomplish? 
  • What basic tasks do you find you have to do outside of WordPress to get your media just right and how would you like to see those tasks integrated into the experience? 
  • How would you feel about using an image where attribution information couldn’t be removed? What about an image where you can not make significant changes?
  • Anything else? Think big!

Please share feedback by Wednesday, Feb 23rd, 2022

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM 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/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

Join a hallway hangout on Feb 16th, 2022 @ 5:30PM UTC 

If you want to dig into this exploration more and chat about All Things Media, join @fcoveram and @annezazu in an upcoming hallway hangout. As a reminder, these are casual, open calls that anyone can join and leave as they’d like, have their video on/off, talk or just listen! It’ll last under an hour and will be recapped on Make Test

To join, head to #fse-outreach-experiment in Make Slack where a zoom link will be shared at the time of the hangout. 

#fse-exploration, #fse-outreach-program, #fse-testing-call, #full-site-editing