FSE Outreach Round #9: Building a Higher Ed Header

It feels like it has been ages since the WordPress community has had a call for testing Full Site Editing (FSE) features. The FSE Outreach Program was on a small hiatus. However, the WordPress 5.8 launch was also underway last month.

The program is an open call for testing various components of FSE. Thus far, volunteers have successfully provided feedback on features that have already landed in core WordPress, such as block-based widgets and template editing. Testers have delved into others that have yet to be released. Each testing round is open to anyone who can spare a little of their free time and share their findings. The goal is to break things and point out problematic areas of the user experience.

FSE Outreach #9 is a community-driven suggestion that calls for building a Higher Ed site’s header. Volunteers are asked to follow a 26-step process using the site editor beta feature in the latest version of the Gutenberg plugin and the TT1 Blocks theme.

I am a fan of this take on testing, and program lead Anne McCarthy seems to favor doing more of it in the future. “If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue,” she wrote in the announcement.

Since the project was all about Higher Ed, I decided to pay homage to my alma mater and use the colors that I wore proudly around campus for five years — and still do to this day. The following screenshot is the end result:

Fictional university website header with logo, title, description, navigation, and featured image.

Before going forward, I must admit that I cheated to get that final look. The call for testing asked that we build from the TT1 Blocks theme. I was able to get close to that result, but I had to switch to a custom theme I have been working on to get past a few hurdles.

I went through each stage of testing with TT1 Blocks and will cover the issues I encountered.

Building a Higher Ed Header

Just getting off the ground, I ran into my first issue, which turned out to be a non-issue. The internet gods decided to play a trick on me, disallowing me from editing both the Site Title and Site Description blocks. I really wanted my fictional university to be “Gutenberg University,” but I could not do so without saving my progress and refreshing the browser tab. I was unable to replicate the issue, so I am hoping it was simply a fluke.

Using the Navigation block still seems the most troublesome area of site editing. I know how much work the development team has put behind the user experience for this feature but cannot help but wonder if there is a point where users can opt into managing its content (the links) via the traditional Nav Menus screen in WordPress. The site editor works fine for the design aspect, but I have yet to feel comfortable using it to manage links.

This stage of testing calls for adding multiple page links as both top-level and sub-menu items. When clicking the + button to add a link, my first instinct is to search for the page itself. However, the available field is a block search rather than a page search.

Navigation sub-block search field with text that is meant to search for a page link.
Accidentally searching for link in block search field.

To add an actual link, users must first add the Page Link block. Then, they can search for a specific page. This two-step process gets me every time.

I ran into the issue for nav menus mentioned in the call for testing where there is no space between items when used inside a Columns block. It pains the purist in me to admit it, but I had to use the Spacer block between each item to fix this. I did not need to do this with my custom theme because, I am guessing, I addressed this somewhere along the way.

The “space between items” option also failed to work with the Navigation block, ruining one of the early design ideas I had. I decided to go in a different direction.

Using right-alignment with the Search block did not work. Therefore, I used the 100% width option to align it with my right-aligned nav menu.

Time and time again, I needed to rely on the Spacer block to make adjustments. Part of this was because default margins and paddings are inconsistent among different blocks. The still-missing margin controls on nearly every block also played a hand in this. This is not particularly noteworthy. The development team is aware of and working on extending spacing controls — they just can’t get here fast enough for some of us.

A spacing issue is what led me to ditch TT1 Blocks and switch to a custom theme. The following screenshot is my final work with the former. You may notice the gaping green background between the nav menu group and the header image below it.

Fictional university website header with logo, title, navigation, search, and image.
TT1 Blocks theme version with gap in header.

No amount of tricks or rearrangement of blocks seemed to remove that space, and I simply could not live with that. I had already solved about 90% of Gutenberg’s spacing issues with my own theme and did not feel like writing any new CSS to address this. Making the switch also meant that I could get rid of several Spacer blocks I had in place.

Aside from dropping in a header image, one other modification I made was skipping the addition of a Button block for the latest “Covid update.” I could not bear looking at TT1 Blocks’ overuse of padding. Instead, I nested a paragraph with a link within a column alongside a Navigation block.

As always, I enjoyed the process. This post is meant to be critical of specific areas in the hopes that it helps build a better WordPress. For all its faults, many other parts offer a solid user experience. Overall, the Gutenberg development team continues to impress.

6

6 responses to “FSE Outreach Round #9: Building a Higher Ed Header”

  1. Digamber says:

    For the nav – blocks,
    If they were converted to reusable blocks by default i would feel much happier as i could simply add the reusable block after if i deleted it.
    Right now i have to start from scratch every time i want to check the navigation against the default theme provided layout – which is a major pain.

    Report

  2. Lobsang says:

    I am having same spacing issue for nav menu with latest version of the Gutenberg plugin and the TT1 Blocks theme.

    Report

  3. It feels like it has been ages since the WordPress community has had a call for testing Full Site Editing (FSE) features.

    I missed these calls for testing too (and your always awesome responses) even though I run the program :D. I’m excited to have them rolling again. I’ll note that this “break” in calls for testing were intentional so I could help bust out some end user docs ahead of 5.8, redirect attention to overall 5.8 testing, and move cross country (gotta take a break from time to time):

    https://make.wordpress.org/test/2021/06/09/upcoming-fse-outreach-program-schedule-june-july/

    I am a fan of this take on testing, and program lead Anne McCarthy seems to favor doing more of it in the future.

    A big YES to this. It was really awesome to work with Blake on the idea and to come up with a use case that could possibly bring in folks to the outreach program who might not otherwise venture there just yet. My DMs are open (@annezazu in WordPress.org slack). As always you’re welcome to share in the main #fse-outreach-experiment channel or on any of the testing posts. Just don’t send any smoke signals as I likely won’t get them ;)

    Using the Navigation block still seems the most troublesome area of site editing.

    Agreed – it’s still an experience to refine both for creating mega menus and for creating even a simple menu. When it was made clear that it wasn’t going to make the 5.8 cut, it became an obvious area to focus a call for testing on as soon as I could swing it.

    To add an actual link, users must first add the Page Link block. Then, they can search for a specific page. This two-step process gets me every time.

    This gets me nearly every time too :D. Just this week, an overview issue was shared around what can be done to improve this as for 80-90% of use cases, folks won’t need to add a ton of additional blocks to a menu:

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

    I’m keen to see this evolve as currently having each block weighted equally when the quick inserter is pulled up with the navigation block makes for a confusing (and repetitive) experience.

    The “space between items” option also failed to work with the Navigation block, ruining one of the early design ideas I had.

    Reported here after some testing on my end: https://github.com/WordPress/gutenberg/issues/34056 Great find.

    Using right-alignment with the Search block did not work. Therefore, I used the 100% width option to align it with my right-aligned nav menu.

    Does this match your experience? https://github.com/WordPress/gutenberg/issues/31517

    No amount of tricks or rearrangement of blocks seemed to remove that space, and I simply could not live with that.

    I wasn’t quite sure where this should live so, for now, reported it in the theme experiments repo for the TT1 Blocks theme crew: https://github.com/WordPress/theme-experiments/issues/283 It might need to hang out in the Gutenberg repo but I’ll be sure to follow up either way. I’ve seen this phenomenon previously and, usually it’s chalked up to needing more spacing tools, but I wanted to be sure to track this down.

    As always, thank you for taking the test further with your own approach and even your own theme this time! I especially enjoyed your feedback on having more community calls for testing. I know we’ve often gone back and forth around the features themselves rather than the program but know I’m open to feedback on both and am trying to think about what can be learned from this current effort to inform future outreach programs: https://nomad.blog/2021/06/11/on-future-outreach-program-models-in-the-wordpress-community/

    Report

    • Thanks for chiming in, Anne. Yes, the custom-width search link is the right GitHub issue. Thanks for finding that and reporting the other things.

      I just subscribed to the lighter nav menu experience ticket. That one will be good to follow.

      On the spacing issue, I believe there are several different tickets that could help with better defaults, but spacing tools would obviously help with it too. I haven’t dug into this specific instance enough to know if it’s one of the current tickets I’m following. I’m going to look into it more.

      Report

      • Agreed on the lighter nav issue. I am keen to see how that evolves and imagine it’ll be an area for future calls for testing.

        On the spacing issue, I believe there are several different tickets that could help with better defaults, but spacing tools would obviously help with it too. I haven’t dug into this specific instance enough to know if it’s one of the current tickets I’m following. I’m going to look into it more.

        I can offer a follow-up here after chatting with a few folks. Essentially, this is default padding and it’s not something that TT1 is likely to address as of now. As you mention too, there are tons of issues open around spacing tools so I’m going to defer to those for now rather than opening up a likely redundant Gutenberg issue.

        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: