The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
This post is a summary of the tenth (!) call for testing for the FSE outreach program. Per usual, I love an excuse to celebrate so here are some fun stats to continue the party:
There have been Italian translations for nearly every single call for testing thanks to @piermario. This consistent hard work has allowed folks from the Italian community to better stay up to date and involved in these efforts.
There have been numerous Japanese translations and group calls for testing through WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Japan thanks to @mimitips@ippei-sumida@atachibana (and likely others!). Similar to the Italian translations, it’s wonderful to see a pathway created here for the Japanese community to be involved.
@paaljoachim has responded to every single call for testing with comprehensive feedback each time! It’s wildly helpful to have someone be so consistent in exploring each test over time.
There have been 69 badges given to folks who have responded to the various calls for testing with an average of 1.6 replies per person (meaning most folks don’t just contribute once).
Thank you to every single person who has come along for the first ten calls for testing. Here’s to at least ten more (Twenty more? Thirty more?).
Here’s what a few folks had to say about the overall experience that can help frame the following more specific feedback. Generally speaking, most folks found problems with more of the details of the experience rather than running into any major blockers with UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it., crashing, bugs, etc that prevented them from doing what they wanted to do. Tied to this, much of the feedback centered around the desire to be able to go even further than what’s currently possible, which is reflected in the robust Feature Requests section.
While some things are still not totally intuitive to new users, I feel that GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ made more big steps ahead in just a few months. I enjoy creating content in it and some of the things I have in mind are easier to achieve.
@piermario
It’s been fun testing out the ‘query loopLoopThe 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.’ blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. in FSE. No crashes or bugs. The saving worked properly.
@mikes41720
Confirmed bugs
What follows are confirmed bugs that break expected functionality or the experience of different features. Thankfully, there were only a few of these items!
Overall, most of the feedback for this section surrounded taking very specific actions or insights around how pieces fit together rather than a massive gap in the experience or a blocker to accomplishing a task. As a result, I’ve included more quotes than usual below to help give more context to what was shared. Of note, some are repeat items from previous tests and are labeled as such below.
It’s not clear when you are adding a theme block outside of the Query Loop vs within. In this case, it was confusing when the Post Comment Count block wasn’t properly displaying the number of comments and it wasn’t clear the issue was that it needed to be within the loop. There’s an open issue to discuss this general phenomenon.
Frustration around the two step saving process and feeling like it is slowing the process down. There are designs in progress to improve this experience to make it easier, at a glance to know what’s happening.
The W menu item proves to be a point of confusion, especially when trying to go back to the dashboard. This was brought up by four folks very recently if you include the comments on this additional design post (repeat).
The “create new post” in the description for Query Loop block feels like it runs the risk of breaking someone out of the site editing experience.
Desire for a revamp of the Query Loop block settings in general as there is repeated confusion around where settings are (block toolbar vs sidebarSidebarA 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., improving the settings language). Some design ideas around a Query Loop builder were shared to address this as this test continued.
Every nested block takes on the styles set in theme.jsonJSONJSON, 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., which felt unexpected and lacking nuance (no issue created).
For the Query Block specifically, I’m not sure if this is expected, but I didn’t find a way to get back to the initial layout options if I wanted to change.
@evarlese
I had to open a new tab and go to Posts -> Categories and check out the names of the categories. It would be very useful with the multi select so that we can easily choose various categories from a drop down.
@paaljoachim
It makes sense that ‘Post Categories’ and ‘Post Tags’ blocks can only work within the Query Loop block and when editing a Post and each would display categories and tags associated with that post. However, when someone tries to insert those blocks on the Page outside the Query loop block would just drop the spinning icon. Probably, because as we know Page has no categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and outside the Query Loop, it can’t query the category. ‘Categories’ block would however work.
@suascat_wp
Query Loop – the anchor link of ‘create a new post’ leads to creating a new post or page (depending on the post type chosen in the settings), but I felt like it would break interaction with full site editing since it leads you to create a totally new post or page using the block editor.
@mikes41720
Post ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. – there’s a section to ‘add “read more” link text‘ (which I’m not sure what it means?) that if you click on, it doesn’t show the blinking “|” which signifies that you can add text to it (although it does work and you can add text). If you click directly right after it, it’ll then show the blinking “|” and that acts as more of a sign that you can modify and add text. It might be a bit confusing for some users from a visual cue standpoint.
@mikes41720
I’m having a hard time adding the columns within the Query Loop block unless have to do it via the help of list view.
@iamyvonne
I was playing with the theme.json and added under the styles section on the file a font size for coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./post-title for the page, that syle is applyed at the root level so every nested core/post-title will inherit this stile and it’s ok abviously, it’s a css behavior, this is something to pay attention because now with blocks we must take into account much more kind of indentation of blocks than before where we had well-defined structures.
@overclokk
I’m still misled by the WordPress button in the top left corner of the Site Editor. I know that its function toggles a menu open/close, but being the WordPress logo such a familiar affordance, I often click on it in auto-mode expecting to come back to the dashboard…way too many clicks if I just want to “escape” to the dashboard or the live site.
@piermario
I often feel the “double” saving step slows me down and in 99% of the cases, the options provided in “Select the changes you want to save” are something I don’t want to check off.
@piermario
Feature Requests
Generally speaking, at a high level, most feature requests in this section come down to two things: more design tool options and more settings for blocks. As with the previous section, some are repeat items from previous tests and are labeled as such below.
Allow using featured image as background for a group block in order to add the post title on top of featured imageFeatured imageA 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. (repeat).
I was also initially surprised by 1 item per page as the default, and it took me a moment to find the settings again to change it.
@evarlese
When selecting ‘Display settings’ one can set the number of items per page. But actually you pick the number of items in the column if you choose a layout with multiple columns. May be easier to understand if ‘items per page’ would be renamed to ‘items per column’ or something similar.
@nynkedeblaauw
Site Logo – has a Rounded style but no border radius control. It would be helpful to add the various new controls also to the Site Logo block. Dimensions panel etc.
@paaljoachim
I wish I had a margin and padding setting on the Columns block level.
For the Go/No Go, we chatted about items we were excited for, including talking through @karmatosed wonderful patternspiration.com where she’s started to make art-like creations. This spurred the idea of a virtual museum of art made from blocks that yours truly just might try to make a reality.
From there, we moved on to walk through the various early design explorations for the Site Editing IA. This led to a lively discussion alongside walking through both the current experience and the various prototypes. We talked about the changes in colors between the different interfaces, how much friction to add/remove for various pieces, and which might make the most sense for 5.9. @fabiankaegy had some great feedback around including more than just the headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer for the Separate exploration but in a view only manner similar to what currently is available with locking things in patterns.
Finally, we covered the latest on the Navigation Editor and BlockBlockBlock 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. work. @get_dave was kind enough to talk through where the project currently stands with focus shifting to the Navigation Block in order to then lay the foundation for the Navigation Editor. A key part of this work right now is “separating the navigation’s presentation from its data in order to make navigations reusable”. This will allow both for easier block theme switching while retaining menu data and for menus to be edited in a template part without creating a local copy. If folks have time, check out these two PRs to help move this important work forward: Save Navigation Block data to a wp_navigation post type and Try using a template part in the navigation block.
This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. It was intended to be a casual walkthrough of the current call for testing with @sparklingrobots taking the lead sharing their screen. Big thank you for being brave enough to meander around the call for testing publicly.
As a reminder, there is still 1 week left to participate so please join in if you can.
Throughout the session, some specific issues were noted as problem areas to follow up on, including some previous reported and some new:
It’s not clear when you are adding a theme blockBlockBlock 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. outside of the Query LoopLoopThe 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. vs within. In this case, it was confusing when the Post Comment Count block wasn’t properly displaying the number of comments and it wasn’t clear the issue was that it needed to be within the loop. There’s an open issue to discuss this general phenomenon.
She had a desire to change the post excerptExcerptAn 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. length, which has an open enhancement issue.
There was an issue with the post title overflowing outside the bounds of a Query Loop block pattern. Need to replicate and open an issue!
There was a strange Inserter issue where you couldn’t find any theme blocks based on the current block you were selecting. Need to replicate and open an issue!
The call for testing itself needed to have updated instructions as you need to install GutenbergGutenbergThe 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/ first before activating a block theme. This was updated live on the call.
Outside of specific points of feedback about the experience, there were also high level themes that became apparent as @sparklingrobots made her way:
They were confused about where various settings were expected to be, sometimes seeking out the block toolbar and other times the block sidebarSidebarA 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.. For example, it was unclear at a glance how to change width of overall query and how to change the number of posts displayed.
The placeholders for various theme blocks were underwhelming and often not informative enough to know quite how to customize.
She was confused by how by selecting one Query Loop pattern, they instead ended up with two Query Loops! This is part of one of the default patterns included in the Query Loop block and could cause confusion long term when thinking about having more complex patterns.
There was a desire for more dimension controls for various blocks including the Columns Block and Post Comments block. This is under active iteration!
We ended the call talking about how the future of the Query Loop block powering more user friendly variations, an integrated block pattern library, an overhaul of the IA of the various design tools, & more will help ease this current experience. For now though, we’re in an in between state where loads can still be learned to improve the default tools themselves.
Next Steps
@annezazu will follow up next week after she returns (she’s out Thurs/Fri) to replicate and open issues.
This post is a summary of blockBlockBlock 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.
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.
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.
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.
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 headerHeaderThe 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 MenuA 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?
Understandably global styles settings would adapt when a theme is changed (just like the customizerCustomizerTool 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).
When you export the demo and import it to the other installation, theme.jsonJSONJSON, 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.
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.
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.
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:
Offer an option to pick and choose what you want to keep before switching themes.
Make switching easy upfront but, after switching, offer an option to import various items from the previous theme.
Offer a side by side visual comparison of various parts of a theme before switching (templates, patterns, etc).
Offer a way to import a color palette or template into your current theme so you don’t have to switch fully but can take advantage of different pieces.
I have experimented with one theme but figured out along the way that it does not have the patterns or finished templates or something else I had hoped for. Instead of creating the patterns and templates myself I switch themes. When I click to switch a theme I get a warning message saying that switching themes will remove the adjustments I made to the current active theme, but I have an option to save these adjustments in a kind of twilight zone between one theme and another. I select to save changes I made, and notice that these carry over to the new theme that I activate. I check and notice that the changes do carry over. I am relieved that I am able to create adjustments in one theme and have these with me to the next time…In the Site Editor I can check out what the new theme offers and when I feel ready for it I can either say yes to bringing over the changes or no because I notice that the new theme has what I need.
I actually don’t want to be prompted with having to make several decisionsas 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 templateslike page, single post, home? Like a revision?
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.
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.
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.
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.
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 GutenbergGutenbergThe 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.
@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.
As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or via DM to me (@annezazu).
Feature Overview
Because Full Site Editing is a collection of features that allows more items to be easily edited without knowing code, new blocks needed to be created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match functionality that used to only live in themes. While a number of theme blocks were introduced in WordPress 5.8, there’s always more work to be done, including shipping even more theme blocks in future releases!
This test is focused on pushing these lovely Theme Blocks to their limits to better determine what to prioritize and what features might remain to be documented. To make the experience feel a bit more fun and practical, we’re going to approach this test from the vantage point of creating patterns for blogs using some of these blocks. If you really like what you make, remember you could even register them on your site 🙂
As a refresher, here’s a rundown of all of the theme blocks ready for testing with a note around which ones are included in WordPress 5.8 in case you’re inspired to use them on your site now:
Site Logo: allows you to display and edit the site logo [shipped in 5.8].
Site Tagline: allows you to display and edit your Site Tagline [shipped in 5.8].
Site Title: allows you to display and edit your Site Title [shipped in 5.8].
Query LoopLoopThe 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.: allows you to display posts and pages in various formats [shipped in 5.8].
Post Title: displays the Post Title [shipped in 5.8].
Post Content: displays the contents of your post [shipped in 5.8].
Post Date: displays the post date [shipped in 5.8].
Post ExcerptExcerptAn 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.: displays the post excerpt [shipped in 5.8].
Post Featured ImageFeatured imageA 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.: allows you to display and edit the featured image of your post [shipped in 5.8].
Post Categories: displays the categories of a post [shipped in 5.8].
Post Tags: displays the tags for a post [shipped in 5.8].
Login/out: displays login and out links [shipped in 5.8].
Page List: displays a list of all pages on your site [shipped in 5.8].
Template Part: allows you to display and edit various global regions of your site (headerHeaderThe 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., footer, etc).
Post Comment: displays an individual comment.
Post Comment Author: displays author for a comment.
Post Comment Content: displays content of a comment.
Post Comment Date: displays comment date.
Post Comments: displays all comments.
Post Comments Count: displays comment count.
Post Comments Form: displays comment form.
Archive Title: Displays archive title.
Term Description: Displays the description of categories, tags and custom taxonomies when viewing an archive.
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 InstallA 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 GutenbergGutenbergThe 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/ (11.6 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 steps
Setup Instructions:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install and activate the Gutenberg pluginPluginA 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 11.6.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
Create at least 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 (open the link and select “Download”) via the WordPress importer under Tools > Import. You can also follow this lesson for how to use demo content.
Go to the website’s admin.
You should now see a navigation item titled “Site Editor (betaBetaA 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.).” If you don’t see that in your sidebarSidebarA 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.
General Instructions:
Head to Pages > Add New and create a new page. Title it whatever you’d like!
Add the Query Loop blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and select whatever pattern you want to build upon. You can also add in a container block, like a Columns or Group block, and add in the Query Loop as you’d like.
From there, make the pattern your own using as many Theme blocks listed above as you can and customizing the various settings. For example, you could create a comment heavy pattern utilizing the various comment blocks or have a particularly image focused one thanks to new improvements to the Featured Image block. Try to be as unique as possible and don’t be constrained by adding the blocks only within the Query Loop.
If you’re up for the challenge and want to take this test further, try to create your own pattern from scratch, make multiple patterns, or recreate some with your own twist from Theme designers at Automattic shown below:
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did you find any features missing while creating your custom blog pattern?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier?
Did you find that what you created in the editor matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by October 13th, 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. If you leave feedback in GitHubGitHubGitHub 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.
Started the call with an open question asking how folks are exploring adopting FSE features. This led to an initial discussion around theme.jsonJSONJSON, 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. both in terms of what it unlocks and various pain points.
A few of us found it to be easier to compare their own theme.json files to TT1 Blocks’ theme.json rather than relying on documentation to figure out what might be going wrong.
Ideas were shared namely around improved documentation for theme.json combined with improved error messaging, especially since eventually the visual interface will only be used.
Some of the problems with theme.json feel similar to the usual functions.php experience and there was a desire for a “Something has gone wrong with theme.json, here’s what you should do” resource (even if just a personal post for now). For example, leaving out version number can make the experience very unpredictable.
Tammie noted it often feels like “playing rather than exploring” with theme.json because of how much one can do.
Marcus encouraged folks to use a syntax editor (ex: vscode) since it will alert you to json errors. In general though, folks wished it was more forgiving to hand write until we’re able to build directly in the editor.
Marcus likes the idea of splitting files up and allowing people to do whatever they want. “Here’s typography, here’s how I want headers to be, etc” and then share those individually amongst different themes.
We then switched topics to hear from Courtney what she sees on the training side. She noted that there’s likely a huge market that is not going to instantly switch and need to think about how do training for moving away from older methods.
We talked about having more “small chunk onramps”, particularly around having courses for blockBlockBlock 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. widgets and block navigation and how to adopt with more details.
Dave noted that both editing with block based UIUIUI 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. and rendering with blocks is new when being able to edit the whole site. It’ll be an excellent thing if we can get folks comfortable/familiar with that concept without jumping into the site editor first via the widgets and navigation work.
We talked through how neat it would be from a training perspective to have various levels of adoption outlined so folks don’t have to dig in to know what might be best for them to try first. This could like similar to this approach in this GutenbergGutenbergThe 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/ Times post on Customizing WordPress Block Editor for Client Projects. Anne is going to explore this.
We then discussed what the Hello Dolly + underscores theme equivalent is in today’s world and whether less needs to be known now with block themes.
The topic of how to lock things down while still adopting features came up. There’s a balance to have between adding items for theme developers (keeping options open to foster creativity) and then eventually what the user experiences (likely need more guardrails/locked down options).
A few of us chatted about eventually wanting to have more conditionally logic with templates, similar to what can be done with PHPPHPPHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. now. For example, Anne shared that it would be lovely to have categories of posts with different templates so she could link to the WordPress categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with a different menu for speaking at events so personal posts are stripped out.
In the future, Anne talked about how neat it’ll be to run explorations or calls for testing around setting a timer for 10-15 minutes and seeing how far one can get in changing your site. This is where theme.json has such a greater safety net than the previous dangers of trying to edit the code of your site.
We ended chatting about how all of this is putting art direction in the hands of people so they can say proudly, “I didn’t do it but I did it with WordPress.” We all love patterns and agree that they are, in many ways, democratizing design.
Ideas for improvement
Better error messaging with theme.json.
Improved theme.json documentation, including how to disable features, lock items down, and using a syntax editor.
Resources for how to adopt features across varying levels of difficulty.
Learn WP courses for adopting block widgets and navigation (more “small chunk onramps”).
We started the call talking the current theme switching exploration and the intent that this be a creative, “wishful thinking” kind of exercise! Responses are due by September 29th.
We discussed dimension controls both in terms of the excitement around seeing more options added and a desire to see them more intuitively organized. This spread across a few issues including a great comment on the ToolsPanel controls, a proposed simplified layout/dimensions controls across blocks from Rich, and the flex layout being added to the social link block. This raised the question of whether there are stats on most used settings for each blockBlockBlock 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 help inform these decisions.
We chatted about the desire to have the option to disable a feature from theme.json when the same feature is initially added. Could this be a minimum requirement from the start? Anne is going to pass along this feedback to those working on theme.jsonJSONJSON, 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..
We went through the Global Styles interface overview issue and discussed possible entry points, including perhaps a future dedicated space. Some folks remarked that the new icon looks like duotone and the light/dark mode option. This led to going through the color picker component briefly and dreams of being able to create an entire theme.json file just in the interface instead of manually writing one.
Format: Zoom (recorded). A link will be shared in the #fse-outreach-experiment channel before the meeting time. Please join that channel if you’d like to participate!
Length: 45 – 60mins. This will not run longer than an hour.
Topic: This session will focus on adoption pathways with full site editing.
Goal: To have a broader discussion about adoption pathways, what’s working, what successes folks have had, what blockers people are running into, and what might help more folks participate. Beyond just the benefits of learning from each other, this information will ideally be used to help influence future resources and to give insights to the teams working on these items.
Intended Audience: Anyone who has adopted or is interested in adopting site editing related features (theme.jsonJSONJSON, 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., template editor, theme blocks, navigation editor, etc).
Agenda
This conversation is meant to casual, collaborative, and open ended rather than prescriptive about how one should approach adoption. With that in mind, we’ll start the session asking folks who are comfortable doing so to share what they’ve tried and how it’s gone. Once everyone who wants to go has done so, we’ll talk about successes, blockers, and what resources folks have used (along with what resources folks would like to see). We’ll see where the conversation takes us from there!
With the advent of blockBlockBlock 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 in the WordPress ecosystem, new possibilities are on the horizon, from easier theme development for developers and designers to easier site creation for users. Rather than just examining the value of block themes in isolation though, it’s important to expand to think about what can be done across different block themes. For example, imagine a world where one could seamlessly take product review patterns from one theme, styling from another, and product display templates from an eCommerce focused theme to create a store. Or imagine being able to switch themes while retaining your favorite palette of colors and typography. Regardless, it’s imperative that the experience is reliable, intuitive, and expansive pushing beyond what’s been possible in the past.
As a result, the focus of this exploration is on thinking from this longer term, “wishful thinking” perspective first by guiding you through a very basic theme switching process and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen or would like to occur. The aim is to gather useful insights that will help inform how we design this experience.
Note: this is intentionally just focusing on block theme switching only for now rather than, for example, switching from classic to block.
Explore what’s currently possible
The steps below are meant to be high level with the aim to have you set up initial block theme related items that you might want to keep upon switching themes. It’s not required to run through these steps for the sake of this test since many of the flows are not yet built.
If you don’t have time to create quick content, feel free to import this demo content (open the link and select “Download) created especially for this test via the WordPress importer under Tools > Import. You can also follow this lesson for how to use demo content.
Set up a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal InstallA 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.
Create a custom template under Appearance > Templates > Add New.
Create a custom template part under Appearance > Template Parts > Add New.
Open the Site Editor and, using the Global Styles UIUIUI 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., select a few custom block styles and overall default styles. Save all changes.
Head to Appearance > Themes and switch themes.
Review the Site Editor, Templates, and Template parts.
Bonus: Try importing and exporting content from a current site you have to a test site to make the test feel more real and applicable, even if the site is not using a block theme. From there, switch to any theme, block or not. This is purely to get you in the headspace of thinking more about what you’d like to retain even if this is focused specifically on block themes.
Describe what you’d like to see
Comment below after reflecting on the following questions. Remember to share what you’d like to see ideally rather than focusing on what’s currently in place. Answer one, answer all, answer none! These are merely to get you thinking in the right framework rather than boxes to check:
What would you want to be able to do when switching themes?
What parts of a block theme would you expect to be able to keep when switching themes?
What sort of confirmation prompts would you want to see?
Share a time when you switched themes and something unexpected happened.
When you switch themes on your site, can you share your routine?
If you wanted to switch to a new theme today, where do you go or which places would you expect to be able to do this?
What are some reasons you have had for wanting to switch to a new theme?
Anything else? Think big!
Please share feedback by September 29th, 2021
As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward.
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!
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):
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 headerHeaderThe 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.
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.
Using the Navigation blockBlockBlock 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.
After delving deeply into the ins and outs of the navbar – the primary issues all revolve around responsiveness. The coreCoreCore 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.
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.
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.
Confusion with the Search Block, including what the “Use button with icon” option does, the lack of impact of changing the button on inside/outside, and more.
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.
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 CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. code.
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.
AccessibilityAccessibilityAccessibility (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:
You must be logged in to post a comment.