FSE Outreach Round #2: Building a Custom Homepage With Gutenberg’s Site Editor

Anne McCarthy announced the second round of testing for the Full Site Editing (FSE) Outreach program. The call for testing asks that users build a homepage from the Gutenberg plugin’s site editor. Feedback is open until March 5.

The first round of testing began in December 2020 and ended last month. Testers were able to identify several pain points with template-editing mode from the block editor. The program created actionable items that Gutenberg developers could work to improve.

This second round is similar. However, testing covers a much larger and more complex area. Users will be leaving the familiar block editor and moving to the site editor, which is still months away from being a viable product.

McCarthy listed a 22-step process for building out a homepage. While I followed it for the most part, I got bored before finishing. This is one of the reasons I make for a poor test subject. I like to explore and see what is possible on my own. If I have an idea, I want to attempt its execution. I primarily stuck to the overall script, even if it was a bit out of order.

Eventually, I created a custom homepage for a restaurant called The Grilled Cheese — I would definitely open this restaurant in the real world if I ever leave the WordPress community.

Custom-designed homepage via Gutenberg's site editor for a fictitious restaurant.
Custom restaurant homepage with sidebar.

It is reasonably simple. All told, it took me around two hours of playing around with various concepts before arriving at this stage. To build something I would be happy with would have taken a few more hours.

Overall, I felt limited in laying out my ideal homepage. Each step was an uphill battle against the tools. I could have built this in less than half the time with HTML and CSS. I could do the same and more with other modern page builder plugins for WordPress.

Before diving into the results of my test, I have some brutal honesty. TT1 Blocks, which is the theme used for FSE Outreach testing, is not up to snuff. The theme does not reliably handle the multitude of possibilities the site editor sets in the hands of end-users. This entire experience could be made smoother with a better theme. However, the choices are limited, and I am not sure if there is a better block-based theme to work with at this point.

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.

Identifying Pain Points

While this post is critical of the site editor, it does not mean the experience was altogether poor. Seeing the improvement every week gives me hope that WordPress will have a site editor that rivals anything on the market. Eventually. However, my goal here is to provide real feedback that the team can use.

Outside of the general spacing issues mentioned earlier, I identified several stumbling blocks while building a custom homepage.

Maximum Widths

When designing a full-site page via the site editor, one problem stood out more than most. WordPress lacks a well-rounded “max-width” system. As a user, I was left with few choices in setting the width of the content area of my homepage. Currently, theme authors can set custom content, wide, and full widths. However, this system is horribly limiting. There is not much theme authors can do with this, and this problem directly limits what users can do in both the block and site editors.

I have previously written about the need for a design framework, one that is customizable by theme authors. Tailwind CSS has a max-width system that offers a boatload of flexibility. WordPress needs to start borrowing ideas from these modern design frameworks.

Add Block Icon

Getting the “Add Block” icon to appear when hovering in between elements in the default content area was rough. I had to position my mouse in a perfect position for it to appear. It was an exercise in frustration where even the slightest movement caused the icon to once again disappear.

Hovering over the 'Add Block' icon in the site editor.
Locating the ‘Add Block’ icon.

Switching to Top Toolbar mode made this far easier. I am assuming the default block toolbar was hiding it to some degree. 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.

Query Block

The most frustrating aspect of listing posts on a custom homepage was setting a limit. I wanted to set the number to three. However, the Query block has no option for doing this. Eventually, I created a faux limit using the category filter, choosing one that had just a couple of posts.

Update: It is possible to set a limit as noted by Nick in the comments. There is a “settings” icon in the toolbar for setting the number of posts per page, an offset, and max number of pages. I am unsure why these particular query settings are separate from the others in the sidebar. It makes more sense for them to be grouped together.

Using the Query block in the WordPress site editor.
Limiting posts by using the Query block’s category filter.

Another confusing aspect of the Query block is the keyword filter. As far as I am aware, WordPress has never used the “keyword” terminology. Outside of SEO plugins, there does not seem to be any context for what this filter does. I am guessing it works like a search keyword.

Global Styles for All Blocks

When switching over to the Global Styles panel, I noticed that some blocks were missing when applying styles on the block level. In particular, I wanted to adjust styles for the Latest Comments block.

I suppose that only blocks with typography, colors, and other design-related options appear in the list. This will likely confuse end-users when the site editor lands in WordPress. All blocks should have style options that users can customize.

No Full-Width Columns

For the content of my homepage, I attempted to create a full-width Columns block. However, the two individual columns were limited in size despite taking up 66.67% and 33.33%, respectively.

Inspecting the output of full-width columns from the site editor.
Full-width columns not spanning the full area.

This seems like it is a theme issue. I would also argue that this is one of those times where having more direct control over the max-width would have helped. I really wanted something that was between the theme’s full and wide widths.

Featured Images

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.

There is no reason this should not essentially be a variation of the Image block. The only thing featured images need that is different is the option to link to the post.

11

11 responses to “FSE Outreach Round #2: Building a Custom Homepage With Gutenberg’s Site Editor”

  1. Nick Diego says:

    I am pretty sure you can limit the number of posts using the little icon in the Query toolbar. Took me a bit to find it myself. It is the one that looks like three little sliders on the parent Query block.

    Report

  2. Your description of getting bored midway through testing brought a good laugh :D Thanks for pushing through the boredom, testing, and making it your own. I was hoping this prompt might allow people to both go deep in a creation process to build the perfect sidebar and only quickly test if they were low on time.

    When trying to figure out what to test next, I had a similar experience of needing at least an hour to create something I was relatively happy with. While it’s neat to have more options to explore and build, there’s definitely a level of refinement still needed as right now the customizations options are wide open. This is intentional and is part of what’s being worked on right now. I really like what you made for what it’s worth!

    I passed along your feedback directly to some of the folks who worked on the TT1 theme. Thanks for your honesty there. I like to say “thanks for making me better” when I get feedback that’s hard to hear.

    The preview problem is something I saw with the first round for testing and expect to see with this one too. I put your feedback in this related GitHub issue for future reference: https://github.com/WordPress/gutenberg/issues/28208#issuecomment-785450333

    In today’s Core Editor chat, Riad touched on the width issue as something he wants to turn his attention to for FSE: https://make.wordpress.org/core/2021/02/24/editor-chat-summary-24-february-2021/ “For example, the wide/full flags we have for the post content editor are optimized for the post content and for backward compatibility but these notions don’t translate properly to a fully editable theme.” Ultimately, Gutenberg provides all the spacing so there’s little themes can do here right now. I regularly run into this with my own testing so appreciate this being touched on here. I just followed up with Riad to make sure there are open issues/PRs to capture this.

    As for the “Add Block Icon” feedback, I’ve added it to this overall issue that highlights many of the pain points with the current setup and included a video of my own experience: https://github.com/WordPress/gutenberg/issues/26404#issuecomment-785461564

    You mentioned that the settings didn’t stick when you’re using the Top Toolbar but I wasn’t able to replicate that when just using WordPress 5.6.2 without any additional plugins installed. I was able to turn that preference on, publish a post, navigate to wp-admin, and start a new post with the preference saved.

    As I mentioned in my comment above, the Query block is meant more for theme authors than users and purposefully wasn’t a main focus of this testing call to prevent confusion. Most end users will interact with block variations (like Posts Lists in this test). Stay tuned for a dedicated call for testing though as I think it’s important to get a refined experience with that powerful block and the resulting variations, patterns, settings, etc.

    Finally, to keep it brief, your feedback about the featured image block is so on point. I’ve included it in an issue about the block itself and various cropping options: https://github.com/WordPress/gutenberg/issues/27620#issuecomment-785461448

    Thanks again for testing and for making FSE better. In the chaos of 2020/2021, I don’t take it for granted that people take time to explore and share their honest thoughts. As I said earlier, it’s the only way we’ll get better.

    Report

  3. Jeff Ong says:

    Great feedback, thank you for taking the time to test and share your insights with everyone.

    The theme does not reliably handle the multitude of possibilities the site editor sets in the hands of end-users. This entire experience could be made smoother with a better theme.

    It’s true that the theme could include more CSS to dictate aspects like spacing and smooth over visual inconsistencies.

    I will say the approach for developing TT1 blocks is different than how a classic theme provides support for Gutenberg. Where a classic theme would express all of its style opinions via targeted CSS, contributors to TT1 Blocks are trying to express the theme’s style opinions solely via block templates and the global styles / theme.json mechanism. Anything that cannot be expressed this way, rather than writing a patch for it in the theme CSS, is viewed as an opportunity to improve the site editor and global styles.

    This results in a theme that looks broken in places, and that’s intentional for now to make the gaps obvious. That way the team can identify those gaps, and open issues + PRs to address them upstream in Gutenberg where the benefits will scale. Many of these issues are in progress or blocked: https://github.com/WordPress/theme-experiments/projects/1#column-12084948

    The hope is doing it this way will lead to a better and more consistent experience in the long term. Would love your thoughts on this approach, and thanks again for your generosity in testing and sharing feedback :)

    Report

  4. Enea Overclokk says:

    The first time I tried the query block I was lucky because I immediately found the button for switching query from URL to custom settings, one thing it’s weird for me is the setting splitted in the block inspector and in the toolbar menu.

    I also created a video where I build the home page with FSE, it’s in italian language, I’m sorry, but if you want you can see it in mute mode and 2x speed here the link https://youtu.be/q7Q0FZnSCSQ

    Report

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: