FSE Program Testing Call #16: Back to Basics

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

Friendly Reminder

If anyone is interested in being a part of the test creation or facilitation process, check out this recent post on how to get involved.

Overview

This call for testing returns us to some of the basics of using the 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. editor. While it can be fun and exciting to dig into the cutting edge items, it’s just as important to ensure the baseline experience continues to be excellent. This is especially true when full site editing as a concept brings the block paradigm to more parts of the site experience. To that end, the format of this test is going to take on a more open ended, scavenger hunt style experience. As you go through it, you’ll explore the following various features:

Transform menu

Each block offers various blocks you can transform to and from in order to quickly take the same content you currently have and switch it into a new block.

Select text across blocks

This feature was launched in WordPress 6.0 and works with any Rich Text block (Paragraph, Heading, List, and Quote). How can it be improved though? What rough edges can you find? 

Drag and drop

Drag and drop is a classic part of the block editor experience, whether you’re writing a post or creating a template. As WordPress evolves with new blocks and new features, it’s important these original features continue to perform and remain reliable. 

Various add block options 

Adding blocks comes in a few forms: the inserter, slash inserter (/), quick inserter, sibling inserter, and the “insert before/after” options built into the additional menu of each block. Ensuring each appears and functions as expected is key to being able to create what you want with blocks. 

New document settings and experience 

The document settings were recently revamped in Gutenberg 13.7:

The fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug, when clicked. The result is a cleaner, more organized display that should help you more readily access all the important information about your post/page at a glance.

Using patterns

Patterns are increasingly important to the creation process and this test explores the basics of adding, moving, and customizing them. 

And more!

This covers the high level items but you can expect to also use duotone, dimension controls, 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. in a cover block, etc if you complete each smaller task.

Testing Instructions 

Note on InstaWP

The folks behind InstaWP have granted the outreach program an account that we can use for these calls for testing. This means if you want to skip setting up your own test site and instead use a temporary one, you can do so. When you set up a site with InstaWP, no email addresses will be collected which means you’ll need to save the link to access the site again. Big thank you to the InstaWP team! 

Launch test site or setup test environment

1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-16 
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 “Access Now” 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-Two theme by going to Appearances > Themes.
3. Install and activate 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/ by going to Plugins > Add New > Searching Gutenberg. 
4. Head to Tools > Import and import this file to have access to the same posts as above. Select the “download” icon in the upper right corner to first download the file and proceed with downloading if you see a warning.  Here are instructions for how to import content if you need more detailed steps.

Overview of content on the test site

Once your test site is in place, please perform the following tasks in one or more of the three posts available in whatever order you’d like! None of the posts have a featured image set and they are all intentionally set as drafts. You do not need to run through all of these and it’s intentional that the task is left open ended, where there might be multiple ways to accomplish the task at hand. While the list looks long, each task should be quick, needing typically just a few seconds of action so please run through as many as you can.

Align, move, and customize images

• Place an image side by side in whatever way you see fit.
• Select two images and move them to a different location in the post. Note: you might need to add an additional image first to do this.
• Customize borders for an image including Color, Style, and Width.
• Crop an image in the post editor. 
• 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.. 
• Add a custom duotone filter of your choosing and then remove the filter altogether. 
• Transform an Image block to a Cover block and set the focus using the focal point picker.
• Replace an image with a different one. 
• Drag and drop an image to a new part of the post. 
• Add an image from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. 
• Add an image by dragging and dropping one into the Image block placeholder from your computer. 
• Add a link to an image.
• Add alt text to an image.

Add, move, transform text blocks

• Try using as many of the various inserters (slash aka /, quick inserter, and sibling) as possible.
• Transform a text block to another block of your choosing. See how many transforms you can go through before getting stuck or confused.
• Merge two paragraphs together. 
• Rearrange items in a list block. 
• Transform a list block to another block and transform it back to a list. 
• Select text across two paragraphs, cut the text, and paste it elsewhere in the post. 
• Transform a Text block to a Heading block and customize it by adding margins, changing the letter case, etc.  
• Select text between two paragraphs and see what happens if you try to change it to a Group block (row/group/stack). Here’s a screenshot. 
• Add a heading or list to a quote block. Try transforming those same blocks from within the quote block. 
• Make each paragraph a different font size. Note: this might mean adding your own custom size.
• Copy and paste text from another website/post/document of your choosing into your post.

Insert and reorder patterns

• Add a few patterns from the inserter in quick succession. Reorder them in whatever way you’d like after adding multiple patterns.
• Remove the entirety of a pattern after adding it. 
• Drag and drop a pattern from the inserter in between two blocks or patterns in the post. 

Adjust the document settings

• Change the template that the post is using. 
• Copy the URL of the post as if you were going to share it with someone. 
• Schedule an update to the post for sometime tomorrow before changing your mind and publishing the updates now. 
• Add a featured image. 
• Add a cover block and set it to use the featured image. 

What to notice:

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

Leave Feedback by September 2nd, 2022

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