FSE Outreach Round #4: Building a Restaurant-Themed Header With Gutenberg’s Site Editor

Anne McCarthy announced the fourth round of testing for the Full Site Editing (FSE) Outreach program last week. This testing phase calls for users to build a restaurant-themed header via the Gutenberg plugin’s site editor. Testing is open to anyone, and participants should leave feedback by April 8.

The testing process is broken down into 24 steps with both setup and testing instructions. Those participating will need to activate the latest version of the TT1 Blocks theme and the Gutenberg plugin.

The more people who leave feedback, the better it is for the project. The program provides that direct link between the user and the developer team that has often been missing in the past. If you have an hour or so of spare time, jump right in.

Building a Custom Header

I want to push the site editor beyond its limits, creating move advanced layouts. However, the site builder is so fundamentally limiting — and broken in some cases — that it is easy to become frustrated. And, depending on which version of Gutenberg you are using, such as the latest dev vs. stable version, you can get wildly different results.

This propensity to jump ahead of the lesson is something I have done my entire life. In school, I frustrated more than a few teachers. I would be working on stuff from the end of the chapter when they were still explaining the basics to the rest of the class a half-hour later. I have always wanted to get to the “good stuff.” Of course, I did so by blazing past the boring fundamentals. I also dropped out of software engineering twice in college because building calculators was neither exciting nor challenging.

Like always, I jumped ahead with Round #4 of the FSE Outreach Program. I came to the realization that attempting to do anything remotely advanced with the site editor was simply not going to happen.

I want Full Site Editing to be successful, but we are mere weeks away from the deadline that determines whether it will land in the next version of WordPress. Somehow this experience felt like a step back from where the plugin was a few weeks ago as I built a custom homepage as part of the second round of the FSE Outreach testing program. I do not know whether the problems stemmed directly from Gutenberg, the TT1 Blocks theme, or both. As someone who prides himself on near-infinite patience, Round #4 sought to crack me.

I wanted to recreate several elements from the UK-based Pho Cafe page header. I knew the site editor could not yet manage a one-to-one replication. I still thought I could pull in parts of it but utterly failed.

Screenshot of the Pho Cafe website page header.
Pho Cafe website page header.

I appreciate the need for controlled circumstances. Step-by-step testing puts everyone on the same page, makes it easier to gather data, and allows others to reproduce issues. I am just bad at it.

Following the Rules

I restarted from scratch. I followed the rules. And, for the most part, the testing round was successful. I built a restaurant website header from the instructions and put my own spin on it.

Custom restaurant header design for a beachside cafe.
Custom beachside café header design.

Of course, I hit a few snags. That is what the testing program is all about — identifying pain points.

The most problematic issue is that what I saw in the editor was not what I got on the front end. I have played around with it enough to know in my mind what it might look like on the front end to make adjustments without previewing the changes. However, that is not the user experience that WordPress is shooting for.

Editing a custom restaurant header in the WordPress Gutenberg site editor.
Editor view of the restaurant website header.

Admittedly, on the front end, I tidied up the padding for the Group block and bottom margin for the Columns block for the “Order Online” strip across the top of the header. I thought about making the button smaller too. However, I stuck with the TT1 Blocks theme default. Ultimately, padding, margin, and other types of sizing/spacing should be customizable by the end-user.

Wide and full block alignments completely disappeared after activating TT1 Blocks. I am unsure if this was a recent change in the Gutenberg plugin or the theme. Nevertheless, they were gone, which was one reason I had trouble recreating pieces of the original page header I wanted to build.

The TT1 Blocks theme also has a hardcoded font-size for the site title link. This means that users cannot change the size of the Site Title block. I wanted to bump this up a little to make it more prominent.

Like the first design I was shooting for, I wanted my Navigation items to look like individual buttons, each with a bit of whitespace in between. However, the Navigation block does not currently support adding backgrounds to each nav item. Even if it did, it also does not have a horizontal margin setting to add the spacing. And, I outright refuse to use a Spacer block between items.

I did want to spruce my restaurant page header up a bit with a custom background. To do that, I added the primary elements inside a Cover block. Currently, the only way to do that is to copy all of the blocks, delete the old ones, and paste them into a new Cover block. A welcome enhancement to the editor would be an option for “grouping” blocks into a Cover like what is possible with the Group block.

8

8 responses to “FSE Outreach Round #4: Building a Restaurant-Themed Header With Gutenberg’s Site Editor”

  1. Yeah I think “frustrated” is the best way to put it. I wish I had more concrete feedback about why that is. It doesn’t feel like it is ready to ship out users in Core to me.

    Since nothing really will change for users once FSE is in Core, I think including the feature in 5.8 won’t cause a major issues. But I’m struggling to understand the benefit of shipping an MVP like this. I’d have a hard time recommending to any user that they should actually use FSE on a production site at this point.

    If it’s about getting more feedback, then we should find a better way to solicit more users to try the Gutenberg plugin and try turning on the experiment, instead of shipping it in Core. It feels like Core inclusion will just lock us in to BC issues.

    Report

    • instead of shipping it in Core. It feels like Core inclusion will just lock us in to BC issues.

      Exactly this.

      Features should be added to core only once they are finished and carefully tested. Current concept with ongoing changes in core produces so much technical debt which has to be taken into consideration for every future release of core and by every theme and plugin author.

      Report

  2. Justin! Thanks again for doing yet another write up and encouraging others to test. Super neat to see what you created. As a fellow rule breaker, this both made me nod my head solemnly and laugh. I promise I wasn’t trying to break you and I understand the sentiment. Coming up with this call for testing nearly broke me likely for similar reasons you ran into when you tried to build your own thing. I’d love to hear a bit more about that experience unless you’re not interested in reliving the horrible memories (truly, no pressure)! In case it helps, I filed a number of issues while I was creating this that you can skim through here: https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+author%3Aannezazu

    I also want to note that, while the tests are intentionally constrained right now, I’m keen to do future call for testings where there is a prompt to replicate different aspects of a site. Originally, I was intending to do that with this one by offering three levels of testing (easy, intermediate, advanced header options) before realizing the tooling just isn’t quite there. I went back to the tried and true method after spending a few somewhat frustrating hours in replication mode.

    Wide and full block alignments completely disappeared after activating TT1 Blocks.

    Can you say more here? I ask because I can still see those options available but there was a recent release of TT1 blocks today to (0.4.5) in order to update to the latest alignment and layout specifications: https://github.com/WordPress/theme-experiments/pull/236 I’m also curious what exactly is causing that white bar in between sections of your header. For now, I’m going to flag this for some themers to see if they have thoughts about what issue might need to be flagged.

    As for adjusting the Site Block in general, changing the size actually can be done already thanks to Global Styles. Here’s a short video: https://cloudup.com/c6W7yjZouA0 More options to come with Global Styles too! That’s another aspect of the wider FSE projects that I’m keen to do more testing with.

    Your comment around wanting spacing in between navigation items has been discussed in various issues:

    https://github.com/WordPress/gutenberg/pull/25339
    https://github.com/WordPress/gutenberg/issues/23293

    Currently, this is seen as a low priority but there seems to be agreement to not fully on theme styles to provide this and to offer some options people can pick from.

    Finally, a nearly said “YES!” outloud to your ending comments around adding a background image. This came up previously in an earlier call for testing and was reported here: https://github.com/WordPress/gutenberg/issues/29238 I added your thoughts in for good measure :)

    Report

    • If I were to pinpoint what I think the major hurdle Gutenberg needs to cross it would be “layout building.” When I say that, I mean it needs to tackle spacing, width, and height in an intuitive way for users. The header I wanted to recreate earlier in the post is a good example of where the site editor needs to be going. From a user standpoint, how do I build that? Forget about the image, fonts, and stylistic aspects. The underlying issue right now is that I don’t see any way to lay each of those elements out on the page.

      For the alignments, the “wide” and “full” options were simply not showing up on any blocks. In particular, I was looking at the Cover, Group, and Columns blocks. I did update to the latest TT1 Blocks, so I’m not sure if that was an issue. I tested against Gutenberg 10.2.1 and 10.3. Fortunately, some things were already fully aligned, so I just didn’t touch anything.

      You can see the toolbar alignment option is missing altogether for Columns here:

      Columns block with no align toolbar

      Same thing happened with the Group block. The Cover block only had left, right, and center.

      Report

      • Ah ha, yes. This makes perfect sense and is actively being iterated on right now. It’s being tracked at a high level here:

        https://github.com/WordPress/gutenberg/issues/29506

        You can see more details around dimension control across blocks in this issue too:

        https://github.com/WordPress/gutenberg/issues/28356

        As for the Columns block missing alignment options, this is likely due to confusion around the overall Columns block vs the nested Column block. Here’s a quick video where you’ll see the Columns block has the option for full width but the Column block doesn’t: https://cloudup.com/cYOe-eSb_iK I ran into this quite a few times and struggled to find it to be intuitive. Expect this to be something I touch on in the recap post for this call for testing :)

        While I’m sharing context in the form of issues, I want to make it clear that I agree with you and am excited to see the team already working to improve this. Thanks for following up!

        Report

        • Thanks for sharing issues/links. Those are helpful.

          The missing wide and full alignments are not limited to just the Columns block. It’s an across-the-board issue that I’m seeing. I’ve tested with the TT1 Blocks, Block-Based Bosco, and Armando themes. No blocks, including Image, Video, Columns, Group, Cover, etc. have the wide/full alignment options. When I revert to a non-FSE theme, these options return.

          Report

  3. Just wanted to add my 2c about shipping an FSE MVP in WP5.8 :)
    True, not everything will be possible in the MVP. Users will want to do things that will not be possible out of the box in the initial version. But that’s what an MVP is.
    It doesn’t have to be able to do everything under the sun, simply set the foundation, something we can work on and iterate as we go.

    Just like the block-editor when it was first included in core didn’t have all the blocks and options it has now, it keeps evolving and improving. But that evolution would not have been possible if it was not merged in core…

    FSE has the benefit of not breaking anything. Nothing changes for existing users on existing themes, they won’t even know it’s there unless they use a theme specifically built for Full Site Editing.
    Right now the APIs are solid, the foundation is all there, and using a carefully crafted FSE theme can result in amazing results.
    Is it perfect? Nope! But what is?
    Does it work? Yes.
    Can I build a site with it? Yes!

    Using TT1-blocks as a measure of “readiness” is wrong IMO. We use it because at this point in time it’s the de-facto, “official” FSE theme, but it’s not an indication of what FSE is capable of doing, or what an FSE site will look like. It’s just a testing tool, built to resemble an opinionated core theme.

    Report

    • I’m hoping we push FSE into WP 5.8. I think it’s nearly ready enough to go in as an MVP. Like you said, the only users who will be able to access it will be those who made a direct choice to run an FSE theme. Getting it out sooner means we can get more people testing it too.

      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: