Tag Archives: full-site-editing

Pooja Derashri 3:48 pm on September 26, 2023
Tags: #6-4, , , full-site-editing   

Help Test WordPress 6.4

Get ready for the next big release in the WordPress world! WordPress 6.4 is set to launch on November 7, 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.4 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage in 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 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.

Key Features to Test 🔑

Style

Global Styles RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

This release introduced a handy feature that allows you to reset global styles back to their default settings with ease (52965). With this enhancement, you can effortlessly reset any changes made to global styles back to their original state. To try out this feature, simply make a few revisions to the global style and then open the revision panel. You’ll see a list of all the revisions, and at the bottom, there’s an option called “Reset to Default.” Click on it to return to the original settings.  Now, you only need to go through one revision check instead of two (53281). Previously, the revision panel was only available after two styles of revisions were saved in the database.

Please help test global style revisions with this video to guide you:

Twenty Twenty-Four Default Block Theme

Twenty Twenty-Four default theme is set to launch in 6.4. The theme for the year 2024 will use new design tools to make websites look better and be easier to edit. It will have special designs for three groups of people: entrepreneurs and small businesses, photographers and artists, and writers and bloggers. Here, you can find Related Gutenberg Issues and PRs.

Please help test the default Twenty Twenty-Four theme, this is the demo video:

Interface

Write with Ease

In this release, ongoing efforts are being made to ensure a smooth and enjoyable writing experience in WordPress(#53305). These enhancements include the addition of new keyboard shortcuts and improvements in copying and pasting text from other sources. The Link preview feature (53566) now includes a convenient “Open in new tab” control, making it simpler to enable or disable this option. Additionally, toolbars for List, Quote, and Navigation blocks have been enhanced to make your writing and editing process more efficient.(#53699, #53697). Please help test using keyboard shortcuts and copying and testing text from other sources.

Please help test the improved writing experience for list items with this video to guide you:

Please help test the capture toolbar in the quote block with this video to guide you:

Please help test the ‘Open in New Tab’ feature with this video to guide you:

Improvements to List View

The List View in WordPress has undergone some great enhancements. Now, managing your content is even more straightforward and user-friendly. You can easily rename Group blocks using a handy options menu that pops up. When dealing with gallery and image blocks, you can now see previews of your media to make sure everything looks just right. Additionally, resizing and duplicating blocks have become much more efficient, with keyboard shortcuts available for quick actions. The List View now allows the escape key to deselect blocks if blocks are selected(48708). These improvements in the List View make organizing and editing your content in WordPress a breeze.

This video is showcasing the use Escape to deselect blocks feature:

Please help test by renaming group blocks in the list view with this video guide:

This image showcases a media preview for the gallery and image blocks:

An image showcasing media preview for gallery and image blocks


Please help test by using keyboard shortcuts for duplicating blocks with this video to guide you:

 Improvements to the Command Palette 

The Command Palette has undergone several changes and improvements since its first introduction in WordPress 6.3. For example, you can now do more with blocks using new commands, including block transforms and the options to duplicate, copy, remove, and insert after/before. The Command Palette also looks different with a fresh design. Plus, it now supports adding commands without icons. If you’re using WordPress on a small screen, like a mobile phone, the Command Palette will work better for you. It also uses more consistent language and actions, making it easier to use. Lastly, there are improvements in snackbar motion, making your experience smoother. These changes make managing your WordPress site even easier and more user-friendly.

Please help test adding blocks by commands and registering commands without icons with this video to guide you:

This image shows you registering commands without icons.

This video is showing some improvement for the command palette on smaller screens:

Test with tweak and add more consistent commands:

This video displays snackbar motion, and you can test this feature by similarly giving commands.

Please check out more improvements to the recent updates made to the Command Palette.

Blocks

Block HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. (Previously Auto-inserting Blocks)

Introducing the Block Hooks feature, a reimagined approach to the earlier concept of Auto-inserting Blocks. Basically, Block Hooks is an 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. that developers can use to make websites more flexible. It allows one block to attach itself to another block and show its content before or after that block. You can also attach a block to a parent block and make it appear at the beginning or end of the list of child blocks inside it. (53987) 

Even though Block Hooks is mainly for developers, it also gives a nice experience to the end users by automatically inserting a block into a specific location. It lets developers place blocks where they want them to be and gives room for customization. The goal is to make block themes more adaptable with the help of plugins.

One thing to keep in mind is that the block using this API will only be auto-inserted if the original template or part hasn’t been changed by the user. This is done to respect the user’s choice. This API can only be applied with block patterns, template parts, and templates that come from the block theme files. It doesn’t alter anything the user has already created or changed on a website. 

Note: This feature is a more technical item to test. Check out this for a more detailed guide.

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

Now, you no longer need a full page reload when you navigate between pages in a Query Loop block. There’s a new setting that prevents full page reloads. This improved way of moving between pages is made possible by a special version of the Interactivity API, and it makes browsing smoother. Plus, you can also decide how many pages you want to show using the Query Page Numbers block for even more control. Query block: Client-side pagination (53812), make mid-size parameter settable for Query Pagination block. (#51216).

Please help test adding pagination in your query block. This video guides you through the pagination in the query block.

Client Side Pagination

List Block Enhancement 

In the List Block, a new feature has been introduced that allows you to merge consecutive lists instead of keeping them as individual blocks. This enhancement streamlines your editing experience by combining lists that appear one after another, making it easier to manage and format your content seamlessly. (52995)

Group Block Enhancements

Now, you can easily rename Group blocks to organize your content better (53735). This feature makes it simpler to identify and manage different sections of your page, streamlining your editing experience. Additionally, the introduction of background images for Group blocks brings more creativity and customization to your layouts. These enhancements empower you to create more organized and visually appealing content in WordPress. (53934)

Background image support to the Group block

Please help test by renaming the group blocks using this video guide.

Add Aspect Ratio to the Image Block’s placeholder

Aspect ratio controls to 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. block were introduced in the 6.3 version, and now, these helpful controls have been extended to the placeholder of the Image block. This enhancement offers greater flexibility, particularly when designing wireframe-style patterns that establish a layout for users to fill in with their content.

You can select the default coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./navigation-link variant within the core/navigation block, offering more flexibility and customization options for your navigation menus (50982)

Please test by adding navigation block and start customizing it with this video to guide you.

Add Lightbox Functionality for your Images

WordPress 6.4 introduces an improvement to the image experience with the new Image Lightbox feature. Recognizing the need for clarity in the user interface (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.), a dedicated Settings panel has been instituted for the image block. Within this panel, users can easily locate the Lightbox toggle, available both in Global Styles and Block settings.Display your pictures in an engaging way using the brand-new lightbox functionality. This cool feature will work with image blocks, so you can click on an image and see it in a bigger size right on top of your existing content. (51132)

General Block Improvements

  • Preformatted: Add margin and padding support. (45196)
  • Social Links: Add Threads Icon. (52685)
  • Verse: Enable line breaks. (52928)
  • Details: Add block gap support. (53282)
  • File: Add margin and padding support. (45107)
  • Column: Add stretch alignment (53325).
  • Image: Keep image size upon replacing an image (49982).
  • Buttons: Allow using a button element for button blocks (54206).
  • Post Content: Add block gap support (54282).
  • Post Content: Add color control support (51326).
  • Footnotes: Add link, background, and text color support (52897).
  • Footnotes: Add typography, dimensions, and border block supports (53044).

Patterns

Create your own Pattern Categories

Now, you can neatly group your patterns by categories when you create them. These categories are handy because you can use them to organize and find your patterns easily. You can also edit these categories in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. when you’re editing a pattern.

To ensure this feature functions smoothly, here are the steps to follow: Begin by adding various user patterns, both synced and unsynced, assigning categories to each (remember to hit ‘enter’ or add a ‘,’ after each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.). Then, navigate to the site editor patterns page and verify that the categories appear in the left navigation panel. Confirm that selecting a category displays the corresponding patterns accurately and that theme patterns continue to appear as expected. Check that all patterns are accessible under ‘All Patterns’ and that the search function operates seamlessly. Lastly, duplicate a theme pattern and ensure that the new pattern inherits the same category. Additionally, when adding a user pattern with the ‘Footer’ category, make sure it displays alongside the theme Footer patterns, taking into account the category slug distinction (theme patterns use ‘footer’ while the user category name should match this).
To make things even simpler, all patterns, whether they’re synced or not, are listed together in one place. There’s no need to look in different tabs for synced patterns; they’re all in the same section. (53837)

Please help test creating categories, adding synced and unsynced patterns, and assign them categories with this video to guide you:

Import/Export Patterns as JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. files.

To maintain compatibility with Reusable blocks, you can now import and export patterns as JSON files, providing a straightforward way to transfer custom patterns between websites. (54337) 

Please help test import and export patterns with this video to guide you:

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 November 7, 2023.

A big thank you to @annezazu,@annebovelett @coachbirgit, @ironprogrammer, and @rashiguptaa for reviewing and contributing to this post.

Changelog 🪵

2023-11-01

  • Changed Query loop enhanced pagination name to Force Page Load.

2023-10-06

  • Removed Font Library feature as it is punted(moved) to the WP 6.5 release.

2023-10-03

  • Update on Font library and link added to individual Help Test font library post.

2023-09-26

  • Initial post.

#6-4, #call-for-testing, #fse-outreach-program, #full-site-editing

Brian Alexander 12:00 am on June 27, 2023
Tags: 6-3, , , full-site-editing   

Help Test WordPress 6.3

Get ready for the next big release in the WordPress world! WordPress 6.3 is set to launch on August 8, 2023. Every major releaseMajor Release A set of releases or versions having the same major version number may be collectively referred to as “X.Y” -- for example version 5.2.x to refer to versions 5.2, 5.2.1, and all other versions in the 5.2. (five dot two dot) branch of that software. Major Releases often are the introduction of new major features and functionality. comes with exciting new features and improvements, and we need your help to make sure it’s the best it can be!

This is the first Call for Testing post for the 6.3 release. Be on the lookout 👀 for future posts that highlight additional enhancements in the release.

Stay up to date with the latest pre-release builds by checking the WordPress 6.3 Release Schedule for availability. For real-time updates and discussions, join the #core-test Slack channel. Engage in 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 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.

Key Features to Test 🔑

Interface

Command Palette

The new Command Palette (formerly “Command Center”) allows users to quickly navigate to specific pages, templates, or template parts, as well as offers an easy way to start to create new content in the site editor. From within the editor just use Cmd-k (macOS) or Ctrl-k (Windows) and start typing for a context-aware selection of commands and shortcuts. (49330)


For a brief video demonstration of this feature in action, see the Command Center Request for Feedback post.

Extenders can also find information on creating custom static, dynamic, and context-aware commands with this feature’s public API. (51169)

Improved Page Management

The site editor now allows site builders to manage pages, edit content, access page details, and even draft new pages to be published later. Look for the new Pages menu from Appearance > Editor. (50857, 50767, 50565, 47142)

Content Editing in Site Editor

This feature allows site authors to seamlessly switch between template and page content editing within the site editor. 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. improvements also highlight what’s being edited – template or content – and allow for a more efficient workflow when building out a site. (44461, 50857)

Distraction Free Mode in Site Editor

Distraction Free mode, previously available in only the post and page editor, now brings the calmness to the site editor, offering a 1:1 preview to site authors. (51173)

Block Theme Preview

Previews of block themes now launch in the site editor, providing efficient previews of locally-installed themes. To see this feature in action, navigate to Appearance > Themes and click “Live Preview” on any block-based theme.


This feature can also be accessed by appending the following to a site editor or frontend URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: ?wp_theme_preview=theme-slug where theme-slug is a locally installed theme to preview (e.g. twentytwentytwo). (50030, Trac 58561)

Using the Style Book in the Styles’ Site View

The Style Book can now be activated while browsing global style options for easier visualization of effects on various page elements. (50566, 50393)

Styles RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

This update introduces support for global style revisions in the site editor, providing the ability to review or roll back to a previous state. (50089)

Top Toolbar Improvements

The editor’s “Top toolbar” has been refined with better handling of the limited space in this area, and better accounts for browser viewport width limitations. (40450, 49634)

Blocks

Time to Read Block

This feature has been moved to a future version of WordPress so that it may undergo additional testing before release.

The new Time to Read block allows you to display the estimated time the average reader takes to read the current page or post. Letting readers know right off what their estimated reading time is helps them to decide if they should continue reading, or save the post for later.

Begin by adding the block from the block picker, or from an empty Paragraph block starting with the forward-slash (“/”) key, and start typing the block name: /time to read. (43403)

Details Block

WordPress now introduces the versatile Details block, offering a seamless way to toggle the visibility of content, such as very long text, code samples, or spoilers. This block comes with two new inner blocks: Details Summary and Details Content. The summary is always visible, and the content is collapsable to be shown or hidden when readers toggle it.

Add the Details block through the block picker, or from an empty Paragraph block starting with the forward-slash (“/”) key, and start typing the block name: /details. (45055)

Color and layout support for the Cover block

The Cover block now supports the text color design tool. The enhancement makes it easier for users and theme authors to customize the color for all inner blocks with a single setting. Along with this benefit, this change makes it easier to handle transforms from the Media & Text block. (41572)

Footnotes

The new Footnotes block is a powerful addition that automatically links and formats footnotes, allowing users to work efficiently while annotating content. Not an insertable block per se, Footnotes are activated by highlighting text in a block, and then in the context menu selecting More > Footnote. (51201)

Caption Styling

Theme authors can now create custom styles for Caption elements directly via theme.json. Once added, options become available in the Styles interface, and allow creators and users to customize captions without touching code. (49141)

Image Aspect Ratios

Adding a powerful feature to the Image Block that makes usage of this block much easier. Until now, to effectively replace one image with another, their size had to be the same. The image aspect ratio section solves this problem completely. New image size controller that comes with aspect ratio, scale, width, and height options. (51138, 51545)

Patterns

More Curated Patterns

The new “Curated” filter in the pattern directory helps users differentiate between CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-bundled and community contributed patterns.

Easier Pattern Creation

Effortlessly design and save patterns, just like the convenient reusable blocks you’re familiar with. Now you can easily create and save your favorite patterns as synced or unsynced patterns, saving you time and effort when designing your projects. You can find your saved patterns under Custom Patterns. (46248)

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 August 8, 2023.

A big thank you to @webtechpooja, @boniu91, @annezazu, and @costdev for contributing to this post.

Changelog 🪵

2023-06-28

  • Initial post.

2023-07-06

  • Adding notice related to Time to Read block, which will not be a part of WordPress 6.3.

2023-07-27

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

#call-for-testing

Adel Tahri 7:16 pm on February 7, 2023
Tags: 6-2, , full-site-editing   

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

Brian Alexander 5:08 pm on September 21, 2022
Tags: 6-1, , full-site-editing   

Help Test WordPress 6.1

Save the date! WordPress 6.1 is scheduled for release on 1 November 2022. This release is the culmination of over 360 updates and 370 bug fixes. Check out last week’s 6.1 Product Walk-Through for a visual overview of major features shipping with 6.1.

For a list of when each pre-release build will be available for download, refer to the WordPress 6.1 Release Schedule. And drop by the #core-test Slack channel to chat about testing, attend a weekly scheduled team meeting, or a test scrub!

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 here for complete instructions.

Testing Tips 💡

At a high level, here 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 with a tool icon (🛠) is more technical, and may be best suited for those comfortable with more advanced testing steps.

Key Features to Test 🔑

Twenty Twenty-Three

WordPress 6.1 introduces a new default theme, Twenty Twenty-Three (aka TT3). This theme ships with 10 unique Styles variations, the result of a month-long community design collaboration, with submissions from around the globe.

Twenty Twenty-Three theme style variants.

In addition to activating and testing the base TT3 theme itself, please refer to the official Styles documentation for more information on accessing and modifying theme Styles.

HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer Patterns

This feature has been moved to a future version of WordPress.

Community designers have banded together to produce a new collection of Header and Footer block patterns for use in all themes.

To help make finding patterns for specific use, new categorization has been added to the pattern chooser to identify patterns by type. To test, look for the new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. dropdown, and explore the different options available for your theme.

Quote and List Block Updates

The Quote and List blocks have been supercharged, and now support inner blocks. For instance, Quote can now contain any inner block, such as Heading, Image, List, or even another Quote. And List items are now treated as individual blocks, which makes sorting much easier than before.

Revamped Quote block with support for inner blocks.

To test these updates, create and reorder lists, and make quotes more expressive with inner block options.

Fluid Typography 🛠

The first version of fluid typography support via theme.json is shipping with WordPress 6.1, which allows theme authors to set text that adapts to the user’s viewport.

Fluid typography support in action.

For details and testing instructions, see Testing and Feedback for the Fluid Typography Feature.

Classic Theme Block Template Part Support 🛠

Now classic themes can adopt block-based template parts through a new add_theme_support( 'block-template-parts' ); flag. For guidelines on testing this feature, see the Testing and feedback for using block based template parts in classic themes post.

New Appearance > Template Parts menu after block-based template parts opt-in.

More Design Tools

The WordPress editor has undergone extensive usability improvements, including better consistency between editor design controls, and extending style options to a broader range of blocks. These updates allow for more fine-tuned design control over content, enhancing the editor experience.

Demo of new Gallery, Image, and Button block style options.

These improvements have been extended to a long list of block types that can be tested in 6.1:

Updated design tools in WordPress 6.1.

Additionally, detailed information on testing specific block features can be found at the following issue tracking links:

Enhanced Layout and Styles Control 🛠

With 6.1 comes a new Style engine, bringing with it numerous opportunities to optimize and improve style management in themes. Explore each of the following features for information on testing this new functionality.

Appearance Tools for Any Theme 🛠

This feature has been moved to a future version of WordPress so that it may undergo additional testing before release.

Themes that don’t use a theme.json file can now opt-in to enable the editor’s global styles Appearance Tools. To test, add the add_theme_support( 'appearance-tools' ); feature support flag to your theme, and see the Appearance Tools documentation for supported CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. styles.

Note that adopting Appearance Tools in a classic theme can introduce some unexpected visual changes when applying new default styles (via the support flag) or user-selected styles (modified through the editor). Therefore adopters are encouraged to test thoroughly to be aware of how their individual theme is affected.

Block Theme Spacing Presets 🛠

As an alternative to providing users with full control over spacing, block themes can now define preset spacing ranges in theme.json to ensure greater consistency throughout the theme.

Example showing padding constrained by preset values.

To learn more about how to implement and test this feature, see these PRs: padding presets, margin presets, and block gap presets.

Pattern Block Locking 🛠

Locking features have been extended to Patterns, providing theme authors control over the intended design, and providing users with a more streamlined experience while building out content. See the "templateLock":"contentOnly" update for testing instructions.

Content lock usage within a Pattern.

Locks on blocks also get a much desired update with the ability to quickly apply selected locks to all blocks within a container block, rather than applying locks individually to each inner block. (Now say that ten times fast! 😉) Applies to Column, Cover, and Group blocks. Testing information for this feature can be found at the content lock PR.

Expanded Template Options

The template selection and creation process in the editor has been extended and streamlined, offering an easier way to find, apply, and modify templates, template parts, and patterns – all without code. This has been achieved through the following updates:

To test these updates, begin by creating templates for specific categories, pages, and more. You can also add and edit templates for custom posts types and taxonomies. Get very specific and offer a different template for single categories or tags.

Featured Images in Cover Block

The Cover block now supports using 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. to streamline users’ content editing workflows.

Cover block’s new “Use featured image” option.

To test this feature, refer to the featured image in media placeholder PR.

Starter Patterns for All Post Types 🛠

Theme authors now have the ability to include patterns for any post type — including custom post types — as well as the ability to prioritize these patterns for their users.

To test this feature, authors can add a patterns folder to their theme, and add these two sample files: new-event-announcement.php and event-recap.php (provided courtesy of #fse-outreach-program). Then try adding a new post to confirm that these custom patterns appear.

Also refer to the ability to use creation patterns for other post types PR for more information on testing starter patterns.

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 1 November 2022.

Changelog 🪵

  • 2022-09-20
    • Initial post.
  • 2022-09-29
  • 2022-10-11

A huge thank you 🙏🏻 to @annezazu, @boniu91, and @dansoschin for review and contributions to this post.

#6-1, #full-site-editing

Brian Alexander 6:17 pm on April 12, 2022
Tags: 6-0, , full-site-editing   

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.
annezazu 10:55 pm on February 25, 2022
Tags: , , full-site-editing,   

FSE Program All Things Media Summary

This post is a summary of the All Things Media exploration for the FSE Outreach Program. Coming out of a pause from 5.9, it was so encouraging and wonderful to see the wider community help out with this exploration in the following ways: 

Shout out to the following folks as first-time contributors to a call for testing: @patrick-b, @ndiego, @beckej, @lidialab. Get excited – you now have a testing contributor badge on your WordPress profile!

High-level summary

While normally, there are some overall sentiments to share, this exploration was so wide ranging it’s hard to pull out a few quotes to ground the following feedback in. Instead, here are some patterns seen across the varying areas below that help bring together the feedback more cohesively: 

  • Emphases on making attribution easy while also allowing for the ability to 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. out images that require it, as few seem keen to use images that would. 
  • Inconsistency with tooling, whether using duotone to select a custom color or trying to crop an image in a gallery 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.. 
  • Desire for more expansive options, including featured images and adding YouTube videos as a background. 
  • Simplifying layout controls and increase in patterns to make it easier to place your content exactly as you’d like in a HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or as a full width visual. 

In each section, the items are divided when appropriate into previously reported vs new categories in order to better understand what was underscored as part of this exploration compared to what was found. 

Confirmed bugs

Listed below are confirmed bugs that break expected functionality or the experience of different features. 

Previously reported: 

New issues: 

The default dimension is highlighted as 100% but in-fact if clicking on 100% again usually modifies the image size on the editor. It is a bit confusing.

@alanjacobmathew in this comment. 

Feature Requests

Throughout each of these feature requests, there’s a clear desire for better and more consistent tooling, from background support in Group blocks to having a focal point picker for a 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.. It’s obvious there’s a dance to get right in adding more features while also creating a more consistent and intuitive experience in handling media in the Site Editor. 

Previously reported: 

New: 

Where one can define specifics on upload. Is it a bmp or other none web format have it be converted to a jpg. Have larger images downscaled to a kind of max image size. Etc. 

@paaljoachim in this comment

A uniform way to import images from external sources. There’s some inconsistency here that can be very confusing.

@trynet in this comment.

Having a way to include Featured images in a variety of blocks, such as Cover, would be amazing. This is in scope for 6.0, but it’s the biggest thing I would like to see regarding media and would enable a lot of interesting patterns.

@ndiego in this comment.

However, I would like to see a range of filters available to users. If this is too much for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., perhaps a standard filter-registration system for developers might be in order.

@greenshady in this WP Tavern post. 

General Usability Feedback

As seen in other calls for testing, the experience of easily manipulating a Header proved difficult, whether trying to add a background image, trying to get alignments exactly right with your Site Logo, or in using various aspects of duotone. Tied to this, confusion continues around Layout controls with simple tasks like making a Cover block full width proving to be frustrating and further underscoring the need to simplify these concepts. 

Previously reported:

New: 

I went down a weird rabbit hole where I couldn’t figure out why we had the header block and the header template parts. I mean, what if I wanted to have two different headers with wildly different information in them? Whenever I changed the main header block (anything living inside it), it changed it in all the header template parts, and I found that very confusing and frustrating. I ended up removing the header block inside the header templates and keeping things just in groups. That made way more sense to me.

@aurooba in this comment.

I had trouble making my cover image full width. It’s still a bit odd to me that some controls only show up in certain situations, and in this case, because my cover was part of a group, I couldn’t make the cover full width. I’ve been teaching people to use that list view to try to get around that.

@beckej in this comment.

This is tricky and I bet is the hardest step. “Header” is not clearly defined. I bet most folks would go into the Site Editor and try to add a background image to the Header template part block. Also most block-themes have a Group block wrapping the inner content of the Header part, and Group blocks also do not support image backgrounds (yet). So you have to modify the content in your Header by placing it inside of a Cover block and then add a background image to the Cover block. This takes a LOT of in depth knowledge of the Site Editor to accomplish.

@ndiego in this comment.

Say I’m editing the padding dimension, then goes to modify the duotone, the entire right 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. goes to the top(back to media settings) and opens all the closed settings, which affects the user workflow. This also happens when changing the ‘alignment’ to ‘none’ or ‘full width’.

@alanjacobmathew in this comment.

If I insert 2 headers, applying changes to one affects both the header. Don’t know why it is happening.

@alanjacobmathew in this comment.

Thoughts on attribution

We chatted about this on the hallway hangout for this exploration (starting at 16:00 and again around 26:58) with thoughts on how to learn from tools like Pressbooks, how to make attributions more magical by reusing theme styles when adding them, and how to encourage best practices for folks. In general, folks were not keen to use images that required attribution as one can see in the quotes below.

This question evoked a strong negative reaction for me. I don’t know it means that attribution info wouldn’t be removable? Would it be watermarked on the image? Are we talking about metadata. Either way, if you can’t remove attribution from an image visually, I would never use such an image or images from such a resource.

@aurooba in this comment.

As long as we gave end users a few options, I really like the idea of making it easy for others to utilize the open-licensed images, and help guide them to do best practices.

@beckej in this comment.

I understand why this would be necessary in some circumstances, but I personally would not use such an image on my site.

@ndiego in this comment.

It’d be great to have a way from the media library or block settings to append any attribution required AND define where that displayed in templates. I’d like to display the attribution before post comments and after post content.

@courane01 in this comment.

General insights/questions on other photo libraries

We chatted about this on the hallway hangout for this exploration (starting around 24:41) mainly discussing how important it is that an 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. solution rivals a paid one. Generally speaking, folks mentioned the following external image libraries outside of Openverse: Unsplash, Rawpixel, Pexels. Some questions remain as you can see in the quote below:

How might this work for other media types, such as audio and video? Would we want to hotlink it/embed from the source? What’s the risk if the media later is no longer hosted there? But also: hosting many audio and video files within most hosting environments is not ideal. If we make it easier to move mixed media from Openverse to the Media Library, what are the trade-offs?

@courane01 in this comment.

Desire for improved media management

A longstanding conversation in the WordPress project is around having better media management from folders to better filtering and more. This desire held up with a discussion around whether Openverse might be able to solve some of these issues as a media hub. Here’s a video from @paaljoachim expanding on the idea:

This has been a longstanding request in the WordPress community, but better media management in the Media Library (i.e. folders) would be extremely helpful, especially for site with 100s of images.

@ndiego in this comment.

Watch feedback videos

Folks were kind enough to record videos of themselves walking through the experience that I wanted to reshare below as it’s neat to see folks in a great bandwidth medium share their thoughts:

From @paaljoachim.
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. from @aurooba stream.
From @beckej.

#fse-outreach-program, #fse-testing-summary, #full-site-editing, #media

annezazu 7:26 pm on February 23, 2022
Tags: , , full-site-editing   

FSE Program Testing Call #12: Hyping Headers

This post is the twelfth 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

With WordPress 5.9 out in the wild, it’s time to start revisiting some common workflows that we’ve tested earlier versions of that have new tools, options, and more to explore. In the case of this test, we’re going to customize a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. using everything from the navigation block to template part focus mode to then reuse this personalized header in a different template. Along the way, we explore how patterns are integrated into the experience, new dimension control options, and improved 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.. While going through the experience, think about what would make it even easier and more intuitive to use as that’s ultimately the aim!

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal 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. 
  • Use WordPress 5.9 (downloadable here).
  • Use the Twenty Twenty-Two theme. If you’d like to repeat the test or switch things up, you can always use a different block theme.
  • Use 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/ 12.6 (latest version). 

Testing Instructions

Setup Instructions: 

  1. Have a test site using the latest version of WordPress (5.9). It’s important 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. Create four different pages with different titles to add to your menu under Pages > Add New. No content in the pages are needed. 
  4. Install and activate the Gutenberg 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.6.
  5. By the end of these steps, you should see a navigation item titled “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.) under Appearance. If you don’t, you aren’t using a block theme and need to switch themes. 

Testing Instructions:

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.

These instructions are intentionally more general to help you make the Header you create your own, to find more points of friction, and in case you are using a different block theme. At a high level, you should explore a few things with this test so, if the steps don’t align with what you see, either switch to the Twenty Twenty-Two theme for ease of use if you aren’t using it already or ensure you cover each of the features mentioned in the Overview section. 

  1. Navigate to Appearance > Editor (beta). This will automatically open the site editor to the template powering your homepage. 
  2. Using the List View, select your overall Header provided by your theme. If you’re using the Twenty Twenty-Two theme, you will see that it has provided multiple header options by selecting the “Replace” option in the block toolbar. Select whatever header you’d like to edit. Here’s a screenshot of what to expect here if you have this option.
  3. From there, enter the isolated template part mode to focus just on editing the Header in isolation. You can find this mode by selecting the overall Header template part > Opening the three-dot menu > Selecting “Edit Header”. You can learn more about this mode and the various ways to find it in this post. 
  4. Once there, build out and customize your navigation block by adding the four pages you created earlier. Keep in mind that you can create draft pages that you will need to publish later in order to have them show up on the front end of your site.
  5. Continue to customize your Header to your liking, whether by using dimension controls in blocks like the Group or Row blocks (depending on what your theme offers), by adding any additional blocks (Site Tagline, Site Icon, etc), or by exploring more options in the navigation block.
  6. When done, select “Back” to return to your homepage template and make any additional changes you might want when seeing the template part in the wider template once more.
  7. From there, select Save and go through the saving 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
     to save all the changes you’ve made. 
  8. After saving, open the W menu > Templates and select another template where you’d like to ensure it uses the Header you just customized (for example, the Blank template). Open that template and, if the Header isn’t in place, add it in however you see fit before saving. 

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing while creating or reusing the Header?
  • 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 and more intuitive?
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 16th, 2022

#fse-outreach-program, #fse-testing-call, #full-site-editing

annezazu 11:10 pm on February 2, 2022
Tags: , , , full-site-editing   

FSE Program Exploration: All Things Media

With WordPress 5.9 shipped, the big pieces of full site editing are out in the open ready for feedback. Rather than digging once more into these pieces for now, let’s leave that to the wider world to absorb and switch into an aspect of site building that can be very make or break: the role of media. Whether it’s setting a 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. or adding a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. image, there are tons of ways media touches all parts of building a great site. 

Like last time, the focus of this exploration is to think with a more long term, “wishful thinking” perspective in order to gather useful insights that will help inform the design of media related experiences going forward. This is achieved by guiding you through some common tasks for site building with media, and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen.

As you look over the post, remember that you can engage with all of the items or just one of them! Either way, it’s all helpful.

Brief Overview

Part of why we’re doing this call for testing is because there are a few new projects and tools around media in the WordPress project that you might have missed: the WordPress Photo Directory and Openverse. 

The WordPress Photo directory is currently in 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., and aims to offer a curated source of high-quality images. By adding your photos there, the photos will automatically appear in Openverse, a search engine for openly licensed media with over 600 million items to use free of charge. Right now, these are standalone tools but, in the future, there will be huge opportunities to integrate them directly into the WordPress experience. This exploration will help inform this very early work that’s also in line with various 2022 goals. 

To read more about the WordPress Photo Directory and Openverse, check out this comprehensive post sharing everything you need to know.

Task 1: Explore what’s currently possible 

These tasks are purposefully open ended as there’s often a few ways to accomplish them. When you respond below, share what approach/steps you took and why! Any bugs you find too, report away in your comment. 

  • 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. to a Cover 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. with an image or video in it and add text over top, adjusting the opacity as needed. 
  • Add an image to the background of your header.
  • Add a caption to an image. 
  • Crop or rotate an image in a gallery block. 
  • Add an external non-copyrighted photo to your post as a featured image. Bonus points to share where you searched for the image and where you normally do so.
  • Change the size of your featured image for your posts by editing your post template. 

For this exploration, it would be advantageous to use a block theme since this is meant to capture media in the context of full site editing. As a result, please follow these steps:

  1. Set up a test 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. 
  2. Install and activate a block theme from the options listed in the theme directory. 

Task 2: Describe what you’d like to see

As you go through the above experiences, consider the following questions as a way to reflect on what you’d like to see in the future. This could be everything from being able to use a featured image as a background of a cover block to having more built in controls to style your images to rethinking featured images in general. Don’t hold back and don’t worry about how practical an idea might be. This is just to get a sense of what folks might want to do in the future.   Answer one, all, or none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • How would you like to see Openverse or the WordPress photo directory integrated into the experience?
  • What comes to mind when you think about Patterns and media?
  • What workflow improvements can you think of? What was hard to accomplish? 
  • What basic tasks do you find you have to do outside of WordPress to get your media just right and how would you like to see those tasks integrated into the experience? 
  • How would you feel about using an image where attribution information couldn’t be removed? What about an image where you can not make significant changes?
  • Anything else? Think big!

Please share feedback by Wednesday, Feb 23rd, 2022

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM 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/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

Join a hallway hangout on Feb 16th, 2022 @ 5:30PM UTC 

If you want to dig into this exploration more and chat about All Things Media, join @fcoveram and @annezazu in an upcoming hallway hangout. As a reminder, these are casual, open calls that anyone can join and leave as they’d like, have their video on/off, talk or just listen! It’ll last under an hour and will be recapped on Make Test. 

To join, head to #fse-outreach-experiment in Make Slack where a zoom link will be shared at the time of the hangout. 

#fse-exploration, #fse-outreach-program, #fse-testing-call, #full-site-editing

annezazu 9:32 pm on November 30, 2021
Tags: , , full-site-editing   

Help test WordPress 5.9 Features

With WordPress 5.9 slated to ship on January 25th, 2022, this post seeks to consolidate ways for folks to help test specific features that will be included in this release. This is meant to bolster and support overall 5.9 testing efforts. As a result, expect that FSE Outreach Program calls for testing will be on pause ahead of the FSE related features landing in WordPress 5.9.

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

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

  • Update channel to “Bleeding edge”
  • Stream options to “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”

If you need more specific steps, here are more detailed instructions you can follow. 

Testing Tips

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

  • Try testing across different browsers.
  • Try testing in different languages. 
  • See what features look like on different screen sizes.
  • Try using just your keyboard or a screen reader.
  • Explore using 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. 

Features to test

Twenty Twenty-Two Default Block Theme

When picking a theme to use for your test site, please try out the Twenty Twenty-Two theme. It’s the very first theme that’s block based and needs thorough testing as a result. Here’s where you can read more about this theme. You can test the theme by installing the Beta and activating Twenty Twenty-Two from Appearance > Themes. To report issues with the theme, you can do so here.

Block theme flows 

Since Block Themes open up the opportunity to edit more parts of your site, new flows have been added to make it more intuitive to access items, like a template editor, where you can make the changes you want to your homepage or 404 page. These workflows and new features need your help to test! 

For detailed testing steps around how best to test these workflows, please follow this call for testing that covers using Styles, Template Part focus mode, and more.

Theme blocks with a focus on the Navigation block

As Full Site Editing is a collection of features that allows more items to be easily edited without knowing how to code, new blocks were created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match the functionality that used to be in themes. While a number of theme blocks were introduced in WordPress 5.8, there’s always more work to be done, including shipping even more theme blocks in future releases!

For detailed steps around how to test the navigation block, please follow this call for testing that covers creating two different menus. 

For detailed steps around how to general test theme blocks and a complete list of blocks, please follow this call for testing. 

List View

List view has a few enhancements to keep in mind, including the ability to drag & drop blocks, and the ability to collapse sections to make it easier to navigate complex content. As you explore 5.9, try using List View in various situations to ensure it’s performant and easy to use. 

Design tools

The effort to bring better and more consistent design tools continues to progress with new options added, a more intuitive interface, and more. With just a few combinations of these settings, you can create vastly different layouts from a few simple slight changes to more radical and complex options. 

While a ton of tools have been added to various blocks, there are just a few to focus on for testing:

  • Buttons block: block gap, border controls, dimension controls (padding).
  • Columns block: block gap, dimension controls (padding).
  • Navigation block: flex layout, block gap, layout controls (vertical and horizontal, alignment).
  • Group block: layout controls, dimension controls (padding)
  • Cover block: duotone, dimension controls (padding, min height).
  • Social Icons block: layout controls (vertical and horizontal, alignment), block gap, dimension controls (margin). 
  • 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. block: duotone, dimension controls (width, height, margin, padding).

Gallery block 

Thanks to a Gallery Block refactor, you can now use the same tools that are available for individual image blocks on each image in the Gallery Block! This added flexibility means you can do more customization – from adding links to each individual image, inline cropping to edit on the fly, apply unique styles for more visually compelling images and apply an array of duotone filters. You can read more about this change. 

The following items are a high priority to test:

  • [Technical] If you are a 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 or theme author that has used the Gallery block previously, please follow the instructions here to ensure you’re prepared for 5.9.
  • Test backwards compatibility by creating a Gallery Block with WordPress 5.8.2 and switching to early releases of 5.9. 
  • Explore using the Gallery Block tools itself. Try cropping images, rearranging, adding alt text, and more. 
  • Test against third party plugins that you might use for galleries and ensure the transformations work. If they don’t, it’s best to contact the third party plugin to let them know.

For additional context, please note that the new Gallery block is included in Beta 1, but the auto migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of existing Gallery blocks will be in Beta 2. As a result, for Beta 1, you’ll be able to test the new Gallery block by adding a new Gallery, but, in order to migrate an old format Gallery block, you’ll need to do so manually using the Update button in the block toolbar.

Block pattern explorer

The experience of adding patterns from the Inserter just got a refresh with the introduction of a new modal that allows you to see patterns in a more organized way with larger previews. In terms of testing, the items to cover are quite simple:

  • Select and add patterns to your content. 
  • Scroll through different pattern options.

General updates coming to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

Outside of these more specific features, there are also some general updates coming to this release that would be advantageous to have tested:

Where to report feedback

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

Thank you to @justinahinon @boniu91 @cbringmann @hellofromtonya and @webcommsat for reviewing and contributing to this post.

#5-9, #fse-outreach-program, #full-site-editing

annezazu 9:52 pm on November 8, 2021
Tags: , , , full-site-editing   

FSE Program Testing Call #11: Site Editing Safari

This is the eleventh call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or via DM to me (@annezazu). 

Overview

Feel free to jump straight to the testing steps if you’d prefer to get started right away.

This is the final call for testing before WordPress 5.9, which makes it a wonderful and high impact one to be involved in as it’ll help improve the experience for a large portion of the web before it ever launches. In order to get the most out of this call for testing, the instructions are going to change as the test goes on and as we move forward in the release cycle. For example, at the start of this test, folks will be encouraged to use TT1 and, by the end of the test, Twenty Twenty-Two will be recommended. For now, here’s a high level overview of what is going to be tested:

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme template and template part editing UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.

While certain calls for testing have ventured into the Site Editor, that experience as you’ve known it is shifting for 5.9 in order to offer a more refined and scaled down experience to manage templates and template parts within a block theme. With a condensed browsing tool and a new placement in wp-admin under Appearance, this might feel more like a taste than the full experience of the Site Editor as you’ve come to know it.  

Styles Interface

While 5.8 laid the groundwork for a cohesive style system, 5.9 sees the introduction of a beautiful user interface that allows folks to interact directly with various style properties. You might have heard of this work under the project name “global styles”! While we’ve had calls for testing around theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., one of the mechanisms related to the overall Global Styles project, this is the first time Styling itself is being explored. Currently, this interface displays two large groups of design focuses: blocks and elements. Elements represent things that can be styled globally and across blocks (such as “text”, “links”, “captions”, etc). This is a fancy way of saying you can easily change the typography of your entire site or the unique coloring of your buttons block all from the same interface. 

Patterns Explorer

With block patterns on the rise, a new explorer modal has been shipped to make it easier to navigate between patterns and find the exact one you want to use. This sets the groundwork for future integration with the Pattern Directory. This test will briefly explore this new experience.

Twenty Twenty-Two

Twenty Twenty-Two is the latest in a long line of default themes with a twist — it’s a block theme first and foremost built for the various site editing tools. As a result, midway through this call for testing, folks will be encouraged to test using this theme and report back their findings. Read more about this groundbreaking default theme here. 

Testing Environment 

This will adjust as the test goes on and the release cycle progresses to ensure folks are testing the latest and greatest. 

Here are the steps to follow to properly set up your testing environment for this specific all for testing. If you’re already ready to go, jump to the testing steps below.

  1. Use a test site with the latest version of WordPress. Right now, that’s 5.8.2. It’s important this is not a production/live site. 
  2. Install and activate 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/ 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.0.
  3. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  4. Create a few posts with featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created previously for these kinds of tests via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.
  5. Go to the website’s admin.
  6. You should now see a navigation item under Appearance titled “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.)”. If you don’t see that, your environment isn’t correctly set up. If you get stuck here, just comment on this post or ask in #fse-outreach-experiment for help!

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing steps

Personalize your homepage

1. Go to Settings > Reading and set “Your homepage displays” to show “Your latest posts”.
2. Once set, go to Appearance > “Editor (beta)”. This will open up to show a template that displays your homepage.
3. From there, change your homepage to your liking! This could mean adding in a navigation block, changing the font size of your Post Title Blocks, adding a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to your Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. blocks, removing blocks, adding blocks, and more. 
4. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. 

Set your styles 

5. From there, click on the Styles icon in the upper right corner to access the Styles interface. 
6. Once open, personalize the four sections as much or as little as you’d like: Typography, Colors, Layout, and Blocks (to customize individual blocks). For example, you can click on Colors > Palette > Use the + sign to add your own custom color option for use throughout your content. 
7. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. 

Add a buttons pattern and use layout controls

8. From there, open up the Inserter and switch to the Patterns tab.
9. Select the “Explore” option, navigate to the Buttons section, and pick the “Simple call to action” pattern.
10. Once added, use the + option to add in a second button. 
11. From there, select the overall parent Buttons block and open the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings to customize the layout to your liking. Here’s a quick video in case you get stuck.
12. Save the changes. 

Add a duotone filter to your Archive template

13. Click on the W menu in the upper left hand corner > Under Editor select “Templates” > Select “Add New” > Select “Archive” (currently not possible to create a General template from here).
14. In the content, add in the Post Featured Image block and add in a duotone filter. 
15. Add in any additional blocks you’d like and save the changes when you’re ready. 
16. Head back to your dashboard by clicking on the W icon in the upper left corner before heading to Posts > All posts. 
17. Edit one of your posts with a featured image and assign your updated “Archive” to this post. Here’s a quick video in case you get stuck.
18. Save and view the post to see the filter applied!

Edit your HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.

19. Return to Appearance > Editor (beta) and, using List View if you need to, select your Header template part. 
20. Select the three dot menu in List View or in the block toolbar and select “Edit Header”. This will take you to the focused template part mode. 
21. From there, make a few changes to the template part (add items to the navigation block, change the size of your Site Title, etc) and use the horizontal drag handles to see how your header will look at different sizes! 
22. Save the changes.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience properly save your changes? 
  • Did you find any features missing? 
  • What did you find anything 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 in the editor matched what you saw on your site?
  • How did your content look on a smaller device or screen size? 
  • How do you think this will impact your current workflows? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by December 7th, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

Props to @kellychoffman for helping review this call for testing.

Changelog

Nov 10th: updated instructions to use Gutenberg 11.9 RC4.
Nov 12th: updated instructions to use Gutenberg 11.9.
Nov 13th: updated instructions to use WordPress 5.8.2.
Nov 24th: updated instructions to use Gutenberg 12.0, to change the phrasing around the browsing component, and to update the due date.

#fse-outreach-program, #fse-testing-call, #full-site-editing