New Full Site Editing Testing Challenge: Create a Custom 404 Page

The Full Site Editing (FSE) Outreach program has launched its third testing call, continuing the effort to engage users in a structured testing flow focused on specific practical tasks. Previous rounds had testers building a custom homepage and exploring the distinction between editing modes (template vs page/post).

The challenge in round #3 is to create a fun, custom 404 page. This page is often an opportunity for brands and individuals to inject a little humor and creativity into their websites, transforming a potentially negative experience into a path back to working links. In the past, site owners not comfortable with code had to rely on plugins in order to design their 404 pages. The new FSE capabilities will open a whole new world of customization.

Testers who want to jump in on this challenge will need to set up a testing environment that uses WordPress 5.7, the TT1 Blocks Theme, and Gutenberg 10.1.1 (latest version). Nothing special is required so it’s easy to jump in and start testing right away.

Anne McCarthy, who is spearheading the FSE Outreach program, has published a detailed testing flow that provides a guided exploration of the 404 template and simple tasks like adding navigation and other blocks.

This challenge seemed like a good place to dip my toe into FSE testing and check out the progress the team has made in the past few months. Here is what I set out to do: add a funny gif, a search form, and a button to get back home.

One of the first steps is to open the Navigation Toggle and head to Templates > 404. The “Navigation Toggle” refers to the WordPress icon in the top left corner of the page, but as a new user I would expect that to take me back to the dashboard. The naming doesn’t seem clear and I had to look up what was meant by Navigation Toggle.

Following the instructions, I selected the Header template part and removed it from the 404 page, but I don’t think it’s obvious to users that it’s possible to delete the entire template part in one go. Without the instructions, I probably would have started deleting all the blocks within the header template part before trying to figure out how to remove the entire thing.

The testing flow asks users to insert a Template Part Block, select the “New Template Part” option, and add a custom title like “404 Header.” While this feature technically works, it seems like power user knowledge and I don’t see less technical site owners having any idea that this is possible or understanding its purpose without reading tutorials.

One aspect of it that could be improved is that new Template Parts don’t save until you click “Update Design.” If you move away from the block and continue other parts of the design, it appears that it hasn’t saved and you may be tempted to create it again, as I was. Clicking “Update Design” will show you all the Template Parts you have created and requires confirmation to save them. This can get confusing if you don’t make a point to stop and save periodically.

Once the design is saved, there is no confirmation but the button is no longer operable. The interface could communicate this better.

I didn’t encounter anything that was broken, though several aspects of it could be significantly improved. Everything outlined in the testing flow seems to work as it should, if users can ever find it. It is going to be a real challenge to make the interface spectacularly simple enough for ordinary users to feel comfortable knowing when and how to create their own template parts.

Adding more blocks was easy enough when I customized the 404 page content. I skipped the part of the testing script that involved creating a menu.

404 preview

Unfortunately, the preview looked nothing like the display on the frontend, but I assume that is still in progress. After trying multiple sources, I found that embeds didn’t work and some of the block styles were off.

The testing flow for this challenge focused primarily on creating content within the new Template Part. That aspect of the test seemed to work, but there are a few things that could be significantly improved. The last part of the challenge is to answer the following questions:

  • Did the experience crash at any point? No
  • Did the saving experience work properly? Yes but it was confusing without any confirmation.
  • Did the saving experience make sense when making changes to the Template Part vs the general content? It did after taking some time to explore it, but it’s not a concept that would be immediately evident to beginners.
  • What did you find particularly confusing or frustrating about the experience? Saving template parts was confusing, and the previews are much better than what you get on the frontend.
  • What did you especially enjoy or appreciate about the experience? I appreciated the ability to edit templates and template parts without jumping into code.
  • Did you find that what you created in the Site Editor matched what you saw when you viewed your 404 page? No, it was far from similar to the preview.
  • Did it work using Keyboard only? No
  • Did it work using a screen reader? Did not test

My expectation when I began testing the 404 page design editing experience was that it would be a simple and enjoyable customization process with a few bugs. It ended up frustrating in the end because I could not trust the previews at all.

Is WordPress close to having an MVP of full site editing ready for 5.8? All the bones are in place. It feels like a rough prototype with enough momentum to reach MVP status in a few months. Editing and saving template parts works but the current interface design falls squarely within the realm of power users.

If you want to join this challenge, follow the testing flow and post your feedback by March 23, 2021.

One response to “New Full Site Editing Testing Challenge: Create a Custom 404 Page”

  1. Thanks so much for testing this, Sarah, and for doing a writeup! It genuinely made my week to see you jump in to test this so soon after I posted the call for testing. I hope it was even a tiny bit fun for you to go through despite the overall frustration.

    Right off the bat, you raise something I’ve both witnessed and felt confusion around: the navigation toggle. It’s why I linked to a screenshot as I didn’t trust that people would easily know what I was referring to. You can see some discussion here around the naming of this and how to make it more intuitive: https://github.com/WordPress/gutenberg/issues/29509

    In terms of deleting the template part, I agree. Check out this design that helps narrow in on specific template parts to make that experience a bit clearer: https://github.com/WordPress/gutenberg/issues/29148#issuecomment-789679709 I expect this kind of “zooming in” and “zooming out” aspect of editing a template vs a template part vs general content to be something that will continually be worked on to make it all more robust. Right now, it’s very easy for it all to blend together.

    I opened an issue around the template part name not updating: https://github.com/WordPress/gutenberg/issues/29844 Thanks for calling that out once more as when I was writing the test it was something I noticed but didn’t specifically dive into being a bug.

    With the saving experience, can you expand on what you imagine when you say “the interface could communicate this better”? For now, I’ve tried my best to get creative and capture some ideas/feedback in this issue: https://github.com/WordPress/gutenberg/issues/29846 Generally speaking, the saving flow is another area I’m keen to see iterated upon as it’s a key part of the experience to get right.

    I’m so bummed (yet also excited at the chance to figure out what’s broken) that you ran into issues with embeds and block styles. I jumped in and found a similar issue with the embed block: https://cloudup.com/c-I_B1EBe7Q but I couldn’t replicate the problem you had with the button block. Can you clarify if you added a link to the button block when this happened? For now, I commented on this previous issue related to allow resizing options with embeds as I think that’s the root issue here to create a WYSIWYG experience: https://github.com/WordPress/gutenberg/issues/14805#issuecomment-797808226 Separately, here’s hoping we can get a GIF block as a core block soon: https://github.com/WordPress/gutenberg/issues/13426

    Finally, your feedback around both wanting to see a preview and ultimately needing to is something that has come up repeatedly in both initial rounds for testing. I imagine it will continue to be a major piece of feedback and, for now, I recommend following this issue discussing exactly that: https://github.com/WordPress/gutenberg/issues/29398

    Thanks again! To anyone else reading this, I hope you join #fse-outreach-experiment in slack and join in on this call for testing to find more ways we can move this work forward.

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: