Tag Archives: fse-outreach-program

annezazu 6:34 pm on January 15, 2021
Tags: , fse-outreach-program, fse-testing-summary, ,   

FSE Program Template Editing Testing Summary

More calls for testing are on their way so join #fse-outreach-experiment in slack and/or subscribe to this Make blog to stay tuned. 

This post is a summary of the first call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! While this call for testing is over, feedback is always needed and welcomed in GitHub.

Related feedback is grouped under high-level headings. As you read through it, please remember that feedback is welcome on the format of this post too as the program is still in the early stages of determining what works best. 

Distinction between editing modes (template vs page/post)

The need for the distinction between modes appeared in a number of responses.  Thankfully, this was already identified as an area to improve before this call for testing in open issues like this one that reveal just how similar the two modes currently, and the resulting confusion.

Have a clear defined area for post editing and well defined area for Full Site Editing. Do not mix Publish and saving. As they are very different things. One is for post editing and one for FSE editing.

– @paaljoachim in this comment.

I believe it was not clear enough how those changes could impact the site. If you don’t already know how templates, template parts, and global blocks like Site Title work, you might not understand how your editing will affect the rest of the site. 

– @priethor in this comment.

The fact that I had to spend a considerable amount of time to understand the differences for a few arbitrary terms and what they mean in a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is going to be a significant barrier to migrating existing clients to FSE and training them to understand. It simply won’t be worth it.

– @pointydrip in this comment.

Switching between editing modes (template vs page/post)

The actual act of switching back and forth between modes brought up a few different issues. What does the cancel button do? Why does applying changes for a template take me from template editing back into post editing? Some of this overlaps with the previous section as well. Thanks to the feedback shared, multiple issues were opened related to this particular part of the experience: 

Most feedback indicated that by increasing clarity in the interface (ie: a clearer, stickier notice) and making the switching process more predictable, the experience can be greatly improved from the current iteration. 

Switching to Template Editing – Editing the template from the post, while logically I knew what that meant, felt surprising – the switch was kind of a jolt because a bunch of things changed on the screen yet the overall layout stayed the same – so it felt like “Whoa, what just happened?”. Felt disorienting.

– @brentjettgmailcom in this comment.

I found it confusing that clicking Save brought me out of the FSE template mode. I saved. I did not ask to go out of the FSE mode.

– @paaljoachim in this comment.

It took me a while to find how to get back to the original post. I eventually found the Cancel button.

– @bobbingwide in this comment.

Saving Process

Generally speaking, the saving experience was reliable technically and, at the highest level, intuitive enough. The main sticking points came when trying to dismiss changes, save changes as a draft, and understanding what each “sub” item to save meant. The following issues were created to address each piece of feedback: 

I found this part to be kind of difficult. I think the labels on the different things being saved confused me. I didn’t really understand right away what was being saved for each checkmark…If I wanted to not save the template and left it unselected, but wanted to save the post, it would want to keep publishing the post.

– @geheren in this comment.

The saving process is intuitive, and it’s very helpful to clearly list what elements are going to be updated when saving. However, as said before, it might not be clear enough how each edited element will impact the rest of the site. It could be helpful to add a tooltip to the different elements that are going to be saved (post/site/template/template part) to provide users a quick, last-minute reference.

– @priethor in this comment.

Create a new template

While this call for testing didn’t focus on creating a new template, it feels like a natural extension to wonder how a new template could be created after making changes to a current one. While there isn’t currently a mapped-out plan for this experience, it is under discussion in this issue as there are quite a few scenarios to consider.  

What if I want to Save As? To create a new single template. As I might want the original single template and just want to create a new template that modifies the original template. Kind of like a default template and a modified template.

– @paaljoachim in this comment.

How would I go about creating a new template for a selected post/page?

– @bobbingwide in this comment.

Preview changes

Previewing changes is a workflow people rely upon, and this showed up in testing. While explicitly including ways to preview content hasn’t yet been discussed, there is an open issue to explore how best to view the template while editing a post that touches on this experience. In response, a new issue was opened around offering the option to preview the template in the same way one can with the Site Editor. 

My trust is always in the published page, and I’m looking everywhere in FSE for a preview page link while I’m editing to basically see if it worked. I feel like just being able to open the page in a new tab would give me confidence in what i’m doing in FSE. The other issue is that since you don’t see 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. or footer in the post editing context, as soon as you do apply changes to a template and you land back on the post, you immediately think “Did it work?”.

– @brentjettgmailcom in this comment.

I found it confusing that clicking Save brought me out of the FSE template mode. I saved I did not ask to go out of the FSE mode. I want to see what it looks like on the frontend. Meaning clicking Save and then previewing the template on the frontend.

– @paaljoachim in this comment.

Undo/Revert Template Changes

This was originally brought up in this issue and is currently being worked on in this PR.

There’s no place that I have found within FSE to revert a template/part back to the theme’s default setup.

– @brentjettgmailcom in this comment.

Bug with template parts

As part of this testing, a few people (myself included) ran into a strange bug related to themes located in a sub-directory not properly loading template parts. This was reported and should help ensure future 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 work with this experience. 

Where is template editing work headed?

While this post goes deep into the pain points of the current experience of switching between template and post editing, it’s important to show where this work is headed. Currently, the best place to follow along is in this organizational issue focused on the remaining interface and infrastructure issues. This includes everything from issues on how to better distinguish the editing experiences to a welcome guide to introduce people to template mode! Follow along there as the work continues. 

#fse-outreach-program #full-site-editing #gutenberg #core-editor #fse-testing-summary

annezazu 4:57 pm on December 23, 2020
Tags: , fse-outreach-experiment, fse-outreach-program, fse-testing-call, ,   

FSE Program Testing Call #1: Template Editing

This is the first 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

To help frame what we’re going to be testing (and ideally build some excitement!), I wanted to give a brief context on the feature at the center of this call for testing. With Full Site Editing, people are able to edit both an individual post’s content and, with the release of Gutenberg 9.6, the template that an individual post uses. This call for testing is designed to explore the interaction between the two editing experiences (post vs. template editing) to make sure it’s clear when you’re editing each, granular saving works properly, etc. Ultimately, being able to edit templates like index, single, or archive directly is a huge leap forward compared to what’s been possible in the past! Unlocking this level of customization gives you far more control to build the site you want and this call for testing is to help ensure it’s as intuitive as possible. 

You can read more about the terms templates, template parts, and more here. 

Testing Environment 

While there’s more information below to ensure you get everything setup 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 you can use a tool like this to set up a development site. 
  • Use WordPress 5.6 (downloadable here).
  • Use the TT1 Blocks Theme (formerly called Twenty Twenty-One 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. Based Theme) by following these instructions.
  • 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/ 9.6 (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, it’s extremely likely you’ll 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. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks Theme (formerly called Twenty Twenty-One Block Based Theme) by following these instructions and activate it under Appearances > Themes. 
  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 9.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 properly using the Site Editing experiment. 


Testing Instructions:

  1. Create a new post by going to Posts > Add New.
  2. Add in a post title and brief content before hitting “Save Draft” or “Publish”. Either way, saving of some sort needs to happen.
  3. While in the editor for the post, navigate to the Post Tab of the Settings Sidebar (previously called Document). Under “Status & visibility,” you should see “Template” with the template name and the option to edit. 
  4. Click on “edit” to move into template editing mode. You should see a notice indicating you’ve switched to editing the template. 
  5. Make a few changes to the template wherever you like. For example, you can try out the “Site Title,” “Site Logo,” Site Tagline,” and “Navigation” blocks or changing font sizes and color settings for different blocks. Here’s a screenshot of a simple 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. for inspiration. 
  6. When you’re done making the changes you want, select “Apply” and go through the saving flow by selecting “Save”. This will return you to editing the post itself. 
  7. Once saved, try editing the post once more before following steps 7 & 8 to edit the template specifically. 
  8. Make changes to the template. This might mean making minor editorial changes to the content or adding in new blocks.
  9. When you’re done making the changes you want, select “Apply” and go through the saving flow this time opting to not save the template changes. This is a way to test the saving functionality. 
  10. 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!

What to notice:

  • Did it crash at any point?
  • Was it clear that when you were editing blocks in the Template that it would impact every page/post using that same Template? 
  • Was it intuitive for you to switch between editing a Template for all posts vs. an individual post?
  • Was the saving process intuitive? Meaning, did you easily know what each option was saving? 
  • Did the right content save when you selected saving the template part vs. when you left it unselected?
  • Did you get stuck at any point in the testing process?
  • What did you especially enjoy or appreciate about the experience? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by January 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 and in this GitHub repo for TT1 Blocks Theme (formerly called Twenty Twenty-One Block Based Theme). 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 #full-site-editing #gutenberg #core-editor #fse-testing-call