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 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).
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.
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.
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.
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.
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.
Welcome to this week’s edition of Week in Test! This post is a curated list of where you can get involved (i.e. where testers of all skill levels and expertise are needed), learning opportunities, and some reading to keep you informed.
This week focuses on helping with 5.9 new features and enhancements. Remember, feature freeze is 9 Nov.
Looking for ways to contribute? The following tickets and patches need contributors.
Who? All contributors (not just developers) who can set up a local testing environment, apply patches, and test per the testing instructions.
The following tickets need testers to manual test and provide feedback (test report):
Who? Any QA or PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. developer contributors who can (or is interested in learning how to) build automated PHPUnit tests.
The following tickets need PHPUnit tests build:
wp_list_users() template tagwp_http_validate_url to control which ports are allowed for remote requestsWho? Any contributor.
The following new tickets need testers to attempt reproducing the reported issue and then providing a test report with the results:
open_basedir warnings on classic post edit screens with TinyMCE plugins presentProps to @boniu91 for peer review.
In preparation for WordPress 5.9 and after accepting Test Lead roles, @boniu91 and I got on the same page about how we plan to support this release. What follows is an overview of our approach. Feedback is always welcome, especially since we’re early enough in the release process to ensure we’re as high impact as possible. The hope in sharing this information is to both set expectations with the overall release team and to establish an early track record that can be used to enhance documentation for this role.
Goals:
At a high level, the goal of this role is to ensure, through testing, that the next WordPress release delights users with stability and a bug free experience. More specifically, this can be broken down into the following goals:
Responsibilities:
The above is already underway and will continue through the release cycle.
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:
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.
W menu item proves to be a point of confusion, especially when trying to go back to the dashboard. This was brought up by four folks very recently if you include the comments on this additional design post (repeat). 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
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.