annezazu 10:57 pm on December 14, 2022
Tags: ,   

FSE Program Testing Call #19: Running Through Refinements

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

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

Overview

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


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

Framing: Refining a client’s site

To ground this experience a tiny bit more, let’s pretend you’re doing some refinements to a client’s site to finetune their branding and, as a result, homepage and navigation. The aim is to go from a more complex navigation structure to a simplified one, with two different options to choose from for the client (edit current menu and create a new option). Tied to this, the homepage will shift the focus of content in the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block with more of an emphasis on images (and whatever else you’d like). Finally, you will update the overall styling as you see fit, with bonus ideas for those who have extra capacity and interest!

Testing Instructions 

To use a prebuilt test site: 

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

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

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Twenty Twenty Three theme by going to Appearances > Themes.
  3. Install and activate GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 14.8.4 RC1 by downloading the release > going to Plugins > Add New > Installing. From there, head to Gutenberg > Experiments and turn on “Off canvas navigation editor” and “Block inspector tabs” experiments. 
  4. Head to Tools > Import and import this file (click “Download” in the upper right hand corner first) to have access to the same content as above.

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

Explore browse mode

  1. Head to Appearance > Editor (betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.). This will bring you to a reorganized view of the site editor.
  2. Click Templates and notice the list of templates now shown in the sidebar. Click through various templates to quickly view them.
  3. Select “Home” from the templates and then select “Edit” in the open sidebar to directly alter the template.

Editing navigation

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

Redesigning the homepage

  1. Select the Query Loop block and, from the block toolbar, select the “Replace” option. 
  2. This will open up a modal where you can pick a different pattern to display the posts. Choose a different pattern.
  3. Customize the pattern you chose further. For example, change the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. size, add a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., remove or add blocks, change the size of the titles of posts, etc. When done, click “Save”.

Changing Styles

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

Bonus: Customize further as you see fit

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

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

What to notice:

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

Leave Feedback by January 6th, 2023

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