Upcoming FSE Outreach Program Schedule (June & July)

Similar to my last post, I wanted to share the upcoming schedule for the FSE Outreach Program for June and July in order to ideally help people participate more in what’s to come and to know what to expect. As always, if you have any questions, feel free to ask here or to DM me in 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/. (@annezazu).

June

  • Call for testing #7 runs through June 16th with a summary post to follow within 1 week.
  • A developer centric call for testing will be shared by June 23rd to encourage folks to explore using theme.jsonJSON 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. and give feedback.

July

  • There will be a pause in formal calls for testing during July in order to allow me to focus on documentation for 5.8 (both developer and end user), do more hallway hangouts, etc.
  • To help support 5.8 testing efforts, I will share a post detailing how best to help with 5.8 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. testing as it relates to FSE-related items and where to give feedback. This will buttress, not replace, 5.8 testing efforts.

Outside of the work above, there will continue to be live streams, hallway hangouts, important posts flagged, etc.

Overall Timeline

DateCfT #7Theme.json CfT5.8 RC CfT
June 9
June 16End
June 23Start
June 30Start
July 7
July 14End
July 21End

How to help:

This program has many pieces to it and there are tons of ways to get involved. At a high level, here are ways to help:

  • Respond to the calls for testing with feedback.
  • Amplify calls for testing by sharing in your network.
  • Translate the calls for testing for your local community.
  • Explore testing FSE outside of the calls for testing and share any feedback in GitHub.
  • Help me triage feedback that come in from the calls for testing and file any necessary issues.
  • Help me write the calls for testing and the summary posts.
  • Help with 5.8 related documentation.

For any of the items that involve working with me directly, please comment on this post or message me directly (@annezazu) so I know you’re interested and we can talk through what helping out might mean. To those of you already doing this work, thank you so much! It all truly helps.

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

FSE Program Stick the landing (pages) Summary

This post is a summary of the sixth call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to @piermario for translating the call for testing into Italian once more. Translations are such a big help as they really help bring the wider community along.

As a reminder, the seventh call for testing is currently underway and you’re welcome to join!

How far can one go?

Once more, I’m excited to share @greenshady’s creative take on this call for testing that utilizes some awesome custom colors and reuses a logo from the WC Birmingham team:

Image showing a pretend landing page for WP Y'ALL with a theme of blue colors.

High Level Feedback

Here’s what a few folks had to say about the overall experience that’s helpful to keep in mind as it’s easy to get into the themes or details without seeing the big picture of how using template editing mode felt. For most, they felt it was smoother than expected but that the outcome still was lacking in terms of creating a truly refined template.

It was fun! I liked testing the new features and feeling like I was contributing to WP. I didn’t realize you could drag and drop blocks! What a cool idea to place the Page Title in the Cover 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.! Always learning new things.

@askdesign in this comment.

In the very broadest sense, yes. Someone in an earlier call-for-testing made a simple but eloquent comment where they described the overall output of the editor as a “website-shaped object”. I’m not sure what this means in terms of specific missing features, but, without an awful amount of work on the part of both theme developer and content editor, this still best sums up the resulting output for me.

@chthnc in this comment.

The problem is that custom templates are tied to the theme. I see the logic in this. Certain aspects could be specific to the active theme (colors, fonts, etc.), and it is always how custom templates have worked. However, the block template system is different. From a user viewpoint, I feel like my custom-created templates belong to me rather than the theme. I can see a user switching themes after a couple of years and building a dozen or so templates having a poor experience in this situation. If the feature remains the same, there should be more clarity.

@greenshady in this post.

Repeated Feedback: Settings Improvement and switching between editing modes (template vs page/post)

This section is dedicated to repeated items from previous calls for testing and solely focuses on new items that have come up in these same groupings. As has been noted across various tests, the placement of settings is not always intuitive with some options feeling hidden in the Block Settings under “Advanced” sections and others named/placed in a way that makes it hard to know what the option controls

While lots of work has been done to improve the experience of switching between modes, this was still mentioned a few times as an experience that remains a bit confusing. As noted here, there are three ways that visually help indicate when you’ve switched into template editing mode: 

  • The welcome guide
  • The dark frame that appears around the template
  • The template name clearly visible in the Top Bar

At this point though, work remains to make the experience more seamless, including some updates to the Welcome Guide and some explorations around being able to view a template while editing content

The “settings cog” is not actually a settings cog, it’s the show/hide for the main editor details side bar. The main Side-bar holds the very important Block and Page controls, including “publish”. These controls are not really the “cog type” broad ranging “settings” we might see in the main Settings section of WP-admin we see true settings. The 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. contents are more like “Edit controls” and we might more usually expect a pen icon, or a sidebar show./hide icon for this sidebar show/hide. The actual “settings” for 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/ editor are under 3 vertical dots. Titled (invisibly) “Options”. This terminology and labelling or lack of it is confusing.

@steve-pheriche in this comment.

When I’m in “Template Editing Mode” there’s this large black space around the canvas area of the editor. I think this is supposed to help me understand that I’m not editing a single document, but rather that I’m editing something more.

@shaunandrews in this post

After taking care of the Advanced section, it took me several minutes to find the “Layout” area. I think it would be better to begin with the Layout and work our way down to the Advanced settings. With something as important as Title and Area, why don’t we move those 2 items up to the top of the Block section?

@askdesign in this comment.

It took me a while to find out where the Full Width settings were. I forgot it was under “Change alignment”, next to the block icon, but I didn’t even open it as I thought it had to do with text alignment (Left, Center, Right). This seems weird, is that the best button label we can have?

@piermario in this comment

Crash Reports

There were multiple crashing reports including one due to an issue with Duotone, which has already been reported and fixed. For the other crashing reports, they were difficult to replicate and issues were not created but it’s worth noting that four people reported various crashes, the most of any call for testing. 

Not until the very end, after I was finished. I went back to edit the template and got this error message a couple of times: “The editor has encountered an unexpected error.”

@askdesign in this comment.

Trying again I was not able to trigger the crash. So that suggests there needs to be some very specific order of events, or item selected. My main browser which I experienced the crash on is the FF Developer Browser, 89.0b13.  

@steve-pheriche in this comment.

Initial Template Setup Improvements

Because this test involved setting up a brand new template rather than editing an existing one, there were a few items of feedback around the experience, including around just how “blank” the blank template is. The intention is for it to be fairly empty with basic blocks in place so a user can both get a sense of what can be done there and can easily make it their own without having to delete too many items. In time, this is where Patterns should be very advantageous to quickly build up desired content in a template. 

When I first created a new custom template I was surprised by its content. I’d become used to the Site editor copying the index template.

@bobbingwide in this comment.

Usability feedback

Outside of the new items listed below, it’s important to note that having consistent dimension controls was mentioned repeatedly for a variety of blocks including the Columns Block and Template Part Block. The work to bring these controls is thankfully underway!

If you want to add a paragraph block to the Cover and that block includes a longer text, there seems to be no way to make that block of text narrow.

@agabu in this comment.

Confusing: adding the pages to Navigation. I wouldn’t have known I needed to use the Page Link block if you hadn’t instructed me to do so.

@agabu in this comment.

I think it would be good to add padding and margin options to the columns block.

@askdesign in this comment.

My initial impulse when attempting to rename the template part was to click on the block heading text “Untitled Template Part”. Instead of making the title editable, I was offered the option to transform the block.

@chthnc in this comment.

One part that was somewhat unclear is the alignment options aren’t reflected in the editor vs how they display on the site. Specifically for the custom footer section, when selecting full width I see it is applied when I view on the front-end, but in editor it was not full-width. I figured out that I needed to set the footer to full width as well as the columns within to full width to see it reflected in editor.

@circlecube in this comment.

Collection of Miscellaneous Bugs & Enhancements

As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features and bugs that were reported that didn’t nicely correspond with a particular block or categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.

When viewing the page on the front-end, it would be great to have the ability to open its template directly from the top admin bar.

@agabu in this comment.

While performing this test I thought, “Why can’t I pick the template upon which my new template should be modelled?” It makes sense to be able to use a template as a template. This would be a nice feature.

@bobbingwide in this comment.

Choosing the pages in the nav was strange. The search is essential of course but it feels it could have a scroll to show all the pages (lazyload if many?)

@ridesirat in this comment.

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

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 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

Proposal: Test Badges for the FSE Outreach Program

Teamwork makes the dream work, and in reflecting on the one year of the experimental FSE Outreach Program, it seems important to recognize those who have helped make this a success thus far. To that end, I wanted to open up a discussion around how we can incorporate profile badges into the FSE Outreach Program to recognize folks who have been deeply involved in responding to program efforts. I’m not sure how this is usually done with the test team, but I’d love to acknowledge the wonderful folks who have helped thus far!

Proposed qualifications

Currently, my thinking is that contributor badges could be given in two cases:

  • Gave feedback on 5+ calls for testing.
  • Translated 5+ calls for testing.

Share your questions/feedback by June 4th

At this point, these are the questions on my mind to discuss:

  1. Does the amount of participation make sense to you (5+ calls for testing)? 
  2. Does a Polyglot profile badge already cover the latter item around translating calls for testing?
  3. Are there other ways people are contributing that should be acknowledged with a badge? 

Based on what I see on other teams that do contributor badges, badges are associated closely with the mission of the team, so I am purposefully not including amplification efforts here. Tied to this, I’m not including wrangling group testing as I still see that as being consolidated into giving feedback on 5+ calls for testing. I don’t feel strongly about either aspect and would love to hear what others think!

Next steps

If this proceeds, I’ll do the following:

  • Share a follow-up post confirming how badges are earned 
  • Get access to assign badges to individuals. 
  • Coordinate with the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team to add badges to the profiles of those who already qualify. 
  • Update documentation accordingly. 

In the long run, I’d also love for this to set the groundwork for more people to get involved in the actual running of the program: writing calls for testing, triaging feedback, writing summary posts, etc. This might mean in the future that badges are given after you’ve helped with one round of testing. 

#fse-outreach-program

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (20 May)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance: @mkaz @annezazu @bobbingwide @bph

Video Recording:

Topics Covered:

  • We chit chatted before recording about our various usernames and why we picked what we did!
  • Anne briefly gave an overview of the current call for testing open until May 26th.
  • We briefly covered the UX of using the Post Content Block as Anne thought she was running into a bug but it’s more of a painful UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. than anything else.
  • We talked about the proposal to hide Post Blocks in the post editor for 5.8 since many of these theme blocks aren’t truly necessary there. Everyone agreed that this makes sense to have in place to prevent possible confusion with users.
  • We explored Appearance > Template Parts and Templates talking about whether this entry point will be available in 5.8 and confirming that Template Part Block isn’t planned to be unlocked in classic themes for 5.8.
  • We talked about a known bug with embeds, specifically YouTube not rendering in the Site Editor.
  • We discussed the “click through to edit” approach being explored for template parts, reusable blocks, query 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., and more.
  • We covered the navigation block, the two dash icon over three dash icon, and how JS is being rendered on the front end in order to make the hamburger menu keyboard accessible.
  • We closed out talking about the upcoming call for testing launching also on May 26th and focused on a more open ended exploration of Template Editing Mode. We chatted a bit about the pros and cons of having a test being very defined vs open ended in terms of getting the right balance to result in productive feedback for the project.

Next Steps

Anne is going to follow up on a few issues found and a discussion point to include as a comment in an issue:

  • Replicate and report a bug in the spacing of a Query Block pattern.
  • Replicate and report bug with Query Block pattern where the Title color does not update if you select the “make title a link” option.
  • Re-share idea an idea from @mkaz to this discussion around adding into the “Quick edit” options the ability to assign a template or template part to a new theme.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

FSE Program: Answers from Round Two of Questions

This post is part of a wider series that provides answers to questions gathered through the FSE Outreach Program. This round of questions was started on April 28th and is being consolidated into a single post since there were substantially less questions. Thank you to everyone who submitted a question so our knowledge can grow together! Stay tuned for future rounds.

Continue reading

#fse-answers, #fse-outreach-program

FSE Program Testing call #6: Stick the landing (pages)

This is the sixth call for testing as part of the Full Site Editing Outreach Program and a very important one leading up to 5.8! If you haven’t been able to participate yet, now is a great time to do so. If you’re excited to help with future efforts, check out the upcoming program schedule

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 will be shared there. 

Feature Overview

A lot has changed since the first call for testing focused on Template Editing so, if you’re worried about this being a repeat experience, don’t be. 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. When this first was released, you were only able to edit a template but you couldn’t create a new one or assign a post/page to use a specific template. At this point though, you can create a new template, edit current ones, and select which template you want to use for pages/posts. Tied to this, the interface has been updated to make it clearer when you’re actually in template editing mode. For a deeper dive into this new feature, check out this video that goes more in depth.

To make this a tiny bit more realistic, we’re going to pretend we’re creating a WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. site with a custom landing page to attract visitors from another event to join the WordCamp you’re hosting. 

Image of a landing page with a pretend event description, coupon code, and various call to action buttons.

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: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use 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/ (10.6 as of writing this).

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
 

Important Note: 

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 non exhaustive 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. Go to the website’s admin.
  4. Install and activate the 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.6.
  5. 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!

Creating pages

  1. Under Pages, select “Add New” and, one by one, create three pages back to back with the titles “About”, “Contact”, and “Code of Conduct”. Publish each. These don’t need content added in as they will simply be links for a future menu. 
  2. Create a fourth page, title it something fun to bring people into your event and don’t add in any additional content. For example, I titled mine “Feeling inspired from WordCamp Couch?”. 
  3. Publish the page and keep it open.

Creating 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 “WordCamp Outreach”.
  3. From there, you’ll enter Template Editing Mode. 

Customizing the template

  1. Remove the Site Title, Site Tagline, and Separator blocks at the top of the template. 
  2. Add in a Cover Block above the Post Title Block and use any image you’d like. I downloaded this one when creating this test. You might need to use the “Insert Before” option in the toolbar of the Post Title Block.
  3. Once you have an image added, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width. 
  4. Drag and drop the Post Title Block into the Cover Block. 
  5. Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it. 
  6. Select the Cover Block once more and apply 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. to it. Here’s a screenshot of what icon you’re looking for. Note that by selecting “Shadows” and “Highlights” you can select your own custom colors! 
  7. Add a Spacer Block underneath the Cover Block and set it to 50px. 
  8. Add a Columns Block underneath the Spacer Block and choose 50/50. 
  9. Once inserted, select the parent Columns Block and set the width to “Full Width”. 
  10. Add in brief information about your event in the first column and set any alignment you’d like. 
  11. In the second column, add in two buttons asking people to Apply to Speak and Apply to Sponsor. For the purpose of this test, it’s okay if these do not actually link anywhere. Feel free to customize the buttons to your liking too!
  12. Underneath the Columns Block, add in an additional Cover Block and select a background color. 
  13. Once you have a color, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width. 
  14. Inside the Cover Block, add in a discount code message and a Button Block below it encouraging people to buy tickets. Customize this text to your liking, whether in terms of alignment, custom colors, or more. 

Create a custom footer

  1. Underneath the second Cover Block, add a Template Part Block and select “New Template Part” to create a custom footer for this template. 
  2. Once created, head to the Block Settings in the sidebar to add in a Title under the Advanced section, set the Area to “Footer” under the Advanced section, and toggle on “Inherit Default Layout” under the Layout section. 
  3. From there, add a Columns Block into the Template Part and choose 30/70.
  4. In the first column, add the Site Logo block. If you need a logo to use, here’s a free one to download from www.logodust.com
  5. In the second column, add a Navigation Block and start empty. Of note, you will likely run into this bug that’s already been reported here
  6. Using the Page Link option, add in your  “About”, “Contact”, and “Code of Conduct” pages. Customize the Navigation Block to your liking!
  7. From there, select “Update” and save your changes. 

Create a new page & assign the new template

  1. At this point, head back to your wp-admin dashboard and, under Pages, create a new page. 
  2. Add a title that references another pretend event that someone might attend. For example, “Feeling inspired from WordCamp Bed?”
  3. In the Post Settings, under the Template section, select the template you just created and publish the page. 
  4. View your page and confirm it’s using the same template as your first page! 

Advanced Steps

If you’re more technical and keen to test out future ideas, check out this PR. Keep in mind that you can always download the specific Gutenberg plugin version for this PR here to make it easier to explore. For context, this PR seeks to help better differentiate between when you’re editing post content vs the template by obscuring the ability to edit the post content when in template editing mode. Feel free to leave your thoughts on this PR in the comments below or on the PR directly. 

Testing Video

Note that there are chapters added to the video that correspond with the steps above.

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 May 26th

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 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. 

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

FSE Program Query Quest Summary

This post is a summary of the fifth call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

A few reminders:

What’s next for the Query 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.

For anyone interested in the future of this powerful block, check out this overview issue tracking future improvements planned for 5.8. 

How far can one go?

Since this was a more open ended call for testing with options to go further in the Query Quest if one chose to do so, it’s neat to see the directions people went. In particular, the following from @webmandesign shows a lovely take on the call for testing both in terms of the design and because @webmandesign went beyond the initial scope of the instructions:

Image showing a homepage with a few versions of the query block with a dark blue background.

High-Level Feedback

Here’s what a few folks had to say about the overall experience that’s helpful to keep in mind. In general, there was both a sense of wonder in what the Query Block is capable of combined with a sense of being overwhelmed for the same reason:

It is kind of stressful customizing the Query block layout. It makes me wonder if the placeholder when starting up should contain checkboxes suggesting additional blocks that should by default be added when a user begins to customize the design. I also find it difficult to move up and down the hierarchy of blocks. I have to look at the breadcrumbs to see where I am, and then guess which block I have to select to make specific changes.

@paaljoachim in this comment.

Loved the whole query block concept and I want more query controls for other data!

@suhayse in this comment.

I was blown away that I could change the date on posts within the editor, change 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., and make new posts. Wow!

@kristengunther in this comment.

This was my first time using the Query block and it is very cool to be able to build a list of posts and customise them without having to write WP_Query. What a revelation! Thank you to everyone who has put so much work into this block.

@getdave in this comment.

I really like this block! This will give users lots of options in customizing their post layouts!

@synorae in this comment.

What I constantly find confusing and frustrating, especially if I put myself in the shoes of new users or somebody finally switching from the Classic editor to 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/ is the lack of visual references in the layout. Having to hover on elements to figure out what’s what, where things are nested, or simply try to insert a new block is still confusing when dealing with layouts. I’ve been recommending Gutenberg as default editor for blog posts to all my customers, and some are eventually getting used to it, but when it comes to creating more complex layouts things can get complicated very quickly.

@piermario in this comment.

Repeated Feedback: Control over spacing & placeholder confusion

This test, in particular, led to two main repeated points of feedback that touch on the wider themes from prior calls for testing around specific placeholders being confusing to interact with and the desire for more control over spacing/alignment of blocks. For this call for testing, the feedback centered around both how confusing the “read more” placeholder text was in the Post Excerpt Block and on desire for more control over spacing with the Columns Block

We need margins UIUI 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. controls! So that we ourselves can control the visible gaps, and not have default gaps here and there that the theme happens to have inserted.

@paaljoachim in this comment.

I missed the ability to style the columns individually – increase the gap between the columns, but that’s not part of the current coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. column block.

@suhayse in this comment.

Content widths are very confusing. I’d expect default to be inherited from theme. For example, adding Columns block directly into “index” area content will render the block fullwidth. To control the width then, I need to wrap it in Group block, which is set to custom width while I’d prefer it to default to “Inherit default layout”. 

@webmandesign in this comment.

Editing the read more text definitely works. I didn’t even know you could change it. I probably assumed you couldn’t because the cursor is a pointer when hovering/clicking it. It’s definitely not clear that it’s a placeholder. For consistency with traditional more-links, I would make “Read more…” the default text and not just a placeholder. Users could still delete it if they didn’t want it to appear.

@greenshady in this comment

Spacing is very off and inconsistent. But this is actually very common issue with block editor and very difficult to tackle 100% in themes, probably even impossible due to different HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. in editor and website front-end. Margins (+ padding) control for every block would be very beneficial.

@webmandesign in this comment.

Configuration Improvements

The Query Block is a complex, powerful block that makes the configuration step both tricky and crucial. In the long run, the plan is still for this to be more of a theme author tool rather than something an end user will interact with. Regardless, the current setup is worth evolving even if only to benefit theme authors and, later, end users when more block variations are explored! 

Of the items in this section, the most prominent and recurring piece of feedback was the desire to make it easier to switch the initial pattern since, if you want to switch the pattern you’re using mid way through, you essentially have to start over completely. Addressing this is currently under discussion and should improve with updates like this coming to 10.6 that make the initial setup exploration more intuitive. 

I wanted to go back and change the size selection to 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.. I think there was large, medium, small. Is there a way to change that layout after you’ve customized that query block? Seems like it should be part of “Display Settings” in the block controls.

@suhayse in this comment.

Is there a way to change the layout of the query after you choose it? For example, if I chose one and then customized some things – can I can change layouts later on or do I have re-make the whole query block? I couldn’t figure this out.  

@kristengunther in this comment.

When adding a dark background color I tried to set the text color to a light color and was surprised when changing it had no effect. Only after thinking this through did I realise I needed to alter the Link Color in order to have the text color change.

@getdave in this comment.

I expected the Query Block to have the ability to make all the featured images within the block the same size, but that didn’t happen.

@synorae in this comment. 

Settings Improvements

Outside of the initial configuration steps of the Query Block, the options are endless for deeper customizations. This section of feedback seeks to focus on that experience, whether that’s altering the Query settings or the problems that came up around adding various blocks into the loop itself. 

At a high level, a major point of feedback centered around general confusion for why certain settings existed in one place and not another. In many ways, the various settings one might interact with to create what you want with the Query B,lock felt split across too many places in an unpredictable and counterintuitive way. For example, you might want the block to display a certain categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. but only 3 posts from that category. To do that, you have to interact with the block 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. settings first to set the category before using the block toolbar to select the number of visible posts. While people were ultimately able to find what they needed, it leaves lots of room for improvement in streamlining the creation workflow. 

When selecting the category of the Query block, it would be nice to be able to select from a list of existing categories instead of suggestions from input. Because I do not remember all the categories.

From a member of the Japanese WordPress community.

Having some query controls in the block toolbar and others in the block’s sidebar seemed confusing. Colocating them would seem more logical. I appreciate we’ve probably placed the “most common” controls in the toolbar for convenience but having to jump between locations when customising the query didn’t make for a smooth experience. Perhaps duplicate the toolbar controls into the sidebar?

@get_dave in this comment.

Can I make the date italics? I didn’t see many text styling options for the post date.

@kristengunther in this comment.

Collection of Miscellaneous Bugs & Enhancements

As in the past, there are sometimes bugs that don’t fit nicely into a specific category, but that are still worth mentioning. To make it easier for those working on full site editing to get a sense of bugs at a glance, they have all been shared here:

When I added a “Login/out” block, I was able to click on it, and the outer part of the admin panel were displayed twice.

From a member of the Japanese WordPress community. 

Some of the patterns don’t respond well as the screen gets smaller.

@getdave in this comment.

I wanted to try using keyboard and tried to look for shortcuts from the “Keyboard Shortcuts” menu in the toolbar, but it showed nothing. I’m still looking for a cheat sheet or something to try editing with keyboard only, but I still haven’t found it, and it doesn’t feel like something quite discoverable yet.

@piermario in this comment.

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (29 April)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in! If you’re keen to join an effort like this in the future, please join the 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/. channel.

Attendance: @mkaz @annezazu @sabrinazeidan

Video Recording:

Topics Covered:

  • We kicked off the call going through the latest summary post on building a restaurant header and some of the feedback items that came up there including talking about 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., list view, and more.
  • We talked in depth about the Navigation Block, including showing a demo of the mobile responsive menu that’s in progress. This will be part of the next call for testing so stay tuned!
  • We discussed the theory behind the click through to edit pattern with template part blocks and viewed the current design/development in progress.
  • We reviewed the Enhancing select mode overview issue, talked about what Select mode is for, and touched on a few other medium sized projects.
  • List View was brought up while talking about more tools to use within the Site Editor leading to a discussion around using the persistent List View (always keeping it up) and general discoverability of the tool itself.
  • The conversation about List View led nicely into discoverability of the toolbar items themselves and this recent exploration from a designer about moving more document attributes into the top bar in the post editor to help mimic some of what’s to come in the Site Editor.
  • Finally, we plugged a few posts/docs including: the Full Site Editing Overview document in the dev handbook, the refinements to the core editor toolbar, and the latest call for questions.

Next Steps:

@annezazu found a small bug with the navigation block where changing global styles typography changes the typography of the placeholder text and will report it!

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

FSE Program: Bring your questions – Round Two

With the Go/No Go Next Steps outlined ahead of WordPress 5.8’s release in July 2021, let’s use this time to dig into any general questions you all might have around Full Site Editing! If possible, please focus questions specifically around WordPress 5.8 as those will be the most high impact to address. You are welcome to submit questions using the form below or to leave them as a comment on this post by May 12th

Keep in mind that because, depending on the questions it’s likely that some answers might take the form of “people are working to figure this out and feedback is welcome here,” rather than a definitive answer. This is especially true for features/milestones that are planned for the 5.9 release.

Where will you share the answers? 

I’ll share a recap post on this blog (Make Test). Questions will be grouped with corresponding answers for easy review. You can see what the outcome will look like based on the first round here. I will track down answers to every question and share my work as I go by creating a collaborative Google doc where people can help find answers or simply see how the work evolves. I very much welcome collaboration here!

While the main result will be a lovely list of answers, this collective effort will also be useful for future documentation updates and potential tutorials. Once the post is published, I will follow up via email with everyone who left their email and a question in the form. For anyone who leaves a question as a comment on this post, I will @ your username in the recap post so you don’t miss out too!

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. To help with planning your involvement, you can see the upcoming/current schedule for the FSE Outreach Program here.

#fse-outreach-program #full-site-editing #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/ #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor #fse-testing-call