Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (14 July)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. It ended up just being me and @bobbingwide so I decided to not record and instead have a free flowing chat with Herb that was less structured and more in line with our interests. We chatted for just over an hour!

We mainly chatted about 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., what’s coming to 5.8, a few individual blocks (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., 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., etc), responsive controls, and various explorations Herb has done including building a few 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. plugins. Of those, we went through the following links that I recommend spending time reviewing too:

Next Steps

I followed up on two issues that we found while chatting: The reset to default option being too close to X for global styles UI and a bug with an empty template name and trying to rename it.

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

Test Team Chat Summary: 13 July 2021

The meeting took place here in Slack. @hellofromtonya facilitated.

This was the team’s first team chat in a year or more.

Discussion: What’s the team’s purpose?

@lucatume asked “what’s the purpose of the group?” Great question!

A healthy discussion happened around the history of the team and what role we serve in the project. The discussion starts here in the slack thread.

Some highlights are captured here:

  • Tonya shared the team’s history:
    • “The team is deeply rooted in validating and surfacing issues with user experience and usability. That’s where it started and lived in the space of testing workflows, screens, results, etc. through manual testing with users. Over the years, more and more testing has come to WordPress in the form of automated tests.”
    • “rebooting it [the team] to be all things QA and testing including triage, education, outreach, documentation, and expanding to multi-dimensional testing (automated testing, manual testing, usability – user – testing, and environment testing).”
  • Charter statement:
    • Tonya then shared “we as a team can formulate the actual charter statement. But here’s what I’m thinking (open to discussion):
    • “to create a high quality feedback 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. into the project to continuously improve and elevate the quality and usability of WordPress”
  • Is the charter statement too generic?
    • @lucatume raised that it felt too generic as the terms “quality” and usability can different meanings.
    • @boniu91 shared “I think they need to be some kind of generic. We’re looking at WordPress from many different angles and point of views while testing.”

Action Item: Tonya to publish a vision of the team’s big picture of how the team can serve the project.

Discussion: Why did the team go dormant?

@lucatume asked why the team went dormant. The slack thread starts here.

Some of the reasons given include:

  • Testing and quality know-how
  • Interest in driving the team
  • Clear path for how QA and testing can serve the project

Discussion: autogenerating e2e tests

@lucatume raised a discussion about how to autogenerate e2e tests from written step-by-step processes or recording the actual testing process. The slack thread starts here.

The team agreed this is a great idea to help anyone contribute to testing.

Action item: @lucatume will work with @justinahinon and others to identify an auto-generator tool.

#build-test-tools, #meeting-notes, #summaries

FSE Program Polished Portfolios Summary

This post is a summary of the seventh 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. 

On a more personal note, it’s so neat to see the various ways people engaged and to really feel the power of the WordPress community in these calls for testing — WordCamp Japan used the seventh call for group testing this week, a meetup in Philadelphia used it as part of their event (shoutout to @accessamy and @itsjusteileen), the call for testing was translated into Italian and Japanese (shout out to @piermario and the folks from 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. Japan) and three folks did write ups encouraging others to test alongside their feedback (@greenshady, @bgturner, and @bobbingwide). Plus, I had some of my coworkers go through the test for good measure! I am super stoked to see a diverse set of ways folks are exploring this program and deeply appreciate you all making it happen.

Teamwork makes the dream work. Anything I can do to make participation easier and more fun, let me know!

How far can one go?

It’s hard to compete with @greenshady’s awesome explorations at this point! Check it out below: 

Image showing a portfolio page with a banner at the top, a list of the latest work in the middle, and customer reviews at the bottom.

High Level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following detail oriented feedback. Since this was a more open ended test compared to the prior one, it was interesting to hear about the ways in which people explored things on their own and the resulting joys/frustrations that caused. 

Compared to the earlier tests, the overall experience is way more stable and polished. My biggest issue with 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/ and FSE is still the same: lack of visual references while designing, unless I do some hovering dance on the blocks and – this time – I didn’t have a clear picture of how exactly changing some elements (site title, navigation) on the portfolio template would affect other pages, so I got a little lost between pages.

@piermario in this comment.

Generally I love 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. though. Really cool that you can do that now without coding! I am looking forward to using it in projects.

@michaelsndr in this comment.

I had a lot of fun with this. And frustration. Some more fun. And…you guessed it…some more frustration….I enjoyed the process — yes, I revel in both the fun and frustration. Aside from everything that I think is broken, the overall system is pretty dang sweet. There are far more things that the development team has nailed down than there are that feel janky.

@greenshady in this post

Repeated Feedback: Switching between editing modes (template vs page/post) & various block improvements

This section is dedicated to repeated items from previous calls for testing. Once more, despite the three ways to visually distinguish the editing modes, there remains confusion around when one is in each mode. The deeper into these calls for testing we go, the more it becomes clear how valuable it will be to do things like view a template while editing content and have some good friction in place while interacting with post blocks in template editing mode.

Across a few blocks, some repeat items came up that are worth mentioning considering they were each mentioned at least two times:

Today I got lost quite often. I didn’t always know if I was editing the Portfolio Template or the Portfolio page.

@piermario in this comment.

However, once I was in the Template Editor it wasn’t clear when I was editing the template or the content itself. When I used the block navigator – I could see the post content block (which made sense) but only because I was already looking.

Automattic employee feedback. 

Some general usability feedback of the column block: I’d love a way to make the vertical margins disappear so that full-width sections that have background colors don’t show any space between them.

@bjturner in this post.

Post Title Block – no way to style text (bold, italics etc), and no way to have a totally custom colour. Do these color options come from the theme itself? 

Automattic employee feedback. 

As a user, template editing is a great tool when you have a good visual understanding of what your post or page content will look like in the context of the full site. The issue is, when in the post editor I don’t know that, unless I am checking “Preview” as I create/edit my content. Has any thought been given to how we could improve this experience so users are more aware, as they’re editing, of how their content will be displayed on the site (depending on the template used)?

Automattic employee feedback. 

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 & Related Improvements

Since the Query Loop Block featured heavily in this call for testing, it’s no surprise it was also an area of both great praise and criticism. On the whole, there was loads of excitement around this powerful block with folks keen to have access to it with WordPress 5.8. Outside of that though, the following items were raised for the Query Block itself and some of the related blocks used within it: 

Tied to the above issues, there was repeated frustration around deeper customization and limits of the nested blocks within the Query Loop, especially if someone wanted to go well beyond what the current patterns offer. It’s also important to note that this test was done without this PR merged for the Query Loop block, which makes the Post Blocks uneditable within the Query Loop block itself ahead of WordPress 5.8. 

The next section of template testing consisted of adding a Query pattern and customizing it. I have a love/hate relationship with queries in Gutenberg right now. The Query block itself works well. It has a solid balance between advanced usage and simplicity for the most part. I am amazed at what the development team has done over months upon months of iteration.The downfall is that the Query block is merely a wrapper. It is only as good as its weakest sub-block.

@greenshady in this post

There’s a bit of a confusion point in the Query Block with Items per Page. Despite having multiple published posts only one appeared by default. I found the controls in the Block Toolbar to increase, but also found it a bit cumbersome to toggle between the Block Toolbar and 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. to refine the underlying query.

@dryanpress in this comment

Query Block: Block outputs nothing on the frontend when there are no posts to show. Generally, it requires to show something that tells visitors that there are no posts or some custom message.

@sagarnasit  in this comment

General Usability Enhancements

As people explored template editing mode, the following items came up as areas that would make the experience more intuitive going forward. Many of these were repeat items but it felt important to call these out separately, in particular the quotes describing the current experience. While some of these areas have design explorations in place for potential inclusion in the future, this section captures the current pain points: 

It appears that I didn’t save the template since it’s showing a 404, even though the title says “portfolio.” I think what confused me was the “Publish” button in the upper right corner. Coming from a WP background I think I understand that “Publish” meant to publish the page template I was editing, but on initial use, I was hesitant to push the button because my context was the original page that I had created, not the page template I was editing.  

@bjturner in this post.

While in Template Editing Mode, I clicked the Preview button, clicked Preview in new tab and didn’t see the addition of the navigation block or other template changes. If this could work that’d be great, but if these won’t be available to preview outside Gutenberg due to how Templates are saved and stored, that preview dropdown item probably shouldn’t be available inside Template Editing Mode.

@dryanpress in this comment

If I create a new template, the new template is not available in the drop-down selector until I refresh.

Automattic employee feedback. 

When saving the template change, if I uncheck all the items that appear, the Save button gets defunct. If we are allowed to uncheck one of those, I think we should be allowed to uncheck all items too.

Automattic employee feedback. 

The Update option isn’t available once I’ve switched alignments on the block. I needed to alter the post title to trigger the Update option. 

Automattic employee feedback. 

When you’re creating a new template, for each existing template part that you insert, you have to remember to set the same attributes for the template part as used in other templates. Attributes that will need setting include the Width and Colours.

@bobbingwide in this comment

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

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

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

Upcoming FSE Outreach Program Schedule

In light of the 5.8 planning and next steps, I wanted to share the upcoming schedule for the FSE Outreach Program in order to ideally help people participate more in what’s to come. As changes occur and I’m able to create plans further out for 5.8, I’ll edit this post and note exactly what I changed at the very end of this post. I do expect changes so please see this all as what I anticipate vs set in stone plans.

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

Calls For Testing (aka CfT):

Based on what’s planned for 5.8, the following is lined up for testing:

  • Call for Testing #5: currently underway!
  • Call For Testing #6: focused on using template editing and 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. within that experience.
  • Call For Testing #7: TBD but likely focused on something like creating a more complex landing page using template editing and a more expansive set of theme blocks.

When I can, I’ll try to leave three weeks for testing rather than two but, due to the release timeline, this may not always be possible.

Overall Timeline:

DateGutenbergGutenberg 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/ Questions Round 2 CfT #5CfT #6CfT #7
April 2810.5Start
May 510.6 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.End
May 1210.6EndStart
May 1910.7 RC
May 2610.7EndStart
June 210.8 RC 
June 910.8End

Outside of these calls for testing and questions, there will continue to be live streams, hallway hangouts, important posts flagged, etc. This post will be updated to include the relevant links as time progresses:

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.
  • Submit FSE related questions to the upcoming call for questions.
  • Help me find answers to any submitted questions and write the recap posts.
  • Amplify calls for testing and the call for questions 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.

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.

April 29th 2021: updated to include links to the fifth call for testing and the second round of questions.

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