FSE Program Build a Homepage Testing Summary

A third call for testing is already underway so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the second 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! Special thanks to the following people:

• @overclockk for the awesome video and feedback shared in GitHub
• @piermario for the Italian translation of the call for testing. 
• @mimitips and @atachibana for the Japanese translation of the call for testing. 
• @nobnob for the Spanish translation of the call for testing. 
• @courane01 for running the call for testing with a group of students. 

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.

High-level feedback

Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:

Everything seemed intuitive for me (long time WordPress dev for whatever it’s worth). I recently did a site for a client in Squarespace, and I appreciated that everything was drag-and-drop and had blocks for all website sections. This full site editor gives that same experience. I think this will be great for empowering non-dev users.

@andystitt829 in this comment.

I did a demo of using FSE in December 2019 at meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. Tokyo. It did “work” then, but felt more of a prototype — kind of alpha or even pre-alpha stage of development. But this latest version is much more smooth, less buggy, and get overall feeling that it has come a long way and shaping up to be a feature.

@toru in this comment.

My main problem with this as a designer is that if we are building structure, don’t try to look like wysiwygWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.. If we are building design, then show it exactly. Current GB 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. isn’t an overlay, so it is pushing the layout completely out of shape. So you get a kind of Picasso view of your website. You have to take a big imagination leap to trust that you are designing this website well. –

@paullacey in this comment.

As you can tell, there’s a diverse set of reactions to this call for testing, which shows how far Full Site Editing has come and how much further it needs to go. 

Adjusting column widths

Adjusting column widths was one of the most mentioned issues that came up as people tried to customize their homepage to their liking! This coincided nicely with an important PR that started as a draft at the beginning of this call for testing and has moved into an open PR with numerous iterations since. As @youknowriad mentions in the PR, alignment in Full Site Editing currently works in a way that’s optimized for traditional themes that provide their own alignment styles. Still, this approach needs to be reconsidered moving forward as it doesn’t allow for a true WYSWYG experience. This leads to the problems described below in comments from some of those who tested: 

I inserted a 70/30 pattern for the Columns 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., then changed the alignment to “Wide”. The Columns block didn’t expand proportionally to fill the available space. When viewed on the front-end, the columns did display as expected.

@chthnc in this comment.

We noticed with columns that we had to assign the width of the block in order for the height of the site logo to align with the site title. We want to expand the width of the body content without using a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. to get closer to edge to edge layouts.

@courane01 in this comment.

I created an image 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. that was wider than the column to see if there was any restriction on image width. When I went to view the page, the image had been resized to fit the column width.

@kforbz in this comment.

I really wanted something that was between the theme’s full and wide widths.

@greenshady in this WP Tavern article.

Previewing changes

Like adjusting width, previewing changes came up as a workflow people rely upon and deeply missed in this call for testing. This nicely echoes findings from the first call for testing, where people wanted to preview template changes and expands to previewing the entire site editing experience. Currently, a “Preview Site” option is under discussion here and this post is linked in a comment to ensure feedback makes it to those who explore this further. 

I do not see how to preview the layout on the frontend.

@paaljoachim in this comment.

Yes, but when I am done I don’t find a way to easily go and view my website. I turn off full screen mode and use the more classic view site link in the Dashboard.

@paullacey in this comment.

There were so many inconsistencies between the site editor and the front end that there is little point in listing them all. Spacing was grossly off. I generally see that as a theme issue. I spent much of my time in trial-and-error mode, making an adjustment in the editor and refreshing to see the front-end result. Rinse. Repeat.

@greenshady in this WP Tavern article.

Saving Process: auto drafts, keyboard shortcuts, and more

In line with the last call for testing, the saving process came up as an area people were keen to see iterated. Whether it was mentioning desired features, finding bugs, or confusion around how to accomplish a task, this proved to be a robust area of feedback: 

• Allowing template edits to be saved as a new template (repeat from last time).
• Enable the option to save a draft of changes.  
• Add keyboard shortcut for saving editor changes. 
• Allow for more granular options in saving Global Styles changes (repeat from last time).
• Allow the ability to Save Draft and Schedule changes.
• Add an aria label for the “Save” button in the Update Design flow to make it clear how to save changes with a screen reader. 
• Create more robust autosaving experience, including a notice upon returning to the Site Editor. 
• Issues with being unable to save changes on long term test sites. 

When editing, I expect CMD/CTRL + S to save my work. This works in a post/page editing experience. On OS X + Chrome, this prompts me to save the webpage.

@courane01 in this comment.

I can understand why there is a 2-step process here, but every time I clicked “Update Design” it intuitively felt like I shouldn’t have to then click a “Save” button as well.

@chthnc in this comment.

What if I want to save the template as a new template, Template Part as a new template part and not overwrite the existing templates? What if I decide not to save a template part? Can I revert changes by clicking an revert/undo changes checkbox?

@paaljoachim in this comment.

I didn’t experience any auto-saves. When my site crashed, it did not have any autosaves.

@courane01 in this comment.

General Usability Problems

Because this call for testing was more open-ended, this resulted in a wide range of general usability feedback that relate to the overall experience of building a homepage rather than a specific part of the experience. While these items can’t be easily organized and some were reported previously, they are extremely important to keep in mind: 

• Make it clearer when one is editing a specific template part. 
• Add ability to set the Site Icon (also known as the favicon).
• Resolve an issue with a double scrollbar appearing in the experience. 
• Enable two+ word block searches with the slash command to make it easier to add Site Editing blocks. 
• List View content does not always show all blocks on the page (resolved).
• Unable to select Keyboard Shortcuts from Options.
• Selecting the Top Toolbar Setting doesn’t stick in Site Editor.
• Improve labeling of nested blocks to make it easier to know where one is in editor. 
• Create a category specific to Site Editing blocks in the Inserter. 
• Add a “Revert to default” option for templates and template parts.
• Make it easier to add a background image to a template part. 

I see that blocks for FSE are under “design” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the inserter, but I think it’s better to put them in their own category to avoid confusion with non FSE blocks.

@overclokk in this GitHub feedback issue.

I tried to insert a Post Tags block using the ‘/’ command but it didn’t appear as an option. I had to search and find the block via the block inserter panel. –

@chthnc in this comment.

Without the screen shot, I would have not been able to find where or guess which is the Navigation Toggle.

@toru in this comment.

The problem with switching to this mode is that my toolbar-choice was not saved. Each time I returned to the site editor, I had to enable it once again.

@greenshady in this WP Tavern article.

I wish I could put a background image (also in the body of the page), but I haven’t found a way to do it, nor have I been able to set 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. color different from the rest of the body.

@ejca in this comment.

Individual Site Editing Block Feedback

Since this test relied on exploring Site Editing blocks, great feedback was given about the experience of specific individual blocks. To make it easier to go through, these issues are gathered in this section:

• [Site Logo] Logo resetting after upload (closed).
• [Site Logo] Add the same dimensions settings as the Image block to make it easier to resize. 
• [Query Block] Allow for the ability to undo setting changes or selections.
• [Query Block] Print nothing in the front end if there are no results in Query block (fixed).
• [Social Icon Block] Add placeholder state for unconfigured icons.
• [Social Icon Block] Improve selected state of empty block.
• [Site Title Block] Show color warning if poor contrast colors are picked. 
• [Site Title Block] Encourage users to make proper semantic decisions.
• [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.] Allow Post Featured Image blocks to have a consistent height to easily get a uniform size. 
• [Featured Image] Rethink Featured Image in the context of blocks including improving the placeholder/upload experience. 

I was trying to size the logo I added using the what appeared to be resize handles. but it did nothing I expected. Eventually I found that the block had settings in the right panel, but I had to look quite hard for this.

@paullacey in this comment.

I inserted a Query block after choosing a pattern. I then changed my mind about the pattern and attempted to undo. Nothing happened.

@chthnc in this comment.

“It wasn’t obvious to me that the Social Icons block then needed to have individual social media blocks added. I couldn’t figure out why they weren’t showing up and looked in the settings and in my user profile to figure out where to add my social media links. I saw social icons in the footer and then clicked on the blocks and saw that the individual icon blocks needed to be added.”

@andystitt829 in this comment.

To me, I feel strange to be told to upload a featured image for each post here. I assume if each featured image are set, then this uploader won’t be shown. Still, I think it feels confusing.

@toru in this comment.

There is no way to set the size of the image output by the Post Featured Image block. The only way to get a uniform size at the moment is to pre-crop the images before uploading them to WordPress.

@greenshady in this WP Tavern article.

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