The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The meeting took place here in Slack. @hellofromtonya facilitated.
Discussion starts here in Slack.
A rep is an active team member who is reliable and trusted, advocates for and is knowledgeable of one or more areas of testing, and wants to represent, nurture, and grow the team to serve the WordPress project.
Action: @hellofromtonya to publish Call for Nominations once peer review is complete. ✅ Done.
Update: Here’s the post: Test Team Reps: Call for Nominations.
Discussion starts here in Slack.
Broadly testing entire release is hard to capture the feedback. Right? But testing something that has a ticket or Call for Test (CfT) is trackable for not only testers but the Core folks who are working on that thing under test. Sharing how you tested (the test environment, theme, plugins, etc.), steps you did, results, and maybe even a screenshare …. this type of info is valuable.
Commenting: “It works” is not as valuable as a feedback.
Action: @hellofromtonya will start a proposal for discussion:
laying out some guidelines for how testing is captured, what testing is not, and then that will guide everyone to know what a testing contribution is and isn’t.
Discussion starts here in Slack.
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.
The meeting took place here in Slack. @hellofromtonya facilitated.
This was the team’s first team chat in a year or more.
@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:
Action Item: Tonya to publish a vision of the team’s big picture of how the team can serve the project.
@lucatume asked why the team went dormant. The slack thread starts here.
Some of the reasons given include:
@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.
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:
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:
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.
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.
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).
Outside of the work above, there will continue to be live streams, hallway hangouts, important posts flagged, etc.
| Date | CfT #7 | Theme.json CfT | 5.8 RC CfT |
|---|---|---|---|
| June 9 | |||
| June 16 | End | ||
| June 23 | Start | ||
| June 30 | Start | ||
| July 7 | |||
| July 14 | End | ||
| July 21 | End |
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:
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
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:
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:
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.
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 readingThis 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:
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.
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).
Based on what’s planned for 5.8, the following is lined up for testing:
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.
| Date | 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/ | Questions Round 2 | CfT #5 | CfT #6 | CfT #7 |
|---|---|---|---|---|---|
| April 28 | 10.5 | Start | |||
| May 5 | 10.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 12 | 10.6 | End | Start | ||
| May 19 | 10.7 RC | ||||
| May 26 | 10.7 | End | Start | ||
| June 2 | 10.8 RC | ||||
| June 9 | 10.8 | End |
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:
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:
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.
The fifth call for testing is already underway, so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more.
This post is a summary of the fourth 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:
How far can one go?
It’s always fun to see how far people can take these tests in creating something cool without code. Here are a few screenshots of people’s creations that make me hungry just looking at them:
High-Level Feedback
Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:
All of this could be because of my inexperience with 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/ the 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. I’m used to working with Astra and other 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. libraries rather than the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks.
@suhayse in this comment.
The most problematic issue is that what I saw in the editor was not what I got on the front end. I have played around with it enough to know in my mind what it might look like on the front end to make adjustments without previewing the changes. However, that is not the user experience that WordPress is shooting for.
@greenshady in this WP Tavern post.
Most of us were confused by the current 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. and 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. of the full site editing experience. For some of our colleagues, this was the first time using the block editor for a whole day.
@francesca in this Yoast blog post.
Repeated Feedback: Improving saving, desire for a preview option, and differences in spacing
As with last time, to better consolidate repeated pieces of feedback, this section only contains new bugs or enhancement requests while still sharing quotes that highlight how these areas continue to be a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life. In this case, keep in mind that spacing refers to everything from differences between the front end and back end to enhancement requests around setting the width of various blocks. In general, though, it further underscores how the differences in experience between the editor and front end break the promise of WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. currently. Thankfully, lots of work is underway to continue iterating on this aspect of the experience!
One frustration point was the ability to preview as others have mentioned (the live site definitely looked different from the dashboard preview). When I did view the live site, there wasn’t any margin or padding on the main 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. section but there was on the added column set on the top, even though both were set to full width. I tried changing that main header column width back to wide, saving, then going back to full width but it didn’t help.
@suhayse in this comment.
Another thing I noticed was that some small changes, like adjusting the percentage width of the individual columns didn’t activate the “update design” button.
@suhayse in this comment.
I click to Update Design. As there is not yet any simple way to preview on the frontend like we do in the Post/Page screen. I copy the site address url and open a new browser tab and paste it into the new tab to see the frontend. The frontend does not show any margin along the left edge.
@paaljoachim in this comment.
I noticed along the way that the Update Design button was greyed out on occasion when I made some adjustments inside the Cover block and other inner blocks. I had to click into various blocks to get the Design button active again so that I could save. (This seemed a bit hard to track.)
@paaljoachim in this comment.
The site editor makes it looks like there is a small margin all around the full-width header. On the site itself, this isn’t seen. I had set a background color for the full-width header which is edge to edge on the site, but has a margin all around it in the editor.
@kristengunther in this comment.
Columns Block Improvements
Because this call for testing required people to make great use of the Columns Block, it was also the focus of a lot of feedback from various participants. Overall, this feedback mainly came down to two interrelated areas: difficulty navigating between nested blocks and confusion around properly setting width. What follows are the new issues created as a result of this call for testing:
Testing was smooth overall except when it came to setting the Columns Block to full-width (both in the header and body of the page in the Site Editor). I was unable to set the block to full-width within the Block Toolbar settings. I was able to do this outside of the Site Editor on a fresh page though.
@synorae in this comment.
I see no visual difference from selecting Wide width or Full width in the backend.
@paaljoachim in this comment.
It’s not clear that the symbol/icon is Full width. It would make sense to have arrows to indicate that it should be full width.
Anonymous Yoast employee in this GitHub issue.
I don’t see an option for full width? Ah it’s under alignment. “Alignment” sounds like left/center/right, not the size. What’s the difference between wide and full wide? I don’t see much difference in the preview.
Anonymous Yoast employee in this GitHub issue.
Setting Styles
As part of this test, people explored setting various styles to customize their heading to their liking and bring to life the feeling of a restaurant. Similar to the complexity in navigating between nested Column Blocks, though, setting styles proved to be pretty confusing considering how unintuitive it was to figure out how to properly select and then style the section one wanted to. Tied to this, it wasn’t always clear where one could find the setting that would do what they wanted since various settings are spread across the block toolbar and block settings. In some cases, the setting to accomplish something doesn’t exist yet too! As more work is underway to add in more styling options and normalize block level controls in a more intuitive way, this is an area ripe for continued iteration.
This is global settings vs individual page template settings. It’s pretty confusing right now. I don’t know exactly where I would set universal global header colors. I would expect to be able to do that in the Template Parts/Header but I don’t immediately see how to do that.
@suhayse in this comment.
I found I had to set the background color for my header 3 times, once for the index template (like in your video), once on the page home template, and once on the page template.
@kristengunther in this comment.
Discoverability of settings, not ideal. Some things are in the popup toolbars, others in 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. (both in Site Editor and Appearance), other in the top toolbar. You had to find the cog and the Global Style icons to open more settings.
@francina in this comment.
When you are new to this, you are really wondering if you need to find the settings in the list overview left sidebar, or the cogwheel right sidebar or on the block itself, all the options are all over the place.
Anonymous Yoast employee in this GitHub issue.
Why does the column change size when changing the color in the settings? At least it definitely seemed like it happened that way. That’s unnecessary and unexpected.
Anonymous Yoast employee in this GitHub issue.
General enhancements & feature requests
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 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.. This only includes new feedback and doesn’t include previous findings from prior tests:
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.
Like the first design I was shooting for, I wanted my Navigation items to look like individual buttons, each with a bit of whitespace in between. However, the Navigation block does not currently support adding backgrounds to each nav item. Even if it did, it also does not have a horizontal margin setting to add the spacing.
@greenshady in this WP Tavern post.
Collection of Miscellaneous Bugs
Because this was a more open call for testing, not all bugs fit nicely into a category or theme with many of them being standalone problems. 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:
You must be logged in to post a comment.