annezazu 10:48 pm on September 18, 2023
Tags:   

FSE Program Testing Call #26: Final touches

This post is the twenty-sixth call for testing as part of the Full Site Editing Outreach Program and likely the final one with a title to match. For more information about this experimental program, please review this FAQ for helpful details and check out how it’s going to evolve. 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 6.4 on the horizon, this call for testing takes you through many of the major pieces set to land with this release:

Framing

You’re set to launch your new photography portfolio. You plan to add more content in the coming months so you want to ensure it’s well organized and well equipped for future tweaks/additions with new fonts and new patterns. When you originally started the site, you didn’t yet had a vision for how to finish it until now!

Testing Instructions 

For this test, please use the following pre-built site as we’ll be rapidly switching between 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/ versions:

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

Manage fonts

  1. Head to Appearance > Editor > Styles > and select the pencil icon to open up the Styles panel.
  2. Select Typography to view a list of active fonts and click the “Aa” icon to open up font management.
  3. Upload a new font file using the drag and drop option. You can download a font from https://fonts.google.com/. 
  4. From the font manager, select “Inclusive Sans”, a previously uploaded font, and choose “Delete” to uninstall this option. 
  5. From there, close out of the font manager, and change the Headings and Text font option to the new font you uploaded.
  6. Save changes.

Get your site organized 

  1. Use Command + K or evoke the Command Palette by clicking on the Top Toolbar field and use it to open the List View (purposefully leaving out the exact command).
  2. Select the Columns block containing the “Want to work with me?” text and, again using the Command Palette, group this block.
  3. From there, you’ll see two different Group blocks on the page. Select each and, using the three dot menu in List View, find the “rename” option and give each a different name.

Create a pattern 

  1. Select the “Want to work with me?” Group block with its new name and open the block settings.
  2. Under the Styles tab, add a black and white background image from the Media Library. Adjust the colors of the text as needed afterwards. 
  3. Using the three dot menu, create a new synced pattern for “Want to work with me?” content and add a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of your choosing.

Finish your Portfolio page

  1. Using the Command Palette, open the draft page titled “Portfolio”. On this page, you’re going to create three sections of photos “With People”, “Without people”, and “Black and White” to show off your work alongside a section of all of your photos already listed. 
  2. Add the unsynced pattern titled “Portfolio section” using whatever method of your choosing (Inserter with the + button in the top left or the Quick Inserter with the / option). 
  3. Using this pattern and the default content it provides, fill out the respective details including a proper heading, description, image with a set aspect ratio that epitomizes the rest of the images, and remaining gallery items. Here’s an example of what this should look like.
  4. Create all three sections following these steps: “With People”, “Without people”, and “Black and White”.
  5. Change the font for each of these headings to be different than the global option set originally in Styles (and ensure all options appear).
  6. Open List View and rearrange each section in a different order by dragging and dropping with help from the image and gallery previews. 
  7. As a finishing touch, select the first standalone image in each section, open the Block Settings 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., and toggle on the option to “Expand on click”. 

Swap templates

  1. Once done, open Block Settings and, under the Page tab, select “Pages” next to Template. 
  2. From there, you’ll see options “Edit Template” or “Swap Template”. Select “Swap Template” and choose the “Portfolio” option. 
  3. Before saving, change the Page status to “Published”.
  4. Save changes.
  5. Use the Command Palette to view your site. Notice this new Portfolio page is automatically included in your menu and that when you hover over the first standalone image in each section there’s an option to expand it and view in isolation. 

Announce your new portfolio and remove the Like button

  1. Return to the Site Editor and, using the Command Palette, start the process to add a new post. 
  2. Title the post “Announcing my portfolio” and write a brief paragraph, including a List block that mentions each portfolio section (“With People”, “Without people”, and “Black and White”). Notice that the block toolbar always stays with the overall list rather than each individual item. 
  3. Publish the post and view it. Leave a comment on your own post and notice that there’s a Like button available. 
  4. Go back into the Post Editor and, using the Command Palette, open the Single Post template. 
  5. Using List View, select the Comment Template and open Block Settings. Notice there’s a Plugin section with a Like Button option turned on. Turn this option off and save changes. 

Go further

From there, view your site, click around, and make any additional changes you’d like! Create new posts, create new patterns, or adjust your site’s styles. While this walks through an initial set of items, feel free to explore further based around the new features coming in 6.4.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier for site building and for writing new content?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by October 9th, 2023

#fse-testing-call

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

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 6:54 pm on August 15, 2023
Tags:   

Test Team Reps: Call for Nominations

Update: This call for nominations has been extended to 2023-09-23 00:00 (see comment below).

Update 2: Nominations for the 2023-2024 term are closed.

It’s time again to nominate the Test Team Reps who will serve for the next 12 months!

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

For a quick refresher of Team RepTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. roles across the project, please see the Team Reps post on Team Updates.

The Role

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

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

Test Team Rep duties include:

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

Qualifications

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

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

How Test Team Elections Work

Step 1: Call for Nominations 📣

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

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

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

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

⏰ The deadline for nominations is 2023-08-31 12:00 2023-09-23 00:00.

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

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

Step 2: Vote for Team Reps 🗳

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

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

Step 3: Announce Team Reps 🎉

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

Time to Nominate!

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

Props to @boniu91 for review of this post.

+make.wordpress.org/updates/

#team-reps

annezazu 11:58 pm on August 29, 2023
Tags:   

FSE Program Let’s Start From The Beginning Summary

This post is a summary of the Let’s start from the beginning call for testing for the FSE outreach program, the twenty-fifth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Shout out to @mdquer @olein @foosantos as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution! 

High level summary 

This call for testing focused on a “from scratch” experience using the big pieces from WordPress 6.3 without detailed instructions for maximum exploration, which is reflected in the lack of new bugs found and in a fair amount of usability feedback and feature requests. In particular, folks struggled immensely with figuring out how to change the sync status of an already created pattern and fumbled through using the Command Palette, with some left confused on how best to use this new tool. While no new bugs were found, Synced Patterns losing their alignment attribute and the Table of Contents 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.’s links not working on an initial save were noted by a few folks. Here’s what some folks had to say overall:

“The only thing to mention is for me is the command palette: The command palette is not satisfying for me. It works , but for me the problem are the keywords. I could not find > top toolbar or list view. As a normal user i would expect a keyword like – list view – should open the list view, or keyword – top toolbar – , should open top toolbar, that does not work for me. I like the new patterns section with synced and unsynced patterns.” @mdquer in this comment.

I’ve been trying to use the new command palette, but I honestly don’t know what to do there. I’ve used it successfully to switch to different pages, but I don’t know what the primary purpose of the command palette is supposed to be so I have no idea if I’m leveraging its capabilities at all…In general I feel like all aspects of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ have been improved by recent updates. @beckej in this comment.

Bugs 

No new bugs were found and replicated with the following known items raised instead:

Each of these touch on items planned for 6.4 and, in particular, the alignment attribute with synced patterns remains a repeated and well established pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. 

But it looks like the block does not work on previews only after the page has been published. As the preview does not have the correct structure. https://bluewinddesign.com/?page_id=385 (previewed page). Clicking one of the headings in the Table of Contents block the link anchor looks like this: https://bluewinddesign.com/resume/#head-3 . It went to a 404 page. @paaljoachim in this comment.

Feature Requests 

Many of these feature requests centered on the Command Palette, a feature new to 6.3 and slated for improvements for 6.4, with one request already completed for adding a Toggle List View command. With the growing number of design and styling options, two folks noted a desire to see the Style Book elevated and more readily discoverable, which aligns nicely with a currently open design issue on that exact topic. 

New

Previous

I found the autosuggest/listings to be varied in their accuracy. Some of them didn’t make much sense in their order compared to the actual search query. @jordesign in this comment.

The ‘View Page’ button exists in the old block editor, so it would be nice to have a similar experience. (My apologies if this has already been raised in an Issue). @olein in this comment.

After checking further, I realized that Style Book does something like that. In my opinion, Style Book should be the default option with a site preview alternative. Or at least highlight Style Book a bit more somehow. @foosantos in this comment.

Media & text block didn’t apply the border when I edited the image styles. The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now. @josvelasco in this comment

General usability 

Out of all of the usability feedback, a few themes emerged:

  • Changing just the H2 styles was hard to find, with folks going to the Styles > Blocks > Heading rather than Typography. 
  • Switching a sync status of a pattern after it’s been created proved to be nearly impossible to figure out. 
  • Writing in the Site Editor > Pages section has a few points of friction with the locked blocks experience. 

None of these tasks are necessarily niche to do yet prove to be tricky to navigate, with cumbersome steps or unclear 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. to navigate, like being unable to see the blinking cursor in a new page in the Site Editor.

New

Previous

Using the Style Book – I was hoping to be able to make changes to the H2 specifically while viewing a preview. It wasn’t made clear anywhere what the hierarchy of editing headings was to edit the ‘Heading’ element for styles that go across all headings, but could then make individual changes to different headings under Typography > Headings. @jordesign in this comment.

I typed into the Width box where it said Auto and wrote 100. The image is now smaller. I am wondering where the size drop down is? To select full, large, medium, small, thumbnail. Instead these options are inside the Resolution dropdown and that can be very confusing. @paaljoachim in this comment.

After checking for about 2-3 minutes, I really couldn’t find a way to change from Synced to Unsynced. Both for the original and duplicated. @foosantos in this comment.

I wanted to insert the table of contents block between the title and the first block, so I moved the cursor to the page title with the mouse and pressed enter, but could not move it to the content area. @olein in this comment.

After creating the page from the Site editor, clicking the Type / to choose a block does not make the vertical text cursor | start blinking. You see it only after you start typing or pasting something like the Google Doc’s content. @josvelasco in this comment

#fse-testing-summary

annezazu 7:53 pm on August 9, 2023
Tags:   

FSE Program Testing Call #25: Let’s start from the beginning

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

WordPress 6.3 just launched this week, bringing with it the ability to build out all parts of your site without leaving the Site Editor. While we’ve tested everything leading up to the release, it’s time now to see how all of the pieces are landing with a fresh take, especially with all of the fixes found during the 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 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. periods, and to look ahead to where 6.4 aims to iterate. 

To do this, this call for testing will go through a “starting from scratch” experience, from changing styles, using and creating patterns, creating a few pages, and setting up a menu. As part of this, you’ll explore new tools, like the Command Palette, and well loved tools, like List View. This test is intentionally more open ended to encourage exploration and to gather user experience feedback. It’s ultimately not about testing individual, new features and is more centered on testing how the features continue to come together. 

Since the 6.4 cycle is a bit shorter than others, this call for testing will only be open for two weeks rather than three so additional testing can occur as more features and refinements are released. 

Testing Instructions 

To use a prebuilt test site: 

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

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three by going to Appearances > Themes.
  3. Install and activate Gutenberg 16.4 or the latest version of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ after 16.4.

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

What follows are open ended tasks to complete, intentionally listed without detailed instructions in order to better stress test what’s been shipped in 6.3 and discover where the experience can be clarified:

  • Pick and save a new style variation. 
  • Add a border to all Image blocks on your site and change the size of all H2 headings using Styles. 
  • Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content. 
  • Create a “Resume” page with a few different headings and use the Table of Contents 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. to better organize the page. 
  • Change the size and alignment of the Page title in your Pages template. 
  • At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar. 
  • Create a menu that just lists your About page, a link to your WordPress.org profile with the Social Icons block, and a Search block. 
  • Create a synced pattern that details how to get in touch with you and add it to your “About” and “Resume” pages where you see fit. 
  • Duplicate the synced pattern from the Patterns section and make an unsynced version.

If you’d like to go further and have time to do so, please explore the following: creating pages and editing the template surrounding the page & building and inserting more patterns, synced and unsynced. 

If you get stuck at any point, please note it in the comments with details around where you tried to attempt to complete the task. 

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier for site building and for writing new content?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by August 23, 2023

#fse-testing-call

Mark Uraine 6:28 pm on July 10, 2019
Tags: ,   

Gutenberg Usability Testing for June 2019

Continuing the usability tests on 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/, here’s three from the month of June. The insights found in these videos help inform decisions going forward with Gutenberg. Keep in mind that due to the platform being used for these videos, many of the users might be completely new to WordPress.

This month focused on a test similar to the WCEU usability tests that were run. You can read up on those from WCEU here: part one and part two. It focused on building a post using common blocks including media + text, headings, etc.

Testing script

Imagine you’re writing a blog post about your favorite bakery. Your blog should have a title, some images of desserts, and a couple content sections. Please make sure to talk through everything out loud as you complete the tasks. Let’s get started.

  1. Log in.
  2. Create a new post.
  3. Give your post a title.
  4. Add 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. to your post with a message overlaying the image that reads, “The sweetest place on earth”.
  5. Make the Cover block full-width.
  6. Add a paragraph below that reads, “This bakery is committed to using the finest ingredients from all over the world ensuring that quality remains the cornerstone of their business. In fact, quality is the number one ingredient in everything they do.”
  7. Now add a heading for the cupcakes section.
  8. In this section, add an image of cupcakes with some text along the right side of it.
  9. Add a sentence or two below to finish off the cupcake section.
  10. Add a new heading about cookies.
  11. In this section, add a Media+Text block with an image of cookies on the right, and some text on the left side. Make this area full width.
  12. Below that, add a gallery of 5 more images.
  13. Now add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!”
  14. At the bottom, add a horizontal divider.
  15. Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
  16. Publish your post.

Videos

Video 1 (June 5, 2019)

I’m not sure how I’m supposed to make it go on the right.

I want to add a paragraph so I’ll just write some lines.

Video 2 (June 13, 2019)

I’m not sure how to do that but I’m going to give it a try.

I cannot figure out for the life of me how to get the writing exactly right next to it.

Video 3 (June 25, 2019)

This looks good!

How do I add an image?

Feedback

As with all the prior videos being shared, please leave some feedback! What are some patterns that pop out to you? What successes do these users have in navigating and creating a post? What challenges become evident in their 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
?

As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:

  • Join the #research channel 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/..
  • You can write a test script that can be usability tested for Gutenberg.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg, #usability-testing

Brian Alexander 12:04 am on August 15, 2023
Tags: ,   

Test Team at WCUS 2023

WordCamp US 2023 is almost here! It takes place from August 24-26 at the Gaylord National Resort & Convention Center in National Harbor, Maryland, USA. As is customary at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. events, a Contributor Day will be held, taking place on Thursday, August 24. This event is open to everyone, even if you are not attending WCUS.

🕰️ Important Times to Note:


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

Contribute

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

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

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

Be Prepared

To ensure you get the most out of Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., please review the following before the event, so that you can focus on the fun stuff when you arrive:

Stay Updated

In addition to keeping the WCUS 2023 homepage handy, join the #core-test and #contributor-day channels in Make WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., and follow #wcus for other event updates.

Share Your Thoughts

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

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

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

Props to @oglekler for peer review of this post.

#contributor-day #wcus

annezazu 7:47 pm on June 7, 2023
Tags:   

FSE Program Testing Call #24: Momery Makeover

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

Similar to the twenty-third call for testing, various items slated for WordPress 6.3 are ready for exploration and testing. It’ll start out using an RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. version of the 16.0 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/ release to provide an early look at what’s to come and ensure feedback is timely with the upcoming release deadlines. While there are a lot of changes, big and small, expect this test to cover the following:

Taken together, these new tools and interface enhancements aim to create a more cohesive experience. Similar to a few prior calls for testing, the form of this test is going to be both prescriptive with steps to take in order to ensure certain features are covered and, at points, open-ended so you can explore and think of areas to improve. 

I will be out for two weeks so @bph will be covering responding to this call for testing. Big thank you!

Framing

You run a website with a few others for a fictional town called Momery where you all share upcoming community events for folks to join. After a recent meeting about the website, your task is to implement a few changes: a new footer for parts of the site, a new post layout on the homepage to remove images, a call to action to encourage folks to host across your site, and a new page. As you work, you rely on 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. to try out different options and patterns to speed up creation. 

Testing Instructions 

To use a prebuilt test site: 

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

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 16.0 RC1 or the latest version of Gutenberg after 16.0 RC1. 
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

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

Create a few new items to exist across your site

  1. Head to Appearance > Site Editor > Templates > Home.
  2. Change the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. pattern to use a different one that doesn’t show the featured images of each post.
  3. Make the menu in the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. always show up as an icon with three lines instead of two.
  4. Save changes.
  5. At the bottom of the template, create a new Footer template part with a full width layout and three columns using the supplied patterns. Ensure this template part matches the background of the site.
  6. Create a new menu within the new template part with links to Host, Partners, Pricing and a search block. 
  7. Create a reusable block with a call to action around hosting an event with Momery with buttons linking to both the “Host” and “Pricing” pages (select the blocks of your choosing > open the three dot menu in the block toolbar > select “Create Reusable block”) . As a reminder, consider how patterns might be used for inspiration.
  8. Save changes.
  9. Use the command-k tool to invoke the command center to ensure both the new footer template part and the reusable block with the call to action exist across your Page template and Single template. 

Edit pages and templates

  1. Edit your About page to add 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. from your media library. Navigate there however you’d like.
  2. Edit your Page template so that the featured image appears full width at 400px height with 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. of your choosing. 
  3. Change the location of the featured image for the Page template. Make any other changes you’d like to it!
  4. Click the title bar to open the command center and switch to the Contact page. 
  5. Edit the Contact page to add in your preference for communication (email, text, phone call, video chat). 
  6. Click the W icon to open the Site View, find the Pages section, and click the + button to draft a new page titled “Portfolio”. Make any changes you’d like for the page, including adding any patterns.
  7. Save changes.
  8. Go back to your dashboard when done, head to Pages, and publish the page you just created to ensure it shows up on your site. 

Roll back some changes

  1. Return to the Site Editor by going to Appearance > Editor and select Templates > Home.
  2. Open block settings and head to the Template tab. 
  3. Notice there is a revision section at the bottom and select it. 
  4. Roll back to the prior Footer template part so that just your home template is no longer using one with the three columns, instead opting for a simpler version.
  5. Re-add the call to action reusable block you created.
  6. Save changes.

Explore the Library

  1. Click the W icon to open the Site View and select Library. 
  2. Find and open the reusable block you created earlier and make a few changes to the text.
  3. Save changes and check to ensure those changes are visible across your site.

Explore further – here are some ideas:

  • Make changes to your various pieces of your site and explore using the revision history more.
  • Change Style variations to switch up the theme style. In the Site View, use the addition of the Stylebook to see all of your changes.
  • Use the command center to continue jumping around to different parts of your site, make change, and save.
  • Explore creating and editing more pages, templates, template parts, and reusable blocks.

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 28th, 2023

#fse-testing-call

annezazu 11:02 pm on May 18, 2023
Tags:   

FSE Program Testing Call #23: Rapid Revamp

This post is the twenty-third 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 the roadmap to 6.3 published and another version of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ out in the wild, it’s time to test some of the upcoming features that are in the works to upgrade and polish the experience of using the Site Editor:

  • Styles in Site View displaying style variations and improving discoverability of the more granular Style interface. 
  • Pages in Site View, rendering the last 10 pages with a link to the wp admin page list at the bottom.
  • Revision history for Styles, allowing you to roll back as you’d like.
  • Command center, offering a quick way to switch between parts of your site. 
  • Add previewing for block themes unlocking the ability to check out a 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 before activating in the same Site Editor experience. 
  • Navigation block using the Interactivity API as a way to test the new, in-progress 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.. This is just a technical change and the aim here is to ensure the experience is the same. 
  • Details block, adding a new way to hide and reveal information. 
  • List View: Allow dragging to all levels of the block hierarchy.

Much of the above is in an iterative state with more to come, like improved Detail pages with additional functionality, so this is a great chance to provide early feedback on important features. As always, the steps here are mean to guide you through the high level view of the features but you’re welcome to take the experience further by customizing more. 

Framing

Like the last call for testing, you run a site that captures “Daily Delights” about the power of everyday moments to create joy. When you first put the site together, you didn’t have a full vision of what you wanted and, after a recent post went viral, you want to make some quick changes to better reflect what you’re accomplishing. As part of this, you preview a block theme to get a sense of whether you want to switch, create a new “Work with me” page, and update your “About” page while making high level changes to your templates and Styles. Streamlining and supporting this experience are the new command center tool and revision history for styles.   

Testing Instructions 

To use a prebuilt test site: 

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

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
  3. Install and activate Gutenberg 15.8+. From there, head to Gutenberg > Experiments and turn on the Command Center, Details block, Block Theme Previews, and Navigation block experiments.
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu. 

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

Preview block themes

Note: If you want to explore other block themes, you’re free to do so! You will have to install them first for the preview to work due to this bug. Please just ensure that you end up using “Twenty Twenty-Three”. 

  1. Head to Appearance > Themes where you’ll see a few block themes installed. Select the option to Live Preview the “Twenty Twenty-Three” theme. 
  2. This will take you to a new preview option using the Site Editor where you can explore the theme. 
  3. Select the Style section and choose a style variation you like. Click “Activate and Save”. This will keep you in the Site Editor with the new theme in place. 

Rely on 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.

  1. Click the pencil icon next to Styles to open up more granular style options. Make whatever changes you’d like: add a custom color to your palette (Colors > Palette > Custom) or change the details of individual heading levels (Typography > Headings). Save your changes. 
  2. After making and saving a few changes, click the three dot menu in the Styles panel and select the last option for revisions. Here’s a visual. 
  3. View different revisions by clicking on them and roll back to a prior version of your choosing by selecting “Apply”. 
  4. Make more changes to Styles either to the overall site or to individual blocks. Once more, view the revisions and decide whether to roll back. 

Content and template editing 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Pages section. From there, choose “About” and click on the canvas to edit it or click the pencil icon next to About 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..
  2. Add a details block and shorten the About page by writing a one line summary where it says “Write summary”. Take the remaining About page content, cut it, and add it to the section where it says “Type / to add a hidden block”. Feel free to customize this as much as you’d like. 
  3. Add 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. to the page by clicking the upload icon when hovering over the block and, using List View, move it closer to the top of the template. Make any additional changes to the block order that you’d like using List View. 
  4. Save your changes.

Using the command tool 

  1. Click the W icon to return to the Site View and use the back arrows to return to the main Design section before selecting the Template section. From there, choose the “Home” template and click on the canvas to edit it or click the pencil icon next to the template name in the sidebar.
  2. Select the Navigation block and add a new item to the menu by clicking the + button in the editor itself (not in the settings sidebar).
  3. Instead of adding a current page, search for “Work with me” and notice the option to create a draft page with that title. Select that option.
  4. Press cmd + k (or ctrl + k on Windows and Linux) shortcut to open the command center and type in “About” to quickly switch to the About page.  
  5. Add in a brief note about being open to working with others in the About page content before using the same cmd + k (or ctrl + k on Windows and Linux) shortcut to switch back to the homepage template by typing “home”. 
  6. Select the overall Navigation block and make a few style or settings changes, like changing the color options or the overlay display.
  7. Click the W icon to return to the Site View and notice you have a few changes to save. Click Save and complete the save process.

Publish and view

  1. Use the back arrows to return to the main Design section before selecting the Pages section once more. 
  2. Select “Manage all pages” where you will be brought to the Pages section of the WordPress admin. 
  3. Publish the “Work with me” page before viewing your site and exploring it to ensure all of the changes you want look as you want. Be sure to click on navigation items!

What to notice:

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier?
  • Did you find that what you created matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by June 8th, 2023

#fse-testing-call

annezazu 6:19 pm on May 11, 2023
Tags:   

FSE Program Front Page Fun Summary

This post is a summary of the Front Page Fun call for testing for the FSE outreach program, the twenty-second effort. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

  • InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test. 

Shout out to @pagelab and @valmedia2023 as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution! 

High level summary

In general, the call for testing was relatively tame bug wise, with only a few obvious ones found, mainly in 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.. The usability feedback related to many ongoing projects in the Site Editor underscoring the impact of solving these consistent problems, in particular the clarification of the content <> template relationship and confusion around the overall experience of managing pieces of navigation. Most participants were perplexed by the “hybrid” content editing option in the Navigation section, which suddenly appeared, causing one person to believe they had encountered a bug.

While the new Grid layout type was the primary focus of the testing call, feedback on it was limited to suggestions for consolidating the various options between the grid layout, Columns block, Gallery block, and Table block. Despite being a focal point, there was little mention of patterns in the template creation experience, suggesting that the consistency in pattern mental model was successful.

First: the Instawp link was precious, and made everything work smoothly right away. The editor is becoming quite powerful, and I am increasingly enjoying the flexibility of working with blocks, layouts, patterns, and templates…However, it boils down to a higher cognitive load overall while performing tasks in the editor, compared to the classic editing experience. It is powerful, but it creates multiple contexts for similar operations, with an increasingly greater number of options and pop-ups. It is getting better, though. I know some of this can be attributed to the newness of everything, and it will take time until I — and everyone else — feel completely at home in the editor. We’re in a transitional era where users — and even developers — are becoming visual site builders, so I think this is inevitable.

@pagelab in this comment.

It is incredible that I can create new pages from the menu and can edit the pages from the same site without having to page by page editing our content. Specially interesting to create a website for clients. 

@soivigol in this comment.

I created three draft pages: biography, discography, and buy. I assumed that the draft page referred to in the dark grey 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. under Navigation was the “page posts” page. Since we had only created draft pages before, seeing them listed under the new Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. oriented me towards a page content editing function. But when I was presented with “a page with many texts inside, which didn’t look like a page but should be a page,” I became completely disoriented. 🙃 I even created another local instance of WordPress, thinking that I had encountered a bug.

@Franz00 in this comment.

Bugs

The Navigation block featured heavily in this call for testing, leading to most new issues touching on the current experience with three folks mentioning a delay in proper naming of draft pages. The experience of adding a new page in the Site Editor experience is an important one, particularly with the backdrop of adding content editing. 

New:

Previous:

It doesn’t always display the full word “Inspiration” depending on how fast I type or pause while typing. Sometimes “Inspira” or “Inspirati”. Some sort of confused debouncing behavior.

@robglidden in this comment.

Feature Requests

Folks requested a few features in this call for testing mainly around the specifics of creating navigation and how that relates to using the Site Editor at large.

New:

Previous

Going to the Editor. For a short moment I see Styles, Templates and Template Parts. Suddenly a half second later I see Navigation at the top. It is distracting seeing 3 areas and then a moment later 4 areas. I have sometimes clicked almost immediately and then I have end up clicking into the wrong area.

@paaljoachim in this comment.

I miss the list view while editing on a mobile device as there’s no quick way to visualize the block structure without it. It is the most reliable and stable 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. navigation point within the block editor, in my opinion.

@pagelab in this comment.

General usability

Usability feedback repeated much of what’s already known and is actively being worked on, including the tension between templates <> content and improvements to adding links to the Navigation block by reducing the number of steps needed. 

Personally, I miss having all my content (posts, pages, categories) and navigation options visible at once, all the time, without having to see a bunch of other options for other tasks. It’s just easier than clicking three or four times in the site editor UI, in multiple places, just to see what content is available to add as a menu item.

@pagelab in this comment.

The Grid block is a very small beginning of something that can expand into something very useful. That can become a base for the Columns, Table and Gallery blocks. With each their own variation/unique features.

@paaljoachim in this comment.

The site already had a Navigation section and I wanted to rearrange the one I just created. But the Navigation section in the sidebar did not let me select which of the menus I wanted to adjust. It just took one of the oldest ones I had. I expected that somewhere perhaps on the bottom that I would be able to switch menus and even select which is primary and as well as other selections in how a specific menu is to be used.

@paaljoachim in this comment.

In the new pages, it was confusing. I didn’t see where I had written the new content. When I changed to edit About page, then I can see how I had written the new content in the Post Content Block. Then, I went back to the new pages and I had to search the Post Content Block in List View to edit correctly the pages… when we go to edit new pages, I think that the Post Content Block should have a placeholder to see where to begin to write or add new content.

@soivigol in this comment.

#fse-testing-summary