The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
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:
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.
This post is a summary of the ninth call for testing for the experimental FSE outreach program. During this call for testing, we surpassed 400 members in the channel! I love an excuse to celebrate so please pat yourselves on the back, treat yourself to a favorite dessert, listen to your favorite song, etc to celebrate this neat milestone of community contributions. While we reached this milestone, I do want to note that contributions were lower for this last round than usual so, if you’re sitting back thinking that others have it covered, please instead jump into the next round if you can!
Special thanks to both @mimitips for the Japanese translation and @piermario for the Italian translation.
Shout out to @utz119 @wazeter @alanjacobmathew as first time contributors to a call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!
How far can one go?
Check out @greenshady’s approach (keep in mind he self admittedly “cheated” to get the final look):
@richtabor took on trying to replicate UNG’s header with the following outcome:
High Level Feedback
Here’s what a few folks had to say about the overall experience that can help frame the following detail oriented feedback. Across all of the feedback, the desire for a lighter navigation experience as well as more advanced tools around spacing, bulk adding items, etc. stood out.
I didn’t run into too many issues getting the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to display decently, but I also know a bunch of tricks to get the editor to do what I need it to do. The end result is ok — but the experience getting there needs a lot of refining yet.
– @richtabor in this comment.
Creating the menu was quite a hassle. Too many clicks especially when creating submenu.
– @alanjacobmathew in this comment.
This was an interesting challenge…I didn’t make anything “beautiful,” however I did find a couple of things while I was trying to do most of this via keyboard-only navigation.
– @bjturner in this comment.
Using the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. still seems the most troublesome area of site editing. I know how much work the development team has put behind the user experience for this feature but cannot help but wonder if there is a point where users can opt into managing its content (the links) via the traditional Nav Menus screen in WordPress. The site editor works fine for the design aspect, but I have yet to feel comfortable using it to manage links.
– @greenshady in this WPTavern post.
After delving deeply into the ins and outs of the navbar – the primary issues all revolve around responsiveness. The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. issue came down to the navigation bar operating as a separate element (which makes sense for a block) than the rest of what you’d normally consider a complete header. This means that in order to properly size and place the navbar, you have to use a container block like group or columns – which is where alignment starts to get into trouble.
– @wazeter in this comment.
Confirmed bugs
Thanks to clear patterns in feedback due to a larger focus on the navigation block, this is a dedication section to just bugs that were found or confirmed in this test. Those that have been resolved thanks to a release mid-test have been noted below.
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.
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:
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:
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.
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.
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:
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:
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.
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:
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.
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:
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:
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.
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:
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:
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.
Sarah Gooding from this WP Tavern article.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 Contextseems 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.
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.
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.
@greenshady in this WP Tavern article.
I really wanted something that was between the theme’s full and wide widths.
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
More calls for testing are on their way so join #fse-outreach-experiment in slack and/or subscribe to this Make blog to stay tuned.
This post is a summary of the first 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! While this call for testing is over, feedback is always needed and welcomed in GitHub.
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 as the program is still in the early stages of determining what works best.
Distinction between editing modes (template vs page/post)
The need for the distinction between modes appeared in a number of responses. Thankfully, this was already identified as an area to improve before this call for testing in open issues like this one that reveal just how similar the two modes currently, and the resulting confusion.
Have a clear defined area for post editing and well defined area for Full Site Editing. Do not mix Publish and saving. As they are very different things. One is for post editing and one for FSE editing.
– @paaljoachim in this comment.
I believe it was not clear enough how those changes could impact the site. If you don’t already know how templates, template parts, and global blocks like Site Title work, you might not understand how your editing will affect the rest of the site.
– @priethor in this comment.
The fact that I had to spend a considerable amount of time to understand the differences for a few arbitrary terms and what they mean in a 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. is going to be a significant barrier to migrating existing clients to FSE and training them to understand. It simply won’t be worth it.
– @pointydrip in this comment.
Switching between editing modes (template vs page/post)
The actual act of switching back and forth between modes brought up a few different issues. What does the cancel button do? Why does applying changes for a template take me from template editing back into post editing? Some of this overlaps with the previous section as well. Thanks to the feedback shared, multiple issues were opened related to this particular part of the experience:
Most feedback indicated that by increasing clarity in the interface (ie: a clearer, stickier notice) and making the switching process more predictable, the experience can be greatly improved from the current iteration.
Switching to Template Editing – Editing the template from the post, while logically I knew what that meant, felt surprising – the switch was kind of a jolt because a bunch of things changed on the screen yet the overall layout stayed the same – so it felt like “Whoa, what just happened?”. Felt disorienting.
– @brentjettgmailcom in this comment.
I found it confusing that clicking Save brought me out of the FSE template mode. I saved. I did not ask to go out of the FSE mode.
– @paaljoachim in this comment.
It took me a while to find how to get back to the original post. I eventually found the Cancel button.
– @bobbingwide in this comment.
Saving Process
Generally speaking, the saving experience was reliable technically and, at the highest level, intuitive enough. The main sticking points came when trying to dismiss changes, save changes as a draft, and understanding what each “sub” item to save meant. The following issues were created to address each piece of feedback:
I found this part to be kind of difficult. I think the labels on the different things being saved confused me. I didn’t really understand right away what was being saved for each checkmark…If I wanted to not save the template and left it unselected, but wanted to save the post, it would want to keep publishing the post.
– @geheren in this comment.
The saving process is intuitive, and it’s very helpful to clearly list what elements are going to be updated when saving. However, as said before, it might not be clear enough how each edited element will impact the rest of the site. It could be helpful to add a tooltip to the different elements that are going to be saved (post/site/template/template part) to provide users a quick, last-minute reference.
– @priethor in this comment.
Create a new template
While this call for testing didn’t focus on creating a new template, it feels like a natural extension to wonder how a new template could be created after making changes to a current one. While there isn’t currently a mapped-out plan for this experience, it is under discussion in this issue as there are quite a few scenarios to consider.
What if I want to Save As? To create a new single template. As I might want the original single template and just want to create a new template that modifies the original template. Kind of like a default template and a modified template.
– @paaljoachim in this comment.
How would I go about creating a new template for a selected post/page?
– @bobbingwide in this comment.
Preview changes
Previewing changes is a workflow people rely upon, and this showed up in testing. While explicitly including ways to preview content hasn’t yet been discussed, there is an open issue to explore how best to view the template while editing a post that touches on this experience. In response, a new issue was opened around offering the option to preview the template in the same way one can with the Site Editor.
My trust is always in the published page, and I’m looking everywhere in FSE for a preview page link while I’m editing to basically see if it worked. I feel like just being able to open the page in a new tab would give me confidence in what i’m doing in FSE. The other issue is that since you don’t see 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. or footer in the post editing context, as soon as you do apply changes to a template and you land back on the post, you immediately think “Did it work?”.
– @brentjettgmailcom in this comment.
I found it confusing that clicking Save brought me out of the FSE template mode. I saved I did not ask to go out of the FSE mode. I want to see what it looks like on the frontend. Meaning clicking Save and then previewing the template on the frontend.
– @paaljoachim in this comment.
Undo/Revert Template Changes
This was originally brought up in this issue and is currently being worked on in this PR.
There’s no place that I have found within FSE to revert a template/part back to the theme’s default setup.
– @brentjettgmailcom in this comment.
Bug with template parts
As part of this testing, a few people (myself included) ran into a strange bug related to themes located in a sub-directory not properly loading template parts. This was reported and should help ensure future 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. themes work with this experience.
Where is template editing work headed?
While this post goes deep into the pain points of the current experience of switching between template and post editing, it’s important to show where this work is headed. Currently, the best place to follow along is in this organizational issue focused on the remaining interface and infrastructure issues. This includes everything from issues on how to better distinguish the editing experiences to a welcome guide to introduce people to template mode! Follow along there as the work continues.
#fse-outreach-program #full-site-editing #gutenberg #core-editor #fse-testing-summary
You must be logged in to post a comment.