FSE Program Testing Call #5: Query Quest

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

Feature Overview

Not many blocks get an entire milestone dedicated to them but the Query Block did! As the name implies, this is a pretty powerful 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. allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do. 

If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use the latest version of 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/ (10.4 as of writing this).

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing FlowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
 

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. Install and activate the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.4.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. From there, make sure you are in the Index template (this should be the default upon opening).

General Testing Instructions:

  1. Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this. 
  2. From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
  3. In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”. 
  4. Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
  5. Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. 
  6. From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
  7. After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 
  8. Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
  9. View your site and see if what you created matches the Site Editor view. 

If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more. 

Customization Instructions/Ideas:

Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:

Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by May 5th, 2021

While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (8 April)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in! If you’re keen to join an effort like this in the future, please join the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Attendance: @poena @paaljoachim @mkaz @annezazu @oglekler and Karl joined.

Video Recording:

Topics Covered

  • We started off with a neat issue from Paal around adding the post/page title to the post editor‘s top bar to create a more consistent experience between the site editor and post editor for users.
  • We talked about the saving flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
    and how it’s a key part to build trust with users exploring a new feature for the first time. Currently, it’s a bit confusing and not yet robust enough to be fully intuitive to use.
  • We discussed how consistency across saving experiences will go a long way including having similar flows for saving individual 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. changes, a reusable block, a template, and more.
  • We talked through the designs shared around saving drafts of changes along with scheduling changes. This could be a neat but complex feature to manage due to the multi-entity aspect of FSE.
  • We talked about how it would be neat for there to be a “builder mode” where certain tool could be more visible when you’re in the process of active building vs maintaining. This is likely a role for a 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 to play in the future.
  • While chatting about dismissing changes, Marcus brought up an interesting point around dismissing changes wondering aloud how often do people unselect changes? It would be neat to find comparison points.
  • Paal shared a neat design he worked on where if someone unchecks/unselects changes, the save button changes to discard changes. This could be a neat way to act as a confirmation message for the user and a neat contextual nudge.
  • We went through template editing and the recently merged PR allowing classic themes access to a blank template. Carolina shared that this is currently setup as being opt out for themers and that one can’t choose from an existing template yet (can only edit the current template or create a new one).
  • As we were going through template editing, we paused to talk about how valuable a welcome guide will be at this stage. There is one in progress for the site editor that should cover this as it mentions if a user accesses site editing via editing a post.
  • We chatted about the dynamic between editing one piece of your site vs the entire thing and how to add necessary friction to the experience. This included talking about the designs shared around clicking in to edit template parts.

Next Steps:

@annezazu reported a few bugs found and left a comment on an issue to pass along feedback from the group:

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

FSE Program Custom 404 Page Testing Summary

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

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

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

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

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

High-Level Feedback

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

I didn’t encounter anything that was broken, though several aspects of it could be significantly improved. Everything outlined in the testing flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
seems to work as it should, if users can ever find it. It is going to be a real challenge to make the interface spectacularly simple enough for ordinary users to feel comfortable knowing when and how to create their own template parts.

Sarah Gooding from this WP Tavern article.

In my head, I know that we are inserting blocks to things other than the contents that goes into the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor, but in reality, my instinct still tells me to look for something specific to do things, rather than inserting a block. Mainly I think because you need a time to get used to. But starting to feel that there are no visual feedbacks (e.g. different border colour, diffrent panel colour, different look on the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. panel) within the editor to distinguish which are the content blocks, and which are FSE specific blocks (like template part block).

@toru in this comment.

To sum it up, most of the difficulties I had during the test are the same ones I still experience when using GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pretty much daily. First and foremost, getting often lost without any visual reference over layout structure, hierarchy, or block boundaries. These range from “it’s all white, where am I?” to “what block am I really editing now?”. Also, I still find it rather annoying that when I want to add a new block below an existing one I have to do a bit of treasure hunting to find the exact point where the magic [+] will appear, opening a new world of possibilities, or just the next block.

@piermario in this comment.

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

@chanthaboune in this comment.

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

Repeated Feedback: Improving saving & enable the option to preview

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

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

Sarah Gooding from this WP Tavern article.

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

@chanthaboune in this comment.

Template Part Creation Improvements

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

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

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

@critterverse in this post.

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

@critterverse in this post.

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

@paaljoachim in this comment.

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

@piermario in this comment.

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

Sarah Gooding from this WP Tavern article.

List View enhancements

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

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

@lmurillom in this comment.

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

@piermario in this comment.

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

@get_dave in this comment.

Navigation Block

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

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

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

@get_dave in this comment.

Usability

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

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

@critterverse in this post.

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

@critterverse in this post.

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

@priethor in this comment.

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

Sarah Gooding from this WP Tavern article.

General enhancements & feature requests 

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

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

@piermario in this comment.

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

@get_dave in this comment.

Site Editor Crashing

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

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

@lmurillom in this comment.

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

FSE Program Build a Homepage Testing Summary

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

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

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

High-level feedback

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

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

@andystitt829 in this comment.

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

@toru in this comment.

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

@paullacey in this comment.

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

Adjusting column widths

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

I inserted a 70/30 pattern for the Columns blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., then changed the alignment to “Wide”. The Columns block didn’t expand proportionally to fill the available space. When viewed on the front-end, the columns did display as expected.

@chthnc in this comment.

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

@courane01 in this comment.

I created an image in the SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. that was wider than the column to see if there was any restriction on image width. When I went to view the page, the image had been resized to fit the column width.

@kforbz in this comment.


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

@greenshady in this WP Tavern article.

Previewing changes

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

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

@paaljoachim in this comment.

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

@paullacey in this comment.

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

@greenshady in this WP Tavern article.

Saving Process: auto drafts, keyboard shortcuts, and more

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

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

@courane01 in this comment.

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

@chthnc in this comment.

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

@paaljoachim in this comment.

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

@courane01 in this comment.

General Usability Problems

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

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

@overclokk in this GitHub feedback issue.

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

@chthnc in this comment.

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

@toru in this comment.

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

@greenshady in this WP Tavern article.

I wish I could put a background image (also in the body of the page), but I haven’t found a way to do it, nor have I been able to set the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. color different from the rest of the body.

@ejca in this comment.

Individual Site Editing Block Feedback

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

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

@paullacey in this comment.

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

@chthnc in this comment.

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

@andystitt829 in this comment.

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

@toru in this comment.

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

@greenshady in this WP Tavern article.

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

FSE Program Testing Call #3: Create a fun & custom 404 page

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

Feature Overview

Have you ever experienced a particularly delightful 404 page? Maybe it made you laugh or it was built in a way that made it super easy to find your way back to where you needed to be on the site. Currently, this is a part of one’s site that can only be altered with code and provided by the theme causing many of us to be unable to add some extra joy into the universe with helpful, fun 404 pages. 

With Full Site Editing though, this is now within our grasps to make our own. This test explores doing exactly that with the option to build a simple 404 page through template editing or to really dive in to make something unique. If you choose to get super creative, please share a screenshot in your comment so we can all marvel at what you’ve made. For inspiration, here’s an example I made:

Image showing a silly 404 page that says, "Oh no! 404. Where'd you go? I miss you so" with some additional emojis and a search field.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.7 (downloadable here).
  • Use the TT1 Blocks Theme. If you followed the first call for testing, you’ll need to double-check to make sure you’re using this theme!
  • Use GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 10.1.1 (latest version). 

Testing FlowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using WordPress 5.7. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Go to the website’s admin.
  4. Install and activate the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.1.1.
  5. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

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

Exploring the 404 template

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Open the Navigation Toggle and head to Templates > 404. This will take you to your site’s 404 page template.
  3. Using the List View, select the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. Template Part and, using the three-dot toolbar menu, select “Remove BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.” to delete this.  
  4. From there, select the default Header Block that says “Nothing Here” and, using the three-dot toolbar menu, use the “Insert Before” option to add a block above. 
  5. Using your preferred method to insert a block, insert a Template Part Block and select the “New Template Part” option.
  6. Open the Block Settings for the new Template Part block and, under Advanced > “Title”, add in a custom title. For example, “404 Header”.
  7. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes. This should cause the new Template Part to reflect the title you chose.

Adding navigation and getting creative

  1. From there, make sure your focus is still within the new Template Part and add in a Navigation Block. You can choose whether to create a new menu or re-use a previous one.
  2. Add a few links including a link to a page that doesn’t currently exist. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Help”. You’ll then see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this! 
  3. Outside of the Navigation Block, add any additional blocks you’d like to in this new Template Part. For example, you can use the Social Icons Block, Search Block, Site Title, and more. Try to add anything that would help orient someone who got lost on your site.
  4. From there, edit the “Nothing Found” Header Block and Search Block to whatever you’d like. You can then add in anything you’d like including images, GIFs, etc. 
  5. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  6. View your 404 page on your site by going to yoursiteurl.com/404 (replace yoursiteurl.com with your test site URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org). Notice that any items you added to the Navigation Block that are page drafts appear but are broken links. You should be able to still view the drafts since you are logged in as an admin. Note: this has been logged as a bug
  7. Return to the Site Editor and open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Note: there’s a current bug that makes it so you can’t view Page Drafts meaning in the future this will be easier. 

Publish, review, and share

  1. Head to Page > All Pages and publish any that need to be. 
  2. Once more, View your 404 page on your site by going to yoursiteurl.com/404 and confirm any prior draft Pages now show up properly with correct permalinks.
  3. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

If you want to take this further, here are some extra items to explore:

  • Try adding in columns to your content! Columns are a powerful tool and it would be helpful to get feedback on the experience of using them in a real life scenario with site building.
  • Create a custom footer template part to replicate the process of creating a custom header template part.
  • Deeply customize the appearance of the page with custom colors, font sizes, and more. Here’s a quick video demonstrating some of what you can try.

Testing Video:

This video shows the testing flow after the initial testing setup is in place. Of note, this video purposefully does not go into depth in building out a 404 page in order to keep it concise. Don’t let this stop you from getting creative though when you’re testing!

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did the saving experience make sense when making changes to the Template Part vs the general content? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw when you viewed your 404 page? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 23rd, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg, #usability-testing

FSE Program Testing Call #2: Build a Homepage with Site Editing Blocks

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

Feature Overview

Before diving into the testing details, let’s pause to talk about the focus of this call for testing. With Full Site Editing unlocking the ability to edit all parts of your site, there comes a need for new blocks to help facilitate the experience. You might have seen some of these blocks already! For example, there’s a Site Title blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that you can embed anywhere and update automatically any time you change your Site Title.

For this specific test, we’re going to explore using a few of these blocks to build a basic homepage with a 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.:

  • Site Title Block
  • Site Logo Block
  • Post Lists Block
  • Post Tags Block
  • Navigation Block
  • Template Part Block

Think of this as a chance to both explore what’s possible currently to build something simple and as a chance to get more familiar with these new blocks. Eventually, these blocks will specifically be categorized in the Inserter as defined for Site Editing. 

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.6.1 and above (downloadable here).
  • Use the TT1 Blocks Theme. If you followed the last call for testing, you’ll need to double-check to make sure you’re using this theme!
  • Use GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 10.0 (latest version). 

Testing FlowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using WordPress 5.6.1. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create either three fake posts with a few tags OR use the demo Gutenberg content found here. Here’s a short video explaining how to set up this content. 
  4. Go to the website’s admin.
  5. Install and activate the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.0.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

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

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Using the List View, see if the Query Block is present. If so, select and delete it. This is just a housekeeping step to keep things contained :). 

Make changes to your 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.:

  1. You’ll likely see a Header created for you that you can edit directly. Update the text in the Site Title block. Have fun with it! Some ideas to get you started: Pick a new heading size, change the content, or alter the block settings directly. 
  2. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  3. Open the Navigation Toggle and head to Template Parts > Select “Header.” This will show you an isolated view of just the Header portion of your site. While in this view, add a Site Logo Block and configure it to your liking. 
  4. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  5. Open the Navigation Toggle again and head to Template > Index to return to your homepage. 
  6. Once there, head to the Navigation Block that’s powering the menu in the Header (this is where you might find the List View helpful!). Explore the Navigation Block by making changes directly to the menu items or in the Block Settings to change the font, color, etc. 
  7. Using the List View, select the Header Template Part and, using the three-dot toolbar menu, use the “Insert After” option to add a block outside of the Header. 

Add your content:

  1. Add either a 70/30 or 30/70 column block. In the larger column, use the Heading Block to write “My Content.” In the smaller column, use the Heading Block to write “My Sidebar.” 
  2. In the larger column, add a Posts Lists Block and select the configuration you would like (Title & Date, Title & ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., etc.). 
  3. From there, add a Post Tags Block to one of the posts displayed in the Posts Lists Block. Notice how if you add it to one post, it adds it to all of them!
  4. Repeat the previous step with the Post Author Block before deciding whether you’d like to keep or remove either additional block.  

Create a sidebar:

  1. In the smaller column, build out your sidebar how you’d like! For inspiration, try out the Social Icons Block, Latest Posts Block, or a simple Image block.
  2. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  3. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

Testing Walkthrough Video:

This video shows the testing flow after the initial testing setup is in place and is using Gutenberg demo content found here. Make the flow you’re on though with your own unique changes and adjustments!

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you ever want to do something with a specific block that wasn’t possible? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you see when you view your homepage? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 5th, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg, #usability-testing

FSE Program: Connecting with Local Communities

To better expand the reach of the FSE Outreach Program, I am exploring creative ways to engage the wider community. In the #fse-outreach-experiment slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel (join us!), I recently shared an idea to create better connections between the program’s work and local polyglot communities. Since then, I’ve had the chance to work with @mimi who is a part of the Japanese WordPress community. I wanted to share how our work is evolving so others can join in. 

Here are a few ways that someone who is a part of a local polyglot community can help with the FSE Outreach Program: 

  • Translate this page on “How to test FSE” into your local community language so more people can participate. 
  • Translate future Calls for Testing and share your community’s feedback in the FSE Outreach Program. 
  • Facilitate testing in your community by following the Calls for Testing and translating the feedback into English either to share on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ or on the official Call for Testing post. 
  • Bonus idea: you can create content in your local language on Full Site Editing. Here’s an example from @overclokk who did a video in Italian talking about this feature

If this seems like too much, try to find someone else in your local community to work with. For example, you could divide the work so one person translates the Calls for Testing, while another person translates the feedback that’s received to share on the official Call for Testing post. 

If you’re interested in working on these ideas in your local community, please comment below or message me on slack (@annezazu). 

I want to make this easier for anyone interested in any of the above ideas so let me know if this is an area you want to help with. Feedback is always welcome so please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me or share your thoughts in the #fse-outreach-experiment

Finally, big props and thank you to @mimi who has kindly started helping here and has been giving me feedback along the way.  

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

FSE Program: Test FSE Anytime

As part of leading the FSE Outreach Program, I’ve been building out resources to help further the overall mission of gathering feedback. While calls for testing are shared as frequently as possible, there are times when there isn’t an active call for testing. This shouldn’t be a blocker for anyone to explore FSE and give feedback

To help empower everyone, I made the following guide: 

Consider this just a start! Please let me know what else would be useful to include or update as you go through it. I’d love to help as many people as possible get excited about FSE and give feedback. 

#fse-outreach-program #full-site-editing