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:

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/ (11.2.1 as of writing this).
• Download and import the demo Gutenberg content (open the link and select “Download) created especially for this test via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.

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:

• When the Navigation Block is placed inside the Columns block, the margin collapses causing the items within the block to lose their spacing. 
• It’s currently not possible to bulk add items to the Navigation Block. 
• The Search block background color isn’t reflected on the front end with TT1 Blocks. 

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 

5. 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. 
6. From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
7. 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

8. In the third column, add a Navigation Block and select the “Start Empty” option.
9. 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. 
10. Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block. 
11. 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). 
12. 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 

13. 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. 
14. Add another Columns Block and select the 30/70 option. 
15. From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
16. Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
17. 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. 
18. 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. 
19. 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. 
20. At this point, add sub menu items under Admissions > Career: Business, Design, Technology. 
21. 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. 
22. 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! 
23. 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

24. 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.
25. Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu. 
26. 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