The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
This 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).
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:
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.
Setup Instructions:
General Instructions:
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:
Remember to share a screenshot of what you created if you’re up for it!
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.
With the advent 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. 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.
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:
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 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/. 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.
Thank you to @poena @kellychoffman @priethor @daisyo for reviewing!
In the summer of 2021, the Test team started meeting again for chats, triage sessions, and scrubs. One of the things that keeps coming up is the need to have clear instructions for testing.
They are scattered across many Make websites, they are not all kept up-to-date with changes in the different environments they mention, they not always link to existing documentation and, in some cases, they link to pages that no longer exist.
This makes it more difficult for new contributors to join the sessions and actively participate in the team initiatives.
During one of the meetings, the attendees agreed that having good documentation is a priority to welcome new contributors.
At this stage, I am focusing on the first goal: review the testing instructions, simplify if possible, and make sure they are all up-to-date.
The process I have in mind is:
wordpress-developHere is the spreadsheet: https://docs.google.com/spreadsheets/d/1D4Q2_P_FriSxj19P2HIso81s2SZf5RcUVFaTUe12cuk/edit?usp=sharing
Then we can move on to goal number 2 (or another group of people can work on that simultaneously).
Wanna help? Comment in this blog post with your Slack username and we can start working 🙂
Thank you!
Props to @hellofromtonya and @mai21 for peer review.
This is the ninth 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.
In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from @blake. If you’d like to suggest an idea for a call for testing, know 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).
To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site:
https://www.ni.ac.rs/en/student-info
As you can imagine, this test is going to enable us to go deep into the Navigation BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s 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., both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do.
Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed:
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.
Known issues
While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items:
This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further.
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Create structure (template part, columns, etc)
Build out site branding
Create a simple menu for high level items
Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block. Create a more complex menu for specifics
Save your work & customize further
This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance.
The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see.
Remember to share a screenshot of what you created if you’re up for it!
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
With WordPress 5.8 slated to ship on July 20th, this post seeks to consolidate ways for those in the FSE Outreach Program (anyone can join!) to help test specific features related to the overall full site editing project that will be included in this release. This is meant to bolster, not replace, overall 5.8 testing efforts. 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. is explicitly not mentioned here as there’s currently a dedicated testing post for that feature with feedback open until July 14th.
For more information about the outreach program, please review this FAQ for helpful details and check out the latest schedule. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more.
Important note: Anything marked as [Technical] is best for those comfortable with more advanced testing steps.
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:
If you need more specific steps, here are more detailed instructions you can follow.
The block widgets editor allows you to use blocks in widgets areas and control them further in 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. with live preview, scheduling, etc. The following items are considered a high priority to test:
For robust testing steps for each of these items, please review this specific call for testing from earlier in the release process. For more information about this new feature, check out this Dev note covering all of the details.
Template editing mode allows you to edit your content’s template with blocks, including some new theme blocks like the Site Title block or Page List block. As a reminder, template editing mode is opt in for Classic Themes and opt out for Block Themes. This means that if you want to test this, you’ll need to use a block theme along with both the Gutenberg plugin and the WordPress Beta Tester Plugin.
The following items are a high priority to test:
For robust testing steps around using and creating templates, please follow these previous calls for testing: create a custom portfolio page and create custom landing pages.
Note: If you use a block theme to test this, you will need to install the Gutenberg plugin alongside it in order for everything to work with WordPress 5.8.
Duotone is a feature that allows you to add colors to your images and enhance your content. It works best with high contrast images, so keep that in mind as you test the following priority items:
For more information about this feature, check out the WordPress news post that covers it in depth.
The Query Loop Block (previously called the Query Block) is a powerful new block that unlocks the ability to easily show off posts from a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., allowing you to do things like quickly creating a portfolio or a favorite recipe page. Think of it as a more complex and powerful Latest Posts Block! Currently, this new block offers multiple ways for displaying lists of posts and comes with new block patterns that take advantage of its flexibility and creative possibilities.
To help test this, explore the patterns built into the block, try changing the default query in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings, placing it inside a columns block, and more. Keep in mind that to create a better user experience, the content within the Query Loop isn’t able to be edited but can be customized (i.e., Post Title text can’t be changed but you can change the color of the Post Title Block).
For robust testing steps around using the query block, please follow this previous call for testing that was focused on the Query Loop block.
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 before the release on July 20, 2021.
Props to @daisyo and @jffng for the massive amount of help in writing and perfecting this call for testing.
Important note: Compared to previous calls for testing for the FSE Outreach program, this is intentionally targeting a more developer-centric audience compared to site builders or end users in order to bring high impact feedback for 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., a new tool for extenders. You can read more about what to expect with upcoming efforts here.
At the highest level, theme.json is a configuration file used to enable or disable features and set default styles for both a website and blocks. Rather than dealing with a ton of theme support flags or alternative methods, theme.json provides a consolidated and canonical way to manage it all. These settings include options like:
This configuration file is a big part of what makes blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes so powerful as it allows for finer-grained control, and introduces the first step in “managing styles” for future WordPress releases. Here are a few of the top benefits of using this new mechanism:
While block themes won’t work with WordPress 5.8 without 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 due to some theme blocks being left out of the release that weren’t quite ready to ship, it’s still an important feature coming to 5.8 that needs testing and exploration. If you’ve been curious about the world of block themes or have started building your own, this call for testing is for you and should help you to continue to explore what’s possible with theme.json while giving you a chance to share what else you’d like to see.
You can read more about this feature in the documentation here.
This section is for those wanting to get a sense of what theme.json can control and what the output will look like.
This section is for those wanting to dig deeper into theme.json by writing their own file and exploring the various settings it can control.
Note: this mainly focuses on just theme supports and presets for blocks in the settings section of theme.json rather than Global Styles.
Set up 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.
Layout
contentSize value to a different pixel value in the layout section of theme.json.wideSize value to a different pixel value in the Layout section of theme.json.Typography
true in theme.json: Border
true in theme.json:"customColor": true"customRadius": true"customStyle": true"customWidth": truefalse in theme.json.Color
true in theme.json:"custom": true"customGradient": true"link": trueThis section is for those looking to create a more robust block theme using theme.json and who are experienced theme developers. This isn’t for everyone!
If you feel more comfortable with block themes and have ample time to dig into theme.json, try replicating a classic theme. Here are two options that should be fun to dig into but keep in mind any default theme should work well:
As you try to do this, write down what gaps remain, what proves to be the most difficult to do, and what feels surprisingly easy! Share in the comments below so we can learn from your experience. This is intentionally extremely open ended and advanced so don’t worry if you don’t feel up for the challenge. If you want to follow along while someone else explores doing this, check out @mkaz‘s exploration video on learning to create a block theme.
These questions are specifically for the Intermediate and Advanced sections:
Please leave feedback (questions, comments, concerns) in the comments of this post and be sure to note which section you followed. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg but, for this test, it’s unlikely you’ll need to. However, if you do 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 comment below with the link.
Join a hallway hangout for theme.json testing on July 7th
To help those who might want to explore this test and theme.json in a group, @daisyolsen will be hosting a hallway hangout specifically for this exercise. If you have never attended a hallway hangout, you can read more about them here. Ultimately, they are meant to be casual and collaborative sessions to bring like minds together.
Hope to see you there.
This is the seventh call for testing as part of the Full Site Editing Outreach Program! As mentioned in the sixth testing call, if you haven’t been able to participate yet, now is a great time to do so leading up to 5.8.
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, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. With this feature, you can create a new template, edit current ones, and select which template you want to use for pages/posts. You can learn more about this feature in the following video:
To ground this test in a real-world example, we’re going to build out a portfolio page showcasing your hypothetically amazing work. If you use the demo content, you’ll embrace your inner architect and show off visuals of pretend locations, like 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. 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 Harbor and 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/ Parkour Space. Please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example and here are a few high end example from some designers using Gutenberg.
Note: Compared to the sixth call for testing, this is an intentionally more open-ended call for testing setup to have you, the tester, push this feature to its limits. Have fun with it!
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.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Known issues:
While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most serious items:
Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon.
Setup Instructions:
Setting up your portfolio page
Creating and customizing a new template
Customization Instructions/Ideas:
While the last test was meant to guide you through the specifics of creating a customized template, this test is meant to allow you to explore what customization might look like for you. This makes for a more open-ended and expansive test that should help you explore the edges of the experience and, ideally, find both bugs and enhancement requests! Because there are two points of customizations in this test, the following instructions/ideas are broken down to cover each. Remember that what’s shared below is just the beginning of the customization you can try out!
Portfolio Page ideas:
Portfolio Template ideas:
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
Note: Originally feedback was set to be due by June 9th but this has been updated to June 16th to give more time for feedback.