FSE Program Site Editing Safari Summary

This post is a summary of the eleventh call for testing for the experimental FSE outreach program. Once again, I want to highlight the fantastic broader contributions surrounding this call for testing that enabled even more people to be a part of this work: 

Shout out to the following folks as first-time contributors to a call for testing: @colorful-tones @anjchang @mburridge @paulbigai @luminuu. Get excited – you now have a testing contributor badge on your WordPress profile! Thank you too to @piyopiyofox for kindly reviewing this post.

High-level summary

Here’s what a few folks had to say about the experience that can help frame the following more specific feedback. Overall, folks found the exploration to be easy enough to use with some minor enhancements and a few surprises. However, once most folks got beyond the basics, they found pitfalls in understanding how things might work together and how to accomplish different, slightly more complex tasks. This included everything from wanting more granular control of different link states with the Styles system (hover, active, etc) to confusion around how to change the width settings for new templates. This was the first time the Styles system was explored in a call for testing as well and, beyond a 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. issue mentioned by four folks and some feature requests, the feedback was generally uneventful and positive. 

This very much feels like where the state of 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. and site editing is overall. Many pieces are exceptional, but after digging beneath the surface, you find that you need workarounds for some essential design needs.

@greenshady in this WP Tavern article.

As usual, with WordPress, also with bleeding edge experiments, it seems there is almost always a way to achieve the same result using different paths…Not had any crash or unattended interruption, so the current developing stage is showing a robust application. The improvements on each area done so far are impressive, sure we have tons of things and features to come.

@paulbigai in this comment.
Image of a homepage with black and white images arranged in a three column layout.

Confirmed bugs

Listed below are confirmed bugs that break expected functionality or the experience of different features. Thanks to this test running during the 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. cycle for 5.9, many of these are already fixed.

Fixed

New Reports or previously reported

This resulted in the entire background of the posts list to change the background color. I was expecting that only the actual lists blocks would change when adjusting this setting, instead the entire page background of the query block changed.  

@luminuu in this comment.

The biggest, ahem, hiccup that I ran into wiped all of my progress when editing 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.. I tried to transform one of the outer Group blocks into a Cover to give it a background. It wiped everything in the header area clean, and the “undo” button did not seem to work. I just started over.

@greenshady in this WP Tavern article.

Feature Requests

As folks dug in, there were numerous enhancements that quickly came to mind as awesome nice to haves. These desired enhancements not only underscores the potential of various full site editing pieces when put together, but also highlights the frustration around the current limitations:

I started by removing the Page List block from 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. in the header. I have 90+ pages on my install, and it is always irritating when themes list them all by default.

@greenshady in this WP Tavern post.

Post Featured Image selected I expected to see to see similar options as the Image block. Example Image size: Full Size, Large, Medium or Thumbnail.

@paaljoachim in this comment. 

I miss a way for Global Styles to have more granular control over the links states, for color and the style in general. We have only one setting for link color, nothing for hover, active and visited state, neither the possibility to change the style applied, with TT1 Blocks we have the theme default text-decoration-style: dotted; for instance.  

@paulbigai in this comment.

General Usability Feedback

Thanks to videos from a few folks as part of this call for testing, I’m including less issues and quotes and more descriptions in order to capture the great feedback that was shared. 

In @courane01‘s wonderful testing session, the Navigation block placeholder proved to be quite confusing when it comes to WYSIWG (what you see is what you getWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.), especially if you haven’t yet set a menu. There are improvements to this placeholder setup that are being iterated upon as I write this. Tied to this, switching which menu is shown after selecting one also felt tricky, likely because there were a number of empty menus. Thankfully, this is a likely rare occurrence with a limited number of likely switches. Regardless of the rarity, an issue was opened to refine the language from “Select Menu” to “Switch Menu” or “Replace”.

In @paaljoachim’s video, he touched on confusion around Styles and how best to both communicate global changes as you’re editing and when you’re saving with multi-entity saving lacking granular options. While there is a welcome guide to help with explaining Styles customization, it very much brings to the forefront how these new concepts will take some getting used to for WordPress users and how much needs to be done in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. to clearly communicate what is happening.

Beyond these high level themes, there were some specific issues raised:

I actually missed that I needed to add a name to the color at all. Since there’s no placeholder text in the area where the color name should be added, I completely overlooked it and assumed I would just add the color, click Done, and voilà! However, it looks like not adding a color name at all means the colors won’t get saved. Adding some directive placeholder text next to the colors – or even an error message after clicking Done – might have helped me move past that. 

@evarlese in this comment.

After applying the template to my post, it didn’t look like those changes or settings were applied, since everything appeared at max width, and I wasn’t really sure of how or where to fix that.

@evarlese in this comment.

I found it a bit strange adding a featured image block and a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. without seeing what the result would look like.  

@paaljoachim in this comment. 

Adding a suggest a second button, is showing it is not using the format of the already present one, which should be more logical. The differences are in the “Border Radius: 50%”” and “Width settings: 50%”” not applied on the new one. Of course this is not an issue, and if you need the same button its easy to achieve this duplicating the existing one.

@paulbigai in this comment

The biggest issue I hit was with the Group block. By default, the Twenty Twenty-Two theme adds an 8rem (that’s pretty big) bottom margin to one of the Groups within the header area.

@greenshady in this WP Tavern post.

#fse-outreach-program, #fse-testing-summary

FSE Program Pattern Party Summary

This post is a summary of the tenth (!) call for testing for the FSE outreach program. Per usual, I love an excuse to celebrate so here are some fun stats to continue the party:

  • There have been Italian translations for nearly every single call for testing thanks to @piermario. This consistent hard work has allowed folks from the Italian community to better stay up to date and involved in these efforts.
  • There have been numerous Japanese translations and group calls for testing through WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Japan thanks to @mimitips @ippei-sumida @atachibana (and likely others!). Similar to the Italian translations, it’s wonderful to see a pathway created here for the Japanese community to be involved.
  • @paaljoachim has responded to every single call for testing with comprehensive feedback each time! It’s wildly helpful to have someone be so consistent in exploring each test over time.
  • There have been 69 badges given to folks who have responded to the various calls for testing with an average of 1.6 replies per person (meaning most folks don’t just contribute once). 

Thank you to every single person who has come along for the first ten calls for testing. Here’s to at least ten more (Twenty more? Thirty more?). 


For this specific release, I want to offer special thanks to @piermario for the Italian translation, Yoast for focusing attention on this call for testing for their latest contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., and @sparklingrobots for bravely walking through their experience for the call for testing on a hallway hangout.

Finally, shout out to the following folks as first time contributors to a call for testing: @evarlese, @oksankaa, @nynkedeblaauw, @suascat_wp, @mikes41720, @iamyvonne, @adetolah, @josevarghese, @ankurchauhan126. Get excited – you now have a testing contributor badge on your WordPress profile!

High level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following more specific feedback. Generally speaking, most folks found problems with more of the details of the experience rather than running into any major blockers with 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., crashing, bugs, etc that prevented them from doing what they wanted to do. Tied to this, much of the feedback centered around the desire to be able to go even further than what’s currently possible, which is reflected in the robust Feature Requests section.

While some things are still not totally intuitive to new users, I feel that 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/ made more big steps ahead in just a few months. I enjoy creating content in it and some of the things I have in mind are easier to achieve.

@piermario 

It’s been fun testing out the ‘query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.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 FSE. No crashes or bugs. The saving worked properly. 

@mikes41720

Confirmed bugs

What follows are confirmed bugs that break expected functionality or the experience of different features. Thankfully, there were only a few of these items!

General Usability Feedback

Overall, most of the feedback for this section surrounded taking very specific actions or insights around how pieces fit together rather than a massive gap in the experience or a blocker to accomplishing a task. As a result, I’ve included more quotes than usual below to help give more context to what was shared. Of note, some are repeat items from previous tests and are labeled as such below. 

For the Query Block specifically, I’m not sure if this is expected, but I didn’t find a way to get back to the initial layout options if I wanted to change.

@evarlese

I had to open a new tab and go to Posts -> Categories and check out the names of the categories. It would be very useful with the multi select so that we can easily choose various categories from a drop down.

@paaljoachim

It makes sense that ‘Post Categories’ and ‘Post Tags’ blocks can only work within the Query Loop block and when editing a Post and each would display categories and tags associated with that post. However, when someone tries to insert those blocks on the Page outside the Query loop block would just drop the spinning icon. Probably, because as we know Page has no categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and outside the Query Loop, it can’t query the category. ‘Categories’ block would however work.

@suascat_wp

Query Loop – the anchor link of ‘create a new post’ leads to creating a new post or page (depending on the post type chosen in the settings), but I felt like it would break interaction with full site editing since it leads you to create a totally new post or page using the block editor. 

@mikes41720

Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. – there’s a section to ‘add “read more” link text‘ (which I’m not sure what it means?) that if you click on, it doesn’t show the blinking “|” which signifies that you can add text to it (although it does work and you can add text). If you click directly right after it, it’ll then show the blinking “|” and that acts as more of a sign that you can modify and add text. It might be a bit confusing for some users from a visual cue standpoint.

@mikes41720

I’m having a hard time adding the columns within the Query Loop block unless have to do it via the help of list view.

@iamyvonne

I was playing with the theme.json and added under the styles section on the file a font size for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./post-title for the page, that syle is applyed at the root level so every nested core/post-title will inherit this stile and it’s ok abviously, it’s a css behavior, this is something to pay attention because now with blocks we must take into account much more kind of indentation of blocks than before where we had well-defined structures.

@overclokk

I’m still misled by the WordPress button in the top left corner of the Site Editor. I know that its function toggles a menu open/close, but being the WordPress logo such a familiar affordance, I often click on it in auto-mode expecting to come back to the dashboard…way too many clicks if I just want to “escape” to the dashboard or the live site.

@piermario 

I often feel the “double” saving step slows me down and in 99% of the cases, the options provided in “Select the changes you want to save” are something I don’t want to check off.

@piermario 

Feature Requests

Generally speaking, at a high level, most feature requests in this section come down to two things: more design tool options and more settings for blocks. As with the previous section, some are repeat items from previous tests and are labeled as such below. 

I was also initially surprised by 1 item per page as the default, and it took me a moment to find the settings again to change it.

@evarlese

When selecting ‘Display settings’ one can set the number of items per page. But actually you pick the number of items in the column if you choose a layout with multiple columns. May be easier to understand if ‘items per page’ would be renamed to ‘items per column’ or something similar.

@nynkedeblaauw 

Site Logo – has a Rounded style but no border radius control. It would be helpful to add the various new controls also to the Site Logo block. Dimensions panel etc.

@paaljoachim

I wish I had a margin and padding setting on the Columns block level.  

@piermario

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-summary

FSE Program Block Theme Switching Summary

This post is a summary of 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. theme switching exploration for the FSE outreach program. This was the first of its kind, enabling folks to share very early feedback on something that has yet to be robustly defined. Thank you to everyone who participated, whether through sharing feedback directly or sharing the exploration with others. 

Shout out to @richtabor @elmastudio @anariel-design who officially got badges for responding, despite having engaged with surveys the program has done in the past. 

Big thank you to @piermario for the Italian translation and @greenshady for the WP Tavern article, which both help bring the exploration to even more folks.

High level summary

Overall, the current experience proves to be frustrating and inconsistent, especially when taking into account custom block styles, keeping customized templates, etc. Thinking long term about what folks would want to be able to have across themes, there was mass consensus around being able to retain templates, template parts, and menus. There was somewhat mixed feedback around whether Global Styles should persist as some saw those as differentiating a theme. When it came to ideas for how to best manage the switching process, it quickly became clear that there’s a balance to strike between not adding too much friction to the process while also offering users options to pick and choose what can come with them when they switch. Ideally, there can be a simple and visual way to intuitively guide users and help them take advantage of the power of what block themes unlock without discouraging them with too many options. 

On templates and template parts

There was mass agreement around the desire to keep customized templates and template parts across themes, with many expressing surprise and frustration at the current experience. This was previously documented and discussed here as part of an earlier call for testing.

I’m very surprised that any templates I’ve created are tied to the theme that was active when I created them. I’d expect that my custom templates should remain applied to pages when the new theme is active, instead of being disregarded. I’m not sure why templates are omitted when a theme is changed.

@richtabor in this comment.

I would like to be able to use templates and templates that I have created and saved, no matter which theme that is active. I know that I can view them under appearance templates/template parts, open them, copy the code and paste it into a new template, but I don’t think that is a good experience. It should be easier.

@poena in this comment

On menus

Similar to templates and template parts, this was another area that folks inherently expected would persist across changing block themes. 

An issue I’ve ran into now a few times when trying out different Full Site Editing themes is that losing menu data is frustrating. I think as a non-technical user it would be confusing, because you are prompted to “Add an existing menu”, which I would think would be my menu from the last theme I was using.

@timothyblynjacobs in this comment

I think it is important that navigation blocks that I have set up remains. The “Add existing menu” feature in the navigation block assumes that I have already created a menu in the navigation screen. If I only setup the navigation block as part of 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. template part in the previous theme, then I can’t re-apply or reuse that navigation block. Perhaps navigation blocks should also work the other way around? I mean why can’t I select a name for my navigation block as I create it in the editor, save that in isolation like I can save the site blocks in isolation, and have that 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. present on the navigation screen?

@poena in this comment

Keeping any menus created in the Site Editor available would be important, I think this is one of the biggest issues right now.

@elmastudio in this comment.

On Global Styles

Global Styles left folks a bit split with some seeing them as being theme dependent and others wanting the option to carry settings/styles across themes. There’s currently a discussion around what can and can’t be standardized which will impact how this could be implemented. 

I see Global Styles tied to the theme, but it could be helpful if some common settings are taken from one theme to the next.

@elmastudio in this comment.

Understandably global styles settings would adapt when a theme is changed (just like 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.) – and I like how my custom GS settings persist when I change back to a theme (just like the customizer as well).

@richtabor in this comment.

When you export the demo and import it to the other installation, theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file styles are not imported. As a theme developer, I would love to develop one theme with different demos for example. When I export the demo file I would love that global and block type styles are exported too and imported to other installations.

@anariel-design in this comment

Have the option to keep Global styles modifications. Perhaps a kind of dialog box that shows up when entering the Site Editor listing adjustments I made to the previous theme, asking if I wanted to keep these adjustments or to start anew.

@paaljoachim in this comment

One question that keeps me up at night is how cross-theme compatibility will work on the content level. Default block output should translate from one theme to the next with little or no issues. However, custom block styles, font sizes, colors, and the full range of presets are already a problem area.

@greenshady in this WP Tavern article

On ideas for how to manage the process

Outside of a desire for the experience to be overall easier and more seamless, the following ideas were shared with a split in terms of folks who wanted decisions upfront vs after switching:  

  • Create a directory for templates and template parts, similar to block plugins or patterns, to make it easier to keep and reuse various templates/template parts.
  • Offer an option to pick and choose what you want to keep before switching themes.
  • Make switching easy upfront but, after switching, offer an option to import various items from the previous theme. 
  • Offer a side by side visual comparison of various parts of a theme before switching (templates, patterns, etc). 
  • Offer a way to import a color palette or template into your current theme so you don’t have to switch fully but can take advantage of different pieces. 

I have experimented with one theme but figured out along the way that it does not have the patterns or finished templates or something else I had hoped for. Instead of creating the patterns and templates myself I switch themes. When I click to switch a theme I get a warning message saying that switching themes will remove the adjustments I made to the current active theme, but I have an option to save these adjustments in a kind of twilight zone between one theme and another. I select to save changes I made, and notice that these carry over to the new theme that I activate. I check and notice that the changes do carry over. I am relieved that I am able to create adjustments in one theme and have these with me to the next time…In the Site Editor I can check out what the new theme offers and when I feel ready for it I can either say yes to bringing over the changes or no because I notice that the new theme has what I need.

@paaljoachim in this comment

I actually don’t want to be prompted with having to make several decisions as soon as I activate a new theme. I would find that stressful. I want to take my time. I want to understand what the differences are between the themes, and what changes I need to make. Perhaps there would be a side-by-side comparison of common page templates like page, single post, home? Like a revision? 

@poena in this comment

It needs to be easier for the users. They already needed to deal with the domain, hosting, choosing a theme etc.

@anariel-design in this comment

It could also be awesome to pull a color palette and drop it into an existing theme. Sort of like having a Colour Lovers directory to pick color schemes from but keep all the other bits. This could be fun for people who can recognize a palette that they like but would never be able to handpick all those colors. I’ve often seen color schemes that I’d love to use from other themes but didn’t like other things about them.

@greenshady in this WP Tavern article

On reasons for switching and the experience

Of the various questions folks could answer, some touched on both reasons for switching and the current experience. I’ve listed each response below since only a few folks addressed this area specifically. I’m also including images from @greenshady’s post where he took a simple blog post with some custom block styles, gradient colors, and font sizes and compared the output across three different themes highlighting current problems with theme switching.

To see prebuilt template layouts (could be done in a template mosaic view to where I can choose various prebuilt layouts instead of switching themes). To have a base that I want to start from. A design that I would like to use and modify.

@paaljoachim in this comment

I think the most common scenario is a missing functionality in one theme like WooCommerce support. Next would be outdated design and lack of updates and support from the theme author.  

@elmastudio in this comment.

When I switched to the Quadrat I mostly lost everything that I set up in the Clove theme. That means, About page doesn’t look anything similar, colors, fonts are now from the Quadrat theme and button style too. From the user’s side, this is very confusing. If u ever used Elementor for example, and many are using it they are used to the similar overflow. If I create a template and change the look and styles and switch to any other theme this template will look the same and it will remain available.

@anariel-design in this comment

I am not one for switching themes. Since I learned how to design for WordPress well over a decade ago, I have never moved from one theme to the next. At least not in the same way that the average user would. Instead, every time I have added a new coat of paint on my websites, I have simply switched over the foundation to whatever I had been working on at the given moment. WordPress themes, for me, were always just an iteration upon the last project…The first thing I do when testing any theme is to load a demo post. Lately, this has been the “Welcome to the 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/ Editor” test post. The primary question: Can I read the content comfortably? If I do not get past this stage, I simply deactivate the theme.

@greenshady in this WP Tavern article

What’s next?

@critterverse is exploring how to approach these flows from a design perspective and has been following along as feedback has come in. You can expect to see a more in depth design exploration shared soon enough with some of these pieces of feedback and ideas integrated in! I’ll flag this in the outreach program channel when the time comes and will see how we can explore these experiences in future calls for testing. 

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-summary

FSE Program Handling HigherEd Headers Summary

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

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

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

How far can one go?

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

Image showing a pretend Gutenberg University with blue and orange colors and two menus of varying complexities.

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

Image showing a replicated UNG header with a blue header and a small menu.

High Level Feedback

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

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

– @richtabor in this comment

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

– @alanjacobmathew in this comment.

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

– @bjturner in this comment.

Using the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. still seems the most troublesome area of site editing. I know how much work the development team has put behind the user experience for this feature but cannot help but wonder if there is a point where users can opt into managing its content (the links) via the traditional Nav Menus screen in WordPress. The site editor works fine for the design aspect, but I have yet to feel comfortable using it to manage links.

– @greenshady in this WPTavern post

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

– @wazeter in this comment.

Confirmed bugs

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

General Usability Feedback

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

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

– @paaljoachim in this comment.

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

– @alanjacobmathew in this comment.

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

– @greenshady in this WPTavern post

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

– @wazeter in this comment.

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

– @bjturner in this comment.

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

– @alanjacobmathew in this comment.

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

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

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

– @bjturner in this comment.

Feature requests

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

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

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

– @paaljoachim in this comment.

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

– @alanjacobmathew in this comment.

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

FSE Program Polished Portfolios Summary

This post is a summary of the seventh call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. 

On a more personal note, it’s so neat to see the various ways people engaged and to really feel the power of the WordPress community in these calls for testing — WordCamp Japan used the seventh call for group testing this week, a meetup in Philadelphia used it as part of their event (shoutout to @accessamy and @itsjusteileen), the call for testing was translated into Italian and Japanese (shout out to @piermario and the folks from WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Japan) and three folks did write ups encouraging others to test alongside their feedback (@greenshady, @bgturner, and @bobbingwide). Plus, I had some of my coworkers go through the test for good measure! I am super stoked to see a diverse set of ways folks are exploring this program and deeply appreciate you all making it happen.

Teamwork makes the dream work. Anything I can do to make participation easier and more fun, let me know!

How far can one go?

It’s hard to compete with @greenshady’s awesome explorations at this point! Check it out below: 

Image showing a portfolio page with a banner at the top, a list of the latest work in the middle, and customer reviews at the bottom.

High Level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following detail oriented feedback. Since this was a more open ended test compared to the prior one, it was interesting to hear about the ways in which people explored things on their own and the resulting joys/frustrations that caused. 

Compared to the earlier tests, the overall experience is way more stable and polished. My biggest issue with the 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/ and FSE is still the same: lack of visual references while designing, unless I do some hovering dance on the blocks and – this time – I didn’t have a clear picture of how exactly changing some elements (site title, navigation) on the portfolio template would affect other pages, so I got a little lost between pages.

@piermario in this comment.

Generally I love the query 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. though. Really cool that you can do that now without coding! I am looking forward to using it in projects.

@michaelsndr in this comment.

I had a lot of fun with this. And frustration. Some more fun. And…you guessed it…some more frustration….I enjoyed the process — yes, I revel in both the fun and frustration. Aside from everything that I think is broken, the overall system is pretty dang sweet. There are far more things that the development team has nailed down than there are that feel janky.

@greenshady in this post

Repeated Feedback: Switching between editing modes (template vs page/post) & various block improvements

This section is dedicated to repeated items from previous calls for testing. Once more, despite the three ways to visually distinguish the editing modes, there remains confusion around when one is in each mode. The deeper into these calls for testing we go, the more it becomes clear how valuable it will be to do things like view a template while editing content and have some good friction in place while interacting with post blocks in template editing mode.

Across a few blocks, some repeat items came up that are worth mentioning considering they were each mentioned at least two times:

Today I got lost quite often. I didn’t always know if I was editing the Portfolio Template or the Portfolio page.

@piermario in this comment.

However, once I was in the Template Editor it wasn’t clear when I was editing the template or the content itself. When I used the block navigator – I could see the post content block (which made sense) but only because I was already looking.

Automattic employee feedback. 

Some general usability feedback of the column block: I’d love a way to make the vertical margins disappear so that full-width sections that have background colors don’t show any space between them.

@bjturner in this post.

Post Title Block – no way to style text (bold, italics etc), and no way to have a totally custom colour. Do these color options come from the theme itself? 

Automattic employee feedback. 

As a user, template editing is a great tool when you have a good visual understanding of what your post or page content will look like in the context of the full site. The issue is, when in the post editor I don’t know that, unless I am checking “Preview” as I create/edit my content. Has any thought been given to how we could improve this experience so users are more aware, as they’re editing, of how their content will be displayed on the site (depending on the template used)?

Automattic employee feedback. 

Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block & Related Improvements

Since the Query Loop Block featured heavily in this call for testing, it’s no surprise it was also an area of both great praise and criticism. On the whole, there was loads of excitement around this powerful block with folks keen to have access to it with WordPress 5.8. Outside of that though, the following items were raised for the Query Block itself and some of the related blocks used within it: 

Tied to the above issues, there was repeated frustration around deeper customization and limits of the nested blocks within the Query Loop, especially if someone wanted to go well beyond what the current patterns offer. It’s also important to note that this test was done without this PR merged for the Query Loop block, which makes the Post Blocks uneditable within the Query Loop block itself ahead of WordPress 5.8. 

The next section of template testing consisted of adding a Query pattern and customizing it. I have a love/hate relationship with queries in Gutenberg right now. The Query block itself works well. It has a solid balance between advanced usage and simplicity for the most part. I am amazed at what the development team has done over months upon months of iteration.The downfall is that the Query block is merely a wrapper. It is only as good as its weakest sub-block.

@greenshady in this post

There’s a bit of a confusion point in the Query Block with Items per Page. Despite having multiple published posts only one appeared by default. I found the controls in the Block Toolbar to increase, but also found it a bit cumbersome to toggle between the Block Toolbar and Block 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. to refine the underlying query.

@dryanpress in this comment

Query Block: Block outputs nothing on the frontend when there are no posts to show. Generally, it requires to show something that tells visitors that there are no posts or some custom message.

@sagarnasit  in this comment

General Usability Enhancements

As people explored template editing mode, the following items came up as areas that would make the experience more intuitive going forward. Many of these were repeat items but it felt important to call these out separately, in particular the quotes describing the current experience. While some of these areas have design explorations in place for potential inclusion in the future, this section captures the current pain points: 

It appears that I didn’t save the template since it’s showing a 404, even though the title says “portfolio.” I think what confused me was the “Publish” button in the upper right corner. Coming from a WP background I think I understand that “Publish” meant to publish the page template I was editing, but on initial use, I was hesitant to push the button because my context was the original page that I had created, not the page template I was editing.  

@bjturner in this post.

While in Template Editing Mode, I clicked the Preview button, clicked Preview in new tab and didn’t see the addition of the navigation block or other template changes. If this could work that’d be great, but if these won’t be available to preview outside Gutenberg due to how Templates are saved and stored, that preview dropdown item probably shouldn’t be available inside Template Editing Mode.

@dryanpress in this comment

If I create a new template, the new template is not available in the drop-down selector until I refresh.

Automattic employee feedback. 

When saving the template change, if I uncheck all the items that appear, the Save button gets defunct. If we are allowed to uncheck one of those, I think we should be allowed to uncheck all items too.

Automattic employee feedback. 

The Update option isn’t available once I’ve switched alignments on the block. I needed to alter the post title to trigger the Update option. 

Automattic employee feedback. 

When you’re creating a new template, for each existing template part that you insert, you have to remember to set the same attributes for the template part as used in other templates. Attributes that will need setting include the Width and Colours.

@bobbingwide in this comment

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

FSE Program Stick the landing (pages) Summary

This post is a summary of the sixth call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to @piermario for translating the call for testing into Italian once more. Translations are such a big help as they really help bring the wider community along.

As a reminder, the seventh call for testing is currently underway and you’re welcome to join!

How far can one go?

Once more, I’m excited to share @greenshady’s creative take on this call for testing that utilizes some awesome custom colors and reuses a logo from the WC Birmingham team:

Image showing a pretend landing page for WP Y'ALL with a theme of blue colors.

High Level Feedback

Here’s what a few folks had to say about the overall experience that’s helpful to keep in mind as it’s easy to get into the themes or details without seeing the big picture of how using template editing mode felt. For most, they felt it was smoother than expected but that the outcome still was lacking in terms of creating a truly refined template.

It was fun! I liked testing the new features and feeling like I was contributing to WP. I didn’t realize you could drag and drop blocks! What a cool idea to place the Page Title in the Cover 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.! Always learning new things.

@askdesign in this comment.

In the very broadest sense, yes. Someone in an earlier call-for-testing made a simple but eloquent comment where they described the overall output of the editor as a “website-shaped object”. I’m not sure what this means in terms of specific missing features, but, without an awful amount of work on the part of both theme developer and content editor, this still best sums up the resulting output for me.

@chthnc in this comment.

The problem is that custom templates are tied to the theme. I see the logic in this. Certain aspects could be specific to the active theme (colors, fonts, etc.), and it is always how custom templates have worked. However, the block template system is different. From a user viewpoint, I feel like my custom-created templates belong to me rather than the theme. I can see a user switching themes after a couple of years and building a dozen or so templates having a poor experience in this situation. If the feature remains the same, there should be more clarity.

@greenshady in this post.

Repeated Feedback: Settings Improvement and switching between editing modes (template vs page/post)

This section is dedicated to repeated items from previous calls for testing and solely focuses on new items that have come up in these same groupings. As has been noted across various tests, the placement of settings is not always intuitive with some options feeling hidden in the Block Settings under “Advanced” sections and others named/placed in a way that makes it hard to know what the option controls

While lots of work has been done to improve the experience of switching between modes, this was still mentioned a few times as an experience that remains a bit confusing. As noted here, there are three ways that visually help indicate when you’ve switched into template editing mode: 

  • The welcome guide
  • The dark frame that appears around the template
  • The template name clearly visible in the Top Bar

At this point though, work remains to make the experience more seamless, including some updates to the Welcome Guide and some explorations around being able to view a template while editing content

The “settings cog” is not actually a settings cog, it’s the show/hide for the main editor details side bar. The main Side-bar holds the very important Block and Page controls, including “publish”. These controls are not really the “cog type” broad ranging “settings” we might see in the main Settings section of WP-admin we see true settings. 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. contents are more like “Edit controls” and we might more usually expect a pen icon, or a sidebar show./hide icon for this sidebar show/hide. The actual “settings” for the 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/ editor are under 3 vertical dots. Titled (invisibly) “Options”. This terminology and labelling or lack of it is confusing.

@steve-pheriche in this comment.

When I’m in “Template Editing Mode” there’s this large black space around the canvas area of the editor. I think this is supposed to help me understand that I’m not editing a single document, but rather that I’m editing something more.

@shaunandrews in this post

After taking care of the Advanced section, it took me several minutes to find the “Layout” area. I think it would be better to begin with the Layout and work our way down to the Advanced settings. With something as important as Title and Area, why don’t we move those 2 items up to the top of the Block section?

@askdesign in this comment.

It took me a while to find out where the Full Width settings were. I forgot it was under “Change alignment”, next to the block icon, but I didn’t even open it as I thought it had to do with text alignment (Left, Center, Right). This seems weird, is that the best button label we can have?

@piermario in this comment

Crash Reports

There were multiple crashing reports including one due to an issue with Duotone, which has already been reported and fixed. For the other crashing reports, they were difficult to replicate and issues were not created but it’s worth noting that four people reported various crashes, the most of any call for testing. 

Not until the very end, after I was finished. I went back to edit the template and got this error message a couple of times: “The editor has encountered an unexpected error.”

@askdesign in this comment.

Trying again I was not able to trigger the crash. So that suggests there needs to be some very specific order of events, or item selected. My main browser which I experienced the crash on is the FF Developer Browser, 89.0b13.  

@steve-pheriche in this comment.

Initial Template Setup Improvements

Because this test involved setting up a brand new template rather than editing an existing one, there were a few items of feedback around the experience, including around just how “blank” the blank template is. The intention is for it to be fairly empty with basic blocks in place so a user can both get a sense of what can be done there and can easily make it their own without having to delete too many items. In time, this is where Patterns should be very advantageous to quickly build up desired content in a template. 

When I first created a new custom template I was surprised by its content. I’d become used to the Site editor copying the index template.

@bobbingwide in this comment.

Usability feedback

Outside of the new items listed below, it’s important to note that having consistent dimension controls was mentioned repeatedly for a variety of blocks including the Columns Block and Template Part Block. The work to bring these controls is thankfully underway!

If you want to add a paragraph block to the Cover and that block includes a longer text, there seems to be no way to make that block of text narrow.

@agabu in this comment.

Confusing: adding the pages to Navigation. I wouldn’t have known I needed to use the Page Link block if you hadn’t instructed me to do so.

@agabu in this comment.

I think it would be good to add padding and margin options to the columns block.

@askdesign in this comment.

My initial impulse when attempting to rename the template part was to click on the block heading text “Untitled Template Part”. Instead of making the title editable, I was offered the option to transform the block.

@chthnc in this comment.

One part that was somewhat unclear is the alignment options aren’t reflected in the editor vs how they display on the site. Specifically for the custom footer section, when selecting full width I see it is applied when I view on the front-end, but in editor it was not full-width. I figured out that I needed to set the footer to full width as well as the columns within to full width to see it reflected in editor.

@circlecube in this comment.

Collection of Miscellaneous Bugs & Enhancements

As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features and bugs that were reported that didn’t nicely correspond with a particular block or categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.

When viewing the page on the front-end, it would be great to have the ability to open its template directly from the top admin bar.

@agabu in this comment.

While performing this test I thought, “Why can’t I pick the template upon which my new template should be modelled?” It makes sense to be able to use a template as a template. This would be a nice feature.

@bobbingwide in this comment.

Choosing the pages in the nav was strange. The search is essential of course but it feels it could have a scroll to show all the pages (lazyload if many?)

@ridesirat in this comment.

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

FSE Program Query Quest Summary

This post is a summary of the fifth call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

A few reminders:

What’s next for the Query 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.

For anyone interested in the future of this powerful block, check out this overview issue tracking future improvements planned for 5.8. 

How far can one go?

Since this was a more open ended call for testing with options to go further in the Query Quest if one chose to do so, it’s neat to see the directions people went. In particular, the following from @webmandesign shows a lovely take on the call for testing both in terms of the design and because @webmandesign went beyond the initial scope of the instructions:

Image showing a homepage with a few versions of the query block with a dark blue background.

High-Level Feedback

Here’s what a few folks had to say about the overall experience that’s helpful to keep in mind. In general, there was both a sense of wonder in what the Query Block is capable of combined with a sense of being overwhelmed for the same reason:

It is kind of stressful customizing the Query block layout. It makes me wonder if the placeholder when starting up should contain checkboxes suggesting additional blocks that should by default be added when a user begins to customize the design. I also find it difficult to move up and down the hierarchy of blocks. I have to look at the breadcrumbs to see where I am, and then guess which block I have to select to make specific changes.

@paaljoachim in this comment.

Loved the whole query block concept and I want more query controls for other data!

@suhayse in this comment.

I was blown away that I could change the date on posts within the editor, change featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., and make new posts. Wow!

@kristengunther in this comment.

This was my first time using the Query block and it is very cool to be able to build a list of posts and customise them without having to write WP_Query. What a revelation! Thank you to everyone who has put so much work into this block.

@getdave in this comment.

I really like this block! This will give users lots of options in customizing their post layouts!

@synorae in this comment.

What I constantly find confusing and frustrating, especially if I put myself in the shoes of new users or somebody finally switching from the Classic editor to 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/ is the lack of visual references in the layout. Having to hover on elements to figure out what’s what, where things are nested, or simply try to insert a new block is still confusing when dealing with layouts. I’ve been recommending Gutenberg as default editor for blog posts to all my customers, and some are eventually getting used to it, but when it comes to creating more complex layouts things can get complicated very quickly.

@piermario in this comment.

Repeated Feedback: Control over spacing & placeholder confusion

This test, in particular, led to two main repeated points of feedback that touch on the wider themes from prior calls for testing around specific placeholders being confusing to interact with and the desire for more control over spacing/alignment of blocks. For this call for testing, the feedback centered around both how confusing the “read more” placeholder text was in the Post Excerpt Block and on desire for more control over spacing with the Columns Block

We need margins UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. controls! So that we ourselves can control the visible gaps, and not have default gaps here and there that the theme happens to have inserted.

@paaljoachim in this comment.

I missed the ability to style the columns individually – increase the gap between the columns, but that’s not part of the current coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. column block.

@suhayse in this comment.

Content widths are very confusing. I’d expect default to be inherited from theme. For example, adding Columns block directly into “index” area content will render the block fullwidth. To control the width then, I need to wrap it in Group block, which is set to custom width while I’d prefer it to default to “Inherit default layout”. 

@webmandesign in this comment.

Editing the read more text definitely works. I didn’t even know you could change it. I probably assumed you couldn’t because the cursor is a pointer when hovering/clicking it. It’s definitely not clear that it’s a placeholder. For consistency with traditional more-links, I would make “Read more…” the default text and not just a placeholder. Users could still delete it if they didn’t want it to appear.

@greenshady in this comment

Spacing is very off and inconsistent. But this is actually very common issue with block editor and very difficult to tackle 100% in themes, probably even impossible due to different HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. in editor and website front-end. Margins (+ padding) control for every block would be very beneficial.

@webmandesign in this comment.

Configuration Improvements

The Query Block is a complex, powerful block that makes the configuration step both tricky and crucial. In the long run, the plan is still for this to be more of a theme author tool rather than something an end user will interact with. Regardless, the current setup is worth evolving even if only to benefit theme authors and, later, end users when more block variations are explored! 

Of the items in this section, the most prominent and recurring piece of feedback was the desire to make it easier to switch the initial pattern since, if you want to switch the pattern you’re using mid way through, you essentially have to start over completely. Addressing this is currently under discussion and should improve with updates like this coming to 10.6 that make the initial setup exploration more intuitive. 

I wanted to go back and change the size selection to the query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.. I think there was large, medium, small. Is there a way to change that layout after you’ve customized that query block? Seems like it should be part of “Display Settings” in the block controls.

@suhayse in this comment.

Is there a way to change the layout of the query after you choose it? For example, if I chose one and then customized some things – can I can change layouts later on or do I have re-make the whole query block? I couldn’t figure this out.  

@kristengunther in this comment.

When adding a dark background color I tried to set the text color to a light color and was surprised when changing it had no effect. Only after thinking this through did I realise I needed to alter the Link Color in order to have the text color change.

@getdave in this comment.

I expected the Query Block to have the ability to make all the featured images within the block the same size, but that didn’t happen.

@synorae in this comment. 

Settings Improvements

Outside of the initial configuration steps of the Query Block, the options are endless for deeper customizations. This section of feedback seeks to focus on that experience, whether that’s altering the Query settings or the problems that came up around adding various blocks into the loop itself. 

At a high level, a major point of feedback centered around general confusion for why certain settings existed in one place and not another. In many ways, the various settings one might interact with to create what you want with the Query B,lock felt split across too many places in an unpredictable and counterintuitive way. For example, you might want the block to display a certain categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. but only 3 posts from that category. To do that, you have to interact with the block 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. settings first to set the category before using the block toolbar to select the number of visible posts. While people were ultimately able to find what they needed, it leaves lots of room for improvement in streamlining the creation workflow. 

When selecting the category of the Query block, it would be nice to be able to select from a list of existing categories instead of suggestions from input. Because I do not remember all the categories.

From a member of the Japanese WordPress community.

Having some query controls in the block toolbar and others in the block’s sidebar seemed confusing. Colocating them would seem more logical. I appreciate we’ve probably placed the “most common” controls in the toolbar for convenience but having to jump between locations when customising the query didn’t make for a smooth experience. Perhaps duplicate the toolbar controls into the sidebar?

@get_dave in this comment.

Can I make the date italics? I didn’t see many text styling options for the post date.

@kristengunther in this comment.

Collection of Miscellaneous Bugs & Enhancements

As in the past, there are sometimes bugs that don’t fit nicely into a specific category, but that are still worth mentioning. To make it easier for those working on full site editing to get a sense of bugs at a glance, they have all been shared here:

When I added a “Login/out” block, I was able to click on it, and the outer part of the admin panel were displayed twice.

From a member of the Japanese WordPress community. 

Some of the patterns don’t respond well as the screen gets smaller.

@getdave in this comment.

I wanted to try using keyboard and tried to look for shortcuts from the “Keyboard Shortcuts” menu in the toolbar, but it showed nothing. I’m still looking for a cheat sheet or something to try editing with keyboard only, but I still haven’t found it, and it doesn’t feel like something quite discoverable yet.

@piermario in this comment.

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

FSE Program Building a Restaurant Header Summary

The fifth call for testing is already underway, so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the fourth call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

How far can one go?

It’s always fun to see how far people can take these tests in creating something cool without code. Here are a few screenshots of people’s creations that make me hungry just looking at them:  

An image of a restaurant header with palm trees and a beach in the background alongside a menu and a prompt to order online.
 @greenshady’s exploration 
An image of a restaurant header with various types of food pictured and a prompt to order online.
A Yoast Employee’s exploration
An image of a restaurant header with a coupon code, prompt to order online, and an image of the imagined dining room featured.
A Yoast Employee’s exploration

High-Level Feedback

Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:

All of this could be because of my inexperience 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/ the 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. I’m used to working with Astra and other 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. libraries rather than the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks.

@suhayse in this comment

The most problematic issue is that what I saw in the editor was not what I got on the front end. I have played around with it enough to know in my mind what it might look like on the front end to make adjustments without previewing the changes. However, that is not the user experience that WordPress is shooting for.

@greenshady in this WP Tavern post

Most of us were confused by the current 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. and UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. of the full site editing experience. For some of our colleagues, this was the first time using the block editor for a whole day.

@francesca in this Yoast blog post

Repeated Feedback: Improving saving, desire for a preview option, and differences in spacing

As with last time, to better consolidate repeated pieces of feedback, this section only contains new bugs or enhancement requests while still sharing quotes that highlight how these areas continue to be a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. In this case, keep in mind that spacing refers to everything from differences between the front end and back end to enhancement requests around setting the width of various blocks. In general, though, it further underscores how the differences in experience between the editor and front end break the promise of WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. currently. Thankfully, lots of work is underway to continue iterating on this aspect of the experience!

One frustration point was the ability to preview as others have mentioned (the live site definitely looked different from the dashboard preview). When I did view the live site, there wasn’t any margin or padding on the main 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. section but there was on the added column set on the top, even though both were set to full width. I tried changing that main header column width back to wide, saving, then going back to full width but it didn’t help.

@suhayse in this comment

Another thing I noticed was that some small changes, like adjusting the percentage width of the individual columns didn’t activate the “update design” button. 

@suhayse in this comment

I click to Update Design. As there is not yet any simple way to preview on the frontend like we do in the Post/Page screen. I copy the site address url and open a new browser tab and paste it into the new tab to see the frontend. The frontend does not show any margin along the left edge.

@paaljoachim in this comment.

I noticed along the way that the Update Design button was greyed out on occasion when I made some adjustments inside the Cover block and other inner blocks. I had to click into various blocks to get the Design button active again so that I could save. (This seemed a bit hard to track.)

@paaljoachim in this comment.

The site editor makes it looks like there is a small margin all around the full-width header. On the site itself, this isn’t seen. I had set a background color for the full-width header which is edge to edge on the site, but has a margin all around it in the editor.

@kristengunther in this comment.

Columns Block Improvements

Because this call for testing required people to make great use of the Columns Block, it was also the focus of a lot of feedback from various participants. Overall, this feedback mainly came down to two interrelated areas: difficulty navigating between nested blocks and confusion around properly setting width. What follows are the new issues created as a result of this call for testing: 

Testing was smooth overall except when it came to setting the Columns Block to full-width (both in the header and body of the page in the Site Editor). I was unable to set the block to full-width within the Block Toolbar settings. I was able to do this outside of the Site Editor on a fresh page though.  

@synorae in this comment.

I see no visual difference from selecting Wide width or Full width in the backend.

@paaljoachim in this comment.

It’s not clear that the symbol/icon is Full width. It would make sense to have arrows to indicate that it should be full width.

Anonymous Yoast employee in this GitHub issue

I don’t see an option for full width? Ah it’s under alignment. “Alignment” sounds like left/center/right, not the size. What’s the difference between wide and full wide? I don’t see much difference in the preview.

Anonymous Yoast employee in this GitHub issue

Setting Styles

As part of this test, people explored setting various styles to customize their heading to their liking and bring to life the feeling of a restaurant. Similar to the complexity in navigating between nested Column Blocks, though, setting styles proved to be pretty confusing considering how unintuitive it was to figure out how to properly select and then style the section one wanted to. Tied to this, it wasn’t always clear where one could find the setting that would do what they wanted since various settings are spread across the block toolbar and block settings. In some cases, the setting to accomplish something doesn’t exist yet too! As more work is underway to add in more styling options and normalize block level controls in a more intuitive way, this is an area ripe for continued iteration.  

This is global settings vs individual page template settings. It’s pretty confusing right now. I don’t know exactly where I would set universal global header colors. I would expect to be able to do that in the Template Parts/Header but I don’t immediately see how to do that. 

@suhayse in this comment.

I found I had to set the background color for my header 3 times, once for the index template (like in your video), once on the page home template, and once on the page template.

@kristengunther in this comment.

Discoverability of settings, not ideal. Some things are in the popup toolbars, others 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. (both in Site Editor and Appearance), other in the top toolbar. You had to find the cog and the Global Style icons to open more settings.

@francina in this comment.

When you are new to this, you are really wondering if you need to find the settings in the list overview left sidebar, or the cogwheel right sidebar or on the block itself, all the options are all over the place.

Anonymous Yoast employee in this GitHub issue

Why does the column change size when changing the color in the settings? At least it definitely seemed like it happened that way. That’s unnecessary and unexpected.

Anonymous Yoast employee in this GitHub issue

General enhancements & feature requests 

As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features that were reported that didn’t nicely correspond with a particular block or categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. This only includes new feedback and doesn’t include previous findings from prior tests:

Like the first design I was shooting for, I wanted my Navigation items to look like individual buttons, each with a bit of whitespace in between. However, the Navigation block does not currently support adding backgrounds to each nav item. Even if it did, it also does not have a horizontal margin setting to add the spacing.

@greenshady in this WP Tavern post

Collection of Miscellaneous Bugs

Because this was a more open call for testing, not all bugs fit nicely into a category or theme with many of them being standalone problems. To make it easier for those working on full site editing to get a sense of bugs at a glance, they have all been shared here:

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

FSE Program Custom 404 Page Testing Summary

The fourth call for testing is already underway so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the third call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

How far can one go in creating a custom 404 page? 

The following is a screenshot of the very fun, custom 404 page that @critterverse made solely using the FSE experience and her amazing design skills. While not all of us have the knack for design that she does, it’s exciting to see what’s possible without touching code:

Image showing a customized 404 page with an arctic theme with penguins, a shipwreck, and an iceberg.

High-Level Feedback

Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:

I didn’t encounter anything that was broken, though several aspects of it could be significantly improved. Everything outlined in the testing 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
seems to work as it should, if users can ever find it. It is going to be a real challenge to make the interface spectacularly simple enough for ordinary users to feel comfortable knowing when and how to create their own template parts.

Sarah Gooding from this WP Tavern article.

In my head, I know that we are inserting blocks to things other than the contents that goes into 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. editor, but in reality, my instinct still tells me to look for something specific to do things, rather than inserting a block. Mainly I think because you need a time to get used to. But starting to feel that there are no visual feedbacks (e.g. different border colour, diffrent panel colour, different look on 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. panel) within the editor to distinguish which are the content blocks, and which are FSE specific blocks (like template part block).

@toru in this comment.

To sum it up, most of the difficulties I had during the test are the same ones I still experience when using 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/ pretty much daily. First and foremost, getting often lost without any visual reference over layout structure, hierarchy, or block boundaries. These range from “it’s all white, where am I?” to “what block am I really editing now?”. Also, I still find it rather annoying that when I want to add a new block below an existing one I have to do a bit of treasure hunting to find the exact point where the magic [+] will appear, opening a new world of possibilities, or just the next block.

@piermario in this comment.

The things that were most confusing in early tests are becoming more comfortable. The thing that remains still a little confusing is the plus icons for adding elements. There seems to be a pattern to which types are used and where they are placed, but I have trouble seeing what that pattern is.

@chanthaboune in this comment.

These last two comments underscore a high-level usability item that, if improved in either the block editor or site editor, would make a big difference across the collective experience. For now, I encourage those interested in confusion around the + button to follow or chime in on this relevant and comprehensive GitHub issue.

Repeated Feedback: Improving saving & enable the option to preview

These are two big themes that have been carried over from every single test that’s been done with the Outreach Program resulting in a feature on the High Level Feedback post. To better highlight how they’ve been repeated, they have been merged into this section with only new issues or enhancement requests shared below:

Once the design is saved, there is no confirmation but the button is no longer operable. The interface could communicate this better…Unfortunately, the preview looked nothing like the display on the frontend, but I assume that is still in progress. After trying multiple sources, I found that embeds didn’t work and some of the block styles were off.

Sarah Gooding from this WP Tavern article.

It was a little confusing when it asked if I wanted to save individual parts of my work. I think at that point, I did a little thinking through the experience and landed on “oh this is like changing the slide vs slide template in Keynote”. It’s hard to know how many people will get to that conclusion.

@chanthaboune in this comment.

Template Part Creation Improvements

Because this call for testing required one to remove and then create a new Template Part, this became a focal point for a variety of feedback items. For example, the current experience doesn’t make it clear how to set a name for a new Template Part after one is created causing some testers to create multiple template parts without realizing what was happening. Tied to this, the new Template Part name doesn’t propagate across the rest of the interface after being named making it a particularly confusing experience to know if a part has actually been created. The following issues capture this collective feedback into distinct areas:

Finally, there was general feedback around how it’s necessarily clear that one entering a true context shift as the current experience editing and creating Template Parts is almost too seamless. Making this context switch clear has been flagged during other calls for testing and is being explored in this previously opened issue

The experience of editing a Template Part really does feel a bit like popping the hood, which is something a dramatic context shift could help emphasize even further. The concept of a context shift could eventually be applied to the experience of switching between editing regular content and a Template as well.

@critterverse in this post.

It seemed like you should be able to add a new Template Part in the same way that you can add a new Template, directly from the FSE sidebar.

@critterverse in this post.

When adding a new title I would expect to see some kind of dynamic change so that I see the new name in the toolbar even without updating the design.

@paaljoachim in this comment.

When adding and naming the Template part, I can’t tell if the part has been saved and has the new name as there is no visual sign that a part of the template is there at all. That can be very confusing. I ended up with four Parts of template blocks, all stacked up and pretty much overlapping.

@piermario in this comment.

One aspect of it that could be improved is that new Template Parts don’t save until you click “Update Design.” If you move away from the block and continue other parts of the design, it appears that it hasn’t saved and you may be tempted to create it again, as I was.

Sarah Gooding from this WP Tavern article.

List View enhancements

Thus far, the List View is proving to be a helpful navigation tool for making one’s way around the editor. It’s also proving to be a point of confusion mainly due to missing expected functionality, including the ability to drag & drop and remove items directly from the view. Thankfully, expanding the capabilities of the List view is being explored in this issue already including the ability to drag & drop

The List View was confusing to me, there were Template Parts I thought hadn’t saved properly that suddenly appeared there, they look like duplicates and it didn’t seem possible to delete them.

@lmurillom in this comment.

Quick sidenote about the list view: it would be great if this view had the 3 dots menu for quick actions on items, and if it would allow you to reorder or drag blocks.

@piermario in this comment.

The List view is awesome – so useful for Navigating and visualising. Needs power features including a re-order and delete feature for each block.

@get_dave in this comment.

Navigation Block

Thanks to this test calling for deeper usage of the Navigation Block, there was lots of great feedback gathered around both current pain points and feature requests to make it an even more robust block: 

Some of what was brought up also relates to overall work around improving the Link UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., which is currently in the process of going through a lovely design iteration

Navigation Block – the two placeholder options don’t look like call to action buttons elsewhere in the UI. I understand they need to be in keeping with the Nav items style but it wasn’t clear they were options without actually reading the text. Could we improve this?

@get_dave in this comment.

Usability

This round of feedback uncovered further areas of usability improvements while touching on current known issues including this issue on distinguishing template parts, this issue on how best to create a pattern of interaction for editing template parts in different editing contexts, and this issue discussing how hard it is to tell the difference between what one is editing. With these being known areas to improve, what follows are generally new areas or issues to be aware of:

Now that there are starting to be many possible configurations of toggled sidebar states with the addition of Full Site Editing, I can imagine wanting to revisit some keyboard shortcuts to make the open/closing behavior of all the sidebars possible through similar, easy-to-remember shortcuts.

@critterverse in this post.

I lost track of the Settings sidebar a couple of times when I had been editing Global Styles because the advanced block controls that usually appear in the sidebar weren’t automatically shown when a block was selected.

@critterverse in this post.

The overlap between template parts and reusable blocks might cause users to have trouble differentiating them.

@priethor in this comment.

The “Navigation Toggle” refers to the WordPress icon in the top left corner of the page, but as a new user I would expect that to take me back to the dashboard. The naming doesn’t seem clear and I had to look up what was meant by Navigation Toggle.  

Sarah Gooding from this WP Tavern article.

General enhancements & feature requests 

As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features that were reported that didn’t nicely correspond with a particular block or categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.

While trying to build something for the test (but also when I currently use Gutenberg ) I often find myself hovering on the block icon several times, in order to double-check what kind of block I’m interacting with. In this case, the tooltip says “change block type or style”, which makes sense, but doesn’t help in immediately identifying a block type. Has there ever been an option for a visible label near blocks?

@piermario in this comment.

I would have expected to be able to save a Template Part independently of the Update Design button (top right). I’ve been conditioned by Gutenberg to see this as the main “update” / “save” button and I’d expect that to save my whole page (including changes to Template Parts). But I’d expect the Template Part to have it’s own “Save” UI.

@get_dave in this comment.

Site Editor Crashing

It’s worth noting that two people ran into a still open bug report that causes the Site Editor to crash when selecting a template part after selecting the navigation block

When I was clicking around the newly saved Template Part, the editor suddenly went white but afterwards I wasn’t able to reproduce.  

@lmurillom in this comment.

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

FSE Program Build a Homepage Testing Summary

A third call for testing is already underway so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the second call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

Related feedback is grouped under high-level headings. As you read through it, please remember that feedback is welcome on the format of this post too.

High-level feedback

Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:

Everything seemed intuitive for me (long time WordPress dev for whatever it’s worth). I recently did a site for a client in Squarespace, and I appreciated that everything was drag-and-drop and had blocks for all website sections. This full site editor gives that same experience. I think this will be great for empowering non-dev users.

@andystitt829 in this comment.

I did a demo of using FSE in December 2019 at meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. Tokyo. It did “work” then, but felt more of a prototype — kind of alpha or even pre-alpha stage of development. But this latest version is much more smooth, less buggy, and get overall feeling that it has come a long way and shaping up to be a feature.

@toru in this comment.

My main problem with this as a designer is that if we are building structure, don’t try to look like wysiwygWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.. If we are building design, then show it exactly. Current GB UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. isn’t an overlay, so it is pushing the layout completely out of shape. So you get a kind of Picasso view of your website. You have to take a big imagination leap to trust that you are designing this website well. –

@paullacey in this comment.

As you can tell, there’s a diverse set of reactions to this call for testing, which shows how far Full Site Editing has come and how much further it needs to go. 

Adjusting column widths

Adjusting column widths was one of the most mentioned issues that came up as people tried to customize their homepage to their liking! This coincided nicely with an important PR that started as a draft at the beginning of this call for testing and has moved into an open PR with numerous iterations since. As @youknowriad mentions in the PR, alignment in Full Site Editing currently works in a way that’s optimized for traditional themes that provide their own alignment styles. Still, this approach needs to be reconsidered moving forward as it doesn’t allow for a true WYSWYG experience. This leads to the problems described below in comments from some of those who tested: 

I inserted a 70/30 pattern for the Columns 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., then changed the alignment to “Wide”. The Columns block didn’t expand proportionally to fill the available space. When viewed on the front-end, the columns did display as expected.

@chthnc in this comment.

We noticed with columns that we had to assign the width of the block in order for the height of the site logo to align with the site title. We want to expand the width of the body content without using a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. to get closer to edge to edge layouts.

@courane01 in this comment.

I created an image 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. that was wider than the column to see if there was any restriction on image width. When I went to view the page, the image had been resized to fit the column width.

@kforbz in this comment.


I really wanted something that was between the theme’s full and wide widths.

@greenshady in this WP Tavern article.

Previewing changes

Like adjusting width, previewing changes came up as a workflow people rely upon and deeply missed in this call for testing. This nicely echoes findings from the first call for testing, where people wanted to preview template changes and expands to previewing the entire site editing experience. Currently, a “Preview Site” option is under discussion here and this post is linked in a comment to ensure feedback makes it to those who explore this further. 

I do not see how to preview the layout on the frontend.

@paaljoachim in this comment.

Yes, but when I am done I don’t find a way to easily go and view my website. I turn off full screen mode and use the more classic view site link in the Dashboard.

@paullacey in this comment.

There were so many inconsistencies between the site editor and the front end that there is little point in listing them all. Spacing was grossly off. I generally see that as a theme issue. I spent much of my time in trial-and-error mode, making an adjustment in the editor and refreshing to see the front-end result. Rinse. Repeat.

@greenshady in this WP Tavern article.

Saving Process: auto drafts, keyboard shortcuts, and more

In line with the last call for testing, the saving process came up as an area people were keen to see iterated. Whether it was mentioning desired features, finding bugs, or confusion around how to accomplish a task, this proved to be a robust area of feedback: 

When editing, I expect CMD/CTRL + S to save my work. This works in a post/page editing experience. On OS X + Chrome, this prompts me to save the webpage.

@courane01 in this comment.

I can understand why there is a 2-step process here, but every time I clicked “Update Design” it intuitively felt like I shouldn’t have to then click a “Save” button as well.

@chthnc in this comment.

What if I want to save the template as a new template, Template Part as a new template part and not overwrite the existing templates? What if I decide not to save a template part? Can I revert changes by clicking an revert/undo changes checkbox?

@paaljoachim in this comment.

I didn’t experience any auto-saves. When my site crashed, it did not have any autosaves.

@courane01 in this comment.

General Usability Problems

Because this call for testing was more open-ended, this resulted in a wide range of general usability feedback that relate to the overall experience of building a homepage rather than a specific part of the experience. While these items can’t be easily organized and some were reported previously, they are extremely important to keep in mind: 

I see that blocks for FSE are under “design” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the inserter, but I think it’s better to put them in their own category to avoid confusion with non FSE blocks.

@overclokk in this GitHub feedback issue.

I tried to insert a Post Tags block using the ‘/’ command but it didn’t appear as an option. I had to search and find the block via the block inserter panel. –

@chthnc in this comment.

Without the screen shot, I would have not been able to find where or guess which is the Navigation Toggle.

@toru in this comment.

The problem with switching to this mode is that my toolbar-choice was not saved. Each time I returned to the site editor, I had to enable it once again.

@greenshady in this WP Tavern article.

I wish I could put a background image (also in the body of the page), but I haven’t found a way to do it, nor have I been able to set 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. color different from the rest of the body.

@ejca in this comment.

Individual Site Editing Block Feedback

Since this test relied on exploring Site Editing blocks, great feedback was given about the experience of specific individual blocks. To make it easier to go through, these issues are gathered in this section:

I was trying to size the logo I added using the what appeared to be resize handles. but it did nothing I expected. Eventually I found that the block had settings in the right panel, but I had to look quite hard for this.

@paullacey in this comment.

I inserted a Query block after choosing a pattern. I then changed my mind about the pattern and attempted to undo. Nothing happened.

@chthnc in this comment.

“It wasn’t obvious to me that the Social Icons block then needed to have individual social media blocks added. I couldn’t figure out why they weren’t showing up and looked in the settings and in my user profile to figure out where to add my social media links. I saw social icons in the footer and then clicked on the blocks and saw that the individual icon blocks needed to be added.”

@andystitt829 in this comment.

To me, I feel strange to be told to upload a featured image for each post here. I assume if each featured image are set, then this uploader won’t be shown. Still, I think it feels confusing.

@toru in this comment.

There is no way to set the size of the image output by the Post Featured Image block. The only way to get a uniform size at the moment is to pre-crop the images before uploading them to WordPress.

@greenshady in this WP Tavern article.

#fse-outreach-program #full-site-editing #gutenberg #core-editor #fse-testing-summary