FSE Outreach Round #6: Building a WordCamp Landing Page via the Template Editor

As has almost become ritual at this point, I am always looking forward to the next testing round for Full Site Editing (FSE). Spearheaded by core contributor Anne McCarthy, the FSE Outreach Program’s fortnightly user tests are usually fun and offer everyone a chance to get involved, regardless of their experience level.

This latest testing round is all about whether users can create a custom template on a per-post basis directly from the editor. The answer? Why, yes, they absolutely can.

Round #6 asks for volunteers to use the new template-editing mode, which is expected to land in WordPress 5.8, to build a WordCamp landing page. The goal is to offer a discount code and attract attendees from another event to join.

Anyone interested in discovering issues and providing feedback should give this testing round a shot. There is a 36-step guide that will walk you through building a custom landing page. It should take no more than 15 minutes, maybe more if you are putting a unique spin on the design — that is half the fun for me.

Feedback is open through May 26. Just follow the instructions and leave a comment on the post.

The closest thing to a local WordCamp I have is Birmingham, AL, known for its “WP Y’all” name. I am hopeful that the WC Birmingham team would not mind me borrowing their logo for this experiment. The following is the WordCamp landing page I built with the TT1 Blocks theme:

Full page screenshot of a reimagined WordCamp Birmingham landing page.

Other than the known Nav Menu block issue noted in the post, I ran into no technical problems with any of the 36 steps. Everything worked as expected. However, that does not mean that everything was perfect.

Problems, Mostly Trivial

Before diving into the actual user-experience issues with building templates, I noticed a problem with the custom template system. After finishing the testing round, I wanted to see what my template looked like with other themes. However, I could not do this. Upon activating another theme, my custom template seemed to disappear.

The problem is that custom templates are tied to the theme. I see the logic in this. Certain aspects could be specific to the active theme (colors, fonts, etc.), and it is always how custom templates have worked. However, the block template system is different. From a user viewpoint, I feel like my custom-created templates belong to me rather than the theme.

I can see a user switching themes after a couple of years and building a dozen or so templates having a poor experience in this situation. If the feature remains the same, there should be more clarity.

One of the more frustrating aspects of the template editor is the lack of space at the bottom of the frame. I am accustomed to the post editor’s extra whitespace, focusing the active workspace toward the top of the screen.

Screenshot of the template editor showing the limited space at its footer.
Limited space at the bottom of template editor.

I just want to put the current piece of the layout I am working on higher up the page. I am not sure how this would look when dealing with a template editor because it needs to clearly mark the end of the document.

The other issues were primarily around the TT1 Blocks theme or missing features with the current Gutenberg plugin.

When adding a horizontal Buttons block, there is no space between individual buttons. Vertical alignment is better, but it could use a slight bump (on the front end, not in the editor).

Two horizontal buttons with no space in between them.
Buttons a little too close.

And, I feel like I cannot be the first to say this: I am ready for Button block padding controls so that I can adjust TT1 Blocks’ abnormally large button output.

When inserting a full-width Columns block, the text on the left butted against the side of the page. Because neither the Columns nor the inner Column blocks currently have padding controls, the only way for users to “fix” this is to add a background color. Gutenberg automatically adds padding in that case.

Text in a left column butts against the side of the page because of no spacing.
No horizontal spacing.

The last trivial fix I had to make was adding a Spacer block above the custom footer section. This was not included in the testing instructions. Without it, the footer had no spacing between it and the content above it.

I did question one aspect of the testing instructions. Templates are generally a sort of wrapper or design layout. Content is a separate thing that typically lives independently. In this test, the content is housed within the template. There are scenarios where the test case makes sense. However, I would have preferred a flow where the content portion of the template was a part of the post and output via the Post Content block.

That sort of moving back and forth between post and template editors may have opened up some more usability hangups that would be worth exploring.

4

4 responses to “FSE Outreach Round #6: Building a WordCamp Landing Page via the Template Editor”

  1. James Koster says:

    Templates are generally a sort of wrapper or design layout. Content is a separate thing that typically lives independently.

    You may be interested in this PR which explores ways we might improve content editing interactions in the template editor.

    Report

  2. Whew! You made yet another beautiful design for this latest call for testing. Thanks as always for digging in so deeply and highlighting the Outreach Program’s efforts.

    From a user viewpoint, I feel like my custom-created templates belong to me rather than the theme. I can see a user switching themes after a couple of years and building a dozen or so templates having a poor experience in this situation.

    This is an excellent point and I opened an issue here to document the feedback:

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

    I welcome anyone to chime in further on the solutions they’d like to see as I can definitely see that leading to a frustrating experience.

    One of the more frustrating aspects of the template editor is the lack of space at the bottom of the frame.

    I nearly opened an issue for this but stopped upon realizing that this is likely intentional to preserve the WYSIWYG experience, particularly when editing a template vs writing content. I’m not sure what a good solution is here but I’ll note this in the summary post for now as a point of frustration. My mind goes straight to this might be necessary frustration in order to preserve the one to one view.

    When adding a horizontal Buttons block, there is no space between individual buttons.

    Reported in the theme experiments repo: https://github.com/WordPress/theme-experiments/issues/262 Count me in as a big plus 1 to have more control over the buttons block :D

    Because neither the Columns nor the inner Column blocks currently have padding controls, the only way for users to “fix” this is to add a background color.

    Nice snag. I opened an issue in the theme experiments repo once more but might need to open other issues in the Gutenberg repo depending: https://github.com/WordPress/theme-experiments/issues/263 Work is underway to add more spacing controls to blocks so I imagine this scenario is covered in the long run but will be double checking to make sure.

    However, I would have preferred a flow where the content portion of the template was a part of the post and output via the Post Content block.

    I mentioned this in the comments of the post but, originally when mapping this out, that was the plan! However, I ended up running into a wild error with the post content block: https://github.com/WordPress/gutenberg/issues/31798 I just replicated it on a brand new test site as well. Generally speaking, I try to be mindful of not sending people in the direction of obvious errors that are well documented with these calls for testing (massive waste of everyone’s time). Needless to say, the ultimate call for testing wasn’t the original approach I wanted to take.

    That sort of moving back and forth between post and template editors may have opened up some more usability hangups that would be worth exploring.

    As James mentions above, there’s work underway to add in some friction/structure to the experience to make it more intuitive to use. It’s unclear if the “click to edit” experience will make it into 5.8 though.

    Report

    • Thanks for the followup, Anne, and making tickets. I’m starting to get better at opening them, but I need to work on doing more.

      I’m checking out the template/content-related ticket. In my own experiments since this post, I’ve been thinking a lot about how independent these things should be. I’ve done some hybrid-type of templates where some of the structure made sense as part of the template and some as part of the content and vice versa. In short, it’s going to be interesting to see what users do with it.

      Coupling this with the idea that templates are tied to the theme, I wouldn’t want anyone to “lose” anything they considered content on theme switch.

      I nearly opened an issue for this but stopped upon realizing that this is likely intentional to preserve the WYSIWYG experience, particularly when editing a template vs writing content. I’m not sure what a good solution is here but I’ll note this in the summary post for now as a point of frustration. My mind goes straight to this might be necessary frustration in order to preserve the one to one view.

      “A necessary frustration” — I am kind of thinking the same thing. Putting my dev/design hat on, I’m not sure if there is a good solution. Putting my user hat on, I might just work from the bottom of the page up. :)

      Report

  3. Karla says:

    Thank you for this exercise. I will try it out.

    Independently, before finding this post, I was playing with the TT1 block theme and the latest Gutenberg plugin. A Site Templates section appeared in the dashboard sidebar and I manually added some templates there. I also modified the header and footer templates via full site editing and the code for the modified templates appeared in that section, while the originals remained in the theme directory.

    Will all those database stored templates go away if I change the theme to another block based theme? Or will they remain like custom field groups do when using ACF? It would be great if they could persist, since losing structure aka widgets is always an occasion for teeth gnashing and regret when changing themes.

    Also, since the templates are not in code and can’t be managed via git, will there be a way to export them so that they can be carted from a development site to a live site without a lot of copying and pasting?

    I did like using the templates and the template idea of page building. It is very different from existing WordPress interactions however. It is as if WordPress is becoming a new product.

    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: