FSE Program Testing Call #10: Pattern Party

This is the tenth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or via DM to me (@annezazu). 

Feature Overview

Because Full Site Editing is a collection of features that allows more items to be easily edited without knowing code, new blocks needed to be created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match functionality that used to only live in themes. While a number of theme blocks were introduced in WordPress 5.8, there’s always more work to be done, including shipping even more theme blocks in future releases! 

This test is focused on pushing these lovely Theme Blocks to their limits to better determine what to prioritize and what features might remain to be documented. To make the experience feel a bit more fun and practical, we’re going to approach this test from the vantage point of creating patterns for blogs using some of these blocks. If you really like what you make, remember you could even register them on your site 🙂 

As a refresher, here’s a rundown of all of the theme blocks ready for testing with a note around which ones are included in WordPress 5.8 in case you’re inspired to use them on your site now:

  • Site Logo: allows you to display and edit the site logo [shipped in 5.8].
  • Site Tagline: allows you to display and edit your Site Tagline [shipped in 5.8]. 
  • Site Title: allows you to display and edit your Site Title [shipped in 5.8]. 
  • 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.: allows you to display posts and pages in various formats [shipped in 5.8]. 
  • Post Title: displays the Post Title [shipped in 5.8].
  • Post Content: displays the contents of your post [shipped in 5.8]
  • Post Date: displays the post date [shipped in 5.8]
  • 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.: displays the post excerpt [shipped in 5.8].
  • Post 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.: allows you to display and edit the featured image of your post [shipped in 5.8]
  • Post Categories: displays the categories of a post [shipped in 5.8]
  • Post Tags: displays the tags for a post [shipped in 5.8].
  • Login/out: displays login and out links [shipped in 5.8].
  • Page List: displays a list of all pages on your site [shipped in 5.8]
  • Template Part: allows you to display and edit various global regions of your site (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., footer, etc). 
  • Post Comment: displays an individual comment.
  • Post Comment Author: displays author for a comment. 
  • Post Comment Content: displays content of a comment.
  • Post Comment Date: displays comment date. 
  • Post Comments: displays all comments. 
  • Post Comments Count: displays comment count. 
  • Post Comments Form: displays comment form. 
  • Archive Title: Displays archive title. 
  • Term Description: Displays the description of categories, tags and custom taxonomies when viewing an archive.

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: 

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing steps

Setup Instructions:

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. 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 11.6.
  3. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  4. Create at least eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test (open the link and select “Download”) via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.
  5. Go to the website’s admin.
  6. You should now see a navigation item titled “Site 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.).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 

General Instructions:

  1. Head to Pages > Add New and create a new page. Title it whatever you’d like!
  2. Add the Query Loop blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and select whatever pattern you want to build upon. You can also add in a container block, like a Columns or Group block, and add in the Query Loop as you’d like.
  3. From there, make the pattern your own using as many Theme blocks listed above as you can and customizing the various settings. For example, you could create a comment heavy pattern utilizing the various comment blocks or have a particularly image focused one thanks to new improvements to the Featured Image block. Try to be as unique as possible and don’t be constrained by adding the blocks only within the Query Loop.

If you’re up for the challenge and want to take this test further, try to create your own pattern from scratch, make multiple patterns, or recreate some with your own twist from Theme designers at Automattic shown below:

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 your custom blog pattern? 
  • 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 editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by October 13th, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

Thank you to @priethor @sparklingrobots and @welcher for reviewing this post and giving me the confidence to ship it.

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

FSE Program Testing Call #9: Handling HigherEd Headers

This is the ninth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from @blake. If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or via DM to me (@annezazu). 

Feature Overview

To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized 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. to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site: 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

As you can imagine, this test is going to enable us to go deep into 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.. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s 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., both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do. 

Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed:

Image of a pretend Gutenberg University header with two different menus, including one with multiple sub-menu layers open.

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: 

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Known issues

While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items:

Beginner testing steps

This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further. 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Create structure (template part, columns, etc)

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on. 
  3. Select the parent Columns Block and, using the Block Settings in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., change the columns from 2 to 3 columns. 
  4. Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.

Build out site branding 

  1. In the first column, add the Site Logo Block and upload/use a site logo. You can use this free logo from logodust.com if you’d like. 
  2. From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
  3. In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now using this export file (open the link and select the “Download” option). 

Create a simple menu for high level items

  1. In the third column, add a Navigation Block and select the “Start Empty” option.
  2. From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice this spacing bug at this point that’s slated to be fixed in Gutenberg 11.3. 
  3. Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block. 
  4. To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc). 
  5. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like. 

Create a more complex menu for specifics 

  1. Select the overall Columns Block that contains your three columns (this is where you might find the List View helpful). Using the More Settings menu option, select “Insert After” to add a block after. 
  2. Add another Columns Block and select the 30/70 option. 
  3. From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
  4. Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
  5. From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page. 
  6. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. 
  7. From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, here’s a screenshot of the icon for adding sub menu items. 
    1. About should have the following sub-menu items: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership.
    2. Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition. 
    3. Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research. 
    4. Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services. 
  8. At this point, add sub menu items under Admissions > Career: Business, Design, Technology. 
  9. Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the entire Navigation Block as shown in this GIF
  10. If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed! 
  11. From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want. 

Save your work & customize further

  1. Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu.
  2. Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu. 
  3. From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons. 

Advanced testing steps

This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance. 

The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see. 

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? Please be as specific as possible, especially if you followed the Advanced steps. 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • How did you find the Navigation block worked when viewed on smaller screen sizes? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • If you’d like, try running your test site through a tool like https://wave.webaim.org or https://www.accessify.com/ to see how it performs. 

Leave Feedback by September 1, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

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

FSE Program Testing Call #8: Thrive with Theme.json

Props to @daisyo and @jffng for the massive amount of help in writing and perfecting this call for testing. 

Important note: Compared to previous calls for testing for the FSE Outreach program, this is intentionally targeting a more developer-centric audience compared to site builders or end users in order to bring high impact feedback for theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., a new tool for extenders. You can read more about what to expect with upcoming efforts here

Feature Overview

At the highest level, theme.json is a configuration file used to enable or disable features and set default styles for both a website and blocks. Rather than dealing with a ton of theme support flags or alternative methods, theme.json provides a consolidated and canonical way to manage it all. These settings include options like:

  • What customization options should be made available or hidden from the user.
  • What are the default colors, font sizes, etc available to the user.
  • Defines the default layout of the editor (widths and available alignments).

This configuration file is a big part of what makes 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 so powerful as it allows for finer-grained control, and introduces the first step in “managing styles” for future WordPress releases. Here are a few of the top benefits of using this new mechanism: 

  • It allows themes to provide settings per block which wasn’t possible before since add_theme_support targets settings for the entire editor. 
  • Themes using theme.json will automatically get classes and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Custom Properties enqueued for the presets they declare instead of needing to handle this themselves. Plus, this means translations of preset names are also managed for them!
  • Theme.json will coordinate coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., theme, and user styles in a way that reduces the amount of CSS that needs to ship as well as help resolve specificity problems. 

While block themes won’t work with WordPress 5.8 without the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 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 due to some theme blocks being left out of the release that weren’t quite ready to ship, it’s still an important feature coming to 5.8 that needs testing and exploration. If you’ve been curious about the world of block themes or have started building your own, this call for testing is for you and should help you to continue to explore what’s possible with theme.json while giving you a chance to share what else you’d like to see.

You can read more about this feature in the documentation here

Beginner Testing Steps

This section is for those wanting to get a sense of what theme.json can control and what the output will look like. 

  1. Head to https://gutenberg-theme.xyz/. This is a tool that can help generate the settings section of the theme.json file. 
  2. From there, try toggling on and off various theme supports. This will help you explore just a few settings that are possible to control with theme.json. For example, you can toggle on and off Custom Colors or Custom Link controls. Notice that the output in the browser changes based on your selection.
  3. Use the + button next to Palette, Gradients, or Font Sizes to explore adding customizations. Keep in mind that you can edit both the slug and specific variables, like color name or font size. 
  4. Add a few customizations and review the output! If you want to go a step further and use what you’ve created, check out the intermediate steps. 

Intermediate Testing Steps

This section is for those wanting to dig deeper into theme.json by writing their own file and exploring the various settings it can control. 

Note: this mainly focuses on just theme supports and presets for blocks in the settings section of theme.json rather than Global Styles. 

Set up your testing environment

  1. Create a Fresh WordPress Install.
  2. Install and Activate Gutenberg Plugin while using the latest version (10.9.0 as of writing this).
  3. Download and Install TT1 Blocks from the Theme Directory
  4. Navigate to the TT1 Blocks Theme directory and open the theme.json file in a text editor or IDE.
  5. Replace the theme.json file with this gist before starting the next steps. It’s expected that this will really simplify what the theme looks like so don’t panic if you see a lot of options removed. This is intentional to simplify the settings you’re changing.

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Layout

  1. Create a new post.
  2. Add a cover block with a solid colored background and several lines of content in an inner paragraph block to the post.
  3. Add another cover block with a solid colored background and several lines of content in an inner paragraph block. Set this block to “Wide Width”.
  4. Add a third cover block with a solid colored background and several lines of content to the post and set the block to “Full Width”.
  5. Publish Post.
  6. Load the post on the front end and note the width of the cover blocks.
  7. Change the contentSize value to a different pixel value in the layout section of theme.json.
  8. Change wideSize value to a different pixel value in the Layout section of theme.json.
  9. Load the edit view of the previously created post and confirm that new widths are reflected in the editor
  10. Load the post on the front end and confirm that the new widths are reflected on the front end of the site
  11. Extra Credit: Try setting the width values to something other than “px” such as “em”, “rem”, “vh”, “vw”, or “%”.

Typography

  1. Set the following typography settings to true in theme.json
    • customFontWeight (Heading Block)
    • customFontSize (Paragraph Block)
    • customLineHeight (Paragraph Block)
    • dropCap (Paragraph Block)
  2. Test the visibility of typography settings in a paragraph block (font size, line height and drop cap).
  3. Test the visibility of typography settings in a Heading block (font size, font weight, line height).
  4. Test that each of settings apply to the block on the front end.
  5. Change the typography settings to false in theme.json.
  6. Confirm that each of the custom typography settings in the paragraph block are no longer present in the block editor (Note the typography settings applied previously may still apply to existing blocks).
  7. Extra credit: Add one or more font families and font sizes to the typography section of the theme.json file. Test your custom font families and sizes using a Button block.

Border

  1. Set the following border settings to true in theme.json:
    • "customColor": true
    • "customRadius": true
    • "customStyle": true
    • "customWidth": true
  2. Create a group block with an inner paragraph block with several lines of text.
  3. Test visibility of border settings in a group block (Style, Width, Radius, Custom Color).
  4. Test that settings apply to the block on the front end.
  5. Change the above border settings to false in theme.json.
  6. Confirm that border settings in group block are no longer present in the block editor.

Color

  1. Set the following color settings for custom and customGradient to true in theme.json:
    • "custom": true
    • "customGradient": true
    • "link": true
  2. Add a cover block with a custom gradient background and several lines of content in an inner paragraph block to the post.
  3. Add a link to the paragraph block and set the link color to a custom color.
  4. Add another cover block with an image background and several lines of content in an inner paragraph block to the post. Set the cover background to use a duotone preset.
  5. Change the duotone colors for the background image to use custom colors for the duotone shadows and highlights settings.
  6. Extra Credit: Add one or more additional colors to the palette and duotone or gradient presets. For more information about CSS gradients check these resources from CSS Tricks and CSS Gradient. Keep in mind that for duotone presets, you’ll need to use RGB, Hex or specifically named colors when adding custom colors.

(Very) Advanced Testing Steps

This section is for those looking to create a more robust block theme using theme.json and who are experienced theme developers. This isn’t for everyone! 

If you feel more comfortable with block themes and have ample time to dig into theme.json, try replicating a classic theme. Here are two options that should be fun to dig into but keep in mind any default theme should work well:

As you try to do this, write down what gaps remain, what proves to be the most difficult to do, and what feels surprisingly easy! Share in the comments below so we can learn from your experience. This is intentionally extremely open ended and advanced so don’t worry if you don’t feel up for the challenge. If you want to follow along while someone else explores doing this, check out @mkaz‘s exploration video on learning to create a block theme.

What to notice:

These questions are specifically for the Intermediate and Advanced sections: 

  • Do the colors added to the theme.json file appear with the assigned names visible on hover in the color palette for various blocks?
  • Do the font sizes added to the theme.json file appear with the assigned names and sizes in the font size dropdowns in blocks?
  • Do the colors and font sizes appear correctly when used with blocks in the editor?
  • Do the colors and font sizes appear correctly when used with blocks on the front end?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 

Leave Feedback by July 14th

Please leave feedback (questions, comments, concerns) in the comments of this post and be sure to note which section you followed. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg but, for this test, it’s unlikely you’ll need to. However, if you do leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please comment below with the link. 

Join a hallway hangout for theme.json testing on July 7th

To help those who might want to explore this test and theme.json in a group, @daisyolsen will be hosting a hallway hangout specifically for this exercise. If you have never attended a hallway hangout, you can read more about them here. Ultimately, they are meant to be casual and collaborative sessions to bring like minds together. 

Hope to see you there. 

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

FSE Program Testing Call #7: Polished Portfolios

This is the seventh call for testing as part of the Full Site Editing Outreach Program! As mentioned in the sixth testing call, if you haven’t been able to participate yet, now is a great time to do so leading up to 5.8. 

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

Feature Overview

As a reminder, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. With this feature, you can create a new template, edit current ones, and select which template you want to use for pages/posts. You can learn more about this feature in the following video: 

To ground this test in a real-world example, we’re going to build out a portfolio page showcasing your hypothetically amazing work. If you use the demo content, you’ll embrace your inner architect and show off visuals of pretend locations, like 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. 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 Harbor and 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/ Parkour Space. Please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example and here are a few high end example from some designers using Gutenberg.

Note: Compared to the sixth call for testing, this is an intentionally more open-ended call for testing setup to have you, the tester, push this feature to its limits. Have fun with it!

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: 

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing 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
 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Known issues:

While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most serious items:

Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon.

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create six posts with two different categories and featured images of your choosing along with at least four pages to use for your menu. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.7.1
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. Do not click on this as we will not be exploring the Site Editor for this test!

Setting up your portfolio page

  1. Under Pages, select “Add New” and title it “Portfolio”. 
  2. In the page content, add in a Query Block and select whatever pattern you’d like or use the Inserter to add in a Query Pattern. Here’s a short video showing how to insert a pattern in case you get stuck. 
  3. Once the pattern is inserted, you can open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. From there, you should see options to customize what posts this Query Block includes. The demo content includes the following categories to use: Portfolio, Parks, Buildings. 
  4. Customize the Query Block to your liking! This might include creating columns to put in different Query Blocks to show off different categories of posts or adding in additional blocks like Post Author. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 

Creating and customizing a new template

  1. In the sidebar, open the Settings and select Page Settings (you should see Page and Block). Select “New” under the Template section to create a new template. Here’s a short video in case you get stuck. 
  2. Title the new template “Portfolio”. 
  3. From there, you’ll enter Template Editing Mode and, in 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., you’ll see a Site Title, Site Tagline, and a Separator Block. You can keep these blocks, convert them to Columns, or remove them entirely. 
  4. Add in a Navigation Block to the Header and select the “Start Empty” option. From there, add each page you created to the menu to set the structure. If you use the demo content, the page names are as follows so you can search for them: About, Contact, Resume, Partners, Influences. 
  5. At this point, you can customize the header, footer, and more to your liking. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. Get creative and make it your own!
  6. Save your changes and view your Portfolio page.

Customization Instructions/Ideas:

While the last test was meant to guide you through the specifics of creating a customized template, this test is meant to allow you to explore what customization might look like for you. This makes for a more open-ended and expansive test that should help you explore the edges of the experience and, ideally, find both bugs and enhancement requests! Because there are two points of customizations in this test, the following instructions/ideas are broken down to cover each. Remember that what’s shared below is just the beginning of the customization you can try out!

Portfolio Page ideas:

  • Change the Post Title block to have a set background color, different font sizes, and different alignments. 
  • Change the width of the column that the Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block is in to make the image larger or smaller. 
  • Add additional blocks to the Query Block and customize them.
  • Change general alignment of the main blocks provided by the Query Block. 
  • Add in an introduction section to make the Portfolio page more real with a Heading Block, Cover Block, and more. 
  • Use multiple Query Blocks for different categories of posts! Remember that for the demo content, there are three categories that you can interact with: Portfolio, Parks, Buildings. 

Portfolio Template ideas:

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?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in Template Editing Mode matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by June 9th June 16th.

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

Note: Originally feedback was set to be due by June 9th but this has been updated to June 16th to give more time for feedback.

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

FSE Program Testing call #6: Stick the landing (pages)

This is the sixth call for testing as part of the Full Site Editing Outreach Program and a very important one leading up to 5.8! If you haven’t been able to participate yet, now is a great time to do so. If you’re excited to help with future efforts, check out the upcoming program schedule

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

Feature Overview

A lot has changed since the first call for testing focused on Template Editing so, if you’re worried about this being a repeat experience, don’t be. As a reminder, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. When this first was released, you were only able to edit a template but you couldn’t create a new one or assign a post/page to use a specific template. At this point though, you can create a new template, edit current ones, and select which template you want to use for pages/posts. Tied to this, the interface has been updated to make it clearer when you’re actually in template editing mode. For a deeper dive into this new feature, check out this video that goes more in depth.

To make this a tiny bit more realistic, we’re going to pretend we’re creating a WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. site with a custom landing page to attract visitors from another event to join the WordCamp you’re hosting. 

Image of a landing page with a pretend event description, coupon code, and various call to action buttons.

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 the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use the latest version of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ (10.6 as of writing this).

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing 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
 

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Known issues:

While creating this call for testing, a few issues popped up that you too might experience as you go through this. Rest assured they have been reported. Here’s a non exhaustive list of the most serious items:

Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon!

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Go to the website’s admin.
  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 10.6.
  5. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. Do not click on this as we will not be exploring the Site Editor for this test!

Creating pages

  1. Under Pages, select “Add New” and, one by one, create three pages back to back with the titles “About”, “Contact”, and “Code of Conduct”. Publish each. These don’t need content added in as they will simply be links for a future menu. 
  2. Create a fourth page, title it something fun to bring people into your event and don’t add in any additional content. For example, I titled mine “Feeling inspired from WordCamp Couch?”. 
  3. Publish the page and keep it open.

Creating a new template

  1. In the sidebar, open the Settings and select Page Settings (you should see Page and Block). Select “New” under the Template section to create a new template. Here’s a short video in case you get stuck. 
  2. Title the new template “WordCamp Outreach”.
  3. From there, you’ll enter Template Editing Mode. 

Customizing the template

  1. Remove the Site Title, Site Tagline, and Separator blocks at the top of the template. 
  2. Add in a Cover Block above the Post Title Block and use any image you’d like. I downloaded this one when creating this test. You might need to use the “Insert Before” option in the toolbar of the Post Title Block.
  3. Once you have an image added, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width. 
  4. Drag and drop the Post Title Block into the Cover Block. 
  5. Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it. 
  6. Select the Cover Block once more and apply 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 it. Here’s a screenshot of what icon you’re looking for. Note that by selecting “Shadows” and “Highlights” you can select your own custom colors! 
  7. Add a Spacer Block underneath the Cover Block and set it to 50px. 
  8. Add a Columns Block underneath the Spacer Block and choose 50/50. 
  9. Once inserted, select the parent Columns Block and set the width to “Full Width”. 
  10. Add in brief information about your event in the first column and set any alignment you’d like. 
  11. In the second column, add in two buttons asking people to Apply to Speak and Apply to Sponsor. For the purpose of this test, it’s okay if these do not actually link anywhere. Feel free to customize the buttons to your liking too!
  12. Underneath the Columns Block, add in an additional Cover Block and select a background color. 
  13. Once you have a color, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width. 
  14. Inside the Cover Block, add in a discount code message and a Button Block below it encouraging people to buy tickets. Customize this text to your liking, whether in terms of alignment, custom colors, or more. 

Create a custom footer

  1. Underneath the second Cover Block, add a Template Part Block and select “New Template Part” to create a custom footer for this template. 
  2. Once created, head to the Block Settings in the sidebar to add in a Title under the Advanced section, set the Area to “Footer” under the Advanced section, and toggle on “Inherit Default Layout” under the Layout section. 
  3. From there, add a Columns Block into the Template Part and choose 30/70.
  4. In the first column, add the Site Logo block. If you need a logo to use, here’s a free one to download from www.logodust.com
  5. In the second column, add a Navigation Block and start empty. Of note, you will likely run into this bug that’s already been reported here
  6. Using the Page Link option, add in your  “About”, “Contact”, and “Code of Conduct” pages. Customize the Navigation Block to your liking!
  7. From there, select “Update” and save your changes. 

Create a new page & assign the new template

  1. At this point, head back to your wp-admin dashboard and, under Pages, create a new page. 
  2. Add a title that references another pretend event that someone might attend. For example, “Feeling inspired from WordCamp Bed?”
  3. In the Post Settings, under the Template section, select the template you just created and publish the page. 
  4. View your page and confirm it’s using the same template as your first page! 

Advanced Steps

If you’re more technical and keen to test out future ideas, check out this PR. Keep in mind that you can always download the specific Gutenberg plugin version for this PR here to make it easier to explore. For context, this PR seeks to help better differentiate between when you’re editing post content vs the template by obscuring the ability to edit the post content when in template editing mode. Feel free to leave your thoughts on this PR in the comments below or on the PR directly. 

Testing Video

Note that there are chapters added to the video that correspond with the steps above.

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?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in Template Editing Mode matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by May 26th

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

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

FSE Program: Bring your questions – Round Two

With the Go/No Go Next Steps outlined ahead of WordPress 5.8’s release in July 2021, let’s use this time to dig into any general questions you all might have around Full Site Editing! If possible, please focus questions specifically around WordPress 5.8 as those will be the most high impact to address. You are welcome to submit questions using the form below or to leave them as a comment on this post by May 12th

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

Where will you share the answers? 

I’ll share a recap post on this blog (Make Test). Questions will be grouped with corresponding answers for easy review. You can see what the outcome will look like based on the first round here. I will track down answers to every question and share my work as I go by creating a collaborative Google doc where people can help find answers or simply see how the work evolves. I very much welcome collaboration here!

While the main result will be a lovely list of answers, this collective effort will also be useful for future documentation updates and potential tutorials. Once the post is published, I will follow up via email with everyone who left their email and a question in the form. For anyone who leaves a question as a comment on this post, I will @ your username in the recap post so you don’t miss out too!

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. To help with planning your involvement, you can see the upcoming/current schedule for the FSE Outreach Program here.

#fse-outreach-program #full-site-editing #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/ #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor #fse-testing-call

FSE Program Testing Call #5: Query Quest

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

Feature Overview

Not many blocks get an entire milestone dedicated to them but the Query Block did! As the name implies, this is a pretty powerful 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. allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do. 

If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.

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 the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use the latest version of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ (10.4 as of writing this).

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing 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
 

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  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 10.4.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. From there, make sure you are in the Index template (this should be the default upon opening).

General Testing Instructions:

  1. Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this. 
  2. From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
  3. In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”. 
  4. Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
  5. Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. 
  6. From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
  7. After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 
  8. Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
  9. View your site and see if what you created matches the Site Editor view. 

If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more. 

Customization Instructions/Ideas:

Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:

Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!

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?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • 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 May 5th, 2021

While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

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

FSE Program Testing Call #4: Building a restaurant themed header

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

Feature Overview

Creating an intuitive 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. is a key piece to get right when building a site. It helps orient visitors to what your site is about and, ideally, should help them take the actions you want them to. With the Site Editor, there are now brand new opportunities to customize this to your liking! This test will explore doing exactly that by creating a slightly more complex and layered header using various FSE blocks. To better focus this test, we’re going to pretend we’re restaurant owners and try to create an experience that nudges someone to order online while still showing them the information they need. 

Like the last test, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example:

Image showing a restaurant themed header with a button to order online, a brief menu, hours of service, and the site title.

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.7 (downloadable here).
  • Use the TT1 Blocks 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/ 10.2.1 (latest version)

Testing 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
: Creating a restaurant header

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, comment below! If you want to take the test further, know that you’re welcome to do so as the instructions are meant to help guide you, not constrain you.

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Known Issues:

While creating this call for testing, a few issues popped up that you too might experience as you go through this. Rest assured they have been reported. Here’s a non exhaustive list of the most serious items:

Setup Instructions: 

  1. Have a test site using WordPress 5.7. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Go to the website’s admin.
  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 10.2.1.
  5. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

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

Setting up your columns:

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Upon opening your homepage, remove 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. found inside the Header Template Part. This is to help reset the header to add more to it later on. 
  3. Select the parent Columns Block and, using the Block Settings in the sidebar, change the columns from 2 to 3 columns. 
  4. Return to the Columns Block and using the Block Toolbar settings make sure it’s set to Full Width.
  5. In the first column, customize your Site Title and tagline as you wish! This could mean changing the text, font size, font family, and more. 
  6. In the second column, use a Paragraph Block to add in the hours of operation for your pretend restaurant and edit to your liking once more.
  7. In the third column, add a Navigation Block and select the “Start Empty” option.
  8. From there, use the Link Block to add a few links, even if they are to pages that don’t exist yet. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Menu”. You’ll then see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it restaurant-themed!
  9. At this point, select “Update Design” to save the changes you made. 

Creating a nudge to order online:

  1. Once your three columns have the content in place, add another Columns Block above it and select two columns to show using the 70/30 option. You can do this by selecting the Columns Block using List View and using the three-dot menu to select “Insert Before.”
  2. Using the Block Toolbar, make the columns full width, so it stretches across the entire site. 
  3. In the larger column, add a Paragraph Block with text encouraging users to order online. 
  4. In the smaller column, add a Button Block that says “Order Online”. If you want to, feel free to quickly create a page to link to, but it’s okay for this test not to have a link for the purposes of this test.
  5. At this point, select “Update Design” to save the changes you made. 

Customize your colors & publish any page drafts:

  1. From here, customize your colors and anything else with your design! You can do this by selecting the entire Header Template and adjusting the color settings in the sidebar. As you do this, keep note of anything you wish you could do but can’t. 
  2. When things are satisfactory, select “Update Design” to save the changes you made. 
  3. Finally, open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Head to Page > All Pages and publish any that need to be.
  4. View your site and check to make sure that what you created matches what you see there.  
  5. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

Testing Video:

This video doesn’t go into great detail in terms of customizing the colors but does walk through each step to get a sense of the major actions to take. Feel free to take the test further as you see fit!

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? 
  • 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 12th, 2021 (previously April 8th)

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

#core-editor, #fse-outreach-program, #fse-testing-call, #usability-testing

FSE Program Testing Call #3: Create a fun & custom 404 page

This is the third 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. 

Feature Overview

Have you ever experienced a particularly delightful 404 page? Maybe it made you laugh or it was built in a way that made it super easy to find your way back to where you needed to be on the site. Currently, this is a part of one’s site that can only be altered with code and provided by the theme causing many of us to be unable to add some extra joy into the universe with helpful, fun 404 pages. 

With Full Site Editing though, this is now within our grasps to make our own. This test explores doing exactly that with the option to build a simple 404 page through template editing or to really dive in to make something unique. If you choose to get super creative, please share a screenshot in your comment so we can all marvel at what you’ve made. For inspiration, here’s an example I made:

Image showing a silly 404 page that says, "Oh no! 404. Where'd you go? I miss you so" with some additional emojis and a search field.

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.7 (downloadable here).
  • Use the TT1 Blocks Theme. If you followed the first call for testing, you’ll need to double-check to make sure you’re using this 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/ 10.1.1 (latest version). 

Testing 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

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using WordPress 5.7. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Go to the website’s admin.
  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 10.1.1.
  5. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

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

Exploring the 404 template

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Open the Navigation Toggle and head to Templates > 404. This will take you to your site’s 404 page template.
  3. Using the List View, select 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. Template Part and, using the three-dot toolbar menu, select “Remove BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.” to delete this.  
  4. From there, select the default Header Block that says “Nothing Here” and, using the three-dot toolbar menu, use the “Insert Before” option to add a block above. 
  5. Using your preferred method to insert a block, insert a Template Part Block and select the “New Template Part” option.
  6. Open the Block Settings for the new Template Part block and, under Advanced > “Title”, add in a custom title. For example, “404 Header”.
  7. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes. This should cause the new Template Part to reflect the title you chose.

Adding navigation and getting creative

  1. From there, make sure your focus is still within the new Template Part and add in a Navigation Block. You can choose whether to create a new menu or re-use a previous one.
  2. Add a few links including a link to a page that doesn’t currently exist. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Help”. You’ll then see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this! 
  3. Outside of the Navigation Block, add any additional blocks you’d like to in this new Template Part. For example, you can use the Social Icons Block, Search Block, Site Title, and more. Try to add anything that would help orient someone who got lost on your site.
  4. From there, edit the “Nothing Found” Header Block and Search Block to whatever you’d like. You can then add in anything you’d like including images, GIFs, etc. 
  5. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  6. View your 404 page on your site by going to yoursiteurl.com/404 (replace yoursiteurl.com with your test site URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org). Notice that any items you added to the Navigation Block that are page drafts appear but are broken links. You should be able to still view the drafts since you are logged in as an admin. Note: this has been logged as a bug
  7. Return to the Site Editor and open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Note: there’s a current bug that makes it so you can’t view Page Drafts meaning in the future this will be easier. 

Publish, review, and share

  1. Head to Page > All Pages and publish any that need to be. 
  2. Once more, View your 404 page on your site by going to yoursiteurl.com/404 and confirm any prior draft Pages now show up properly with correct permalinks.
  3. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

If you want to take this further, here are some extra items to explore:

  • Try adding in columns to your content! Columns are a powerful tool and it would be helpful to get feedback on the experience of using them in a real life scenario with site building.
  • Create a custom footer template part to replicate the process of creating a custom header template part.
  • Deeply customize the appearance of the page with custom colors, font sizes, and more. Here’s a quick video demonstrating some of what you can try.

Testing Video:

This video shows the testing flow after the initial testing setup is in place. Of note, this video purposefully does not go into depth in building out a 404 page in order to keep it concise. Don’t let this stop you from getting creative though when you’re testing!

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 the saving experience make sense when making changes to the Template Part vs the general content? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw when you viewed your 404 page? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 23rd, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

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

FSE Program Testing Call #2: Build a Homepage with Site Editing Blocks

This is the second 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. 

Feature Overview

Before diving into the testing details, let’s pause to talk about the focus of this call for testing. With Full Site Editing unlocking the ability to edit all parts of your site, there comes a need for new blocks to help facilitate the experience. You might have seen some of these blocks already! For example, there’s a Site Title 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. that you can embed anywhere and update automatically any time you change your Site Title.

For this specific test, we’re going to explore using a few of these blocks to build a basic homepage with a 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.:

  • Site Title Block
  • Site Logo Block
  • Post Lists Block
  • Post Tags Block
  • Navigation Block
  • Template Part Block

Think of this as a chance to both explore what’s possible currently to build something simple and as a chance to get more familiar with these new blocks. Eventually, these blocks will specifically be categorized in the Inserter as defined for Site Editing. 

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.6.1 and above (downloadable here).
  • Use the TT1 Blocks Theme. If you followed the last call for testing, you’ll need to double-check to make sure you’re using this 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/ 10.0 (latest version). 

Testing 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

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using WordPress 5.6.1. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create either three fake posts with a few tags OR use the demo Gutenberg content found here. Here’s a short video explaining how to set up this content. 
  4. Go to the website’s admin.
  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 10.0.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

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

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Using the List View, see if the Query Block is present. If so, select and delete it. This is just a housekeeping step to keep things contained :). 

Make changes to your 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.:

  1. You’ll likely see a Header created for you that you can edit directly. Update the text in the Site Title block. Have fun with it! Some ideas to get you started: Pick a new heading size, change the content, or alter the block settings directly. 
  2. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  3. Open the Navigation Toggle and head to Template Parts > Select “Header.” This will show you an isolated view of just the Header portion of your site. While in this view, add a Site Logo Block and configure it to your liking. 
  4. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  5. Open the Navigation Toggle again and head to Template > Index to return to your homepage. 
  6. Once there, head to the Navigation Block that’s powering the menu in the Header (this is where you might find the List View helpful!). Explore the Navigation Block by making changes directly to the menu items or in the Block Settings to change the font, color, etc. 
  7. Using the List View, select the Header Template Part and, using the three-dot toolbar menu, use the “Insert After” option to add a block outside of the Header. 

Add your content:

  1. Add either a 70/30 or 30/70 column block. In the larger column, use the Heading Block to write “My Content.” In the smaller column, use the Heading Block to write “My Sidebar.” 
  2. In the larger column, add a Posts Lists Block and select the configuration you would like (Title & Date, 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., etc.). 
  3. From there, add a Post Tags Block to one of the posts displayed in the Posts Lists Block. Notice how if you add it to one post, it adds it to all of them!
  4. Repeat the previous step with the Post Author Block before deciding whether you’d like to keep or remove either additional block.  

Create a sidebar:

  1. In the smaller column, build out your sidebar how you’d like! For inspiration, try out the Social Icons Block, Latest Posts Block, or a simple Image block.
  2. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  3. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

Testing Walkthrough Video:

This video shows the testing flow after the initial testing setup is in place and is using Gutenberg demo content found here. Make the flow you’re on though with your own unique changes and adjustments!

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you ever want to do something with a specific block that wasn’t possible? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you see when you view your homepage? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 5th, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

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