This is the eleventh call for testing as part of the Full Site Editing Outreach Program ! 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.
As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slack Slack is a Collaborative Group Chat Platform https://slack.com/ . The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ . channel or via DM to me ( @ annezazu ).
Overview
Feel free to jump straight to the testing steps if you’d prefer to get started right away.
This is the final call for testing before WordPress 5.9, which makes it a wonderful and high impact one to be involved in as it’ll help improve the experience for a large portion of the web before it ever launches. In order to get the most out of this call for testing, the instructions are going to change as the test goes on and as we move forward in the release cycle. For example, at the start of this test, folks will be encouraged to use TT1 and, by the end of the test, Twenty Twenty-Two will be recommended. For now, here’s a high level overview of what is going to be tested:
Block 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 template and template part editing UI 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.
While certain calls for testing have ventured into the Site Editor, that experience as you’ve known it is shifting for 5.9 in order to offer a more refined and scaled down experience to manage templates and template parts within a block theme. With a condensed browsing tool and a new placement in wp-admin under Appearance, this might feel more like a taste than the full experience of the Site Editor as you’ve come to know it.
Styles Interface
While 5.8 laid the groundwork for a cohesive style system, 5.9 sees the introduction of a beautiful user interface that allows folks to interact directly with various style properties. You might have heard of this work under the project name “global styles”! While we’ve had calls for testing around theme. json 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. , one of the mechanisms related to the overall Global Styles project, this is the first time Styling itself is being explored. Currently, this interface displays two large groups of design focuses: blocks and elements. Elements represent things that can be styled globally and across blocks (such as “text”, “links”, “captions”, etc). This is a fancy way of saying you can easily change the typography of your entire site or the unique coloring of your buttons block all from the same interface.
Patterns Explorer
With block patterns on the rise, a new explorer modal has been shipped to make it easier to navigate between patterns and find the exact one you want to use. This sets the groundwork for future integration with the Pattern Directory. This test will briefly explore this new experience.
Twenty Twenty-Two
Twenty Twenty-Two is the latest in a long line of default themes with a twist — it’s a block theme first and foremost built for the various site editing tools. As a result, midway through this call for testing, folks will be encouraged to test using this theme and report back their findings. Read more about this groundbreaking default theme here .
Testing Environment
This will adjust as the test goes on and the release cycle progresses to ensure folks are testing the latest and greatest.
Here are the steps to follow to properly set up your testing environment for this specific all for testing. If you’re already ready to go, jump to the testing steps below.
- Use a test site with the latest version of WordPress. Right now, that’s 5.8.2. It’s important this is not a production/live site.
- Install and activate the Gutenberg 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/ plugin 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 12.0 .
- Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
- Create a few posts with featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created previously for these kinds of tests via the WordPress importer under Tools > Import. You can also follow this lesson for how to use demo content .
- Go to the website’s admin.
- You should now see a navigation item under Appearance titled “Editor ( beta 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. )”. If you don’t see that, your environment isn’t correctly set up. If you get stuck here, just comment on this post or ask in # fse-outreach-experiment for help!
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 steps
Personalize your homepage
1. Go to Settings > Reading and set “Your homepage displays” to show “Your latest posts”.
2. Once set, go to Appearance > “Editor (beta)”. This will open up to show a template that displays your homepage.
3. From there, change your homepage to your liking! This could mean adding in a navigation block, changing the font size of your Post Title Blocks, adding a duotone filter 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. to your Post Featured 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. blocks, removing blocks, adding blocks, and more.
4. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience.
Set your styles
5. From there, click on the Styles icon in the upper right corner to access the Styles interface.
6. Once open, personalize the four sections as much or as little as you’d like: Typography, Colors, Layout, and Blocks (to customize individual blocks). For example, you can click on Colors > Palette > Use the + sign to add your own custom color option for use throughout your content.
7. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience.
Add a buttons pattern and use layout controls
8. From there, open up the Inserter and switch to the Patterns tab.
9. Select the “Explore” option, navigate to the Buttons section, and pick the “Simple call to action” pattern.
10. Once added, use the + option to add in a second button.
11. From there, select the overall parent Buttons block and open the sidebar 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. settings to customize the layout to your liking. Here’s a quick video in case you get stuck.
12. Save the changes.
Add a duotone filter to your Archive template
13. Click on the W menu in the upper left hand corner > Under Editor select “Templates” > Select “Add New” > Select “Archive” ( currently not possible to create a General template from here ).
14. In the content, add in the Post Featured Image block and add in a duotone filter.
15. Add in any additional blocks you’d like and save the changes when you’re ready.
16. Head back to your dashboard by clicking on the W icon in the upper left corner before heading to Posts > All posts.
17. Edit one of your posts with a featured image and assign your updated “Archive” to this post. Here’s a quick video in case you get stuck.
18. Save and view the post to see the filter applied!
Edit your Header 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.
19. Return to Appearance > Editor (beta) and, using List View if you need to, select your Header template part.
20. Select the three dot menu in List View or in the block toolbar and select “Edit Header”. This will take you to the focused template part mode.
21. From there, make a few changes to the template part (add items to the navigation block, change the size of your Site Title, etc) and use the horizontal drag handles to see how your header will look at different sizes!
22. Save the changes.
What to notice:
- Did the experience crash at any point?
- Did the saving experience properly save your changes?
- Did you find any features missing?
- What did you find anything 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 in the editor matched what you saw on your site?
- How did your content look on a smaller device or screen size?
- How do you think this will impact your current workflows?
- Did it work using Keyboard only?
- Did it work using a screen reader?
Leave Feedback by December 7th, 2021
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 . If you leave feedback in GitHub 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.
Props to @ kellychoffman for helping review this call for testing.
Changelog
Nov 10th: updated instructions to use Gutenberg 11.9 RC4.
Nov 12th: updated instructions to use Gutenberg 11.9.
Nov 13th: updated instructions to use WordPress 5.8.2.
Nov 24th: updated instructions to use Gutenberg 12.0, to change the phrasing around the browsing component, and to update the due date.
# fse-outreach-program , # fse-testing-call , # full-site-editing
