annezazu 7:26 pm on February 23, 2022
Tags: fse-outreach-program ( 97 ), fse-testing-call ( 28 ), full-site-editing ( 43 )

FSE Program Testing Call #12: Hyping Headers

This post is the twelfth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.

Overview

With WordPress 5.9 out in the wild, it’s time to start revisiting some common workflows that we’ve tested earlier versions of that have new tools, options, and more to explore. In the case of this test, we’re going to customize a 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. using everything from the navigation block to template part focus mode to then reuse this personalized header in a different template. Along the way, we explore how patterns are integrated into the experience, new dimension control options, and improved UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. for 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.. While going through the experience, think about what would make it even easier and more intuitive to use as that’s ultimately the aim!

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:

Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Use WordPress 5.9 (downloadable here).
Use the Twenty Twenty-Two theme. If you’d like to repeat the test or switch things up, you can always use a different block theme.
Use GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 12.6 (latest version).

Testing Instructions

Setup Instructions:

Have a test site using the latest version of WordPress (5.9). It’s important this is not a production/live site.
Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the Full Site Editing listed as a feature.
Create four different pages with different titles to add to your menu under Pages > Add New. No content in the pages are needed.
Install and activate the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.6.
By the end of these steps, you should see a navigation item titled “Editor (betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes.

Testing Instructions:

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.

These instructions are intentionally more general to help you make the Header you create your own, to find more points of friction, and in case you are using a different block theme. At a high level, you should explore a few things with this test so, if the steps don’t align with what you see, either switch to the Twenty Twenty-Two theme for ease of use if you aren’t using it already or ensure you cover each of the features mentioned in the Overview section.

Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage.
Using the List View, select your overall Header provided by your theme. If you’re using the Twenty Twenty-Two theme, you will see that it has provided multiple header options by selecting the “Replace” option in the block toolbar. Select whatever header you’d like to edit. Here’s a screenshot of what to expect here if you have this option.
From there, enter the isolated template part mode to focus just on editing the Header in isolation. You can find this mode by selecting the overall Header template part > Opening the three-dot menu > Selecting “Edit Header”. You can learn more about this mode and the various ways to find it in this post.
Once there, build out and customize your navigation block by adding the four pages you created earlier. Keep in mind that you can create draft pages that you will need to publish later in order to have them show up on the front end of your site.
Continue to customize your Header to your liking, whether by using dimension controls in blocks like the Group or Row blocks (depending on what your theme offers), by adding any additional blocks (Site Tagline, Site Icon, etc), or by exploring more options in the navigation block.
When done, select “Back” to return to your homepage template and make any additional changes you might want when seeing the template part in the wider template once more.
From there, select Save and go through the saving flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
to save all the changes you’ve made.
After saving, open the W menu > Templates and select another template where you’d like to ensure it uses the Header you just customized (for example, the Blank template). Open that template and, if the Header isn’t in place, add it in however you see fit before saving.

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 or reusing the Header?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier and more intuitive?
Did you find that what you created in the Site Editor matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?

Leave Feedback by March 16th, 2022

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

DJ 12:02 am on February 27, 2022

Hi! I didn’t make any mind-blowing design changes, but I did test everything I could do in 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. template. Here are the results from my test:

First no crashing – yay!

Did the saving experience work properly?
Yes, although see later answer about matching between editor and display.

Did you find any features missing while creating or reusing the Header?

It would be nice to have the option to preview a full page using the template part you’re working in, just as you can with a page or post – without having to go back out to the Dashboard or Editor menu.

What did you find particularly confusing or frustrating about the experience?

Trying to select the correct group, row, or 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. in the layout can be hit or miss. When I think I’ve selected the correct one, I accidentally edit something else. I used the List view as suggested, which works better. However, I lose a lot of real estate in the browser for designing.

What did you especially enjoy or appreciate about the experience?

I love the handles that let you move between desktop and mobile screen sizes. Very smooth and intuitive.

The new block settings options are really growing on me. The Typography settings are particularly satisfying to play around with. It’s nice to have lots of design options before having to use custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..

Did you find that what you created in the Site Editor matched what you saw on your site?

No. Some of the changes that I made display properly and others don’t. I create a new nav block and centered both the site logo/title block and the nav within the header. I also set a background color for the site title. You can see my intended layout in the screenshot.

When I use the header in the Blank page template, it also looks fine in the editor. But it doesn’t display properly on the front end. Here’s the display screenshot.

Did it work using Keyboard only?
Yes!

Did it work using a screen reader?
Didn’t test.
- annezazu 6:12 pm on March 1, 2022
  
  Oh hey, pen pal 🤠. So neat to see your name pop up here, @itsjustdj. Thanks for chiming in and giving this a whirl.
  
  It would be nice to have the option to preview a full page using the template part you’re working in, just as you can with a page or post – without having to go back out to the Dashboard or Editor menu.
  
  This ties in nicely with two issues. The first being browse mode, a mode that is being worked on for 6.0 that would allow you to (as the name suggests) browse through your site’s content, click on links, see changes in context, etc: https://github.com/WordPress/gutenberg/issues/23328 Right now, the scope is more minor and focusing around browsing via 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. rather than all types of content (like post titles). I expect this to continue to evolve in future releases though.
  
  Separately, there’s also an issue in the opposite yet related direction: having a way to view a template quickly while working on a post/page to see how it’s all fitting together https://github.com/WordPress/gutenberg/issues/27847
  
  I think between the two items above, it’ll accomplish in time what you’re looking for. I’ll be sure to note this in the summary post too as I found myself desiring the same thing!
  
  Trying to select the correct group, row, or block in the layout can be hit or miss. When I think I’ve selected the correct one, I accidentally edit something else.
  
  Just in case you didn’t know, the parent block selector is available in the block toolbar. Here’s a quick video of what I’m describing (you might need to download it to see it): https://cloudup.com/cwZcbZH2Sfk
  
  The Typography settings are particularly satisfying to play around with. It’s nice to have lots of design options before having to use custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
  
  I’ve been having way too much fun with these too, particularly on my personal site. Nearly every week I find myself tweaking the spacing and font weight.
  
  When I use 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. in the Blank page template, it also looks fine in the editor. But it doesn’t display properly on the front end. Here’s the display screenshot.
  
  Whoa! This is quite different and I’m not quite sure why. Any chance you can send me a screenshot of what your List View looks like? I want to see if I can replicate/figure out what’s going on. Specifically, there are actually two header parts within one header for one of the options in the TT2 theme to get around some limitations. It’s making me wonder if you edited the “inner” header in a way that is causing these changes not to be reflected.
  - DJ 11:36 pm on March 2, 2022
    
    Thanks, @annezazu! This has been super helpful for me. Here’s a screenshot with the list view.
    - annezazu 5:01 am on March 5, 2022
      
      Thanks so much for the screenshot! I tried to replicate. Here’s a few images: https://cloudup.com/cPgvO1T9QsF
      
      For context, I added background colors to the Site Title 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. to get the green background and, with the row block, I centered everything. Every time, I found I was able to get the green background on the Site Title without it staying in the same row as the navigation block. I did find that in order to get the full green background to appear with some padding (18px) that I had to add it to the Site Title block (shown in the sidebar settings of this screenshot). I’m not sure what’s going on here. From what I can see in your screenshot, you would have added the background color only to the Site Title so that makes it extra strange as to why it wouldn’t have shown up. The only way I could get any strangeness to happen was to continue to add background colors to each Group and Row block. This adds padding so would inherently shift the layout. Otherwise, I couldn’t replicate this but will keep a watch to see if others run into similar issues.
Carrie Dils 10:46 pm on March 2, 2022
I tested using the Twenty Twenty Two theme.

Did the experience crash at any point?
Nope – woohoo!

Did the saving experience work properly?
Yes!

Did you find any features missing while creating or reusing 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.?
Not sure if I’m missing features? 😛 I was able to do everything I wanted to.

What did you find particularly confusing or frustrating about the experience?

I swapped my header to Header Dark Small, which resulted in this list view:
```
- Header Dark Small
--- Group
---- Header
--------Group
```
When I went to edit again, I accidentally clicked Header (nested under Header Dark Small), tried to swap that to Header Dark Small (don’t ask), and was met with this error:

“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. cannot be rendered inside itself.”
1. A legitimate error to be sure, but initially confused me.
Then, realizing what was going on, I undid the changes and went back to the List View outlined above. I clicked Header again and this time replaced it with Header Dark Large.

The result was:
```
- Header Dark Small
--- Group
---- Header Dark Large
--------Group
```
1. It was easy to inadvertently nest a header within a header. Inception!
What did you especially enjoy or appreciate about the experience?
1. The ease of laying out the header with rows/columns and dropping in site elements (logo/site title/navigation) was awesome.
2. From the Template Parts menu, the ability to “Clear customizations/Revert to default state” was really handy. There was a small dot in an accent color under the “Added by” column on the Template Parts screen that (I think) indicated the original template part had been edited. Something a little more obvious there would be nice (for instance, under “Added by” maybe it says [Theme Name], edited by [user]).
What would have made this experience easier and more intuitive?

1. For this particular theme, the overall background is dark. When changing the group containing my header to a light background (the Group element was the highest level container for the header), my expectation would be that my entire header would take that background color. In the case of Twenty Twenty Two, there was still the dark background on either side of the header. (more info below)

This is totally a function of that theme and I get it — just saying my expectation did not match reality.
1. When playing with block spacing, I was initially surprised to find that setting didn’t cascade down to sub-blocks, but only applied to inline / same level blocks. That’s nothing to do with the header, specifically, but just the first time I’ve played with that feature and noticed it.
2. When saving a template part, there’s a Site Updated notification at bottom left of screen. It’d be nice if that (or some other area) let you click right into Viewing Site or (template) versus having to back out of everything to see how it looks on the front-end.
Did you find that what you created in the Site Editor matched what you saw on your site?

Not exactly. Reference the text that is struck-through above. 🙂 I typed that response before I looked at my site on the front end. The entire header uses the selected background color, as I expected. It was only in the template editor that I had the dark background on either side of my header.

Did it work using Keyboard only?
Did not try.

Did it work using a screen reader?
Did not try.
- Carrie Dils 10:48 pm on March 2, 2022
  Header Dark Small — Group —- Header ——–Group
  Well that didn’t go as expected. 😂
  
  ——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. Dark Small
  ————Group
  —————-Header
  ——————- Group
  
  🙂
  - Carrie Dils 10:49 pm on March 2, 2022
    
    Oye vey – I forgot these comments were formatted with Markdown. Sorry. lol
- annezazu 5:27 am on March 5, 2022
  
  @cdils always lovely to see your name pop up 😀 Thanks for testing this out and reporting back. You gave me a great laugh with these extra follow up comments. It happens to the best of us (I regularly forget too).
  
  It was easy to inadvertently nest a 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. within a header. Inception!
  
  This is such great usability feedback. Twenty Twenty-Two is using a “header within a header” as well for Header Dark Small so I can see why it would be easy to select the Header within it and try to swap it out for Header Dark Small once more. This is a stop gap so, in the future, expect this to be less likely and instead for the various header patterns to only include one header template part to make this “fun” error less likely.
  
  The ease of laying out the header with rows/columns and dropping in site elements (logo/site title/navigation) was awesome.
  
  I love to hear it. Once you get used to the Row 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. too, I find it to work wonders.
  
  . There was a small dot in an accent color under the “Added by” column on the Template Parts screen that (I think) indicated the original template part had been edited. Something a little more obvious there would be nice (for instance, under “Added by” maybe it says [Theme Name], edited by [user]).
  
  I love this. Opened an issue with two different ideas but obviously trust our lovely community designers to know where to take this 😉
  
  https://github.com/WordPress/gutenberg/issues/39233
  
  When playing with block spacing, I was initially surprised to find that setting didn’t cascade down to sub-blocks, but only applied to inline / same level blocks.
  
  Curious where and how you tried this as it should impact the immediate next inner blocks. For example, it’ll impact the child blocks but not the grandchildren blocks if that makes sense (this is a blast to try to explain).
  
  It’d be nice if that (or some other area) let you click right into Viewing Site or (template) versus having to back out of everything to see how it looks on the front-end.
  
  Agreed — this ties in nicely with this issue around having a way to preview your site: https://github.com/WordPress/gutenberg/issues/29398 I mention this because, since you can make numerous changes with multi-entity saving to different templates (here’s an example) it’s hard to know what exactly you’d be viewing. Would you be viewing something that’s using the template you just changed? Your homepage? etc. This is the wider context around why this isn’t currently in place since you can make sweeping changes across your site, move to another template or template part, and hit save.
Paal Joachim Romdahl 5:51 pm on March 5, 2022
Using the site myactingportfolio.com — >live site. Site is not much in use, and I wanted to test a current live site for this.

These are most of the main pointers.

Site Editor.
- Clicking 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. or any template section is somewhat difficult, as it easily selects blocks inside of it. I am looking forward to the locking/unlocking coming into place.
- Selecting Header template the 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. toolbar is seen below the header and not above as it would crash into the top bar. Could it instead be placed on top of the Header and to the left? Keeping toolbar placement consistent even when there is a block on the top of the layout.
- In this case the Page template was the default seen in the Site Editor. I really do not know which template affects which pages/posts. So I assume that a Page template affects all the pages.
- Isolated mode. I do not see a purpose why I should use it. As I can instead just edit the template directly in the site editor.
- Navigation. The last item has a + in it where hovering over it says Add block. This is actually add Inner block.
  I also want to know which (inner) blocks I can add to the Navigation.
  I am looking forward to managing the Navigation in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. somewhat similar to the existing Navigation page for non FSE themes. (drag drop of menu elements, create and save a new menu etc.)
  I also would like to know which Navigation (inner) blocks are available to use. For instance can I add an image between each menu link?
  Making inner blocks easier to locate.
  https://github.com/WordPress/gutenberg/issues/38578#issuecomment-1034782361
- Choosing a header modul is very small, and shows very small headers. The modul should resize based on available screen.
- (In modul) Current in use template part should always show in the top left corner with the words in use/current (perhaps also an extra border around it or some other visual mark to say current in use). Making it obvious which header/template part is currently in use.
Templates screen.
Sorting by recently updated, alphabetical or type.

I am looking forward to a locking/unlocking of Reusable blocks and template parts. Making these easier to select the top parent block.
I am also looking forward to the sidebar settings Navigation kind of page why of creating and adjusting a menu.

Here is a video I made:
https://youtu.be/pEEb8dNpFx8
- annezazu 1:01 am on March 9, 2022
  
  Thank you once more for your clear feedback and great video. The video really helped me understand what you were describing in greater detail. Let’s dive into your feedback for now though. P.S. this is your 13th response to all of the outreach program fun!
  
  Could it instead be placed on top of 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. and to the left? Keeping toolbar placement consistent even when there is a 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. on the top of the layout.
  
  This was causing issues before! You can see the wider context here: https://github.com/WordPress/gutenberg/issues/29464
  
  Clicking Header or any template section is somewhat difficult, as it easily selects blocks inside of it. I am looking forward to the locking/unlocking coming into place.
  
  This seems to be a known bug in the “click to edit” UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.: https://github.com/WordPress/gutenberg/issues/35079 I agree that it feels cumbersome currently to easily select just the header. I added your feedback there 🙂
  
  Choosing a header modul is very small, and shows very small headers. The modul should resize based on available screen.
  
  Couldn’t agree more. Added your feedback on this exploration: https://github.com/WordPress/gutenberg/issues/31033#issuecomment-1062414590
  
  Current in use template part should always show in the top left corner with the words in use/current (perhaps also an extra border around it or some other visual mark to say current in use). Making it obvious which header/template part is currently in use.
  
  Opened an issue here:
  https://github.com/WordPress/gutenberg/issues/39298 I think this also applies to some of the work being done in general around integrating patterns in general, since the same problem will happen there.
  
  The last item has a + in it where hovering over it says Add block. This is actually add Inner block.
  I also want to know which (inner) blocks I can add to the Navigation.
  I am looking forward to managing the Navigation in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. somewhat similar to the existing Navigation page for non FSE themes. (drag drop of menu elements, create and save a new menu etc.)
  
  I totally get the intent of what you’re describing but it makes sense not to expose the phrasing of “inner blocks” to users and keep it simply as “add block”. I do think this aligns nicely with your general issue around the inner block experience though so consider this included as part of the summary post!
  
  I also would like to know which Navigation (inner) blocks are available to use. For instance can I add an image between each menu link?
  
  Feedback needed: I opened an issue for this quite a long time ago here: https://github.com/WordPress/gutenberg/issues/30159 In my mind, it is now far clearer what’s available so I’m curious what you imagine will help clarify the current experience? Happy to reopen and include more context.
  
  I really do not know which template affects which pages/posts. So I assume that a Page template affects all the pages.
  
  I’m hearing this from more folks that there isn’t clarity around when each template is used, especially as most folks don’t have the template hierarchy memorized. I updated a previously opened issue to expand it to include considering Templates as I think a solution is needed for both template parts and templates with where they are respectively in use across the site: https://github.com/WordPress/gutenberg/issues/38967
  
  Isolated mode. I do not see a purpose why I should use it. As I can instead just edit the template directly in the site editor.
  
  I’ll include this as general usability feedback <3
  
  Templates screen.
  Sorting by recently updated, alphabetical or type.
  
  Added in here to the issue around expanding the types of templates that can be added as that feels nicely in line with how best to scale the experience:
  https://github.com/WordPress/gutenberg/issues/37407#issuecomment-1062444658
  - Paal Joachim Romdahl 9:08 pm on March 14, 2022
    I’ll respond to your awesome feedback Anne a bit later on. (Got to remember to do so..:)
    Anyhow I happen to create a video walk through switching themes from a Classic to a FSE theme
    
    In relation to headers:
    
    How do I resize 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.?
    
    How do I add a 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. below another block inside the header? (As it seems the only option is to add something to the Site logo and Site title row. I was not able to add a block below the nav.)
    
    I left feedback in the FSE outreach experiment channel.
    https://wordpress.slack.com/archives/C015GUFFC00/p1647127304043339
Ed Beck 4:13 pm on March 14, 2022
Hi, I have a few comments based on trying this:
1. The subtle differences between the FSE screen and the “Focus Mode” screen are a little confusing. Specifically, I really LOVE the new “Replace” button to choose between an existing template or a Pattern. But I wish I could “Replace” with a Pattern even in focus mode. If I came to this screen to really work on my 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., why would I have less options here than I have when looking at the full site?
2. This is nitpicky, but I think there should be more care into the naming of Header Patterns (or any pattern). Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue. Or “Text-only header with salmon background” was the gray I had chosen for my site. I think it’s cool that it respects your site color pallet, it was just confusing to me for a second. Took a while for my brain to catch back up.
3. Not as related to this exploration, but I just made my first site with FSE, and as I was working on it, I was doing 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) checks with AXE Dev Tools from deque.com. One mistake that I introduced from modifying existing templates is I had elements that weren’t part of any predefined region. I wondered why there were special template titles for Header / Footer, but there wasn’t an equivalent for Main, Aside. It would be nice if the design for FSE made it difficult to create common accessibility problems.
4. Final thing. I miss some of the common controls that were part of every WordPress Customize screen. I wanted to edit my site to have a static homepage and a blogroll elsewhere. I feel like homepage settings, custom css, menus should be somewhere in the FSE experience.
—
The final issue is the biggest thing I hope you take away from my comments here. When I was learning a new WordPress theme, the settings in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. tab acted almost like a checklist of things to do to make the website my own.

Here’s Astra’s list:
1. Global (fonts and colors) 2. Header Builder 3. Breadcrumb 4. Blog display 5. SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 6. Footer Builder
Universal Settings:
1. Site Identity 2. Menus 3. Widgets 4. Homepage settings 5. Additional CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.

Most of these things are editable in FSE, but it feels like it is up to the creator to explore and it feels a little like a scavenger hunt. I wish there was a way to surface the most important decisions in a linear way. Some kind of “Start Here” guided walkthrough that pros would ignore, but help casual users understand the capabilities of Full Site Editor.
- annezazu 8:07 pm on March 29, 2022
  
  Lovely to see your name here once more! Apologies for the delay — there turned out to be some confusion while I was out in terms of responding here so I am just now following up after being offline for the last two weeks. I appreciate your patience as a result along with you taking time to share your feedback.
  
  Specifically, I really LOVE the new “Replace” button to choose between an existing template or a Pattern. But I wish I could “Replace” with a Pattern even in focus mode. If I came to this screen to really work on my 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., why would I have less options here than I have when looking at the full site?
  
  Great call out. There’s some history here BUT I think it makes a lot of sense to have the replace option while in this mode (unless there’s a technical blocker I’m not aware of). As a result, I opened this issue to consider it: https://github.com/WordPress/gutenberg/issues/39864
  
  This is nitpicky, but I think there should be more care into the naming of Header Patterns (or any pattern). Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue. Or “Text-only header with salmon background” was the gray I had chosen for my site.
  
  I’m not quite sure I follow this feedback since the patterns you’re describing come with the Twenty Twenty-Two theme and are in line with that theme’s color palette. For example, if I switch to the “Text-only header with salmon background”, it would switch the colors in the header: https://cloudup.com/cXniTMsJdlX Perhaps I’m misunderstanding though but, to me, the patterns are quite descriptive 😀
  
  It would be nice if the design for FSE made it difficult to create common 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) problems.
  
  I’d love to know any specifics that come to mind and to get those logged in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. I imagine there are some nudges that can be put in place!
  
  I miss some of the common controls that were part of every WordPress Customize screen. I wanted to edit my site to have a static homepage and a blogroll elsewhere. I feel like homepage settings, custom css, menus should be somewhere in the FSE experience.
  
  Whew, great call out. These are all in progress, minus menus which are being handled by 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.. I agree though in that there still feels like some of the features of the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. that need to be intelligently added into the current FSE experience. I miss the ability to save drafts!
  
  Most of these things are editable in FSE, but it feels like it is up to the creator to explore and it feels a little like a scavenger hunt. I wish there was a way to surface the most important decisions in a linear way. Some kind of “Start Here” guided walkthrough that pros would ignore, but help casual users understand the capabilities of Full Site Editor.
  
  Definitely including this in the write up for the summary post 🙂 This is excellent feedback for those working on design problems like discoverability to have in mind.
  - annezazu 7:03 pm on April 4, 2022
    
    This is nitpicky, but I think there should be more care into the naming of 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. Patterns (or any pattern). Since I had changed the default color scheme on my site, I was confused at first looking at the pattern names. For example, I had set my primary color as Blue, so “Text-only header with green background” was confusing to me at first because it was blue. Or “Text-only header with salmon background” was the gray I had chosen for my site.
    
    After a back and forth slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. convo with more context, I opened the following issue. Following up to include it 🙂
    
    https://github.com/WordPress/gutenberg/issues/40033
Courtney Robertson 7:56 pm on March 14, 2022
GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ version 12.7.2
WP 5.9.2
- Did the experience crash at any point?
  - Yes. I added a spacer 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. below the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. and later went to delete it. It moved the content of my site around and my navigation menu was gone, so I reloaded which lost anything that wasn’t saved.
  - It also crashed when I was adding 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. Dark Small to the Blank template.
- Did the saving experience work properly?
  - It hung once for me.
- Did you find any features missing while creating or reusing the Header?
  - I was creating this as a continuation from the previous call for testing, so I had a cover block as part of the Header that we worked from.
  - I did not have a “Back” per the directions “When done, select “Back” to return to your homepage template…”
- What did you find particularly confusing or frustrating about the experience?
  - In the Blank template, I tried to add the header using Block Inserter > Template Part and that caused everything to freeze. When I tried other methods, such as Block Inserter > Header I couldn’t find the exact header I had worked on.
  - From the Template Parts editor, there was no Back option displayed.
- What did you especially enjoy or appreciate about the experience?
  - I really enjoy testing things and reporting my findings. I know devs receive the test results, so this matters.
- What would have made this experience easier and more intuitive?
  - In the navigation block, a participant requested a way to see any “selected” block width, not height, similar to the way the spacer block displays the dimensions. Show the X dimension so we can see break pixel size easily.
  - It’d be nice in Site Editor to easily jump to previews for mobile/tablet/computer widths like we can in Post/Page/Customerizer Preview
- Did you find that what you created in the Site Editor matched what you saw on your site?
  - Mostly, but those screen breakpoints would be really helpful
- Did it work using Keyboard only? untested
- Did it work using a screen reader? untested
- Courtney Robertson 8:13 pm on March 14, 2022
  
  I can provide a video showing only my screen if it’d be helpful.
- annezazu 8:48 pm on March 29, 2022
  
  Thanks so much @courane01 for this lovely feedback, per usual, and for running the session with GoDaddy. Apologies for the delay as the coverage I anticipated while I was out had some miscommunications so I’m just now following up.
  
  Yes. I added a spacer 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. below the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. and later went to delete it. It moved the content of my site around and my navigation menu was gone, so I reloaded which lost anything that wasn’t saved.
  It also crashed when I was adding 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. Dark Small to the Blank template.
  
  I tried everything I could think of to replicate this with GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 12.8.1 I couldn’t find any relevant spacer block issues or spacer block PRs that could have resolved this nor anything around the navigation block (the only thing remotely related to a crash was this issue which seems unrelated). Same goes for the template part problem. I’ll keep an eye out in my own testing and in reviewing incoming reports but I simply can’t replicate this. If you’re able to, it would greatly help to have more specifics to replicate.
  
  In the Blank template, I tried to add the header using Block Inserter > Template Part and that caused everything to freeze. When I tried other methods, such as Block Inserter > Header I couldn’t find the exact header I had worked on.
  
  I wasn’t able to replicate this either (might have to download this but a video showing my attempt is here).
  
  In the navigation block, a participant requested a way to see any “selected” block width, not height, similar to the way the spacer block displays the dimensions. Show the X dimension so we can see break pixel size easily.
  
  What was the use case exactly? I’m intrigued but not quite sure I understand what this would help with and worry about adding even more visual indicators in the interface.
  
  It’d be nice in Site Editor to easily jump to previews for mobile/tablet/computer widths like we can in Post/Page/Customerizer Preview
  
  This is currently possible with the Preview option in the site editor or is this referring to something else?

Welcome

Weekly Meetings (Calendar)

FSE Program Testing Call #12: Hyping Headers

Overview

Testing Environment

Testing Instructions

Leave Feedback by March 16th, 2022

Welcome

Weekly Meetings (Calendar)

Overview

Testing Environment

Testing Instructions

Leave Feedback by March 16th, 2022

Share this: