FSE Program Handling HigherEd Headers Summary

This post is a summary of the ninth call for testing for the experimental FSE outreach program. During this call for testing, we surpassed 400 members in the channel! I love an excuse to celebrate so please pat yourselves on the back, treat yourself to a favorite dessert, listen to your favorite song, etc to celebrate this neat milestone of community contributions. While we reached this milestone, I do want to note that contributions were lower for this last round than usual so, if you’re sitting back thinking that others have it covered, please instead jump into the next round if you can! 

Special thanks to both @mimitips for the Japanese translation and @piermario for the Italian translation. 

Shout out to @utz119 @wazeter @alanjacobmathew as first time contributors to a call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!

How far can one go?

Check out @greenshady’s approach (keep in mind he self admittedly “cheated” to get the final look): 

@richtabor took on trying to replicate UNG’s header with the following outcome:

High Level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following detail oriented feedback. Across all of the feedback, the desire for a lighter navigation experience as well as more advanced tools around spacing, bulk adding items, etc. stood out. 

I didn’t run into too many issues getting the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to display decently, but I also know a bunch of tricks to get the editor to do what I need it to do. The end result is ok — but the experience getting there needs a lot of refining yet.

– @richtabor in this comment. 

Creating the menu was quite a hassle. Too many clicks especially when creating submenu.

– @alanjacobmathew in this comment.

This was an interesting challenge…I didn’t make anything “beautiful,” however I did find a couple of things while I was trying to do most of this via keyboard-only navigation.

– @bjturner in this comment.

Using the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.

– @greenshady in this WPTavern post. 

After delving deeply into the ins and outs of the navbar – the primary issues all revolve around responsiveness. The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. issue came down to the navigation bar operating as a separate element (which makes sense for a block) than the rest of what you’d normally consider a complete header. This means that in order to properly size and place the navbar, you have to use a container block like group or columns – which is where alignment starts to get into trouble.

– @wazeter in this comment.

Confirmed bugs

Thanks to clear patterns in feedback due to a larger focus on the navigation block, this is a dedication section to just bugs that were found or confirmed in this test. Those that have been resolved thanks to a release mid-test have been noted below. 

• Undoing Navigation block actions doesn’t undo the action.
• Columns block width listed as px rather than percentages.  
• Search Block “Optional placeholder” text takes on nav block underline.
• Not able to remove the Site Title block underline. 
• Search bar width doesn’t update within the editor below a certain threshold.
• Problem with the margin between the navigation block collapsing (fixed with 11.3). 
• When selecting the button block and applying a justification, the justify doesn’t apply until the box is unselected (fixed with 11.3). 
• Spacing issue with the Home link option (fixed with 11.4).
• The sub-menu indicator is off centered (fixed with 11.4).
• Emptying site title causes it to be reset (will be fixed with 11.5).

General Usability Feedback

At the core of this test, the feedback centered around a combination of small, specific issues and larger problems with the overall settings of different blocks. This made the experience feel less refined and intuitive leading to general confusion when trying to accomplish sometimes simple things, like changing the width of the Search block. In some cases, work is underway actively to address these concerns, as is the case with adding a gap block feature to make it easier to manage the spacing between navigation block items. Some were repeat items and are noted as such below. 

• Editing Field expands when both List View & Block Settings are open (repeat).
• Width options and icons don’t effectively communicate what to expect (repeat).
• Confusion around what the overlay options do for the responsive menu (repeat).
• Content is hidden at top of editor due to the toolbar (repeat, will be fixed with 11.5).
• Live Preview does not work when List View and the settings sidebar are open. 
• Padding doesn’t respond when manually entering in values despite other methods of changing padding showing live changes.  
• Desire for control over the spacing between blocks, specifically the navigation block for this test. 
• Confusion with the Search Block, including what the “Use button with icon” option does, the lack of impact of changing the button on inside/outside, and more. 
• Highlight column icon in toolbar to reflect which nested column is selected.

I am not able to see any visual difference between Wide width or Full width. Because my browser screen is not wide enough to see the difference. When I widen the browser window then I am able to see the difference. Should the Wide width alignment be response in relation to the browser size window? So the user will be able to see a visual difference in the backend when testing Wide or Full width.

– @paaljoachim in this comment.

I wish there was some way to reduce the default spacing between blocks. For example I want to reduce the space above the 2nd Nav block.

– @alanjacobmathew in this comment.

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.

– @greenshady in this WPTavern post. 

For example, adding search to the navbar, and then wanting the search bar to display differently (larger, smaller) with a potentially different background doesn’t work. Individual menu items can’t easily change the background color of a link (e.g. an active color) to align properly with the container element and there are no hover effects (extremely common use cases) without diving into CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. code.

– @wazeter in this comment.

Not quite a bug, but it doesn’t feel polished when the Block hover menu extends past the viewport.

– @bjturner in this comment.

When the first block is extremely near to the editor header, some parts of the block content gets hidden, while the viewport adjusts automatically on both left and right side, the top part remains fixed.

– @alanjacobmathew in this comment.

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) feedback

Thanks to some folks focusing in on what could be done with this test using just keyboard controls, there’s a lovely list of accessibility focused items: 

• In the navigation block, the focus seems to get lost when selecting the Start empty option using the Tab key. 
• The Columns number slider resets to 1 when navigating back to the previous focusable element using the Tab + Shift key. 
• There’s strange arrow key behavior with nested blocks, including the Columns block, which makes it very hard to navigate between levels. 
• Block toolbar is cropped when the block is toward the right side of the screen.
• Spacer z-index interferes with keyboard navigation for sub-menu items (fixed with 11.4). 
• Add a way to close the Button link toggle using Keyboard (will be fixed in 11.5 and WordPress 5.8.1).

Trying to do keyboard only navigation for working with the navigation block. It’s pretty good, but there’s so many tabs!

– @bjturner in this comment.

Feature requests

While the experience was generally easy enough to follow, a few clear feature requests were raised to streamline the process further:

• Add “Site branding” patterns to make it easier to customize blocks that are likely to be used together (Site Logo, Site Title, Site Tagline). 
• Include the ability to bulk add items to menu. This is currently a work in progress. 
• Make it easier to quickly add a custom link. There is an overview issue for a lighter navigation experience that addresses this. 
• Desire for custom width for the Button block.
• Simplified Site Logo description (will be available in 11.5).
• Make the responsive menu option for the navigation block enabled as the default. 

As mentioned above, an overview issue was shared during this test that explores a more scaled down version of the navigation block to make it easier for simple menus to be created. This will better cover the more common use case for most sites. Since this test explored both a simpler and more complex menu structure, the feature requests reflect each experience. 

It just feels too cumbersome to add a custom link today.

– @paaljoachim in this comment.

Creating the menu was quite a hassle. Too many clicks especially when creating submenu.  

– @alanjacobmathew in this comment.

#fse-outreach-program, #fse-testing-summary, #full-site-editing