Test Team at WCUS 2023

WordCamp US 2023 is almost here! It takes place from August 24-26 at the Gaylord National Resort & Convention Center in National Harbor, Maryland, USA. As is customary at 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. events, a Contributor Day will be held, taking place on Thursday, August 24. This event is open to everyone, even if you are not attending WCUS.

🕰️ Important Times to Note:


Join the Test team in person, or contribute remotely. We can’t wait to see you!

Contribute

The WordPress project offers numerous opportunities for contribution through testing. Some common ways to participate are to:

  • test bugs or features
  • triage tickets
  • work on automating tests for tickets that are in progress
  • help other testers get started
  • welcome new contributors and tell them what’s so great about testing

And if none of the above sound right, or you simply wish to know what contributing to WordPress with testing is all about, please stop on by the table to chat.

Be Prepared

To ensure you get the most out of 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/., please review the following before the event, so that you can focus on the fun stuff when you arrive:

Stay Updated

In addition to keeping the WCUS 2023 homepage handy, join the #core-test and #contributor-day channels in Make WordPress 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/., and follow #wcus for other event updates.

Share Your Thoughts

If you have any questions about Contributor Day or Test Team, please leave a comment below or reach out on the appropriate Slack channel.

Also, if you’re attending Contributor Day in person, let us know in the comments!

Interested in Contributor Day, but not sure if Test is the right fit for you? Try out Make WordPress’s Find Your Team tool to discover other opportunities that may interest you.

Props to @oglekler for peer review of this post.

#contributor-day #wcus

Table Leads Needed for WCEU 2023 Contributor Day

WordCamp Europe is coming June 8-10 to the Megaron Convention Center in Athens, Greece, and brings an opportunity to participate in Contributor Day on the first day of the event. Last year, Contributor Day was overflowing with people from all around the globe, and in anticipation of a repeat in attendance, your help is needed to welcome new Test contributors, and provide a good space for open discussion.

In order to better support contributors interested in Test Team at the event, we are looking for 2-3 Test table lead volunteers who have experience on the team. Table leads talk about contributing in Make/Test, welcome and guide contributors toward resources, and overall, help new contributors make the most of their time at the event. See the handbook’s Test Table Leads section for more info on this role.

So, will you be at WCEU, and would you like to help lead the Test table? 🙋🏻‍♀️🙋🏽‍♂️ Review the following items, and leave a comment below (or a message in #core-test, or DM @ironprogrammer or @Piotrek Boniu).

Don’t feel like “leading” at the table, but still want to help? That’s cool, too! Having other test contributors around in-person or online (in the #core-test and #contributor-day channels) is a great opportunity to meet and help out. Please leave a comment below if you plan to be at the event or are participating remotely, and how you’d like to help.

Props to @oglekler, @estelaris, @ugyensupport, @shiponkarmakar, and @boniu91 for peer review of this post.

#contributor-day, #wceu

Hallway Hangout: Themer Goodies Edition

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

On January 18th, 2023, a few community members from the FSE Outreach Program gathered to chat about various upcoming features specific to BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Themers:

  • Applying local styles globally: push block design changes from post/template editor to global styles.
  • Inputs for Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.: Ability to add custom CSS from site editor Styles panel.
  • Exploring the Style Book: feature that shows all blocks (including third-party) in site editor, making it easier to test everything when designing.
  • Edit block style variations: Ability to edit (not yet create) existing block styles of a theme from Styles panel.

Attendees: @daisyo, @colorful-tones, @ndiego, @annezazu, @fabiankaegy, @greenshady, @elmastudio, Mark-Andrew, @luminuu

Recording

Notes

Anne started things off with a mention of the latest FSE Outreach Program call for testing “Find Your Style.” Feedback can be left until February 1st, 2023. 

A number of PRs and discussion issues were discussed with a particular focus on the benefits to theme developers and designers.

Add paste styles to the block settings: #45477

Ability to copy styles and apply them to another compatible block.

Could be a time saver for anyone working with complex design setup in the site editor. Stands to save a lot of clicking!

Push local block styles to global block styles #44361

Provides a path for styling blocks in the content or site editor and applying those styles globally to propagate across the site to other blocks. 

Features like this will help to lower the barrier for non-developers getting into theme design. Quality of Life improvements. 

There is no clear indication in the list view or for blocks where the global styles have been overridden.  – A specific comment mentions more exploration being considered.

It was mentioned that it would be good to have a way to turn off the option to apply block styles globally. – Issue opened (#47256)

A workflow that seems likely would be to apply styles globally and then export to the theme (via Create Block 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.)

Translations for New concepts

Translations for some new concepts and features do not always represent the purpose or main idea of the concept. There could be room for improvement in the way translation comments are added in block editor development.

As an example, the “Apply globally” string doesn’t have any translator comment. This is a good example of what a translator comment should look like.

 Global styles: add custom CSS panel to site editor #46141

A new control in the block settings panel allows site editor users to add globally applied custom CSS. For theme authors, this could potentially help with supporting users. This has long been a feature of 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.. Having this available brings things closer to feature parity.

The idea of per-block custom CSS came up. The benefits and downsides of per-block custom CSS were also discussed. There are some concerns about having customizations spread out but also interest in potentially making it easier to add CSS without leaving the block settings. This concept has some developer discussion and a bigger discussion as well.

Edit block style variations from global styles #46343

Add the ability to edit(but not create) registered block style variations. 

Variations can, in many cases, be a better option than a block style variation as it is possible to apply attributes and not simply a class.

Design Tools: Add a position block support (including sticky) decoupled from layout #46142

Set blocks to be static and sticky. This will be very helpful for theme authors as sticky headers, footers, and sidebars are frequently requested by clients/users. Follow-up issues are being tracked here.

Global Styles: Add Styles Book to Global Styles #45960

Option to preview all available blocks, including custom, with the active theme or available style variation applied. 

Template Parts: Add an option to import widgets from the sidebars #45509

A mechanism to migrate blocks in widgetWidget A 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. areas to template parts. This is a bit of a misnomer since it imports only blocks into parts, not widgets. The widget group block doesn’t work at the moment. There are steps; it’s not a streamlined 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
at this point.

Full-Page Patterns

There is a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life for theme authors that would like to organize and present full-page patterns in a user-friendly way. Users find building a page with multiple patterns too hard or outside their comfort zone.
There are active, related explorations related to shuffling issues here and here.

Thanks to @annezazu for reviewing this post.

#fse-hallway-hangout

Proposal to Update Test Handbook Homepage

tl;dr
This is a proposed update to the Test Team Handbook homepage. The new content is located here for review: https://github.com/WordPress/test-handbook/blob/main/homepage.md.

Handbook Homepage Refresh

Over the past couple years, the Test Team has evolved from a focus on 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. workflows to include additional aspects of software testing, including bug reproduction and patch testing, 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. release testing, and automated unit and E2E testing.

As part of a key initiative to improve 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) to testing, this Test Handbook update seeks to clarify the current “duty of care” for the Test Team, and provide a less intimidating introduction on where contributors can get started. This is the first of several page updates toward this goal.

Updates to the handbook homepage include:

  • Clarify the scope of today’s Test Team and areas of impact.
  • Welcome contributors from any experience level.
  • Provide links to get started with testing.
  • Remove reference to “flows” testing that is no longer practiced or applicable.

Please review the updated homepage content here: https://github.com/WordPress/test-handbook/blob/main/homepage.md.

Leave feedback in the comments below by 10 January 2023.

Thank you to @boniu91 for peer review of this post.

Test Team Reps for 2022-2023

Update: Piotrek Boniu (@boniu91) has accepted his nomination to serve as second 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.. This post has been updated accordingly.

Two candidates accepted nomination during the annual open nomination period. The Test Team Reps for the 2022-2023 term are Piotrek Boniu (@boniu91) and Brian Alexander (@ironprogrammer).

About Piotr

Piotr Boniu

Piotr has been fascinated by WordPress for over 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 was a Test Team Rep for the 2021-2022 term, and served as 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.

About Brian

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 serving as Test Lead for 6.1. After time as interim Test Team Rep, he’s decided to come back for more. He also feels weird writing about himself in the 3rd person.

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.

Thank you props to @hellofromtonya for peer review.

Test Team Reps: Call for Nominations

Update: Nominations for the 2022-2023 cycle are now closed.

A little over a year has passed since the last annual Test Team Rep nomination cycle, and it’s been over two months since an interim acting rep was elected. It’s time again to nominate the Test Team Reps who will serve for the next 12 months 🗓.

This Call for Nominations is open until 2022-08-26 12:00. Please leave a comment identifying your nominee(s) before then.

For a quick refresher of 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. roles across the project, please see the Team Reps post on Team Updates.

The Role

Reps in the Test Team perform primary and secondary (or backup) duties to help support team chats, make updates to the team’s blog and handbook, remove blockers, keep a pulse on team objectives, and promote testing opportunities within the WordPress project.

As a reminder, Reps are not called “team leads” for a reason. While people elected as Team Reps will generally come from the pool of folks that people think of as experienced leaders, the Team Rep role is designed to change hands regularly.

Test Team Rep duties include:

These duties are shared between the primary and secondary Reps (see Rep Responsibilities on the Team Rep page).

Qualifications

A Rep is an active team member who is reliable and trusted, advocates for and is knowledgeable of one or more areas of testing, and wants to represent, nurture, and grow the team to better serve the WordPress open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.

Test Team Reps must be committed to showing up and performing regular duties, and should expect a time commitment of at least 2-4 hours per week. Reps serve for a term of one year.

How Test Team Elections Work

Step 1: Call for Nominations 📣

The first step is to reach out to the community with a Call for Nominations (this post!)

Please nominate in the comments of this post. You can write a comment as simple as “I nominate @the_persons_username.” Self-nominations are also welcome by leaving a comment such as “I nominate myself.”

Private nominations can be submitted by contacting @Piotrek Boniu or @ironprogrammer in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If you’ve been nominated, please accept or decline the nomination as a reply to the same comment.

⏰ The deadline for nominations is 2022-08-26 12:00.

After the deadline, each nominee will be contacted to discuss qualifications and to confirm their acceptance of the nomination.

If you get nominated, please do not feel like you have to say “yes”. It’s okay for you to decline the nomination if you don’t feel like this is the right fit for any reason. “Thank you, but no thank you!” 😉

Step 2: Vote for Team Reps 🗳

An election will happen only if there are more than two accepted nominations within the nomination period; otherwise the nominees will become the new Test Team Reps.

If held, the election will be conducted by an anonymous poll (example). The poll will remain open for 2 weeks.

Step 3: Announce Team Reps 🎉

Once uncontested nominations have been accepted, or in the event of an election the voting period has passed, the new Test Team Reps will be announced in a post (example).

Time to Nominate!

Are you ready? It’s time to nominate folks to serve as our Test Team Reps for the new term! If you have any questions, please feel free to ask in the comments.

Props to @hellofromtonya for review of this post.

+make.wordpress.org/updates/

#team-reps

Testing. Testing: Calls for Testing Facilitators

While the FSE Outreach Program enables folks to contribute to testing efforts directly, another important aspect of contributions not quite covered is facilitating calls for testing themselves. This post invites folks into that aspect of contribution with the Test Team to expand the testing efforts across the project. To better understand what this work entails, check out the recently overhauled handbook page on “How to facilitate a Call for Testing”

Why is this important to do?

It’s critical to the success of the project that feedback regularly comes in from daily users to help shape the direction WordPress goes. The FSE Outreach Program can only test so much though and there are many parts of the WordPress experience that need feedback. As the scale of WordPress increases, our testing efforts need to follow.

This is an effort to do exactly that by empowering others to contribute in increasing feedback loops, stabilizing features, and bringing the great WordPress community along with the work being done. Finally, the more folks who feel comfortable facilitating testing efforts, the more potential there are for future outreach programs around areas you know and love (here’s looking at you, Media Library). 

What might this look like?

Helping facilitate testing can look like many things and there’s room for your creativity. Here are some examples of how this could work:

  • Run your own testing effort based on what might need testing. This could be facilitated or self-serve (read the handbook page for more info). 
  • Help with one aspect of a call for testing in the FSE Outreach Program. For example, you could write the summary. 
  • Co-run a call for testing for the FSE Outreach Program with yours truly. We could divide the work or directly collaborate on each step. 
  • Take on facilitating the entirety of a call for FSE Outreach Program testing, from start to finish.

Important note: these opportunities do not need to be done within the Outreach Program as testing does and will exist outside of that. I am listing those above as an entry point that I can help onboard into that work personally.

Comment below if interested or if you have any questions/comments/concerns.

If you’re interested in contributing in this way, please comment below! If you’re interested but aren’t quite ready to put your name out there, please share what might help you feel more confident doing so. 

Props to @cbringmann @chanthaboune @priethor for helping review this post.

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