Help Test WordPress 6.2

Get ready for the next big release in the WordPress world! WordPress 6.2 is set to launch on March 28, 2023, and we need your help to make sure it’s the best it can be. With exciting new features and improvements, this release promises to be a game-changer for WordPress users everywhere.

Stay up to date with the latest pre-release builds by checking the WordPress 6.2 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage with the testing community by participating in weekly scheduled team meetings and test scrubs.

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. After activation:

  • Navigate to Tools > 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. Testing.
  • Set the update channel to “Bleeding edge” and click Save Changes.
  • Set the stream option to “Beta/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” and click Save Changes again.
  • Navigate to Dashboard > Updates and click the Update to latest… button.

For more detailed steps, click this link for complete instructions.

Testing Tips 💡

At a high level, here are a few tips to keep in mind to get the most out of this Call for Testing:

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

Anything marked with a tool icon (🛠) is more technical, and may be best suited for those comfortable with more advanced testing steps.

Key Features to Test 🔑

Interface

Browse Mode: An easier way to navigate the Site Editor

With the release of WordPress 6.2, the Site Editor has been completely reimagined with the introduction of Browse Mode. This new way of interacting with the Site Editor provides a more intuitive navigation experience, making it simple to access and manage all templates and template parts. The addition of a 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., allowing for the creation of new templates, further enhances this functionality.


With this new feature, WordPress sets the foundation for future developments like content editing, extended 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 options, and menu management. (36667, 46903, 46700, 46458)

Remove “beta” Label from Editor

The beta label in the Site Editor has finally been removed with the release of WordPress 6.2. This means that when you access the Site Editor through Appearance > Editor, you will no longer see the “(beta)” label. This decision was reached after extensive discussions and evaluations over several release cycles, starting with WordPress 5.9. Despite the removal of this label, the Site Editor will continue to receive enhancements and bug fixes like other parts of WordPress.

Template Parts & Reusable Blocks Colorization

Identifying template parts and reusable blocks within the Site Editor has become more intuitive. These synced blocks, which differ from other CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, now stand out with a distinct color throughout the interface, including the List View, Block Toolbar, and Canvas. This improvement makes it easier to recognize when you’re working with these blocks, making the site creation process smoother and more efficient. (32163, 45473)

Split Block Settings Between “Settings” and “Styles”

Split Block Settings into two categories: “Settings” and “Styles”. This makes it easier to find the desired settings and styles, as they are clearly separated. Additionally, it reduces the amount of scrolling needed to locate the desired item. This change makes blocks with many controls, such as the Group block and Navigation block, easier to manage and customize. 


If you’re a plugin author, it’s a game-changer. It ensures that the options for your block appear where you want them to, making it easier for your users. As a consequence, the __experimentalGroup property was stabilized on the InspectorControls slots. 

You can now define which InspectorControls group to render controls into via the group prop.

In addition to stabilizing the __experimentalGroup property, a new styles group was added, so styles-related controls that do not fit conceptually under the block support panels — border, color, dimensions, typography, etc. — can be included under the “Styles” tab in the block inspector:

<InspectorControls group="styles">
  // Add your custom styles-related controls here.
</InspectorControls>

(40204, 47045, 47105)

Update Block Settings Icon

To accommodate the change in block settings, a new icon has been added to the block setting sidebar. This small change has a big impact, as it affects many documents, training videos, and more. To ensure everything is up-to-date, please proactively update relevant material. Further discussion about the change in the icon can be found in GitHub Issue 46851.

Distraction-Free Writing

The new Focus Mode offers a more concentrated writing experience by hiding unnecessary elements of the editor interface. When enabled, all sidebars are closed and toolbars become less visible, allowing your content to take the spotlight. You can switch this mode on/off as desired, depending on your needs. (41740)


To see a fuller demonstration of this feature, see this distraction-free mode video on YouTube.

Blocks

Navigation Block 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.

The Navigation block in WordPress 5.9 brought a new editing experience. Now, with the introduction of an editable view in the block settings sidebar, managing menus is even easier. This view works similarly to the List View but is specific to the current navigation being edited. Clicking the “Edit” button selects the menu item in the editor, allowing for inline editing. This option offers a balance between the prior experience and the new block editing paradigm.


Digging deeper into technical details, the Navigation block provides an additional option when locking to restrict editing of its inner blocks (links and submenus). This helps to curate the experience even more, especially if you’re taking advantage of the ability to use block template parts in classic themes. For a demonstration of the new locking features, see this locking the navigation video.

Moreover, the Navigation block has more room to grow. A location fallback for classic menus and an “open list view” button could be added to improve it further, and a new conversion panel with the Page List block to make it easier to switch to editable links. (46938, 45394, 44739, 45976, 46286, 46335, 46352)

Sticky Positioning

The Position block support now includes a “Sticky” option, allowing a block to stay within the viewport and remain at the top of the page when the content is scrolled. This is beneficial when an element, like a status message or promotion, needs to be visible regardless of the page’s scroll position. The feature works in both the block editor and the front end, providing a true WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience.


In WordPress 6.2, the team focused solely on the root level, as this reduces the complexity of dealing with sticky positioning and avoids the UX problem of applying sticky to a non-root-level block.

Testing Instructions

  • In a theme that uses appearance tools (e.g. TT3) select a Group block that is nested within another block (i.e. it is not at the root level of the document in the post or site editors). Under the settings tab, there should be no Position panel available.
  • Select a Group block at the root level of the document. Under the settings tab, there should be a Position panel available.

Note: The logic will still display the Position controls if a value has been set, even if the block is not at the root level. This is to support backward compatibility, since the Position feature has already been released in 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/, and also allows users to turn off the Position if the block is moved to a non-root level of the document. You can learn about some follow-up tasks to this initial implementation in this issue. (46142, 47334)

Openverse Integration

Who doesn’t love Openverse? Millions of media items are now available right from your editor! WordPress 6.2 introduces this fantastic feature to simplify adding images directly from Openverse’s index of over 300 million public domain and openly licensed images.

Testing Instructions

  1. From WP admin, navigate to Posts > Add New.
  2. Click the block inserter (the plus icon at the top of the editor).
  3. Select the new Media tab, and then Openverse.
  4. Search, scroll, and select an image to insert it into the post.

Patterns

Pattern Inserter Redesign

A new design provides a split view between categories and patterns, enhancing navigation and providing larger previews for patterns. This improves the drag-and-drop experience when building top-level sections; enables quick browsing between categories; and provides the ability to save, import, and manage patterns. (44028, 41379, 44501, 46419)


Testing Instructions

  • Open the inserter.
  • Open the patterns Tab.
  • Open Explore all patterns, search insert, and play around with it.

Register Patterns for Templates 🛠

A new approach to associating patterns with templates has been developed, where extenders can register patterns for specific template types to limit where they appear. For example, an Error 404 pattern should only be used with the 404 templates. (45814, 42325)

Testing Instructions

The new patterns registration 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. property templateTypes accepts an array whose values define template slugs where the pattern makes sense. For example: 404, single-post, home, page, archive, or single-product.

  1. Activate the Twenty Twenty-One theme.
  2. In the theme’s inc/block-patterns.php file, after the existing calls to register_block_pattern(), add the sample test pattern with the snippet below. Save the file.
  3. Open the post editor, and then the browser developer tools console.
  4. In the console enter the following to retrieve the registered patterns: wp.apiFetch( { path: '/wp/v2/block-patterns/patterns' } ).then( console.log );
  5. Verify that the API response includes the pattern query/template-type-test, and template_types has 404 listed.
register_block_pattern(
	'query/template-type-test',
	array(
		'title'      => __( 'Template type test', 'twentytwentyone' ),
		'templateTypes' => array( '404' ),
		'content'    => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
						<p class="has-text-align-center has-x-large-font-size">404</p>
						<!-- /wp:paragraph -->',
	)
);

Style Features

New Style Book

The goal of the Style Book is to make creating consistent designs simpler, help users quickly understand the effects of changes, and enable more customization to suit their preferences. For block theme authors, this is a major shift. These changes create a clearer design process that is intuitive and efficient for modification and reuse. (44420)

Inline Preview for Global Block Styles

To enhance the editing experience, Core Team added a block preview component to the global styles panel. This component displays a preview of the selected block at the top of the sidebar panel, allowing you to see the block example and how it’s affected by the settings in real time. (42919)


This is particularly useful because global styles allow you to edit blocks that might not be present on the current page being previewed. With the block preview component, you can now easily see the changes you make to the block’s global settings and how they will appear on your website.

Apply Block Style Globally

This feature allows you to update all blocks across the site with just one click. By clicking the “publish” button in the “Advanced” section, you’ll be able to see an option to “publish” the styles that were pushed. This new feature will simplify the process of updating styles across the site, making your workflow even more efficient. Be sure to check out the video to see how it works! (44361)

Copy Block Styles

Now you can copy styles from one block and paste them onto another. Previously, the only way to do this was to duplicate the entire block, which was often inconvenient, or to manually copy each tool/setting, which was incredibly tedious for blocks with many styles. (44418)

Custom Global CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.

Now you have the ability to add custom CSS to your entire site through Global Styles. This new feature provides designers with even more control over the look and feel of their website, allowing them to make precise adjustments to their design.

Add Shadow Presets and 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. Tools in Global Styles

Gutenberg 14.9, launched on January 4, 2023, brought a highly anticipated design tool to theme authors: shadows. WordPress 6.2 Beta 1 has finally arrived, bringing support for both default and theme-specific shadow presets. The update includes 4 default shadow presets: Natural, Crisp, Sharp, and Soft. (46502)

Testing Instructions

You can add custom shadows via the settings.shadow.palette array in theme.json.

  1. Activate any block theme (e.g. Twenty Twenty-Three).
  2. Add shadow presets to theme.json. For example, the snippet below is inspired by Tailwind CSS’s box-shadow.
  3. Open Global Styles -> Blocks -> Button -> Border & Shadow -> Drop Shadow.
  4. The above-defined shadows should appear in the selected panel.
  5. Choose any shadow and save the changes.
  6. Open the front end, and verify the button for the given shadow.
"settings": {
	"shadow": {
		"palette": [
			{
				"name": "Natural",
				"slug": "theme-natural",
				"shadow": "5px 5px 0px -2px #FFFFFF, 5px 5px #000000"
			},
			{
				"name": "Crisp",
				"slug": "theme-crisp",
				"shadow": "5px 5px #000000"
			},
			{
				"name": "Sharp",
				"slug": "theme-sharp",
				"shadow": "5px 5px 0 0 #999999"
			},
			{
				"name": "Soft",
				"slug": "theme-soft",
				"shadow": "5px 5px 10px 0 #999999"
			}
		]
	}
}

Where to Report Feedback 🗣

If you find any issues, it’s best to share them on the WordPress.org alpha/beta forums, or if you are more technically savvy and comfortable, on Core Trac. For helpful reporting guidelines, refer to the Test Reports section of the Test Handbook.

Please share feedback as soon as you can before the release on March 28, 2023.

Changelog 🪵

  • 2023-02-07
    • Initial post.
  • 2023-02-10
    • Added new features to highlight for testing:
      • Openverse Integration
      • Register Patterns for Templates
      • Add Shadow Presets and UI Tools in Global Styles
    • Minor text adjustments.

A big thank you to @robinwpdeveloper and @ironprogrammer for reviewing and contributing to this post, and @annezazu for feature references and visual assets.

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

FSE Program Testing Call #20: Find Your Style

This post is the twentieth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental 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. 

Overview

Building off of the last call for testing, this effort includes both some new and some repeat items that have continued to be iterated upon. In particular, browse mode’s design continues to evolve with a clearer edit button and design of the currently active template. Tied to this, the new 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. for the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. has received numerous improvements as work is underway to move the option out of experimental. Taken together, this test helps underscore just how much a single theme allows you to do and how the Site Editor tools are evolving to make quick customization increasingly intuitive. 

New items to test:

Repeated from previous times: 

As with last time, this post will be updated to the latest version of 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/ so the latest changes can be tested ahead of the 6.2 release cycle for a faster and more accurate feedback 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.

Framing

To ground this experience a tiny bit more, let’s pretend you’re switching over from a Classic theme to a Block theme. After switching, you will need to import the widgets settings before re-imagining the homepage of the site, including the navigation. You’ll end by exploring various ways to style the site across different templates, both by using the Style Book and by editing blocks individually before pushing those changes globally. Your aim is to make the site look as different as possible a few times over until you find a version you’re happy with. Imagine this is your way of exploring the reaches of what’s possible with the Site Editor, all while using a single theme!

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-20 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 15.0. From there, head to Gutenberg > Experiments and turn every experiment except for “Zoomed out view”. 
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu and add a few widgets. 

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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/..

Switch your site

  1. Explore your site and feel free to add in more personalized items, whether by adding or customizing menus under Appearance > Menus or more widgets under Appearance > Widgets. 
  2. When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme. 
  3. Head to Appearance > Editor (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.) to be brought into the browse mode experiment in the Site Editor.
  4. Click through the different templates and template parts to view the various parts of your site. Eventually, select your Home template and choose the option to “Edit”. Notice that your previously created menu was automatically imported.

Import your widgets and customize your navigation 

  1. Using List View, select your Footer Template Part and delete it. 
  2. Add a new Template Part block, give it a name related to footer, and choose the option to “Start Blank”.
  3. Open the block settings and expand the Advanced section. Under “IMPORT 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. AREA”, select the widgets section you’d like to import and click “Import”.
  4. After importing, customize this new footer further as you’d like. Explore using design tools, using group/row/stack variations, and more. 
  5. Once done, select the Navigation block and change a few things as you see fit. For example, you can: move some of the sub menu items to top level items, change the names of a few of the menu items, adjust the spacing between items, and customize the mobile display as you see fit.
  6. Save changes.

Find your style

  1. Open Styles and select “Browse Styles”. 
  2. Open the Style Book by selecting the icon that looks like an eye from the main Styles interface and switch between various style variations while viewing how it impacts your site. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off as you’d like.
  3. After selecting a style variation you like, head back to the main Styles interface and select “Colors”. From there, choose the “Randomize colors” option to change the colors further. 
  4. After exploring the “Randomizer colors” option, head back to the main Styles interface and select “Blocks”. From there, choose a block with a style variation, like Button (not Buttons!) or Social Icons or Site Logo. You can then edit that variation to your liking globally. 

Switch it up (again and again)

  1. Now that you have explored browsing Templates and Template Parts, the Style Book, customizing the Navigation block, and using the color randomizer, use this experience to switch up your site further. To do so, open a template, like the Single or Search template, and edit an individual block, like the Post Title or 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.
  2. After editing the block to your liking, open the Settings tab, expand the “Advanced” section, and choose the option to “Apply globally”. 
  3. Save changes and repeat this process a few times as you have time across templates and different blocks, relying on the Stylebook or Browse mode as needed to get a larger sense of your site. Try to make your site look as different as possible each time.

Bonus: Use patterns as much as you’d like as you customize your site! You can do this by adding patterns directly or by using the “replace” option in blocks like the Query Loop or Template Part.

Leave Feedback by February 1st, 2023

#fse-outreach-program, #fse-testing-call

FSE Program Testing Call #19: Running Through Refinements

This post is the nineteenth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental 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. 

Important notes: There’s a current call for volunteers to use Replay.io, a tool with a comprehensive way of capturing bugs. Respond by December 28th, 2022 to get involved. Separately, the FSE Outreach Program is always looking for volunteers to help run these calls for testing for the community.

Overview

With work deeply underway to refine and wrap up numerous aspects of phase 2, this call for testing centers numerous changes in progress to put them to the test (get it) and find the edges of what’s being worked on. At a high level, this test covers the following:


Taken together, these changes make it easier to navigate between the content you want to edit, see changes at scale when working with Styles in a few ways, create an easier navigation editing/creation experience, and have a more intuitive experience when editing individual blocks. 

Framing: Refining a client’s site

To ground this experience a tiny bit more, let’s pretend you’re doing some refinements to a client’s site to finetune their branding and, as a result, homepage and navigation. The aim is to go from a more complex navigation structure to a simplified one, with two different options to choose from for the client (edit current menu and create a new option). Tied to this, the homepage will shift the focus of content in 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. block with more of an emphasis on images (and whatever else you’d like). Finally, you will update the overall styling as you see fit, with bonus ideas for those who have extra capacity and interest!

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-19 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 24 hours. Select “WP Admin Login” and use the information provided to log in.
  4. Save the link to your site so you can access it again during the test. 

To set up your own test site (skip if using the above): 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three theme by going to Appearances > Themes.
  3. Install and activate 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/ 14.8.4 RC1 by downloading the release > going to Plugins > Add New > Installing. From there, head to Gutenberg > Experiments and turn on “Off canvas navigation editor” and “Block inspector tabs” experiments. 
  4. Head to Tools > Import and import this file (click “Download” in the upper right hand corner first) to have access to the same content as above.

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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/..

Explore browse mode

  1. Head to Appearance > Editor (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.). This will bring you to a reorganized view of the site editor.
  2. Click Templates and notice the list of templates now shown in the sidebar. Click through various templates to quickly view them.
  3. Select “Home” from the templates and then select “Edit” in the open sidebar to directly alter the template.

Editing navigation

  1. Select the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. of your site before selecting the navigation block. Within the navigation block, select the page list block and choose “edit” from the block toolbar. This will open a prompt explaining that a step must be taken before you can customize your menu. Select “Customize”. You can also select the option to “Customize” from the block settings sidebar.
  2. Open your block settings and notice that each menu item is now listed in the sidebar. 
  3. Spend some time condensing the menu down as you see fit to just three top level menu items. You can do this by dragging and dropping the menu items in the sidebar, deleting items, and renaming them. For example, you can list “Press” under “About” and “Resources” under “Getting Started”. 
  4. Explore the additional tabs in the block settings (Styles, Settings) to customize further to your liking. For example, you can change the typography, block spacing, or how it appears on mobile. When done, click “Save”. 
  5. Afterwards, select the navigation block once more and, in the list view tab of the block settings, select the menu name and choose the option to “Create new menu” in the dropdown.
  6. Select the + button in the same tab to add in simply the “Contact”, “About”, and “Getting Started” page. 
  7. Head to the Settings tab and open the “Advanced” section to rename the menu to something like “Simplified main menu”. When done, click “Save”. 
  8. Heading back to the List View tab in the block settings section, click on the menu name to open a drop down and select which menu you’d like to display from there.

Redesigning the homepage

  1. Select the Query Loop block and, from the block toolbar, select the “Replace” option. 
  2. This will open up a modal where you can pick a different pattern to display the posts. Choose a different pattern.
  3. Customize the pattern you chose further. For example, change the 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. size, add 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., remove or add blocks, change the size of the titles of posts, etc. When done, click “Save”.

Changing Styles

  1. Open Styles and either choose “Browse Styles” to pick a different style variation or make adjustments as you see fit using the Styles system. For example, you can customize the appearance of individual blocks with the “Blocks” section using the new preview option or change overall options with Typography, Color, and Layout. 
  2. When done, select the icon that looks like an eye from the main Styles interface. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off. 
  3. Tweak anything you’d like further while using the stylebook before, when done, clicking “Save”. 

Bonus: Customize further as you see fit

What follows are various ways you can take this test further. Feel free to try all or none, depending on how much time you have:

  • Add custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. using the Styles > Custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. as part of the input for custom CSS work in Global Styles.
  • Explore browse mode more by switching between and editing different templates or template parts.
  • Add or edit more blocks and explore the split settings options within.
  • Make more changes to the Styling of individual blocks, taking advantage of the new preview options for individual block styles and the overall stylebook.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by January 6th, 2023

#fse-outreach-program, #fse-testing-call

FSE Program: Seeking volunteers to use Replay.io for capturing bugs

The FSE Outreach Program is always seeking ways to improve the access, ability, and reliability of capturing feedback for the latest and greatest with WordPress. Previously, this has looked like experimenting with “explorations” of early features using prototypes/specific PRs to test or the recent addition of InstaWP to make creating test sites and unique testing situations far easier. In the coming months, another tool, replay.io, will be piloted, and volunteers are needed to help determine how it can be used to better WordPress’ bug finding and fixing feedback 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..

Volunteer Requirements

  • Ability to help for the next 3 months whenever a call for testing is started (at least 1 hour per call for testing with calls for testing about every 3-4 weeks). 
  • Time to learn how to use replay.io and use it when going through the calls for testing. 
  • Comfort in using 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/’s 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/ repository and opening issues. 

If you are interested in volunteering, please comment on this post between now and December 28th 2022! If you have questions/comments/concerns, just ask below. Right now, I’m looking for at least 3 folks to participate. 

What is Replay?

Replay is a “time travel debugger” for JS. Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t a video — everything from the browser is recorded so you can inspect anything from 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. elements, JS execution, network requests, user events, and even the state of your ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. components at any moment in time.

Replay refers to both the Replay Browser (recording) and the Replay App (debugging). One major use case for using this kind of tool in the WordPress project is to reduce time to resolution on bug fixes i.e. writing steps to reproduce & reproducing issues locally.

 Here’s more information:

  • An app for Linux, MacOS, and Windows that is a custom browser that can record all actions and background processes of any website.
  • Using the Replay browser, you can record problems on any website and upload them to the Replay WordPress Team. Once recorded and uploaded, you may add comments to the timeline or simply pass it off to a developer with a link or inside a GitHub issue.
  • Developers can then view the recordings and see exactly what’s happening and when rather than needing to look at screenshots of the console or replicate on their end.

You can learn more in the Replay Documentation

Why Replay? 

@chanthaboune brought Replay to the FSE Outreach Program’s attention as a tool that could help supercharge our bug finding and fixing. Replay’s OSS commitment, including free support, makes it stand out as a possible option to consider. Rather than trying to roll it out on a broader scale, this is an attempt to do so on a small scale first to understand what does and doesn’t work to help determine if it might be a tool the broader WordPress community can use in the future. This will be trialed for the next three months, dependent on volunteer capacity. Feedback will be collected and shared along the way before bigger decisions are made. 

What kind of issues will this help with?

While just about any issue will benefit from the additional information captured by replay.io, there is a sweet spot in issues that are difficult to reproduce and that seem environment dependent. Here’s a recent example with a performance concern ahead of WordPress 6.1 where this would have helped cut down on resolution time.

Who will be able to access the recordings? 

Only those with developer seats can access certain “time travel” features of DevTools e.g. Print Statements of the replay app. Various developer seats will be given as needed based on the issues filed. I (Anne) will handle that since I can monitor the funnel of issues created through the FSE Outreach Program while we explore this.

How long will these recordings last?

As of now, Replay guarantees the recordings will be fully operational for 3 months. However, new features might make recordings lose information such as in the developer tools.

Do I have to download this app to make recordings?

Yes, there is a firehose of information that it’s tracking that include all click interactions and everything happening at all levels of the code, network, etc. There’s no way to do this in regular browsers that isn’t terribly difficult or tedious to the point of being useless.

Do I have to use this browser as my primary?

No, we recommend only using the native application when doing actual recordings.

How long can my recordings be?

As of now, anything more than 2-3 minutes gets difficult to use however they are working on improving this.

Privacy & Security Questions

See here.

#fse-outreach-program, #replay-experiment