Hallway Hangout: Let’s talk about WordPress 5.9

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. All were welcome! The intent was to chat about whatever was on folks’ minds as 5.9 is around the corner. Thank you to all who joined.

Attendance: @elmastudio @ndiego @jeffpaul @rbest @megphillips91 @marybaum @piermario @bobbingwide

Video Recording:

Topics Covered:

  • We kicked off the call chatting about Page Builders and what folks might be expecting from WordPress 5.9. Specifically, there’s a sense that folks want to be able to do all of their favorite things from page builders in FSE. In reality, CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. is meant to provide a shared base all can build upon (include page builders) and extend as needed, including finding 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 that offers a more curated experience.
  • We chatted then about contextual patterns, meaning patterns being shown right when you need them, and the impact of the pattern directory to help folks build content quickly. Not everyone will want t use the pattern directory though so it’s likely this responsibility with fall to 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. themers or site builders to package things for users.
  • We jumped into a wonderful discussion on the impact of names and how confusing some of the names are. @ndiego went through a few names of plugins using the word “template” to highlight some of the current confusion.
  • This launched into a conversation about how eventually this is where the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. can play a role in not needing to know the names of things. Folks shouldn’t need to think “I want to add a template part here” but should instead only be presented with certain options.
  • This led to a conversation about the role and needs of early adopters! There’s a very real need for “descriptive, understandable, intuitive, and consistent language” (to quote @megphillips91) that we can all then use to educate others. Made a plug to share anything in this Glossary that might need to be updated since the outreach program can help there.
  • We briefly touched on some current pain points in the editor right now, like how we tell folks to “edit their site” yet it’s just called the Editor under Appearance. We also went through a few different ways the UI can help including colorizing various pieces and the power of locking.
  • We ended on a sneak peak at next call for testing! It’ll focus on the experience of media when building a site.

#fse-hallway-hangout, #fse-outreach-program

Hallway Hangout: Let’s talk about WordPress 6.0

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. The intent was to have a fun and open ended chat about what we each would like to see for WordPress 6.0 as 5.9 continues to take shape. This was not a call to make decisions or set priorities as a result but just to swap ideas, review various issues, and more. Overall, this chat really showed how the foundation being set for 5.9 is leading to great excitement about future WordPress releases and the features that might come.

As a friendly reminder, please help test WordPress 5.9.

Attendance: Thanks so much to everyone who took the time to join. It was so neat to see folks before the year ends. cc @poena @fabiankaegy @overclokk @courane01 @anoopd @thakurtech @annezazu @azhiyadev

Video Recording:

Topics Covered:

  • We started the call talking about responsive controls after @thakurtech shared some great insights around the current experience with clients missing the ability to have more options, specifically with 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.. This overview issue was identified as a great place to share this kind of feedback.
  • A lovely and well deserved shoutout was giving to @poena about all of her excellent work with https://fullsiteediting.com/.
  • Keeping up with WooCommerce changes related to FSE were mentioned with the best advice being to check out the WooCommerce GitHub repo and reviewing their latest changelogs.
  • We briefly chatted about the Comments Loop block and excitement for more robust comment abilities for 6.0, including integrated patterns.
  • The current experience of the Layout settings were brought up as an area that refinement and iteration is needed, from how it’s currently named/described to how to make it easier for folks to find.
  • The need for having more consistency with the “Preview Site” feature and/or implementing a Browse Mode was then discussed after @paaljoachim raised the topic ahead of time. Folks are going to expect similar functionality for Preview as the Post Editor and we still see folks viewing the front end of their site to see how changes are impacting the site, rather than being able to rely on what’s in the Site Editor. There was also a request to be able to drag around the current Preview in the site editor similar to what one can do with the template part focus mode. This is under discussion!
  • This led to a discussion around both expanding what templates can be created and unifying the experience with template editing mode and the site editor. For example, folks already are wanting the ability to add a custom template for 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 and there’s not a way to do that now with 5.9.
  • Generally speaking, there are still some discrepancies between the post editor and site editor. It’s a tough balance to strike to have both familiar tooling in both while also making it clear how the changes in the Site Editor are more global.
  • @fabiankaegy brought up how in the post editor the break points are no longer applying correctly due to post editor not being iframed yet! This is a big issue for custom builds when list view and 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. are open so there’s excitement for iframing coming to the post editor in the future.
  • We then dove into how the post editor experience might be improved for 6.0 by looking at an exploration from @shaunandrews on improving the post editor sidebar. A suggestion was made to include auto-detection of post formats!
  • We had a fairly lengthy discussion about all things Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block including everything from wanting to see expanded functionality, more patterns, more variations, a revamped building experience, etc. This included talking about how folks who aren’t as technical might interact with it (likely through patterns and variations).
    • Consider creating a builder for the Query Loop block.
    • Add filters to extend the block and help prevent the need to fork it.
    • Add new functionality like no results found, sticky post, etc.
    • Change the category of the Pattern inserter to be more user friendly rather than relying on “Query”.
    • Consider having a welcome guide for the block.
    • Make it easier to change the number of posts displayed and clarify the concept of “offset”.
  • We touched on the Webfonts API and the excitement there to see this implemented, especially so testing doesn’t have to happen in three editors (amongst other things).
  • We dove deep on the topic of block theme switching, being able to schedule changes, have style variations, and the possibility of a style directory! This included checking out @critterverse‘s design explorations on block theme switching and style variation switching.
  • This led to a big topic around naming! What are users typing into Google already? What should folks call this experience far into the future? How can we communicate these concepts now? We had more questions than answers. From @overclokk: “About the editor naming, I made a video for Italian people to explain the difference about content editor, template editor and site editor because it is not so easy to understand which one to use when do things. Most of the search are about “gutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ editor”.
  • The oEmbed block was briefly discussed in terms of is needing accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements. I’m going to track this down.  
  • The modal for the pattern explorer was raised as a topic with an idea around whether there could be more visual overlap between the modal and the directory itself potentially. Either way, it would be excellent to have better organization for 6.0.
  • We ended chatting about the WordPress Photo Directory and possible future integration. It’s unlikely for 6.0 just due to the lack of photos but there was lots of excitement around the possibilities of integration in the future regardless! Consider this a nudge to submit your photos (especially cat photos!).

#fse-hallway-hangout, #fse-outreach-program

FSE Program Site Editing Safari Summary

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

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

High-level summary

Here’s what a few folks had to say about the experience that can help frame the following more specific feedback. Overall, folks found the exploration to be easy enough to use with some minor enhancements and a few surprises. However, once most folks got beyond the basics, they found pitfalls in understanding how things might work together and how to accomplish different, slightly more complex tasks. This included everything from wanting more granular control of different link states with the Styles system (hover, active, etc) to confusion around how to change the width settings for new templates. This was the first time the Styles system was explored in a call for testing as well and, beyond a UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. issue mentioned by four folks and some feature requests, the feedback was generally uneventful and positive. 

This very much feels like where the state of the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and site editing is overall. Many pieces are exceptional, but after digging beneath the surface, you find that you need workarounds for some essential design needs.

@greenshady in this WP Tavern article.

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

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

Confirmed bugs

Listed below are confirmed bugs that break expected functionality or the experience of different features. Thanks to this test running during the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. cycle for 5.9, many of these are already fixed.

Fixed

New Reports or previously reported

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

@luminuu in this comment.

The biggest, ahem, hiccup that I ran into wiped all of my progress when editing my headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. I tried to transform one of the outer Group blocks into a Cover to give it a background. It wiped everything in the header area clean, and the “undo” button did not seem to work. I just started over.

@greenshady in this WP Tavern article.

Feature Requests

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

I started by removing the Page List block from the Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. in the header. I have 90+ pages on my install, and it is always irritating when themes list them all by default.

@greenshady in this WP Tavern post.

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

@paaljoachim in this comment. 

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

@paulbigai in this comment.

General Usability Feedback

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

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

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

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

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

@evarlese in this comment.

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

@evarlese in this comment.

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

@paaljoachim in this comment. 

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

@paulbigai in this comment

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

@greenshady in this WP Tavern post.

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

Help test WordPress 5.9 Features

With WordPress 5.9 slated to ship on January 25th, 2022, this post seeks to consolidate ways for folks to help test specific features that will be included in this release. This is meant to bolster and support overall 5.9 testing efforts. As a result, expect that FSE Outreach Program calls for testing will be on pause ahead of the FSE related features landing in WordPress 5.9.

Important note: Anything marked as [Technical] is best for those comfortable with more advanced testing steps. 

Testing environment

Please only test on a development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and not on 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

Once a development site is set up, please install and activate the WordPress Beta Tester Plugin before setting it to: 

  • Update channel to “Bleeding edge”
  • Stream options to “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./RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only”

If you need more specific steps, here are more detailed instructions you can follow

Testing Tips

At a high level, there are a few tips to keep in mind to get the most out of helping to test:

  • Try testing across different browsers.
  • Try testing in different languages. 
  • See what features look like on different screen sizes.
  • Try using just your keyboard or a screen reader.
  • Explore using both blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and classic themes. 

Features to test

Twenty Twenty-Two Default Block Theme

When picking a theme to use for your test site, please try out the Twenty Twenty-Two theme. It’s the very first theme that’s block based and needs thorough testing as a result. Here’s where you can read more about this theme. You can test the theme by installing the Beta and activating Twenty Twenty-Two from Appearance > Themes. To report issues with the theme, you can do so here.

Block theme flows 

Since Block Themes open up the opportunity to edit more parts of your site, new flows have been added to make it more intuitive to access items, like a template editor, where you can make the changes you want to your homepage or 404 page. These workflows and new features need your help to test! 

For detailed testing steps around how best to test these workflows, please follow this call for testing that covers using Styles, Template Part focus mode, and more.

Theme blocks with a focus on the Navigation block

As Full Site Editing is a collection of features that allows more items to be easily edited without knowing how to code, new blocks were created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match the functionality that used to be 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!

For detailed steps around how to test the navigation block, please follow this call for testing that covers creating two different menus. 

For detailed steps around how to general test theme blocks and a complete list of blocks, please follow this call for testing

List View

List view has a few enhancements to keep in mind, including the ability to drag & drop blocks, and the ability to collapse sections to make it easier to navigate complex content. As you explore 5.9, try using List View in various situations to ensure it’s performant and easy to use. 

Design tools

The effort to bring better and more consistent design tools continues to progress with new options added, a more intuitive interface, and more. With just a few combinations of these settings, you can create vastly different layouts from a few simple slight changes to more radical and complex options. 

While a ton of tools have been added to various blocks, there are just a few to focus on for testing:

  • Buttons block: block gap, border controls, dimension controls (padding).
  • Columns block: block gap, dimension controls (padding).
  • Navigation block: flex layout, block gap, layout controls (vertical and horizontal, alignment).
  • Group block: layout controls, dimension controls (padding)
  • Cover block: duotone, dimension controls (padding, min height).
  • Social Icons block: layout controls (vertical and horizontal, alignment), block gap, dimension controls (margin). 
  • Featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block: duotone, dimension controls (width, height, margin, padding).

Gallery block 

Thanks to a Gallery Block refactor, you can now use the same tools that are available for individual image blocks on each image in the Gallery Block! This added flexibility means you can do more customization – from adding links to each individual image, inline cropping to edit on the fly, apply unique styles for more visually compelling images and apply an array of duotone filters. You can read more about this change

The following items are a high priority to test:

  • [Technical] If you are 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 or theme author that has used the Gallery block previously, please follow the instructions here to ensure you’re prepared for 5.9.
  • Test backwards compatibility by creating a Gallery Block with WordPress 5.8.2 and switching to early releases of 5.9. 
  • Explore using the Gallery Block tools itself. Try cropping images, rearranging, adding alt text, and more. 
  • Test against third party plugins that you might use for galleries and ensure the transformations work. If they don’t, it’s best to contact the third party plugin to let them know.

For additional context, please note that the new Gallery block is included in Beta 1, but the auto migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of existing Gallery blocks will be in Beta 2. As a result, for Beta 1, you’ll be able to test the new Gallery block by adding a new Gallery, but, in order to migrate an old format Gallery block, you’ll need to do so manually using the Update button in the block toolbar.

Block pattern explorer

The experience of adding patterns from the Inserter just got a refresh with the introduction of a new modal that allows you to see patterns in a more organized way with larger previews. In terms of testing, the items to cover are quite simple:

  • Select and add patterns to your content. 
  • Scroll through different pattern options.

General updates coming to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

Outside of these more specific features, there are also some general updates coming to this release that would be advantageous to have tested:

Where to report feedback

If you find any issues, it’s best to share them on the alpha/beta forums, or Trac if you are more technically savvy and comfortable. Please share feedback as soon as you can before the release on January 25th, 2022.

Thank you to @justinahinon @boniu91 @cbringmann @hellofromtonya and @webcommsat for reviewing and contributing to this post.

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

FSE Program Testing Call #11: Site Editing Safari

This is the eleventh call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach 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. 

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 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 or via DM to me (@annezazu). 

Overview

Feel free to jump straight to the testing steps if you’d prefer to get started right away.

This is the final call for testing before WordPress 5.9, which makes it a wonderful and high impact one to be involved in as it’ll help improve the experience for a large portion of the web before it ever launches. In order to get the most out of this call for testing, the instructions are going to change as the test goes on and as we move forward in the release cycle. For example, at the start of this test, folks will be encouraged to use TT1 and, by the end of the test, Twenty Twenty-Two will be recommended. For now, here’s a high level overview of what is going to be tested:

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme template and template part editing 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.

While certain calls for testing have ventured into the Site Editor, that experience as you’ve known it is shifting for 5.9 in order to offer a more refined and scaled down experience to manage templates and template parts within a block theme. With a condensed browsing tool and a new placement in wp-admin under Appearance, this might feel more like a taste than the full experience of the Site Editor as you’ve come to know it.  

Styles Interface

While 5.8 laid the groundwork for a cohesive style system, 5.9 sees the introduction of a beautiful user interface that allows folks to interact directly with various style properties. You might have heard of this work under the project name “global styles”! While we’ve had calls for testing around theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., one of the mechanisms related to the overall Global Styles project, this is the first time Styling itself is being explored. Currently, this interface displays two large groups of design focuses: blocks and elements. Elements represent things that can be styled globally and across blocks (such as “text”, “links”, “captions”, etc). This is a fancy way of saying you can easily change the typography of your entire site or the unique coloring of your buttons block all from the same interface. 

Patterns Explorer

With block patterns on the rise, a new explorer modal has been shipped to make it easier to navigate between patterns and find the exact one you want to use. This sets the groundwork for future integration with the Pattern Directory. This test will briefly explore this new experience.

Twenty Twenty-Two

Twenty Twenty-Two is the latest in a long line of default themes with a twist — it’s a block theme first and foremost built for the various site editing tools. As a result, midway through this call for testing, folks will be encouraged to test using this theme and report back their findings. Read more about this groundbreaking default theme here

Testing Environment 

This will adjust as the test goes on and the release cycle progresses to ensure folks are testing the latest and greatest. 

Here are the steps to follow to properly set up your testing environment for this specific all for testing. If you’re already ready to go, jump to the testing steps below.

  1. Use a test site with the latest version of WordPress. Right now, that’s 5.8.2. It’s important this is not a production/live site. 
  2. Install and activate the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.0.
  3. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  4. Create a few posts with featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created previously for these kinds of tests via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.
  5. Go to the website’s admin.
  6. You should now see a navigation item under Appearance titled “Editor (betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.)”. If you don’t see that, your environment isn’t correctly set up. If you get stuck here, just comment on this post or ask in #fse-outreach-experiment for help!

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

Personalize your homepage

1. Go to Settings > Reading and set “Your homepage displays” to show “Your latest posts”.
2. Once set, go to Appearance > “Editor (beta)”. This will open up to show a template that displays your homepage.
3. From there, change your homepage to your liking! This could mean adding in a navigation block, changing the font size of your Post Title Blocks, adding a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to your Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. blocks, removing blocks, adding blocks, and more. 
4. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. 

Set your styles 

5. From there, click on the Styles icon in the upper right corner to access the Styles interface. 
6. Once open, personalize the four sections as much or as little as you’d like: Typography, Colors, Layout, and Blocks (to customize individual blocks). For example, you can click on Colors > Palette > Use the + sign to add your own custom color option for use throughout your content. 
7. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. 

Add a buttons pattern and use layout controls

8. From there, open up the Inserter and switch to the Patterns tab.
9. Select the “Explore” option, navigate to the Buttons section, and pick the “Simple call to action” pattern.
10. Once added, use the + option to add in a second button. 
11. From there, select the overall parent Buttons block and open 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. settings to customize the layout to your liking. Here’s a quick video in case you get stuck.
12. Save the changes. 

Add a duotone filter to your Archive template

13. Click on the W menu in the upper left hand corner > Under Editor select “Templates” > Select “Add New” > Select “Archive” (currently not possible to create a General template from here).
14. In the content, add in the Post Featured Image block and add in a duotone filter. 
15. Add in any additional blocks you’d like and save the changes when you’re ready. 
16. Head back to your dashboard by clicking on the W icon in the upper left corner before heading to Posts > All posts. 
17. Edit one of your posts with a featured image and assign your updated “Archive” to this post. Here’s a quick video in case you get stuck.
18. Save and view the post to see the filter applied!

Edit 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.

19. Return to Appearance > Editor (beta) and, using List View if you need to, select your Header template part. 
20. Select the three dot menu in List View or in the block toolbar and select “Edit Header”. This will take you to the focused template part mode. 
21. From there, make a few changes to the template part (add items to the navigation block, change the size of your Site Title, etc) and use the horizontal drag handles to see how your header will look at different sizes! 
22. Save the changes.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience properly save your changes? 
  • Did you find any features missing? 
  • What did you find anything 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?
  • How did your content look on a smaller device or screen size? 
  • How do you think this will impact your current workflows? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by December 7th, 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 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.

Props to @kellychoffman for helping review this call for testing.

Changelog

Nov 10th: updated instructions to use Gutenberg 11.9 RC4.
Nov 12th: updated instructions to use Gutenberg 11.9.
Nov 13th: updated instructions to use WordPress 5.8.2.
Nov 24th: updated instructions to use Gutenberg 12.0, to change the phrasing around the browsing component, and to update the due date.

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

FSE Program Pattern Party Summary

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

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

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


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

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

High level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following more specific feedback. Generally speaking, most folks found problems with more of the details of the experience rather than running into any major blockers with UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it., crashing, bugs, etc that prevented them from doing what they wanted to do. Tied to this, much of the feedback centered around the desire to be able to go even further than what’s currently possible, which is reflected in the robust Feature Requests section.

While some things are still not totally intuitive to new users, I feel that GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ made more big steps ahead in just a few months. I enjoy creating content in it and some of the things I have in mind are easier to achieve.

@piermario 

It’s been fun testing out the ‘query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. in FSE. No crashes or bugs. The saving worked properly. 

@mikes41720

Confirmed bugs

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

General Usability Feedback

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

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

@evarlese

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

@paaljoachim

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

@suascat_wp

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

@mikes41720

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

@mikes41720

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

@iamyvonne

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

@overclokk

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

@piermario 

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

@piermario 

Feature Requests

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

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

@evarlese

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

@nynkedeblaauw 

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

@paaljoachim

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

@piermario

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

Hallway Hangout: 5.9 Go/No Go, Site Editor IA, and more

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. 

As a reminder, there’s one week left to share your questions about FSE.

Attendance:

Thank you to everyone who took time out of their lives to attend. It’s always lovely to see your faces and have time to chat. @overclokk @karmatosed @get_dave @annezazu @asilver @fabiankaegy @kafleg @mburridge

Video Recording:

Topics Covered:

We mainly focused on three items: the Go/No Go recap, the Site Editing IA concepts, and the Navigation Editor & Block work.

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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and 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 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. 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.

#fse-hallway-hangout, #fse-outreach-program

Hallway Hangout: Pattern Party Testing Walkthrough (6 October)

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.

Attendance:

 Thank you to everyone who attended 🙂 @karmatosed @mkaz @shaunandrews @paaljoachim @annezazu @sparklingrobots @richtabor

Video Recording:

Feedback Overview

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 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. outside of the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. 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 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. 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 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/ 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 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.. 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.

#fse-hallway-hangout, #fse-outreach-program

FSE Program Block Theme Switching Summary

This post is a summary of blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme switching exploration for the FSE outreach program. This was the first of its kind, enabling folks to share very early feedback on something that has yet to be robustly defined. Thank you to everyone who participated, whether through sharing feedback directly or sharing the exploration with others. 

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

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

High level summary

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

On templates and template parts

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

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

@richtabor in this comment.

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

@poena in this comment

On menus

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

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

@timothyblynjacobs in this comment

I think it is important that navigation blocks that I have set up remains. The “Add existing menu” feature in the navigation block assumes that I have already created a menu in the navigation screen. If I only setup the navigation block as part of a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. template part in the previous theme, then I can’t re-apply or reuse that navigation block. Perhaps navigation blocks should also work the other way around? I mean why can’t I select a name for my navigation block as I create it in the editor, save that in isolation like I can save the site blocks in isolation, and have that navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. present on the navigation screen?

@poena in this comment

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

@elmastudio in this comment.

On Global Styles

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

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

@elmastudio in this comment.

Understandably global styles settings would adapt when a theme is changed (just like the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.) – and I like how my custom GS settings persist when I change back to a theme (just like the customizer as well).

@richtabor in this comment.

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

@anariel-design in this comment

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

@paaljoachim in this comment

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

@greenshady in this WP Tavern article

On ideas for how to manage the process

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

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

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

@paaljoachim in this comment

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

@poena in this comment

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

@anariel-design in this comment

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

@greenshady in this WP Tavern article

On reasons for switching and the experience

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

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

@paaljoachim in this comment

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

@elmastudio in this comment.

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

@anariel-design in this comment

I am not one for switching themes. Since I learned how to design for WordPress well over a decade ago, I have never moved from one theme to the next. At least not in the same way that the average user would. Instead, every time I have added a new coat of paint on my websites, I have simply switched over the foundation to whatever I had been working on at the given moment. WordPress themes, for me, were always just an iteration upon the last project…The first thing I do when testing any theme is to load a demo post. Lately, this has been the “Welcome to the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Editor” test post. The primary question: Can I read the content comfortably? If I do not get past this stage, I simply deactivate the theme.

@greenshady in this WP Tavern article

What’s next?

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

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

FSE Program Testing Call #10: Pattern Party

This is the tenth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach 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. 

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 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 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 LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: 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 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.: displays the post excerpt [shipped in 5.8].
  • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: 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 (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., 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: 

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:

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. 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 11.6.
  3. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  4. 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.
  5. Go to the website’s admin.
  6. You should now see a navigation item titled “Site Editor (betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.).” 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. 

General Instructions:

  1. Head to Pages > Add New and create a new page. Title it whatever you’d like!
  2. Add the Query Loop blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.
  3. 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 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.

Thank you to @priethor @sparklingrobots and @welcher for reviewing this post and giving me the confidence to ship it.

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