annezazu 9:54 pm on April 17, 2023
Tags: ,   

FSE Program Testing Call #22: Front Page Fun

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

While the release of 6.2 brought loads of new features to the site editing experience, feature development has continued in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, leaving us with the next lineup of cutting edge features to test and refine. This includes looping back on the new navigation section that was removed for WordPress 6.2. The aim of this call for testing is to both get feedback on what’s landed in 6.2 in the pursuit of continuous iteration and to dig into what’s being worked on for the remainder of phase 2 items including:

As always, these calls for testing will also explore current features that have been staples since the beginning of the introduction of the site editor, like 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. or Template Part blocks. 

Framing

You run a site that captures “Daily Delights” about the power of everyday moments to create joy. You want to create a new front page of your site that’s more colorful to reflect the nature of your content. When you chose your theme, you knew it came with a few front page options thanks to patterns so you decided to check out what’s possible. Once you have a new front page option in place, you decide to make some additional changes to your template and navigation to better personalize this new experience of your site.

Testing Instructions 

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-21&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.5.1. From there, head to Gutenberg > Experiments and turn on the Grid variation for Group block experiment.
  4. Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu and add a few widgets. 

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

Create a new Front Page

  1. Head to Appearance > Editor and select Templates. Click through a few of the templates to get a feel for your site and notice how a preview is shown of each template when you do so. To go back to view all templates, select the > arrow. 
  2. Click the + next to Templates in the dark gray 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 select “Front Page”. 
  3. This will open up a modal where you can choose between different patterns to begin building your template. Select the second pattern with various green colors depicted. This will bring you to the Front Page template with that pattern inserted automatically.

Use the Grid layout

  1. Using List View, select the second Group block that contains 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. 
  2. Open the block settings and choose to transform it to a Grid layout. Here’s a visual.
  3. After doing so, under Layout in block settings, change around the values of MINIMUM COLUMN WIDTH until you like how it looks. 
  4. Underneath this Group block, add an additional Grid group block variation by either directly searching for “Grid” or adding a Group block and selecting the Grid variation.
  5. Explore using this block. This is intentionally an open ended item to encourage you to explore what this experimental block can do. For example, you could add a section of images or different sections of Headings and paragraph blocks grouped within a Grid block or a section of hashtags you want folks to use. Here’s an example of this last item.
  6. Save changes. 

Create a new page (or pages) for navigation 

  1. Select the Navigation Block in your headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and select the option to “Edit” converting your menu to individual blocks. 
  2. 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 “Inspiration” and notice the option to create a draft page with that title. Select that option.
  4. Create as many draft pages as you’d like using the same process.
  5. Add a search block to your menu and customize it.
  6. Save changes.

Manage your navigation and explore your pages

  1. Select the WordPress icon to open up the dark gray sidebar and use the > arrows to go back to the overall Design section.
  2. Notice there is now a Navigation section. Select it and rearrange your menu items from there. 
  3. Select a page in your menu and notice that you can edit it directly either by clicking on the canvas or selecting the pencil icon in the sidebar. Make changes to this page and don’t save in the editor. 
  4. Instead select the WordPress icon to open up the dark gray sidebar and notice a Save option in the sidebar itself. 
  5. Select the save option there and select Save again from the modal. 
  6. Repeat this process with another page in your menu, saving where you’d like. 
  7. When done, go back to wp-admin > Pages and publish your pages to ensure they appear correctly in the navigation of your site.

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 May 8th, 2023

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