The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
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 slackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or via DM to me (@annezazu).
Feature Overview
To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to 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:
As you can imagine, this test is going to enable us to go deep into the Navigation BlockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., 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:
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal InstallA local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Use the latest version of WordPress (downloadable here).
Use the latest version of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ (11.2.1 as of writing this).
Download and import the demo Gutenberg content (open the link and select “Download) created especially for this test via the WordPress importer under Tools > Import.
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 betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 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)
Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage.
Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on.
Select the parent Columns Block and, using the Block Settings in the sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., change the columns from 2 to 3 columns.
Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.
Build out site branding
In the first column, add the Site Logo Block and upload/use a site logo. You can use this free logo from logodust.com if you’d like.
From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now using this export file (open the link and select the “Download” option).
Create a simple menu for high level items
In the third column, add a Navigation Block and select the “Start Empty” option.
From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice this spacing bug at this point that’s slated to be fixed in Gutenberg 11.3.
Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block.
To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc).
Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like.
Create a more complex menu for specifics
Select the overall Columns Block that contains your three columns (this is where you might find the List View helpful). Using the More Settings menu option, select “Insert After” to add a block after.
Add another Columns Block and select the 30/70 option.
From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page.
Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option.
From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, here’s a screenshot of the icon for adding sub menu items.
About should have the following sub-menu items: Distinguished Alumni, Diversity and Inclusion, Faculty, History, Leadership.
Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition.
Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research.
Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services.
At this point, add sub menu items under Admissions > Career: Business, Design, Technology.
Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the entire Navigation Block as shown in this GIF.
If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed!
From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want.
Save your work & customize further
Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu.
Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu.
From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons.
Advanced testing steps
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.
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 the header? Please be as specific as possible, especially if you followed the Advanced steps.
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in the Site Editor matched what you saw on your site?
How did you find the Navigation block worked when viewed on smaller screen sizes?
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 GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
This schedule was discussed while ago, when the team wasn’t crystalized as it’s right now. This is why it’s a good time to ask members of this Team whether the time of meetings is okay, or shall we reschedule it.
Please post in the comments your opinion about that, we’ll be collecting votes until 30th of August and then make a decision.
@hellofromtonya mentioned that two testers were nominated for this position to work together, both of them accepted the nomination, @hellofromtonya@boniu91
If the discussion is related to ticket, we should collect them in ticket. If the discussion happens on Slack, it’s a good practice to link it inside the ticket.
Slack is great for adding collaboration, seeking guidance, Team chats, etc.
@lucatume expanded the previous (first) point and for the most effective contribution, the following things should be clear:
A clear indication of what tickets will need test code, not manual testing.
A clear path to how test code can be contributed. If tools are required, what tools are required.
A definition of “good” and “bad” friction.
@hellofromtonya answered, that tickets with needs-unit-tests keyword are the ones for the PHPUnit side of things. We don’t have anything for the e2e tests though.
@lucatume suggested adding needs-e2e-tests keyword and the Team agreed that’d be useful.
@francina mentioned, that the current test setup is Jest + Puppeteer. We need developers to set up a tool for the Team that will make creating e2e tests easy.
Team agreed that it’s not possible to have 100% of automated tests, with no human review.
@francina shared what the Team needs right now to kick off the e2e testing:
Skilled QA engineers to setup up the infrastructure
Documentation to teach people to write testing specs
People to write the tests
Automated test engineers to review and maintain
@hellofromtonya said, that most likely, the bottleneck will be the group of automation test engineers to do the review, tuning, and maintenance work.
@lucatume explained how the “autogenerating” of e2e tests looks like (here)
Mai mentioned, that generated code can be worse in terms of quality than the one written by a human. Team agreed that it’ll need to be refined and maintained. @hellofromtonya shared improved workflow:
Human tester does the manual testing steps
Tooling records those steps
Tooling converts the steps into code
Test code is attached to the ticket
Code is reviewed by a human is skilled in e2e tests and the thing under test
Once approved, a coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. committer commits the test code into the project
Skilled e2e test humans maintain the tests (including tuning and refinement)
Team agreed to start a pilot initiative:
Build a prototype
Start small with a handful of impactful e2e tests
Get those tests stable
Learn
Iterate
@lucatume will start creating the prototype @francina offered reviewing the test handbooks
Two candidates were nominated during the open nomination period, both of whom accepted their nominations. The new Test Team Reps for 2021 (and beyond) are Piotr Boniu (@boniu91) and Tonya Mork (@hellofromtonya)!
Meet Piotr Boniu
Piotr is fascinated by WordPress since 8 years. Firstly, it was just a fun for him, later it became a way to live. He attends WordCamps whenever possible since WCEU 2017 in Paris. In 2019 in Brighton he was a speaker.
Within the project, he served as the 5.9 Test Lead.
In his career, he’s transitioning into technical product management for a WordPress performance product company, after having previously served as a QA Engineer and Technical Support Engineer.
On the personal side, Piotr is a resident of Canary Islands, previously lived in Madrid and Warsaw. He resides in a small town called Puerto de la Cruz with a girlfriend and his two cats. He’s obsessed with technology and gadgets that are making life easier, his free time is filled with hiking, sports and swimming in the ocean.
Tonya is a leader, architect, engineer (software and electrical), educator, and learner. She became hooked on contributing during the 5.6 release cycle. She saw the impact the Test Team can and could have on the project. She brings her empowerment and transformational approach to help the team rebuild itself, help fuel continuous improvement, and help contributors get started, gain and grow their skills, and grow their impact.
Within the project, she served as the 5.6 and 5.7 Triage Lead, coached the 5.8 triage and test release squad, is a Build/Test Tooling co-maintainer, and is a full-time contributor (as of February).
Outside of the project, she’s likely best known as a developer educator. She’s been leading and advising multi-disciplined engineering teams for over 3 decades in the areas of architecture, quality, testing, performance, and operations.
On the personal side, Tonya lives in a small fishing village on the NW coast of Lake Michigan in the US with her spouse (celebrated their 35th anniversary this year), dog (who thinks he’s a cat), and cat (who thinks he’s a dog and ruler of the house).
Happy birthday to @bobbingwide! Thanks for hanging with us for part of your special day.
Before recording, we talked a bit about various courses people are working on/have worked on related to FSE and the difficulty in keeping things up to date while so much is changing.
We started the call chatting about a TT1 blocks and global styles bug that Joe found. He’ll pass along the details. With the launch of 5.8, it’s been harder it seems to replicate problems and their sources.
We talked about various theme related topics including how to handle theme switches, different ways to set color options (particularly for patterns), a creative solution for having responsive font sizes (and later a PR exploring next steps to make this happen), and what else still requires custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
Rich shared that he just converted his site’s theme to a blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme and we briefly went over his recent post on block templates. He also shared how he made older color slugs still work with new sequential ones while working with Ana on a recent block theme.
We checked out the site editor mosaic view designs and very recent PR to implement some of the functionality.
We discussed the difference between patterns, templates, template parts, and reusable blocks, including going over a discussion about having starter page templates/patterns.
Herb shared some struggles with a combination of the new widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. screen and configuring multiple block.jsons. Rich shared this plugin that has multiple as an example to review.
Carolina gave a final plug after the recording stopped for anyone who might have any ideas about how best to solve this reported dark mode problem.
If you’re a theme author who has worked with theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. in some capacity, please fill out this theme survey.
With WordPress 5.8 came the official introduction of theme.json to the project allowing you to configure both existing editor settings like enabling custom colors and adopt new ones as they are released. Since this new mechanism is an early step towards a comprehensive style system for the future of WordPress, it’s important to hear from everyone who is currently using theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. to learn more about how folks are using this tool and what might make sense to include in CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. going forward.
If you’re a theme author who has used theme.json or is interested in doing so, please fill out this survey by August 13th to help shape its future.
If you haven’t yet used theme.json, this survey won’t be applicable to you. Thanks in advance for taking the time to share your thoughts! The results will be shared in a recap post.
You must be logged in to post a comment.