annezazu 6:26 pm on May 26, 2021
Tags: , ,   

FSE Program Testing Call #7: Polished Portfolios

This is the seventh call for testing as part of the Full Site Editing Outreach Program! As mentioned in the sixth testing call, if you haven’t been able to participate yet, now is a great time to do so leading up to 5.8. 

For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

Feature Overview

As a reminder, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. With this feature, you can create a new template, edit current ones, and select which template you want to use for pages/posts. You can learn more about this feature in the following video: 

To ground this test in a real-world example, we’re going to build out a portfolio page showcasing your hypothetically amazing work. If you use the demo content, you’ll embrace your inner architect and show off visuals of pretend locations, like 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. 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 Harbor and 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/ Parkour Space. Please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example and here are a few high end example from some designers using Gutenberg.

Note: Compared to the sixth call for testing, this is an intentionally more open-ended call for testing setup to have you, the tester, push this feature to its limits. Have fun with it!

Testing Environment 

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

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

Testing 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
 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Known issues:

While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most serious items:

Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon.

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create six posts with two different categories and featured images of your choosing along with at least four pages to use for your menu. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.7.1
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. Do not click on this as we will not be exploring the Site Editor for this test!

Setting up your portfolio page

  1. Under Pages, select “Add New” and title it “Portfolio”. 
  2. In the page content, add in a Query Block and select whatever pattern you’d like or use the Inserter to add in a Query Pattern. Here’s a short video showing how to insert a pattern in case you get stuck. 
  3. Once the pattern is inserted, you can open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. From there, you should see options to customize what posts this Query Block includes. The demo content includes the following categories to use: Portfolio, Parks, Buildings. 
  4. Customize the Query Block to your liking! This might include creating columns to put in different Query Blocks to show off different categories of posts or adding in additional blocks like Post Author. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 

Creating and customizing a new template

  1. In the sidebar, open the Settings and select Page Settings (you should see Page and Block). Select “New” under the Template section to create a new template. Here’s a short video in case you get stuck. 
  2. Title the new template “Portfolio”. 
  3. From there, you’ll enter Template Editing Mode and, 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., you’ll see a Site Title, Site Tagline, and a Separator Block. You can keep these blocks, convert them to Columns, or remove them entirely. 
  4. Add in a Navigation Block to the Header and select the “Start Empty” option. From there, add each page you created to the menu to set the structure. If you use the demo content, the page names are as follows so you can search for them: About, Contact, Resume, Partners, Influences. 
  5. At this point, you can customize the header, footer, and more to your liking. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. Get creative and make it your own!
  6. Save your changes and view your Portfolio page.

Customization Instructions/Ideas:

While the last test was meant to guide you through the specifics of creating a customized template, this test is meant to allow you to explore what customization might look like for you. This makes for a more open-ended and expansive test that should help you explore the edges of the experience and, ideally, find both bugs and enhancement requests! Because there are two points of customizations in this test, the following instructions/ideas are broken down to cover each. Remember that what’s shared below is just the beginning of the customization you can try out!

Portfolio Page ideas:

  • Change the Post Title block to have a set background color, different font sizes, and different alignments. 
  • Change the width of the column that 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 is in to make the image larger or smaller. 
  • Add additional blocks to the Query Block and customize them.
  • Change general alignment of the main blocks provided by the Query Block. 
  • Add in an introduction section to make the Portfolio page more real with a Heading Block, Cover Block, and more. 
  • Use multiple Query Blocks for different categories of posts! Remember that for the demo content, there are three categories that you can interact with: Portfolio, Parks, Buildings. 

Portfolio Template ideas:

What to notice:

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

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in Template Editing Mode matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by June 9th June 16th.

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

Note: Originally feedback was set to be due by June 9th but this has been updated to June 16th to give more time for feedback.

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