The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from @blake. 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. You can share ideas directly in the slack channel or via DM to me (@annezazu).
Feature Overview
To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized header to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site:
As you can imagine, this test is going to enable us to go deep into the Navigation Block. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s navigation menu, both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do.
Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed:
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.
Known issues
While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items:
This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further.
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a beta feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Create structure (template part, columns, etc)
Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.
Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on.
Select the parent Columns Block and, using the Block Settings in the sidebar, change the columns from 2 to 3 columns.
Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.
Build out site branding
In the first column, add the Site Logo Block and upload/use a site logo. You can use this free logo from logodust.com if you’d like.
From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now using this export file (open the link and select the “Download” option).
Create a simple menu for high level items
In the third column, add a Navigation Block and select the “Start Empty” option.
From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice this spacing bug at this point that’s slated to be fixed in Gutenberg 11.3.
Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block.
To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc).
Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like.
Create a more complex menu for specifics
Select the overall Columns Block that contains your three columns (this is where you might find the List View helpful). Using the More Settings menu option, select “Insert After” to add a block after.
Add another Columns Block and select the 30/70 option.
From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page.
Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option.
From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, here’s a screenshot of the icon for adding sub menu items.
About should have the following sub-menu items: Distinguished Alumni, Diversity and Inclusion, Faculty, History, Leadership.
Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition.
Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research.
Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services.
At this point, add sub menu items under Admissions > Career: Business, Design, Technology.
Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the entire Navigation Block as shown in this GIF.
If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed!
From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want.
Save your work & customize further
Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu.
Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu.
From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons.
Advanced testing steps
This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance.
The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see.
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did you find any features missing while creating the header? Please be as specific as possible, especially if you followed the Advanced steps.
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in the Site Editor matched what you saw on your site?
How did you find the Navigation block worked when viewed on smaller screen sizes?
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHub, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
This was an interesting challenge. I was able to carve out an hour to give it a try and might be able to do another session next week.
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. These timestamps are when I take the note, so you might need to go a bit before the timestamp to see the context, but here’s what I encountered:
0:09:28 :: The “Column settings” width indicates pixels, but I think it’s doing percent?
0:13:11 :: Focusing on the “Covid” button when it’s aligned-right makes it jump back to aligned left.
0:14:32 :: I was hoping for a UI item to add a new column. I can see that I can create another column from the “columns” parent block, but not from hovering in the main UI.
0:21:31 :: Interesting horizontal scrolling. Not quite a bug, but it doesn’t feel polished when the Block hover menu extends past the viewport. Maybe it is a bug if we’re focusing on keyboard only nav?
0:25:42 :: Confusion over the CSS units used for column widths. The GutenbergUX seems to tell me that I have px available. However I can’t specify a specific column width. Instead it’s a =flex-basis= value.
Rems seem to come through.
I guess this does make a bit of sense and I might be trying to do too much. I mainly wanted to have the icon but up against the site title.
Returning to this and thinking about it… I think that the confusion for me is that the Block settings says “Width” but the actual styling is “flex-basis.” That’s probably good enough for most use-cases where someone just wants a width, but as someone that has a pretty good understanding of CSS, that wasn’t intuitive to me.
0:34:19 :: Trying to do keyboard only navigation for working with the navigation block. It’s pretty good, but there’s so many tabs!
0:37:05 :: Keyboard nav — I can’t access the “plus” button when adding sub-menu items.
0:38:35 :: Ahhh, just pressing ‘enter’ gets me a new line to add a sub-menu item.
0:40:56 :: Odd hover-state issues when trying to revise sub-menu items
0:41:53 :: ~Maybe because I changed the “Name” of the submenu item from “Diversity and Inclusion” to just “D&I”, but the =:before= attribute isn’t correctly set?~
0:43:12 :: Nope, it looks like the “spacer” block has a higher z-index and is preventing click events on those above elements.
0:44:11 :: Yep — bug: spacer element below sub-menu items messes with z-index?
Thinking through this more, it makes sense for why that’s happening — the spacer is farther down in the DOM so it will naturally have a higher context. From a UX perspective, this isn’t great though, because I can’t have a spacer below a hovering sub-menu.
0:48:25 :: I think that something about this spacer block is affecting keyboard navigation. Maybe? I can’t “move up or down” past certain elements using just the keyboard.
0:50:24 :: Ok, I have to wrap up for the day. Hope this helps!
@bgturner thanks so much as always for the video, the timestamps, doing this via keyboard navigation, and the always helpful feedback. Glad it proved to be interesting! For some reason, I’m not getting audio on your video but I’ll go through each thing you raised one at a time below:
The “Column settings” width indicates pixels, but I think it’s doing percent?
I mainly wanted to have the icon but up against the site title.
In writing this test, I had a similar reaction wanting the ability to control this. I nearly opened an issue for it then but realized that this will be resolved by having more dimension controls, which are actively being worked on. I might loop back to open an enhancement issue though about having something similar to Media & Text Block but for Site Title + Site Logo + Site Tagline (Site Branding?). I have a feeling this will be a recurring piece of feedback.
Trying to do keyboard only navigation for working with the navigation block. It’s pretty good, but there’s so many tabs!
Lots of work has been done there to make it work with keyboards :). Agreed though on the number of tabs. I’m not going to open an issue for this but definitely will mention it in the summary post for those working on this block ahead of 5.9 to keep in mind.
Thinking through this more, it makes sense for why that’s happening — the spacer is farther down in the DOM so it will naturally have a higher context. From a UX perspective, this isn’t great though, because I can’t have a spacer below a hovering sub-menu.
I went on a real journey watching your video, trying to test on my end, and then reading the timestamps. Appreciate your persistence there. There have been a few z-index related issues in the past with the nav block. I opened a new issue to cover this one too:
I might loop back to open an enhancement issue though about having something similar to Media & Text Block but for Site Title + Site Logo + Site Tagline (Site Branding?). I have a feeling this will be a recurring piece of feedback.
4- Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.
—> 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.
Build out site branding
6- From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
I removed the Site Title and Site Tagline. Added a Site Logo. Added back in again the Site Title. Deleted letter by letter using backspace and when the last letter was removed the original site title came back (as if it was reset). I had to remove all except 1 letter and write out a new Site title, and then remove the first letter remaining of the old site title.
Issue added here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34244
Adding a background color to the Site title automatically adds padding. Opening the Dimensions panel I had to add Padding and 0 to remove the added padding.
(I assume there is an issue for this already.)
7- In the second column….
For instance clicking into the parent column one sees a dark area in the top of the Header icon. Should the same method be added to the Columns block?
As one selects Column 1 and looks at the column toolbar icon the second column looks to be highlighted, but that is incorrect as the columns toolbar icon when a selected nested column
12- Navigation block selected. I clicked the Decoration underline/strikethrough and noticed the Search “Optional placeholder” text became underlined. Now that is an interesting bug. I expected that all the links would become underlined. (Backend)
I added various submenu pages. It was a hassle. It needs a more direct approach to just writing a link name and having the control link box show up to select an existing page/post with the name one wrote or creating a new link.
I tested the frontend and was not able to hover down to the submenu links before the Nav drop down closed.
@paaljoachim thanks as always for diving into these calls for testing. It wasn’t lost on me that you were one of the more active contributors when finding folks to give badges to. Thank you too for opening issues where you could.
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.
Adding a background color to the Site title automatically adds padding. Opening the Dimensions panel I had to add Padding and 0 to remove the added padding.
(I assume there is an issue for this already.)
I imagine similar to other issues, this is due to theme defaults and is expected behavior. Quickly checking theme.json confirms that (Themes can remove it).
Adding a link to the Navigation block. Should one be able to click the black inserter icon and start writing and automatically have the option to add a custom link?
Thanks for opening these links! I see you had some great interactions with Joen that pointed to the overall issue around providing a lighter navigation experience.
Adding a search block. I could not see any visual difference between Button inside or Button outside in the backend Site Editor.
There is also a problem with selecting the 3rd column Nav or Search when the browser is a little smaller, as the toolbar goes above the scrollbar and under the Settings.
Looks like it is a duplicate and possibly related to another issue found earlier! Great snag as these pain points are particularly jarring (at least to me).
Thank you for testing in turn and for opening issues once more! Great finds. I just added labels to each so the team can jump in to examine further. Hope to see your username pop up in future calls for testing 🙂
Viewport (00:02): 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. Ended up using a spacer block, and expanded it whenever I had to make changes to my header template.
(00:11) Live Preview doesn’t work well while adjusting the column width when both the ‘ListView’ and right sidebar is active. Once closing either one of those the live preview works as expected.
(00:46) When adjusting the padding, the preview doesn’t show any changes, until the user clicks out of that box or press enter key. I guess this is a feature.
But when the user changes the value to null(ie. Empty box), without pressing enter and clicks out of the box, the value automatically sets to the previously saved value and not 0.
Missing Save Button (Github Error: 30515)
(1:05): When adjusting justification
(1:10): Responsive menu toggle
SubMenu Indicators Toggle
Inherit Default Layout Toggle(Main header block)
Steps 8 & 9 : Link Settings in the sidebar, not clear and confused about how it works.
Step 11: The search bar width section, only 100% and 75% is working for me, the 25% and 50% shows the same width as that of 75%. The custom width section for users to enter manually doesn’t show any change below 92%. So I guess that is the default width for all other settings.
Step 7: For the button section width settings doesn’t support custom width for the user to enter. Only pre-assigned values are available(It was available for search bar settings).
(1:40): Spacing Issue when ‘Home’ link used inside navigational menu. (Using GB 11.3.0)
(2:03): The SubMenu indicator position inside a SubMenu is not properly aligned to text in the back-end, while on the front-end it is aligned.
(2:18): While inserting a link, the block editor kept jumping in some areas, which was quite annoying.
(2:30): Menu overlaps
(2:40): Even though I made sure to make the menu responsive, the site hosted on Local wasn’t responsive on mobile. But after exporting it to TasteWP, the menu became responsive.
Also not sure how overlay colour settings works on the mobile menu.
Overall
Creating the menu was quite a hassle. Too many clicks especially when creating submenu.
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.
I did miss the preview in the new tab button.
I wish there was a hide/show button in the list view next to each block to hide/show the component in the live preview pane.
Enhancement for ListView: When I click on the ListView block, the live preview automatically jumps to that block, which is very helpful. While clicking on a block on the preview window highlights the block on navigation, but doesn’t automatically scroll to that block, which would be a good feature when making a complex design.
@alanjacobmathew thanks for testing so thoroughly, writing up a great report, including a “highlight reel” of issues, and for pinging me when your comment got stuck as pending. I deeply appreciate it across the board. I would have hated to miss this feedback! I bolded the areas where I’d love some additional context.
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.
For the button section width settings doesn’t support custom width for the user to enter. Only pre-assigned values are available(It was available for search bar settings).
Enhancement for ListView: When I click on the ListView block, the live preview automatically jumps to that block, which is very helpful. While clicking on a block on the preview window highlights the block on navigation, but doesn’t automatically scroll to that block, which would be a good feature when making a complex design.
Do you mind sharing a video for this? I am not quite sure I’m able to follow what you’re suggesting but want to be sure to see if it’s something that can be included in the List View improvements!
Wasn’t clear how these settings affect in the frontend.
Enhancement for ListView: When I click on the ListView block, the live preview automatically jumps to that block, which is very helpful. While clicking on a block on the preview window highlights the block on navigation, but doesn’t automatically scroll to that block, which would be a good feature when making a complex design.
Do you mind sharing a video for this? I am not quite sure I’m able to follow what you’re suggesting but want to be sure to see if it’s something that can be included in the List View improvements!
So in this case, when I click on the ‘WP social icon block’ in the ListView, the editor jumps to that block. But, when clicking on the ‘SiteTitle’ block on the editor, it selects the block in ListView but doesn’t jump that block. That is user still has to scroll to that block from the listview.
I created the top header area of the UNG website. I didn’t run into too many issues getting the header 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.
I don’t feel the Rounded option should be a core style for the Site Logo. I don’t know that many folks would use it — unless they’re doing an avatar of sorts for the logo. Just look at the logos in the wild — very few are round.
I’m not sure why my first submenu item does not display on the front-end, but does in the editor.
Almost seems like the responsive setting should be toggled ON by default. Not sure if we can leverage smarter defaults, but if it exists within a Header template part, it should be ON.
The menu on the frontend is no longer beside the search bar.
@richtabor always fun to see your name appear in my sphere of the internet. Thanks for diving into the more complex challenge of replicating rather than just following the instructions above! The screenshots are extremely helpful too.
Adding a site logo was simple. Though I don’t think the massive description is actually useful in the blocksidebar.
This inspired a flurry of description updates, including the site logo:
Working to find the right balance though between verbosity and education 😀 but rest assured it’s noted.
Having left/right/center alignment on the logo doesn’t feel like it’s very appropriate. The parent block (in this case, the columns block) will very likely always dictate that alignment.
This is obviously being explored more with blocks like Buttons or Navigation but I imagine will evolve to include more of these situations. I’m not going to open an issue for now as a result.
Navigation: If you open the navigation into it’s modal, then drag/move one of the items — you can no longer close the modal by clicking on the overlay.
I’m not sure why my first submenu item does not display on the front-end, but does in the editor.
By chance, was this a draft page? If so, it’ll show up in the editor but not on the front end 🙂 This gets me from time to time.
Almost seems like the responsive setting should be toggled ON by default. Not sure if we can leverage smarter defaults, but if it exists within a Header template part, it should be ON.
I’m going to flag the other items mentioned in the recap post but am not going to open issues for now as much of the work around dimension controls and 1:1 parity is currently underway!
After delving deeply into the ins and outs of the navbar – the primary issues all resolve around responsiveness.
The core issue came down to the navigation bar operates 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.
Sizing site logo, with search bar and navigation block elements is largely unintuitive and mostly requires addressing via modifying css properties in the theme file or adding custom styles.
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 CSS code.
Then on the responsive end of things – even giving a navbar about 50% of the space on the menu, after about 5 or 6 menu items with decent spacing and a reasonable size (such as 1.25 rem) things start running together and then looking bad as you resize the window – because they’re going to simply create a new line.
On desktop with 1920×1080 resolution, things are generally okay, but once you get close to common sizes like 1440, without modifying the css files, the whole menu bar ends up looking sloppy because it just goes to a new line.
The actual mobile button conversion and hover works pretty well overall, but as Rich Tabor pointed out, sub menus get weird with alignment on desktop / tablets.
Overall, I’d say it’s actually easier to just make a custom widget with a navwalker for using the navbar – because you have to customize the CSS anyway to make any kind of tuning changes.
Forgot to mention – I also tried making the navigation menu using CSS Grid – which treated the entire navbar as a single grid item, so was pretty clunky overall – though current CSS props setup to be flex aren’t necessarily designed to be used in CSS grid, so that’s less an issue with the navbar itself.
@wazeter thanks so much for jumping in to contribute. It’s been super neat to connect over slack and then to have you share your thoughts for this call for testing.
After delving deeply into the ins and outs of the navbar – the primary issues all resolve around responsiveness.
This is an excellent call out. I know a lot of work has been done to make the general navigation block responsive so it’s great to hear where more improvements need to be made. Related to this, I know responsive tools are very much on the radar for 5.9.
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.
Sizing site logo, with search bar and navigation block elements is largely unintuitive and mostly requires addressing via modifying css properties in the theme file or adding custom styles.
Agreed. There’s a lot of needing to select the parent block, drilling down into child blocks, trying to figure out what’s in the sidebar vs toolbar, etc. While this doesn’t solve the problem, I am keen to see some patterns in place to ease getting something in place so that only tweaks need to be made.
For the general responsive feedback for the navigation block, this will be addressed in time when device specific editing is added so, for now, stay tuned 😀
This was an interesting challenge. I was able to carve out an hour to give it a try and might be able to do another session next week.
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. These timestamps are when I take the note, so you might need to go a bit before the timestamp to see the context, but here’s what I encountered:
http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.getf.ly/Apu9O1P9
0:09:28 :: The “Column settings” width indicates pixels, but I think it’s doing percent?
@bgturner thanks so much as always for the video, the timestamps, doing this via keyboard navigation, and the always helpful feedback. Glad it proved to be interesting! For some reason, I’m not getting audio on your video but I’ll go through each thing you raised one at a time below:
Excellent snag. I just opened a new issue for that here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34096
There’s a fix on the way in 11.3 for this: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/33739
Whew, agreed. There are a few issues about this but the previous one I opened can be seen here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/30398 I regularly find ways to “break” this.
In writing this test, I had a similar reaction wanting the ability to control this. I nearly opened an issue for it then but realized that this will be resolved by having more dimension controls, which are actively being worked on. I might loop back to open an enhancement issue though about having something similar to Media & Text Block but for Site Title + Site Logo + Site Tagline (Site Branding?). I have a feeling this will be a recurring piece of feedback.
Lots of work has been done there to make it work with keyboards :). Agreed though on the number of tabs. I’m not going to open an issue for this but definitely will mention it in the summary post for those working on this block ahead of 5.9 to keep in mind.
I went on a real journey watching your video, trying to test on my end, and then reading the timestamps. Appreciate your persistence there. There have been a few z-index related issues in the past with the nav block. I opened a new issue to cover this one too:
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34097
P.S. I saw your lunch cal event go off during the recording. I appreciate you exploring this test and powering through part of your lunch to do so <3
Decided to go for it 🙂
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34123
Testing.
Create structure.
4- Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.
—> 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.
Build out site branding
6- From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
I removed the Site Title and Site Tagline. Added a Site Logo. Added back in again the Site Title. Deleted letter by letter using backspace and when the last letter was removed the original site title came back (as if it was reset). I had to remove all except 1 letter and write out a new Site title, and then remove the first letter remaining of the old site title.
Issue added here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34244
Not able to remove underline is brought up in this issue: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/30701 there are also associated issues.
Adding a background color to the Site title automatically adds padding. Opening the Dimensions panel I had to add Padding and 0 to remove the added padding.
(I assume there is an issue for this already.)
7- In the second column….
For instance clicking into the parent column one sees a dark area in the top of the Header icon. Should the same method be added to the Columns block?
As one selects Column 1 and looks at the column toolbar icon the second column looks to be highlighted, but that is incorrect as the columns toolbar icon when a selected nested column
Should the Columns toolbar 3 column icon reflect which column one is in? I added an issue. http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34245
9- Adding a link to the Navigation block. Should one be able to click the black inserter icon and start writing and automatically have the option to add a custom link? I added an issue for it here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34246
Similar to this issue: Click into the Nav field area and begin writing and have the link control show up: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34247
(Because it just feels too cumbersome to add a custom link today.)
11- Adding a search block. I could not see any visual difference between Button inside or Button outside in the backend Site Editor.
There is also a problem with selecting the 3rd column Nav or Search when the browser is a little smaller, as the toolbar goes above the scrollbar and under the Settings. http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34248 (I did not search as through as I should, as I believe this might be a duplicate.)
12- Navigation block selected. I clicked the Decoration underline/strikethrough and noticed the Search “Optional placeholder” text became underlined. Now that is an interesting bug. I expected that all the links would become underlined. (Backend)
I added various submenu pages. It was a hassle. It needs a more direct approach to just writing a link name and having the control link box show up to select an existing page/post with the name one wrote or creating a new link.
I tested the frontend and was not able to hover down to the submenu links before the Nav drop down closed.
@paaljoachim thanks as always for diving into these calls for testing. It wasn’t lost on me that you were one of the more active contributors when finding folks to give badges to. Thank you too for opening issues where you could.
Great call out. This continues to be a problem and I’ve added your feedback to this previous issue as I think it’s most related: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/30724#issuecomment-904947540
I imagine similar to other issues, this is due to theme defaults and is expected behavior. Quickly checking theme.json confirms that (Themes can remove it).
Thanks for opening these links! I see you had some great interactions with Joen that pointed to the overall issue around providing a lighter navigation experience.
Hmm, I tried to replicate this but couldn’t! I can see a border around the block when using button inside: http://wayback.fauppsala.se:80/wayback/20210908144701/https://cloudup.com/cnOsmCknpRD
Looks like it is a duplicate and possibly related to another issue found earlier! Great snag as these pain points are particularly jarring (at least to me).
Agreed – I’m very keen to see bulk adding options implemented: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/31667
What a fun bug 😀 I dig it. Reported it here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34275
I tried to replicate this but wasn’t able to. Can you give more information? Here’s a quick video: http://wayback.fauppsala.se:80/wayback/20210908144701/https://cloudup.com/c4EDvEEB36f
Smooth navigation creation for me. Only one issue to report beyond known issues: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34273
Excellent find – undo and redo options are super important to get right. Thank you for reporting too!
I could not get too far today but I reported the accessibility issue I found while testing. #34307
I can also confirm this issue.
Thank you both for reporting an issue and for confirming another one! Extremely helpful feedback to have.
I’m glad I finally had a chance to explore the FSE. Thank you for the thorough instructions!
I tested mainly using the keyboard and found a few more issues.
In the navigation block, the focus seems to get lost when selecting the Start empty option using the Tab key.
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34362
The columns slider resets to 1 when navigation back to the previous focusable element using the Tab + Shift key.
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34363
Thank you for testing in turn and for opening issues once more! Great finds. I just added labels to each so the team can jump in to examine further. Hope to see your username pop up in future calls for testing 🙂
Thank you!
GB: 11.3.0 Browser: Brave
Preview website: http://wayback.fauppsala.se:80/wayback/20210908144701/https://web.archive.org/web/20210829080232/http://wayback.fauppsala.se:80/wayback/20210908144701/https://wearlace.tastewp.com/
Issues Video: http://wayback.fauppsala.se:80/wayback/20210908144701/https://k00.fr/y0foz5pf
Issues I faced
Viewport (00:02): 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. Ended up using a spacer block, and expanded it whenever I had to make changes to my header template.
(00:11) Live Preview doesn’t work well while adjusting the column width when both the ‘ListView’ and right sidebar is active. Once closing either one of those the live preview works as expected.
(00:46) When adjusting the padding, the preview doesn’t show any changes, until the user clicks out of that box or press enter key. I guess this is a feature.
But when the user changes the value to null(ie. Empty box), without pressing enter and clicks out of the box, the value automatically sets to the previously saved value and not 0.
Missing Save Button (Github Error: 30515)
(1:05): When adjusting justification
(1:10): Responsive menu toggle
SubMenu Indicators Toggle
Inherit Default Layout Toggle(Main header block)
Steps 8 & 9 : Link Settings in the sidebar, not clear and confused about how it works.
Step 11: The search bar width section, only 100% and 75% is working for me, the 25% and 50% shows the same width as that of 75%. The custom width section for users to enter manually doesn’t show any change below 92%. So I guess that is the default width for all other settings.
Step 7: For the button section width settings doesn’t support custom width for the user to enter. Only pre-assigned values are available(It was available for search bar settings).
(1:40): Spacing Issue when ‘Home’ link used inside navigational menu. (Using GB 11.3.0)
(2:03): The SubMenu indicator position inside a SubMenu is not properly aligned to text in the back-end, while on the front-end it is aligned.
(2:18): While inserting a link, the block editor kept jumping in some areas, which was quite annoying.
(2:30): Menu overlaps
(2:40): Even though I made sure to make the menu responsive, the site hosted on Local wasn’t responsive on mobile. But after exporting it to TasteWP, the menu became responsive.
Also not sure how overlay colour settings works on the mobile menu.
Overall
Creating the menu was quite a hassle. Too many clicks especially when creating submenu.
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.
I did miss the preview in the new tab button.
I wish there was a hide/show button in the list view next to each block to hide/show the component in the live preview pane.
Enhancement for ListView: When I click on the ListView block, the live preview automatically jumps to that block, which is very helpful. While clicking on a block on the preview window highlights the block on navigation, but doesn’t automatically scroll to that block, which would be a good feature when making a complex design.
@alanjacobmathew thanks for testing so thoroughly, writing up a great report, including a “highlight reel” of issues, and for pinging me when your comment got stuck as pending. I deeply appreciate it across the board. I would have hated to miss this feedback! I bolded the areas where I’d love some additional context.
Great find. The good news is that a fix is finally on its way with Gutenberg 11.5. This has definitely been a nuisance for a while 🙂
Love this kind of feedback. Opened an issue here: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34466 As mentioned on the issue, this likely impacts more blocks and is something to figure out now that List View is a sidebar rather than pop over.
Opened an issue for this as well: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34468 In particular, since the changes are reflected when changing the values in other ways, it seems important the changes are shown live when manually entering them too!
Can you say a tiny bit more here?
Dug in and could replicate this! However, it seems to be an editor only problem as the front end properly shows the width: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34469 Still reported as it’s very much a bug.
Great attention to detail! This is a work in progress as part of larger design tool work: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/26368
Ah ha! There was a similar issue fixed recently for general items added but looks like more work needs to be done there to include the Home link option: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34470
Discovered while working on this call for testing and fixed in the Gutenberg release today. Woohoo! http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34016
You aren’t alone there. I added your feedback to this open issue around renaming the options: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/33640 I welcome you to chime in there.
Agreed. I’m keen to see a bulk add option included going forward with both the nav screen and block: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/31667
This is actively being explored now with block gap support: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/33991
Do you mind sharing a video for this? I am not quite sure I’m able to follow what you’re suggesting but want to be sure to see if it’s something that can be included in the List View improvements!
Refer image: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/omMvsDj.png
Wasn’t clear how these settings affect in the frontend.
Video: http://wayback.fauppsala.se:80/wayback/20210908144701/https://k00.fr/blockjump
So in this case, when I click on the ‘WP social icon block’ in the ListView, the editor jumps to that block. But, when clicking on the ‘SiteTitle’ block on the editor, it selects the block in ListView but doesn’t jump that block. That is user still has to scroll to that block from the listview.
I created the top header area of the UNG website. I didn’t run into too many issues getting the header 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.
I don’t feel the Rounded option should be a core style for the Site Logo. I don’t know that many folks would use it — unless they’re doing an avatar of sorts for the logo. Just look at the logos in the wild — very few are round.
Having left/right/center alignment on the logo doesn’t feel like it’s very appropriate. The parent block (in this case, the columns block) will very likely always dictate that alignment. http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/v7Iyh0D.png
Navigation: If you open the navigation into it’s modal, then drag/move one of the items — you can no longer close the modal by clicking on the overlay. http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/uUjqeWB.png
Navigation sub > sub menu icons should be vertically centered for each item: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/Zy4IeMO.png
Search: The “Use button with icon” icon is not clear at all: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/e8IYIMb.png
Search: Button on inside/outside does not have a clear impact, other than making the components slightly larger: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/szplKvS.png v. http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/dnXvGT3.png
The Color component for “Border” within the Search block does not seem to add work: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/ittOwCc.png
Editing navigation at the topmost area of a page (where the header is) means that the block toolbar overlays the navigation items I am editing: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/NM8elpq.png
Alignments are not 1:1 between the Site Editor and the Template Part editor experiences.
10a. Editing via the Site Editor: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/NM8elpq.png
10b: Editing via the template part itself: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/EHAQj4S.png
The End
End result [Editor]: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/bLBjNyN.png
End result [Front-end]: http://wayback.fauppsala.se:80/wayback/20210908144701/https://i.imgur.com/4Bheaa6.png
@richtabor always fun to see your name appear in my sphere of the internet. Thanks for diving into the more complex challenge of replicating rather than just following the instructions above! The screenshots are extremely helpful too.
This inspired a flurry of description updates, including the site logo:
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/34471
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/34473
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/34474
http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/34475
Working to find the right balance though between verbosity and education 😀 but rest assured it’s noted.
Wild timing on this note as work is underway around exposing parent block controls when working with child blocks: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/33955#issuecomment-907155767
This is obviously being explored more with blocks like Buttons or Navigation but I imagine will evolve to include more of these situations. I’m not going to open an issue for now as a result.
Discovered this while doing this call for testing and it’s already fixed as I write this: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34016
This is intended functionality based on what you can find in this PR: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/pull/34337 I chatted with Kerry who worked on this and she confirmed that this was turned off since it was too easy to close the modal, especially when dragging and dropping items.
Gooood news that this will be fixed come 11.5: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/27840
Looking through this feedback, I found that what you touched on is covered in this overall issue around expanding Search Block customization: http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/22071 I am going to hold off on opening
By chance, was this a draft page? If so, it’ll show up in the editor but not on the front end 🙂 This gets me from time to time.
Great call out. Opened an issue as I couldn’t quite find where the decision was made not to do this (after finding that at the beginning that was the intent as the default): http://wayback.fauppsala.se:80/wayback/20210908144701/https://github.com/WordPress/gutenberg/issues/34511
I’m going to flag the other items mentioned in the recap post but am not going to open issues for now as much of the work around dimension controls and 1:1 parity is currently underway!
After delving deeply into the ins and outs of the navbar – the primary issues all resolve around responsiveness.
The core issue came down to the navigation bar operates 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.
Sizing site logo, with search bar and navigation block elements is largely unintuitive and mostly requires addressing via modifying css properties in the theme file or adding custom styles.
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 CSS code.
Then on the responsive end of things – even giving a navbar about 50% of the space on the menu, after about 5 or 6 menu items with decent spacing and a reasonable size (such as 1.25 rem) things start running together and then looking bad as you resize the window – because they’re going to simply create a new line.
On desktop with 1920×1080 resolution, things are generally okay, but once you get close to common sizes like 1440, without modifying the css files, the whole menu bar ends up looking sloppy because it just goes to a new line.
The actual mobile button conversion and hover works pretty well overall, but as Rich Tabor pointed out, sub menus get weird with alignment on desktop / tablets.
Overall, I’d say it’s actually easier to just make a custom widget with a navwalker for using the navbar – because you have to customize the CSS anyway to make any kind of tuning changes.
Forgot to mention – I also tried making the navigation menu using CSS Grid – which treated the entire navbar as a single grid item, so was pretty clunky overall – though current CSS props setup to be flex aren’t necessarily designed to be used in CSS grid, so that’s less an issue with the navbar itself.
@wazeter thanks so much for jumping in to contribute. It’s been super neat to connect over slack and then to have you share your thoughts for this call for testing.
This is an excellent call out. I know a lot of work has been done to make the general navigation block responsive so it’s great to hear where more improvements need to be made. Related to this, I know responsive tools are very much on the radar for 5.9.
This has come up with responsiveness of patterns too with plans in place to add more design tools that will make this entire experience easier. For example, there are explorations around having child blocks absorb parent block tools so there’s more consistent options along with adding a new block gap feature to more blocks (including the navigation block).
Agreed. There’s a lot of needing to select the parent block, drilling down into child blocks, trying to figure out what’s in the sidebar vs toolbar, etc. While this doesn’t solve the problem, I am keen to see some patterns in place to ease getting something in place so that only tweaks need to be made.
For the general responsive feedback for the navigation block, this will be addressed in time when device specific editing is added so, for now, stay tuned 😀