Interim Test Team Rep for remainder of the current term

One candidate was nominated during the open nomination period and accepted their nomination. The new interim Test Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. for the current term is Brian Alexander ( @ironprogrammer ).

He will partner with Piotr Boniu (@boniu91), who became a Test Team Rep in 3 August 2021.

Meet Brian Alexander

Brian Alexander @ironprogrammer

Brian has a background that ranges from graphic design to full-stack development, digital marketing, and customer support. Since being introduced to WordPress in 2007, he has loved exploring the many ways the platform can be extended and used as a serious content management system.

Within the project, he is a full-time sponsored contributor, served as co-Test Lead for 6.0, and is the current interim Test Team Rep.

Brian lives in Portland, Oregon with his wife and daughter, and six egg-laying hens. He runs, cycles, plays the drums, and makes terrific homemade soap. And he never turns down a chance for a cup of good coffee.

You can read more about him on his profile page.

#team-reps

Help Wanted: Test WordPress 6.0

It’s coming – WordPress 6.0 is scheduled for release on 24 May 2022. And to make it there we’re calling all testers 📣 to kick the tires and help ensure its 400+ updates and 500 bug fixes handle like a dream.

For a list of when each pre-release build will be available, check out the WordPress 6.0 Release Schedule. And drop on by the #core-test Slack channel for a quick Howdy, where we’ll be running scheduled team meetings, as well as impromptu test scrubs throughout the release cycle.

Table of Contents

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 your development site is set up, please install and activate the WordPress Beta Tester Plugin and configure it to:

  • Update channel: “Bleeding edge”
  • Stream options: “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” (you may need to save channel changes before this option appears)

If you need more detailed steps, here are the full instructions.

Testing Tips

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

  • Test across different browsers.
  • Test in different languages.
  • Compare features on different screen sizes, including tablets and mobile.
  • Use just your keyboard to navigate, or use a screen reader.
  • Test with 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.

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

Key Features to Test

The following list identifies some important new and modified features in WordPress 6.0, and should be the focus of testing efforts from here through release day. Items identified as [Major] constitute functionality that requires the most review.

Editor

Style Switching with Variations [Major]

Building on WordPress 5.9’s Styles interface, the editor now supports multiple style variations, enabling site owners to easily switch between a theme’s default or custom designed styles. Styles can be applied to the base site, or to any block. Variations can also be pre-configured by theme authors in theme.json.

With WordPress 6.0 Beta 3 or newer and the Twenty Twenty-Two (TT2) theme active, you’ll have access to preview and test the Styles variations feature.

For detailed steps around how to test Styles, please see this previous call for testing and the official Styles documentation.

For any block theme authors, please see this post to learn more about how to adopt and test this feature.

Expanded Template Types [Major]

We’ve received a lot of constructive community feedback regarding template types that were introduced in 5.9, and this area continues to evolve, introducing author, date, categories, tag, and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. types. You can find each of these template options in the Site Editor when viewing the overall Templates List:

For detailed testing steps on creating custom templates, please see this previous call for testing.

Easier Template Part Creation [Major]

Now site editors can add existing or create new template parts and patterns with the block inserter (using the + icon or typing / at the start of the block):

For information on testing this feature, please see this previous call for testing.

Writing Improvements

Numerous general improvements that can streamline content creation debut in 6.0. Here are some new features to help test directly: 

  • By popular demand, select text across multiple blocks (it’s like magic).
  • Pick a pattern on page creation. Start with Twenty Twenty-Two, but you can also try this with other themes.
  • Wikilink style internal link completer shortcut, for quick internal links. Trigger with [[ inside a text block.
  • Customize buttons and ensure that styles for new buttons are copied from the adjacent buttons.
  • Gallery block: Add/edit media directly from block toolbar and use gap support to create new layouts. 
  • Improved style preservation between block transforms, and new transform options:
    • Logo to Title
    • 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. to Content
    • TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. Cloud to Categories
    • Calendar to Archives
    • Paragraph to Code
    • Group to Row
  • The Tag Cloud block now supports outline style and min/max font sizes. Find these options in 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..
  • Social icon label visibility can now be toggled.

Try using each of these options in a new post or page and report back any rough points you encounter.

Block Styles Redesign with Preview

It’s now easier to peek into several block styles with a redesigned interface and a snappy hover preview. To test this feature, add your favorite block that comes with several block styles (Quote, Image, Table, etc) open the sidebar, and explore the style options.

List View Enhancements

List View has a few enhancements to explore and give feedback on. For testing, it helps to try out List View in a template or post/page that has different types of blocks and lots of them. Please test the following new options: 

  • Select any block you’d like and List View will open to the exact location.
  • View the structure of your content thanks to a refined interface that shows a collapsed view at default.
  • Use new keyboard shortcuts (shift + click) to select multiple blocks to bulk modify (reposition, delete, etc.), including the ability to drag and drop.
  • Quickly see any locked blocks at a glance thanks to lock status being reflected. 
  • Explore 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 with better keyboard controls and improved screen reader announcements.

To learn more about this feature, see the official List View documentation.

Blocks

Cover Block as 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. [Major]

WordPress 6.0 introduces another top item on many a user’s wish list: setting featured images to Cover blocks. Try this feature in conjunction with a template for your posts or page since this means you can now have your Post Title block layered on top of your featured images.

More information on testing featured image cover blocks can be found at PR 39658.

Comments Block [Major]

The comments 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., once relegated to the world of 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. footer includes, is now a full-fledged block. Add and style comments visually!

For more information on testing the Comments Query Loop block, see this current call for testing.

Block Locking 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. [Major]

Previously only available to theme developers, the power of the block locking APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. is now available to site editors in 6.0. Lock down important blocks to prevent accidental changes. The API now also supports reusable blocks. You can find the locking options in the ellipsis menu of each block:

Testing details can be found as part of the Authoring an Author Template call for testing.

Navigation Block

Progress continues with styling and usability around the Navigation block, which was first introduced in 5.9. Test out the most recent interface improvements and styling options.

More detailed testing information for the latest iteration of the Navigation block can be found as part of the previous Hyping Headers call for testing.

Design

Expanded Block Design and Layout Options

More options and finer-grained layout control can be found with the following list of visual updates. Please explore creating what you can as part of testing and remember that this is just a glimpse as many design tools are already currently available:

  • Use the Group block variations, Stack and Row, to create different layouts. 
  • Select your size when using the Featured Image block.
  • Border controls have been greatly expanded with an updated controls panel.
  • Layout transforms when multi-selecting (new flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    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
    ) for quick creation.
  • Try to create a customized sidebar with gap support, margins, and typography controls using a Group block in a Columns block.
  • Add borders to Columns blocks.
  • Take advantage of gap support being added to the Gallery Block to have access to a wider variety of layout possibilities.

Theme/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 Development [Technical]

Webfonts API [Major]

The new Webfonts API promises to streamline the registration of locally hosted web fonts, providing theme developers more flexibility and consistency across sites.

As of WordPress 6.0 Beta 3, theme authors are now able to implement webfonts via theme.json, and the official Webfonts API will be available to extenders in a coming version of WordPress.

For implementation and testing guidance on the Webfonts API, please see PR 37140.

Block Theme Export [Major]

Explore the new additions for block theme exports as this feature continues to evolve toward codeless visual block theme building:

Try making changes and exporting in order to ensure those changes are captured correctly. 

Style Switching with Variations [Major]

As mentioned above, the Styles interface now supports multiple variations, which can be preset in a theme. Information on adopting and testing this feature can be found at this previous #core post. Keep in mind that to test this you need to use a block theme that supports this feature and/or add in your own style variation to the current block theme you are using. 

Where to Report Feedback

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

A big thank you to @annezazu and @juanmaguitar for reviewing and contributing to this post.

#6-0, #fse-outreach-program, #full-site-editing

Changelog

  • 2022-05-10
    • Added links to forums and TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. for tester feedback.
  • 2022-05-03
    • Noted that builds of WordPress 6.0 Beta 3 and later include TT2 styles variations and bring webfonts support to theme.json.
    • Updated styles variations demonstration video.
    • Clarified that the official Webfonts API will be available in a future version.

Help Test the Comments Blocks for WordPress 6.0

The previously monolithic “Post Comments” 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. has been updated to work in a more flexible and modular way by using child blocks. The new version is now called the “Comments 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, and it comes with new blocks that can be used as child blocks within it. These new Comments blocks allow users to define and change the layout of the post comments directly from 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.

Table of Contents

Help test this feature

This post is a call for users to test the new blocks that can be used to build a  comments section in a page or post (following the block paradigm). The results of this  testing will allow the contributors behind the development of these blocks to decide whether or not they are ready to be included in the next release of WordPress (v6.0) 

Please report your findings either as issues on 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/ in the Gutenberg repository ,or in the comments below. If you have triage access, labelling any issue with “[Block] Comments Query Loop” would be very helpful. Alternatively, you can start the title of your issue with “Comments Blocks: ” to help those triaging the issues to label them appropriately. 

How comments currently work in Full Site Editing

The “Post Comments” block is the block that currently manages a comments section on a post or page, 

For example, the Twenty-Twenty-Two  theme uses this block in its “Single Post” template

But with this “Post Comments” block no option exists to change the styles and the layout of the comments from within the Editor. This block uses the comments_template() function internally to generate the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. for that section and the styles are defined via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files.

So, in summary, if you want to customize your comments section (change styles and layout) when using this “Post Comments” block you have to do a bit of coding

What’s new?

With the new Comments Query Loop block, you now have available a set of child blocks that enable you to customize the layout and styles of this section directly from within the Editor.

The new Comments Blocks that are available from Gutenberg v13.0 are:

  • Comments Query Loop: An advanced block that  displays  post comments and allows for various layouts and  configurations.
    • Comment Template: Contains the block elements used to display a comment, such as  the title, date, author, avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. and more.
    • Comments Pagination: Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin
      • Previous Page: Displays the link to the previous page of comments.
      • Page Numbers: Displays a list of page numbers for comments pagination.
      • Next Page: Displays the link to the next page of comments.

The addition of these blocks to Gutenberg is just the beginning. With these blocks, in the future you will be able to create and share your own patterns for a comments section.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key things to consider with regard to your testing environment: 

Testing Instructions

Set proper 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 and themes

  1. Have a test site using the latest version of WordPress (5.9.3 at time of writing). It’s important that this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the `Full Site Editing`  listed as a feature. 
  3. Install and activate Gutenberg 13.0 RC

Customize the “Single Post” template to use the new “Comments Query Loop” block

  1. Go to the “Single Post” template by:
    1. Going to Appearance > Editor
    2. From the Template Editor click on the drop down menu in top centre  to choose the template to Edit (“Home” template selected by default)
    3. From that menú: “Browse all templates” & select “Single Post”
  2. Remove the “Post Comments” block that you’ll find at the bottom with the text “Post comments block: no post found” 
  3. Insert in that same place the “Comments Query Loop” block
  4. Save the “Single Post” template with this new “Comments Query Loop” block inserted

Customize the Comments blocks styles and layouts and check the result of your changes in the frontend

In order to ensure you have comments to play with you can add demo content to your WordPress

  1. Go to the homepage of your testing site and go to the default “Hello world!” post to check how the Comments section looks by default with these new Comments blocks. You can also create a new post by going to Posts > Add 
  2. Go to the “Single Post” template and configure each comments block to set the styles and layout you want
  3. Save the template and go to the post page to see your changes in the frontend (you’ll probably need to refresh the post’s page)
  4. Repeat this process as many times as you want and take note of any bug or User Experience inconsistency you encounter during the process

Insert the “Post Comments Form” block to check the behavior of the Comment Reply Link and the ability to insert new comments

The “Post Comments Form” cannot itself be customised via the Block Editor as yet. There’s an issue open to work on this but for the purpose of this testing we can just use it as it is and focus the testing on the display of the comments

  1. Go to the “Single Post” template and insert a “Post Comments Form” just after  the “Comments Pagination” block
  2. Save the template and go to the post page to see if the form is available from that page (you’ll probably need to refresh the post’s page)
  3. Submit a new comment and check whether the new comment appears and whether the styles you defined for the Comments blocks are also applied to this new comment
  4. Check that the ”Comment Reply Link” and “Comment Edit Link” work properly 
  5. Take note of any bug or User Experience inconsistency you detect in the process

What to test

So, what type of things can you test with these blocks?

This Call for Testing is mainly to check that these blocks work as expected, that is, the changes in the styles and layout work as expected without bugs.

But just to provide some guidance, here are some aspects we specifically would like to have some feedback about:

Styles and Layout

Try to replicate a specific design on your comments section and check that you’re able to implement that design using just  the Block Editor. For example you could try to apply 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 the Avatar, or perhaps a two column layout with the avatar on the left and rest of the content on the right – let your imagination run wild!

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)

Check that the comments section is fully accessible in both the Editor and the Frontend and report any issues you find in this regard.

Discussion Settings

Go to Settings > Discussion and check that the different options are fully compatible with the new Comments blocks (i.e. that they work as expected according to the options that have been enabled/disabled).

Pagination Links

Test that the pagination links work as expected. To test this you’ll need enough comments for the comments to actually paginate. Comment pagination also needs to be enabled in the WordPress admin under Settings -> Discussion -> Break comments into pages

Thank you!

Thank you for helping to test these new Comments Blocks! With the adoption of Full Site Editing, bringing the power and flexibility of blocks to more parts of the page  is really helpful in enabling  users to customise their layouts and take full control of their sites.

Thanks to @mburridge @cbravobernal @santosguillamot for reviewing and helping shape this post

#call-for-testing, #gutenberg

FSE Program: Bring your questions – Round Four

With WordPress 5.9 introducing full site editing and WordPress 6.0 in the works, it’s time for another round of questions. If possible, please focus questions specifically around WordPress 6.0 as those will be the most high impact to address ahead of this upcoming release. You are welcome to submit questions using the form below or to leave them as a comment on this post by March 30th, 2022.

Like the last few times, keep in mind that because various pieces are still very much in progress some answers will be less definitive and more context setting. This is especially true for features/milestones that are planned for the 6.0 release and beyond.

Where will you share the answers? 

I’ll share a recap post on this blog (Make Test). Questions will either be grouped with corresponding answers for easy review or will be shared in one post, depending on the number of submissions received. I will track down answers to every question and share my work as I go by creating a collaborative Google doc where people can help find answers or simply see how the work evolves. I very much welcome collaboration here!

While the main result will be a lovely list of answers, this collective effort will also be useful for future documentation updates and potential tutorials. Once the post is published, I will follow up via email with everyone who left their email and a question in the form. For anyone who leaves a question as a comment on this post, I will @ your username in the recap post so you don’t miss out too!

For more information about this 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 will be shared there. 

Changelog: Updated to indicate this is round four of questions rather than round three.

Meeting notes: Discussion about Playwright as the e2e framework for WordPress

Date: January 20, 2022.

We held a meeting to explore the feasibility of migrating to Playwright for e2e testing in WordPress Core and in Gutenberg.

Participants: @juhise, @boniu91, @kevin940726, @isabel_brison, @worldomonation @monikarao, Andrey Lushnikov, @mxschmitt.

Playwright migration proposal: https://docs.google.com/document/d/1HLXztqHNMZ95kOy8nPFJ9qdiQGiKGvexwHaJQACP_GQ

What are the things the test team is looking for that the current stack (Puppeteer + Jest) does not provide

  • Auto waiting mechanism
  • Stable APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.
  • Stable tests
  • A maintained test runner: WordPress currently maintains it owns version of Jest runner
  • Better debugging tools

These are things that either miss on our current e2e tests stack, or are not straightforward to have; and that Playwright offers out of the box.

MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. methodology

There are two different methodologies that can be used to migrate to Playwright.

  • Create parallel packages that will contain the tests with Playwright. For example e2e-tests-playwright, e2e-tests-utils-playwright. This method has the advantage of having a clean separation between the tests with the old stack, and the new tests. On the other hand, it will mean maintaining four different packages for the tests and can quickly become difficult to manage.
  • Implement the new tests in the existing packages. For example, for the buttons.test.js test, have another pw-buttons.test.js file. This method avoids creating new packages.

The general recommendation is to use the second option.

Next steps

We have found it best to start the implementations only after the release of WordPress 5.9 which is on January 25th.

This recap will be mentioned in the next WordPress test team meeting. Depending on the feedback we get, we will start the process according to the roadmap included in this document.

#e2e-tests

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

5.9 End-to-End (e2e) Strategy Session Summary

A working session was held today to discuss big picture goals and what to accomplish during the 5.9 cycle.

Where e2e tests live: 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/ vs. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

Consensus reached as to where e2e tests will live within each repository:

  • Core: non-Gutenberg features, UIs, and 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. including:
    • new stuff being built during a release cycle
    • existing interfaces such as 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., login, 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 and theme installation/activation, interaction with list tables, settings page, etc.
  • Gutenberg: its functionality being built within its repository

5.9 Core e2e focus areas

All recent major changes to Core with user facing functionalities are top priorities to receive e2e tests as part of WordPress 5.9. These areas are:

  • The application passwords feature
  • The uploading of new versions of plugins/themes feature
  • The plugin dependency project
  • The updater project
  • Twenty Twenty-Two theme

Porting tests from Gutenberg to Core

tl;dr:

  • Tests that test Gutenberg’s functionality will remain in its repository and not be ported to Core
  • Core specific tests (such as login) can be moved to Core

Along with the previous areas to test, the following priority would be to port some Core tests that are currently implemented in Gutenberg (e2e-test-utils package). Concerned tests are those related to the login feature.

The next step after this would be to improve the login tests to make them more performant. This includes for instance cookie based authentication across all tests in Core and Gutenberg.

Other Roadmap Items

These items are not necessarily part of 5.9 Goals. However, these are part of the bigger picture Test Roadmap.

  • Documentation: The goal is to help contributors quickly contribute to testing.
    • Test Handbook: Clearly document multiple workflows for folks to pick their onramp into testing
    • README: #53550 get its PR reviewed and merged
  • Visual Regression: #49606 is an experiment to allow local vision regression testing.
    • From these learnings, plans can be crafted for how to build it into an automated CI process.
    • The challenges for the CI are storage of the artifacts and unreliability of testing these across different environments. A third party service may be possibility to explore in the future.
  • Is Core a good experimental sandbox for Playwright?

Proposal to migrate to Playwright for e2e tests

tl;dr:

  • Not a blocker to build Core’s e2e tests
  • Requires changes in e2e-test-utils package (maintained by Gutenberg)
  • Needs a migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. plan

All agreed Playwright for e2e tests would indeed have a lot of advantages for both Core and Gutenberg. However, consideration must be given for breaking changes and impacts for extenders using the test utils. Kai noted the utils could be made compatible with both Puppeteer and Playwright, meaning no breaking changes.

Also, a migration plan will need to be discussed on developed once the test utils are ready for Playwright. Part of this plan is to figure out how to change Gutenberg and Core as well as how to upgrade existing, not yet committed patches/PRs. The how and when is yet to be determined.

As there is still work to do to prepare for Playwright, the team agreed to continue with the roadmap to build e2e tests in Core.

Props @hellofromTonya for peer review and proofreading.

#build-test-tools, #core-test, #summaries

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

Hallway Hangout: on adoption pathways for full site editing

Date2021-09-16 16:00 UTC

Format: Zoom (recorded). A link will be shared in the #fse-outreach-experiment channel before the meeting time. Please join that channel if you’d like to participate!

Length: 45 – 60mins. This will not run longer than an hour.

Topic: This session will focus on adoption pathways with full site editing.

Facilitator(s): @mkaz @get_dave @annezazu

Goal: To have a broader discussion about adoption pathways, what’s working, what successes folks have had, what blockers people are running into, and what might help more folks participate. Beyond just the benefits of learning from each other, this information will ideally be used to help influence future resources and to give insights to the teams working on these items.

Intended Audience: Anyone who has adopted or is interested in adopting site editing related features (theme.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., template editor, theme blocks, navigation editor, etc).

Agenda

This conversation is meant to casual, collaborative, and open ended rather than prescriptive about how one should approach adoption. With that in mind, we’ll start the session asking folks who are comfortable doing so to share what they’ve tried and how it’s gone. Once everyone who wants to go has done so, we’ll talk about successes, blockers, and what resources folks have used (along with what resources folks would like to see). We’ll see where the conversation takes us from there!

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Test Team Reps for 2021+

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.

You can read more about him on his profile page.

Meet Tonya Mork

Tonya Mork @hellofromtonya

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

You can read more about her journey on HeroPress and her profile page.

#build-test-tools, #team-reps