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. 

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:

• The Save Notice when in template editing mode doesn’t mention saving the template itself. 
• The “Add Block” prompt has a regression that’s causing the words “Add 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 appear in various places, including in a way that makes the text look quite squished. 
• Editing blocks at the top of Template Editing Mode is difficult (this is also the case in the Site Editor). 
• The Navigation Block is impacted by the “Add Block” prompt issue and the placeholder being a bit squished at times depending on where its placed. 

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

6. 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. 
7. 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?”. 
8. Publish the page and keep it open.

Creating a new template

9. 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. 
10. Title the new template “WordCamp Outreach”.
11. From there, you’ll enter Template Editing Mode. 

Customizing the template

12. Remove the Site Title, Site Tagline, and Separator blocks at the top of the template. 
13. 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.
14. 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. 
15. Drag and drop the Post Title Block into the Cover Block. 
16. Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it. 
17. 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! 
18. Add a Spacer Block underneath the Cover Block and set it to 50px. 
19. Add a Columns Block underneath the Spacer Block and choose 50/50. 
20. Once inserted, select the parent Columns Block and set the width to “Full Width”. 
21. Add in brief information about your event in the first column and set any alignment you’d like. 
22. 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!
23. Underneath the Columns Block, add in an additional Cover Block and select a background color. 
24. 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. 
25. 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

26. Underneath the second Cover Block, add a Template Part Block and select “New Template Part” to create a custom footer for this template. 
27. 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. 
28. From there, add a Columns Block into the Template Part and choose 30/70.
29. 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. 
30. 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. 
31. Using the Page Link option, add in your  “About”, “Contact”, and “Code of Conduct” pages. Customize the Navigation Block to your liking!
32. From there, select “Update” and save your changes. 

Create a new page & assign the new template

33. At this point, head back to your wp-admin dashboard and, under Pages, create a new page. 
34. Add a title that references another pretend event that someone might attend. For example, “Feeling inspired from WordCamp Bed?”
35. In the Post Settings, under the Template section, select the template you just created and publish the page. 
36. 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