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 team gathers in #core-test. Please drop by any time with questions or to help out.
For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.
Feature Overview
A lot has changed since the first call for testing focused on Template Editing so, if you’re worried about this being a repeat experience, don’t be. As a reminder, Template Editing Mode is the feature of Full Site Editing that unlocks the ability to switch between editing an individual’s post/page content and the template that an individual post/page uses. When this first was released, you were only able to edit a template but you couldn’t create a new one or assign a post/page to use a specific template. At this point though, you can create a new template, edit current ones, and select which template you want to use for pages/posts. Tied to this, the interface has been updated to make it clearer when you’re actually in template editing mode. For a deeper dive into this new feature, check out this video that goes more in depth.
To make this a tiny bit more realistic, we’re going to pretend we’re creating a WordCamp site with a custom landing page to attract visitors from another event to join the WordCamp you’re hosting.
Testing Environment
While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment:
Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.
Testing Flow
Important Note:
While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a beta feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature.
Known issues:
While creating this call for testing, a few issues popped up that you too might experience as you go through this. Rest assured they have been reported. Here’s a non exhaustive list of the most serious items:
The “Add Block” prompt has a regression that’s causing the words “Add Block” to appear in various places, including in a way that makes the text look quite squished.
Known issues are expected to be found at this stage in development for something that’s so actively being iterated upon!
Setup Instructions:
Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme.
Go to the website’s admin.
Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.6.
You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, you aren’t correctly using the Site Editing experiment. Do not click on this as we will not be exploring the Site Editor for this test!
Creating pages
Under Pages, select “Add New” and, one by one, create three pages back to back with the titles “About”, “Contact”, and “Code of Conduct”. Publish each. These don’t need content added in as they will simply be links for a future menu.
Create a fourth page, title it something fun to bring people into your event and don’t add in any additional content. For example, I titled mine “Feeling inspired from WordCamp Couch?”.
Publish the page and keep it open.
Creating a new template
In the sidebar, open the Settings and select Page Settings (you should see Page and Block). Select “New” under the Template section to create a new template. Here’s a short video in case you get stuck.
Title the new template “WordCamp Outreach”.
From there, you’ll enter Template Editing Mode.
Customizing the template
Remove the Site Title, Site Tagline, and Separator blocks at the top of the template.
Add in a Cover Block above the Post Title Block and use any image you’d like. I downloaded this one when creating this test. You might need to use the “Insert Before” option in the toolbar of the Post Title Block.
Once you have an image added, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width.
Drag and drop the Post Title Block into the Cover Block.
Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it.
Select the Cover Block once more and apply a Duotone Filter to it. Here’s a screenshot of what icon you’re looking for. Note that by selecting “Shadows” and “Highlights” you can select your own custom colors!
Add a Spacer Block underneath the Cover Block and set it to 50px.
Add a Columns Block underneath the Spacer Block and choose 50/50.
Once inserted, select the parent Columns Block and set the width to “Full Width”.
Add in brief information about your event in the first column and set any alignment you’d like.
In the second column, add in two buttons asking people to Apply to Speak and Apply to Sponsor. For the purpose of this test, it’s okay if these do not actually link anywhere. Feel free to customize the buttons to your liking too!
Underneath the Columns Block, add in an additional Cover Block and select a background color.
Once you have a color, select the Cover Block once more rather than the Paragraph Block inside it and use the width options to make it Full Width.
Inside the Cover Block, add in a discount code message and a Button Block below it encouraging people to buy tickets. Customize this text to your liking, whether in terms of alignment, custom colors, or more.
Create a custom footer
Underneath the second Cover Block, add a Template Part Block and select “New Template Part” to create a custom footer for this template.
Once created, head to the Block Settings in the sidebar to add in a Title under the Advanced section, set the Area to “Footer” under the Advanced section, and toggle on “Inherit Default Layout” under the Layout section.
From there, add a Columns Block into the Template Part and choose 30/70.
Using the Page Link option, add in your “About”, “Contact”, and “Code of Conduct” pages. Customize the Navigation Block to your liking!
From there, select “Update” and save your changes.
Create a new page & assign the new template
At this point, head back to your wp-admin dashboard and, under Pages, create a new page.
Add a title that references another pretend event that someone might attend. For example, “Feeling inspired from WordCamp Bed?”
In the Post Settings, under the Template section, select the template you just created and publish the page.
View your page and confirm it’s using the same template as your first page!
Advanced Steps
If you’re more technical and keen to test out future ideas, check out this PR. Keep in mind that you can always download the specific Gutenberg plugin version for this PR here to make it easier to explore. For context, this PR seeks to help better differentiate between when you’re editing post content vs the template by obscuring the ability to edit the post content when in template editing mode. Feel free to leave your thoughts on this PR in the comments below or on the PR directly.
Testing Video
Note that there are chapters added to the video that correspond with the steps above.
What to notice:
Remember to share a screenshot of what you created if you’re up for it!
Did the experience crash at any point?
Did the saving experience work properly?
Did you find any features missing?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?
Leave Feedback by May 26th
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHub, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
Great.
First of all, kudos for the exact description of what to do. Nothing can go wrong there.
I was able to work on points 1 to 36 without any problems. I didn’t notice any errors in the actual workflow. The second page that was assigned to the template also delivered the desired result.
While creating the template, I missed the global styles. They were displayed when the template was called up again.
I worked integrated with keyboard and mouse.
I found it a little more difficult in design. But maybe my ignorance.
In the cover block, the content is placed directly on the outer edge. There is no space between the screen and the content. And I didn’t find anything appropriate to hire either. The only solution for me was to center the content.
I have now inserted a group block between points 18 and 19 and created the columns (19) in the group block. This allows me to adjust the design better.
@elbsegler thanks so much for jumping into this lengthier call for testing. It always neat to see new names.
While creating the template, I missed the global styles. They were displayed when the template was called up again.
Can you clarify this part? Right now, there shouldn’t be a Global Styles interface in Template Editing mode. This is intentional as Global Styles isn’t going to be shipped in 5.8.
I found it a little more difficult in design. But maybe my ignorance.
If you’re open to it, I’d love to see screenshots of what you’re describing. For example, while writing this test, I found the Columns Block added strange spacing beneath it making it hard to design the background of the Columns Block. This should be resolved as padding control is integrated but still want to be sure we’re talking about the same thing.
I’m not seeing padding control in the UI as I go — not that I’m done.
Because I can’t make myself move on without solving a problem in that step, I stuck a 30-70 Columns block into the left side of the 50-50.
And I’m still worried that every time I click the mouse, I’m going to add another block, which I know is behavior of months ago to years ago. (I’m actually really pleased that after several hours yesterday I did NOT have 600 blocks to figure out how to get rid of!
I was able to get through all 36 steps with no issues!
(other than the noted bug on step 30 I didn’t see anything that looked broken)
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.
Also, I think it would be worth adding to these testing steps around step 20 or 23 a step to add the post content to this template. Each page using the template would ideally include a content section rather than just the page title in the cover block. I went back and adding this block to the template and it worked, but I think it’s closer to an actual use case and may give an editor a better sense of template layout options.
@circlecube Thanks so much for testing this and for your great feedback. Glad to hear you made it through in a breeze. Perhaps I made this too straight forward 😉
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.
This is excellent workflow feedback. It took me a bit to figure out what you meant but I think I was able to replicate and capture the problem in this issue. If you don’t mind peaking to confirm, that would be great.
Also, I think it would be worth adding to these testing steps around step 20 or 23 a step to add the post content to this template.
Originally, this was in place and I completely agree. As I was testing though, I ran into this strange duplication and deletion bug with the block so removed it. Ultimately, I try to steer these calls for testing away from busted features so people don’t get completely stuck or discouraged 😀 It sounds like this worked without a problem for you though so I am going to revisit this issue to make sure I can replicate it across a few test sites.
Yes, that’s what I saw, thanks for creating the ticket. I added some clarifying comments and screenshots to it.
I also saw the duplicate post content block, was not sure where it came from and assumed it was my mistake. I was able to just delete it and was ok. But I agree, don’t direct testers to busted features if we can help it! =D
Did the experience crash at any point?
Yes, got the “Updating failed. The response is not a valid JSON response.” message a few times before I saved my template. Once I saved it, the message was gone for good.
Did the saving experience work properly?
Yes, it did but I kept forgetting that I need to press Save twice.
Using empty columns on the sides doesn’t help either because of how 3-column layouts are handled on mobiles.
What did you find particularly confusing or frustrating about the experience?
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.
What did you especially enjoy or appreciate about the experience?
The fact that you can create your own templates in such a quick and easy way! Duotone filters are nice! Didn’t know that feature.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Yes, except for the space between the buttons.
Did it work using Keyboard only?
Didn’t focus on that but I do like using / to insert blocks.
Did it work using a screen reader?
Didn’t try.
What I’ve learned:
That you can use the “Insert Before” option. I didn’t know this option existed. I didn’t know I could control the size of the logo by dragging the edge – I learned it from your video.
When creating the template part (footer) I was looking for a way to provide the name, didn’t find it until you asked me to use the Advanced section.
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 thanks so much for testing and passing along the screenshot too! It’s always helpful to have visuals and always nice to see new faces in this work.
Yes, got the “Updating failed. The response is not a valid JSON response.” message a few times before I saved my template.
Hmm! I’m glad this eventually went away especially since the cause seems to be a bit varied based on this support thread. I’m not going to open an issue for now since that seems to be a more longstanding problem rather than something specific to this test.
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.
Great call out here and example. There is a new feature for padding currently that resolves this in a way. However, as this video shows, because the padding is added on all sides, it can also create a funky experience. Lots of work is underway though to add consistent dimension controls across blocks so, for now, I’m not going to open an issue since this will be covered by the work being done there.
I wouldn’t have known I needed to use the Page Link block if you hadn’t instructed me to do so.
Like you, I’ve gotten tripped on this and have forgotten to first select “Page Link Block” before searching for a page title. This is part of the adjustment to a new feature currently that allows a ton more blocks to be added into navigation while our brains are still used to a more limited set of options 😀 In any case, I’ve captured your feedback in this previously reported issue as some sort of introductory nudge/prompt would go a long way.
I didn’t know this option existed. I didn’t know I could control the size of the logo by dragging the edge – I learned it from your video.
There’s SO MUCH hidden in these toolbars. Thank you for noting this specifically as something you learned by doing this call for testing.
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.
Interesting idea! Right now, the options are “Edit Site” and “Edit Page/Post”. It’s unclear to me if Edit Site will stick around in the long run though. While I can see why this would feel nice to add, it’s intentional right now that there are certain pathways into template editing mode. You can get a sneak peak of future designs here for flows into template editing from the post editor. I’ll check in with a designer working on this to see if a new issue to capture this feedback makes sense!
@annezazu Thank you very much for addressing all the issues I raised! Wow, you care so much.
Yes, the new feature for padding from your video resolves the issue with making content narrow in a way. I can see there are some plans for adding horizontal alignments to the Columns block: http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/31459. If center-alignment for columns is added too, we could use the 1-column block with the width set in percentage (the ability to set the column width in % is already there). What I like about it is how it works on phones – the column content fills out the entire space (doesn’t happen when using padding).
Thank you for commenting on the other issues Anne and opening a ticket about the Edit Template directly feature. Yes, that would eliminate that extra step of opening the page when we want to edit its template. Nice!
Of course! I do care a ton, especially because people like yourself are taking time out of your life to help with this work. Thanks for the following up too with additional context. I’m already excited to include this in the summary post for this call for testing!
I just completed the test (while also completing the Italian translation, which should be available soon), and here are my notes, but first of all… a screenshot!
Issues 16. Couldn’t delete the extra paragraph block as the Delete option was out of the viewport and there was no way to scroll down the list. I was eventually able to delete the block by clicking on a menu item, move down the settings context menu using arrow, and pressing Enter hoping I was on the right menu item. This is very frustrating for both new users and experts alike. I also sought help in the List View, but there is currently no option to delete items from there.
21. Couldn’t find buttons alignment options. I later found out that there’s an alignment setting at the column level, but no setting for the individual button, which is what I was looking for.
Other notes
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?
Did you find any features missing?
Alignment settings, as well as some other (Full Width settings) hiding in places I would have never guessed, if not going checking one by one all the elements in the toolbar.
What did you find particularly confusing or frustrating about the experience?
As usual, the lack of visual reference in Gutenberg.
This time, specifically how awkward it often is to do something as easy as adding a new block under another you just added.
I wish I could just type / in any moment and have Gutenberg understand that I want to add a new block. Quite often I have to search for the current focus, double-check what is currently selected, find the tiny [+] button, and so on.
Whenever I’m testing, I put myself in the shoes of a WordPress / Gutenberg newbie and try to go through the experience as if I knew nothing about it. I still think that our main goal should be having an editor that is so simple and works so seamlessly that even somebody starting from scratch (or coming from the Classic editor) could just hit the ground running. I’ve been advocating for Gutenberg and recommending it to my customers, though I recognize that some users still find it hard and somewhat frustrating to use.
Either way, we’re here to improve it, and I’m sure it’ll keep getting better.
What did you especially enjoy or appreciate about the experience?
I appreciate the speed in page loading time and being able to manage most things on a single browser window.
This time I also noticed some improvements, and the Template Editing Mode seems somehow clearer than the iterations I had seen during the previous calls or while poking around Gutenberg during translation, usually to find out where strings like to hide. 🙂
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Not completely. As an example, I didn’t expect the 50/50 column not to be Full Width.
Did it work using Keyboard only?
I didn’t try. Still hoping to magically find a keyboard shortcuts cheatsheet. 😇
Did it work using a screen reader?
Didn’t try.
I hope this helps! Thanks to everybody for their contributions and especially thanks to @annezazu for the awesome work and the friendliest support ever!
@piermario super hero over here! Translating and giving feedback? Amazing.
Couldn’t delete the extra paragraph block as the Delete option was out of the viewport and there was no way to scroll down the list.
What browser are you using? I tried setting my test site to Italian but still found that there was a scrollbar (was wondering if it was a translation issue).
Couldn’t find buttons alignment options. I later found out that there’s an alignment setting at the column level, but no setting for the individual button, which is what I was looking for.
Whew, yes. That’s intentional (needing to select the parent block) but I totally have “fallen” for this too. This is part of the trouble with nested blocks in particular!
Alignment settings, as well as some other (Full Width settings) hiding in places I would have never guessed, if not going checking one by one all the elements in the toolbar.
I wish I could just type / in any moment and have Gutenberg understand that I want to add a new block. Quite often I have to search for the current focus, double-check what is currently selected, find the tiny [+] button, and so on.
You are hitting on a very big piece of feedback about the editor as a whole (not just with full site editing). I’m not sure if you’ve seen this issue that’s digging deep into the + button/block insertion in general but I highly recommend checking it out, particularly the latest comments. Such a tricky design problem but it’s exciting to see some possible improvements to one of the core experiences of interacting with blocks. Expect me to quote you on this in the recap post 🙂
My browser is Firefox Developer Edition 89.0b10
Also, you’re the real super hero! 🙂
<3 I tested once more using both Firefox 88.0.1 and Firefox Developer Edition 89.0b14 (a bit ahead of the version you were using). Set my site to Italian and tried to replicate but wasn’t able to: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/ccVqRwe4ABd I kept finding that I could scroll down and that the opened settings would adjust based on whether there was room above or below. Very strange! I’ll keep an eye out for whether this happens again in the future. Thank you for following up 🙂
things I found confusing, and this may seem idiotic but …
9: “In the sidebar, open the Settings and select Page Settings (you should see Page and Block). ” .
I always forget to toggle between page and block. I spent a few minutes wondering why the template selector wasn’t showing. I opened settings cog, wondered if I’d activated a writing preference in /settings … all before I remembered the very subtle white on white tabs to toggle between page and block.
13 “Add in a Cover Block above the Post Title Block and use any image you’d like….You might need to use the “Insert Before” option in the toolbar of the Post Title Block.”
I found this very confusing. I added the Cover Block, I was unsure how to use “insert before” it seems isolated from context. I dragged a cover block in from the drop down tray and then moved it up using the arrows in the top bar which are very confusingly hidden.
15 “Drag and drop the Post Title Block into the Cover Block”
the existing post title would not drag, it only responded to the very very subtly indicated but unlabelled up down arrows in the top bar . Pressing the up arrow moves the Post Title above the cover block. The down arrow moves it below. No arrow moves it inside. I deleted the post title and dragged one in from the tray.
16 Center the Post Title Block using the block alignment settings and delete the extra Paragraph Block beneath it. 17 Select the Cover Block once more and a
I centred the title, and selected the cover block – immediately another Paragraph appeared and I had to delete it again using backspace, This made me happy because usually I instinctively try to delete blocks with backspace and nothing happens. Usually delete block requires some arcane key combo like ctrl & alt & Z or something. So the fact that backspace worked this time was amazing to me.
Immediately selected the cover block, another paragraph appeared. I deleted it again and this time I tried to select the cover block using the super-hidden and ultra secret list view which is unlabelled in the topbar and looks like it makes lists. I selected the Cover.
17 Select the Cover Block once more and apply a Duotone Filter to it
I looked in the side bar, under the Block tab for the Style of Duotone. I didn’t want to read instructions I wanted it to be obvious. I expected to find it under “Styles” or close to styles. Then I tried “media settings” but eventually I failed and looked at the timage of the icon I was looking for . It is in the top bar, unlabelled.
I am unsure why this particular style lives there, and what makes Duotone similar to Replace, rather than a style control.
just an addendum. 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 sidebar 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 Gutenberg editor are under 3 vertical dots. Titled (invisibly) “Options”.
This terminology and labelling or lack of it is confusing.
“Settings” should be a sidebar icon, and labelled “show edit controls”
and the 3 dots icon should be a cog icon.
19 Add a Spacer Block underneath the Cover Block and set it to 50px.
I typed “space” into the Block add dropdown and was met with the most horrible looking spamvertising list.
Available to install
Select a block to install and add it to your post.
Available to Install – Advanced Separator block
.. three more items.
there were three items for sale? Fremium add-ons to baffle my clients?
They looked horrible with the mixing of icons, and the nasty upsell methodology into a document edit workflow.
I selected the text in this spamvertising list and the editor crashed.
The editor has encountered an unexpected error.
[Attempt Recovery][Copy Post Text][Copy Error]
Ac@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:10:8195
533/Vc</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:10:10434
we@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:84:293
He@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:97:464
zj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:228:406
Th@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:225
tj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:152
Te@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:151
Pg/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
unstable_runWithPriority@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260
Da@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:280
Pg@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:16
ha@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:451
@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:236:171
uf@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:15:385
Qd@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:42:209
sc@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:41:277
unstable_runWithPriority@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260
Fi@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:41:147
@steve-pheriche Thanks so much for testing! As I said above to someone else, it’s always neat to see new names here as it means new perspectives to follow. For the record, none of this is idiotic and it’s all appreciated, especially since you took time away from working to help out.
I always forget to toggle between page and block. I spent a few minutes wondering why the template selector wasn’t showing.
You’re not alone there. I’ve added your feedback to this issue that’s about the same exact phenomenon. This dynamic hasn’t yet reached a level of intuitiveness just yet.
I added the Cover Block, I was unsure how to use “insert before” it seems isolated from context.
the existing post title would not drag, it only responded to the very very subtly indicated but unlabelled up down arrows in the top bar
What browser were you using for this test? I’m not able to replicate the inability to drag/drop so want to do some further testing here on my end in case there is a bug.
So the fact that backspace worked this time was amazing to me.
It’s the little things in life, eh? 😀
I deleted it again and this time I tried to select the cover block using the super-hidden and ultra secret list view which is unlabelled in the topbar and looks like it makes lists.
Love this blunt descriptions 😀 When you say unlabelled, what are you expecting there? It sounds like you want to have text rather than an icon. With that said, I see a label on hover and can see the List View name shows up when using text only mode.
Would love your thoughts on duotone too and what you’d expect to see specifically!
I typed “space” into the Block add dropdown and was met with the most horrible looking spamvertising list.
Ah it sounds like you’re experiencing the Block Directory which is a feature that searches a directory of individual block plugins. I tried to replicate the crash you encountered but wasn’t able to do so. When you say “I selected the text in this spamvertising list and the editor crashed”, can you be more specific? For example, did you select a block from that list? Did you just select the Spacer block? I tried everything I could think of to replicate this 😀 Thanks so much for copying the error over either way. That’s a huge help!
Hi Anne, Just quickly on this last item as it’s probably the most important.
“I selected the text in this spamvertising list and the editor crashed”, can you be more specific?
I typed “space” into the search of the block chooser, to call up the spacer. I saw the unwanted list of Directory contents (note: I will never want to see this, and never want my clients to see it)
I drag selected over some of the text in the listing in order to paste it into this comment section, but during that drag process the editor (main Gutenberg area) crashed to a white screen with the three options mentioned.
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
A last note: While attempting to trigger the crash I accidentally installed a “superspacer Lite” type of add-on. The install does not give a [yes/no] install prompt. Nor is there a link or description to how to remove these items. I am strongly against this mandatory sales counter, and I need a way of deactivating the Block Directory so it is not inducing my clients Interns from adding all kinds of add-on blocks. Not to mention the interface looks like craigslist. I’m sorry to be blunt but it’s awful and not what my clients want. They want a fixed locked design into which they enter content NOT a store from which to select 57 types of heading block.
Actually I managed to trigger the error again but I wasn’t screen recording unfortunately. This time it crashed while my mouse was on the template head zone, where the site title might live. And I’ll echo other comments here that I am utterly confused whether I am editing a template or a post, so I;m not entirely sure if I was editing post or template content when it crashed again.
I tried to repeat while screen recording but only managed to crash the heading block, which reported that it was unrecoverable.
Anyway, here’s the what happened before I started screen recording. http://wayback.fauppsala.se:80/wayback/20210729151846/https://i.postimg.cc/6Qf4dv31/Screenshot-2021-05-19-at-03-13-47-Edit-Page-gutenberg-test-site-Word-Press.png
I may have more time to try again tomorrow.
[code]Ji@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:7371
ta@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:8335
we@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:84:293
zj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:226:496
Th@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:225
tj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:152
Te@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:151
Pg/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
unstable_runWithPriority@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260
Da@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:280
Pg@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:16
ha@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:451
Ja@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:224:400
ch@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:93:81
e@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:18607
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:18674
instantiate/y</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:12839
b@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:6362
a/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9455
A/</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8214
L/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8517
dispatch@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:7222
a/</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9243
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
524/e.any@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5723
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5128
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
c@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5235
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5491
524/e.iterator@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:6466
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
c@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5235
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5491
a/</r</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9315
a/</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9295
a/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9450
A/</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8214
L/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8517
instantiate/f</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:11075
i@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:4645
[/code]
Thank you for following up! Just to note that there are instructions here for disabling the block directory since it seems like something of interest to do.
I tried replicating this trying everything but was unable to do so using FF Developer Browser, 89.0b14. Here’s a short clip of the testing: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/cg0OTY0ItyG I’ll note this as something that came up during testing in the summary post but, for now, without exact replication steps am going to leave it unreported.
And I’ll echo other comments here that I am utterly confused whether I am editing a template or a post, so I;m not entirely sure if I was editing post or template content when it crashed again.
I hear you there. That’s been a big point of feedback. As discussed in this issue, there are an increasing number of ways to make this context switching more apparent.
I typed “space” into the search of the block chooser, to call up the spacer. I saw the unwanted list of Directory contents (note: I will never want to see this, and never want my clients to see it)
Hi. Just passing by….. but you can disable the block directory (which shipped with Gutenberg more than a year ago) with the following php snippets:
I didn’t complete the whole test, but hopefully the things I found are helpful. Thank you for organizing all this — its awesome to see so many people trying this stuff.
@shaunandrews ahhh thank you for taking the time for such in depth feedback! Honored to have you swing through here to test. I’ll respond here and link to my comment on your post.
I found it, but it displays an obscure object message…
I tried to replicate this with 10.7 RC with a brand new test site but couldn’t manage to do so. If that comes up again, let me know but, for now, going to leave it unreported since this doesn’t seem to be a widespread issue.
This should likely be disabled as its irrelevant to creating a new template.
It was a little jarring entering into the template editor. The “snackbar” notification that appears for a few seconds appeared below the welcome tour, which was a little strange.
&
When I’m in “Template Editing Mode” there’s a 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.
Great feedback per usual. I shared and summarized what you said in the issue that focuses on the welcome tour here. I’m curious to know what would make it less jarring? As Jay notes here, there are three ways to visually show a difference when you jump into template editing mode:
The welcome guide
The dark frame that appears around the template
The template name clearly visible in the Top Bar
The “Template” tab in the sidebar is mostly useless. I’m sure there’s more we could do here to educate and relevant functionality we could expose.
Agreed completely. Opened an issue to kick off this discussion.
To be fair, I don’t think this is specific to the template editor — selecting multiple blocks using Safari in the block editor has always been problematic; I don’t like the way the text is highlighted, since I know I’m not selecting text but selecting blocks.
Add this to the list of things I would not have noticed had you not pointed it out. I’m not going to open an issue for this at this point but I would encourage you to comment on this issue about allowing users to customize keyboard shortcuts since this seems to fall into that realm and having more examples of customization would be helpful to see.
You can also see yet-another-example of the in-between inserter getting in the way; That blue [+] and line? That’s the “in-between inserter” and its always trying way too hard.
When I first set a duotone filter, the popover goes away. But, after that I find it very difficult to hide the popover; It only goes away if I click outside of the toolbar.
Excellent find. This seems to be isolated to Safari as I couldn’t replicate in Chrome. I nearly opened an issue for duotone before finding that this the case for other block settings like alignment. Here’s a comparison:
I commented on this issue that I think is in line with your feedback (have asked to make sure). I’ll open a new issue if needed but this seems to be related to a wider problem than just duotone.
Thanks again for spending a few hours on this and writing up your feedback so diligently (screenshots included). It helps loads.
After completing the 36. steps. I tried the Advanced Steps with the code for the PR. Unfortunately, the PR is built on 10.5.3, but TT1 blocks has already been changed to work with 10.6. Global styles isn’t loaded and this broke one of my cover blocks, the site logo and the footer menu. There still wasn’t enough visual indication of what was post content vs template content.
I was able to partly reproduce the strangeness reported by @steve-pheriche dragging text selected from the block inserter into the content.
Until that moment I hadn’t realised I could drag and drop content like that… not just from the inserter, but from anywhere – dashboard menu items, the buttons at the bottom of this comment form, and the site logo from the live site.
2a. But I couldn’t drag the logo directly into the site logo.
I think I’ve made this comment before. 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. 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.
It’s really really difficult to stop yourself dragging new blocks for the template into the Post Content block.
Editing a page which has no content, but relies on the template, does feel weird.
@bobbingwide! Thanks as always for diving in and going a step further to test things.
I tried the Advanced Steps with the code for the PR. Unfortunately, the PR is built on 10.5.3, but TT1 blocks has already been changed to work with 10.6.
Ah! Sorry about that. This is what’s tricky about sometimes including those advanced steps. I’ll keep this in mind for future tests. Seems like it might actually be wise to have a separate test for this UX across the various blocks sometime in the future likely post 5.8.
But I couldn’t drag the logo directly into the site logo.
Can you say more about how you were attempting to do this? For example, were you trying to drag and drop an image from your desktop into the site logo block?
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.
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. It sounds like you’re looking for a way to “copy template” to then build a new one. I’m going to check with a designer to see if this has been explored just yet and, if not, open an enhancement issue as I agree that this could be neat!
Editing a page which has no content, but relies on the template, does feel weird.
Agreed. This was a compromise I had to make with this test after some oddities with the post content block. Might not have been the right decision looking back but I didn’t want to set people up for an odd experience with too many bugs for this round.
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. 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.
To follow up, I added your feedback as a comment on this issue for now. Going forward, it might need to be it’s own issue but, for now, I think it’s wise to keep the feedback consolidated in the spots where early designs are being worked on.
Hi, Anne, thanks for the updates. I’ve published a post which contains the above comments, including the template and template part I created. I’ve also published Take 4, in which I tried to create a mostly empty template, writing the main part of the template in the page content.
Awesome! Thank you for following up here too and for time stamping your video. I’ll go through what you found.
If you delete a custom template the assigned template doesn’t revert to Default
Yes. I noticed this as well and asked some designers who are working on this whether this needs an issue or if it’s covered by future planned designs. I was directed to this awesome issue that shows what the designs are imagined for the future so, for now, have not opened an issue.
I couldn’t find the template part I’d named “Foooter” ( 3 o’s ) using search.
This was VERY strange 😀 I tried replicating by creating a brand new template part called “Foooter” to match what you did and was able to search to find it without a problem using 10.7.1: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/cvNDMOqQ0ba For now, I’m not going to open an issue just yet but, if you can replicate with 10.7.1, let me know and I can.
When you add a new button, focus doesn’t go into the button
This is intentional as it focuses on the Button parent block essentially. The same thing happens with other blocks like the Navigation Block!
Because I’d was editing the content, rather than a template, I couldn’t easily select full width for the columns blocks
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.”
Followed by 3 buttons: “Attempt Recovery”, “Copy Post Text”, “Copy Error”
Did the saving experience work properly?
Yes.
Did you find any features missing?
Using the columns block inside the cover block:
(1) Spacing was challenging. The left column text flushed left against the edge of the browser window. I inserted an empty 3rd column to add padding on the left.
I think it would be good to add padding and margin options to the columns block.
(2) Spacing between the buttons was not ideal (not enough control).
What did you find particularly confusing or frustrating about the experience?
(1) The navigation block: I’m happy to see this block! Yet, configuration is confusing, with the Starting Empty and Page Link options. Also, will this block include the option to use an existing menu that you build the in Menu area?
(2) Footer: 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?
What did you especially enjoy or appreciate about the experience?
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 block! Always learning new things.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Yes.
Did it work using Keyboard only?
Keyboard.
Did it work using a screen reader?
Didn’t try a screen reader, sorry.
@askdesign From what I can see, you are another Anne so hello to you too :D. Thanks so much for jumping into this test. I love the filler text you added to your landing page (very clever).
I went back to edit the template and got this error message a couple of times:
Any chance you were able to copy the error you got? If so, it would be a huge help as that’s now two reported crashes with this test and I’d love to dig into what might be going wrong.
(1) I think it would be good to add padding and margin options to the columns block.
(2) Spacing between the buttons was not ideal (not enough control).
Also, will this block include the option to use an existing menu that you build the in Menu area?
You will be able to “import”/insert existing menus using the Navigation Block. Here’s a screenshot of what the setup will look like where you can choose an existing menu: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/c0j1hOoxR4s However, since there’s work underway to make the Menu/Navigation Editor block based as well, it’s still a bit TBD how the interaction will work between the navigation block and the Navigation Editor (Appearance > Menus). You can see the compatibility with the Navigation Block is on the overview issue for this work though!
With something as important as Title and Area, why don’t we move those 2 items up to the top of the Block section?
Excellent call out. This actually came up in a previous call for testing so I’ve included your lovely thoughts as a comment on the open issue that relates to this. I agree that I don’t find it terribly intuitive to have these important settings under Advanced.
I liked testing the new features and feeling like I was contributing to WP.
Don’t just feel like you contributed to WordPress. You very much have :).
Did the saving experience work properly?
Yes, though sometimes surprised a save is required to reflect a change.
Did you find any features missing?
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.
What did you find particularly confusing or frustrating about the experience?
I was initially confused as to how a template as created here can be useful. When I switched out the text in step 21 with a post content block, it suddenly made more sense to me.
What did you especially enjoy or appreciate about the experience?
The overall experience felt smoother than anticipated.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
No, there’s still a lot of difference between the editor and public-facing view.
Did it work using Keyboard only? Did it work using a screen reader?
I didn’t test either of these options.
Difficulties
Step 12: I couldn’t select the Separator block, however hard I tried. I had to resort to using the List View.
Step 17: The duotone effect seems very niche to be included in the coreplugin. Unless it’s applicable to the design of a site, this becomes another UI element that must be managed and hidden away from a client (where providing a managed admin experience is important to help maintain strict brand guidelines).
Overall, the most unexpected behaviour I experienced is this: the only indication a template is applied to a page is a template name displayed in the Template panel, is this correct? I was very surprised the template selection was not “loaded” into the page or represented graphically in some way. If I hadn’t switched a post content block for the static text entered in Step 21, the only page content displayed in the editor view would be the title. I think this has the potential to be extremely confusing to users.
@chthnc thanks for jumping into testing, Daniel, and for making my life easier by checking against open issues. It can be tricky to do so I appreciate you taking the time.
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”.
Seems like this needs to be quoted in the recap post :). This falls into the category of “technically working” but not yet in a place of refinement where it’s easy to create wonderful content. I have a feeling more integrated patterns might help aid this along with greater control over dimensions.
No, there’s still a lot of difference between the editor and public-facing view.
Any chance you can share screenshots? Feel free to DM me on slack if that’s easier (my username is @annezazu).
I couldn’t select the Separator block, however hard I tried. I had to resort to using the List View.
Here’s some screenshots comparing a single section from this test’s content. I’d deleted my initial test site before I saw your reply, and what you see here is a bare minimum re-do of this testing call.
The first image is a snapshot from the template editor, from steps 19-22. Each button has a small default top margin applied and there’s no default horizontal spacing between these elements.
The second image is the same content as rendered on the front of the site. In the first column, the first child of the column has a top margin applied; in the second column, the first child has no top margin applied (the top margins applied here and in the previous image are also different values). The buttons now have a small horizontal margin applied by default.
It’s these types of details that often mean the difference between a design that looks well-resolved vs. one that looks unintentional. So far, I’ve been able to manage this in my own themes by not using the native block styles, though I’m concerned there’ll be a point where it’s no longer feasible to write custom CSS for this task.
Thanks so much for these screenshots. It’s very helpful to have a visual and I appreciate you repeating aspects of this test in order to make it happen. I shared this in a previously opened issue around the differences between the editor and front end with TT1 Blocks as I’m assuming that’s where the problem lies. If not, I’ll be opening new issues as the root problem gets clearer!
Hi Anne
Great job you are doing here. Thanks for the clarity and patiance.
Some quick feedback:
Did the experience crash at any point?
Yes, when editing the duotone a 2nd time.
What did you find particularly confusing or frustrating about the experience?
1. Selecting blocks. Even trough the list view sometimes they didn’t seem selected
2. Not being able to format text differently in the same paragraph.
3. I tested changing the columns widths and when I tried to delete them, it had some weird reactions: random values showing and it was hard to delete them.
4. Hard to select separator (clicking in 1 pixel?)
5. Missed a “OK / Cancel” button after ending custom duotone or editing a color
6. 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?)
7. The UI isn’t clear. The weight on the “headings” should follow the structure’s weight. Hard to explain but “Template / Bolck” is a h1 in the sidebar. Advanced a h2? Link settings a h2, Description a h3, etc. They should feel that way. We loose to much time searching for them. They are all very similar.
8. When creating the new page and assigning the Template, I expected it would show up in the editor imediatly. Or at least when “Published” not just in the preview.
What did you especially enjoy or appreciate about the experience?
Everything else.
Thanks!
@ridesirat thanks so much for jumping into this call for testing! As mentioned in the post, it’s a very high impact time to help out and it’s always lovely to see new people share their experiences. I’ll go through each point one at a time 🙂
Missed a “OK / Cancel” button after ending custom duotone or editing a color
Hmm – the process for adding a duotone filter matches the same process for adding a custom inline text color (no okay/cancel button). Can you explain another feature that has an OK / Cancel button that you’d like to see replicate with Duotone? Right now, the “clear” button acts as the cancel option.
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?)
Interesting feedback! I’m going to check with the folks working on this block and see if there’s a technical reason for this before deciding whether it makes sense to open up an issue.
The UI isn’t clear. The weight on the “headings” should follow the structure’s weight.
Agreed on the UI for setting being quite split across various items. I updated my comment on this related issue gathering feedback to include what you shared.
When creating the new page and assigning the Template, I expected it would show up in the editor imediatly. Or at least when “Published” not just in the preview.
Hi Anne
Some more feedback
[Firefox 88.0.1 (64 bit)]
Not being able to format text differently in the same paragraph.
I was mainly trying to change the color, I knew I’ve used it before (in the sidebar) but I didn’t find it – thinking it was maybe because of editing the template. But, I find it it now on the sidebar & tools(?) bar. There is so much space up there, it could be more visible.
Some “bugs” while formating (the color):
The behavior changing it in the sidebar is different then in the tools. It looks like the tools overrides the sidebar. Ok, forget it, just realised the sidebar edits the
and the tool creates s [I suppose?]
Missed a “OK / Cancel” button after ending custom duotone or editing a color
I mean picking the color, on both. When we choose “custom color” it opens the palette, we choose our color and then I search for a “ok” button to be sure it’s confirmed and to close it. Clicking outside the modal is weird, It makes you choose something else. You loose “control”.
Other thing.. the color picker on the “tools” is not acting normal, it doesn’t allow to drag the color around. As soon as I click on the color ramp it closes the modal (with the color clicked chosen).
The UI isn’t clear. The weight on the “headings” should follow the structure’s weight.
I think a simple solution could be just having a subtle bkg on the main ones. i.e., on the “Paragraph” block, “Typography”, “Color” and “Text Settings” could be a light grey bar.
I know I could give this feedback on Git but there are so many tickets, it’s hard to find the right one.
When creating the new page and assigning the Template, I expected it would show up in the editor imediattly. Or at least when “Published” not just in the preview.
Sorry, when I said “preview” I meant “View page” (permalink).
I was expecting to edit the new page with the selected template showing on the editor. But nevermind, it’s the normal behaviour.
Sorry, I tried to edit the message but it’s not possible.
I repeat here that final paragraph of the fist issue since it was formatted by te <>
«Just realised the sidebar edits the “p” and the tool creates “span”s [I suppose?]»
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?)
To follow up on this, I added your feedback to this issue on the ability to bulk add items to the navigation block. In talking with those who worked on this feature, the feedback I got for why this decision was made was as follows:
1) Scope – didn’t have much time to implement a lazy load approach.
2) It’s a search – you can find any page by name.
With that said, future explorations to bulk add items is on their mind and your feedback has been noted 🙂
The behavior changing it in the sidebar is different then in the tools. It looks like the tools overrides the sidebar.
The sidebar sets things for the entire block (can set text color to black) whereas the color options allow you to have granular control within the text itself (can set text color for a single word to white).
Other thing.. the color picker on the “tools” is not acting normal, it doesn’t allow to drag the color around. As soon as I click on the color ramp it closes the modal (with the color clicked chosen).
Hi Anne,
I am new to FSE, so there might be some inaccuracy due to gaps in knowledge.
Newly created template name does not appear in the template list unless the page is reopened again in the editor:
1 Create new page;
2 Call it “TEST”;
3 Create a new template “My-Template” (In Page settings, Templates section click New, add name “My-Template”;
4 Save unchanged template by pressing “Publish” twice;
5 Go back to Page editing by pressing Back;
6 In Page Settings, Templates section I see that my new template “My-Template” is already in use, example: http://wayback.fauppsala.se:80/wayback/20210729151846/https://snipboard.io/rqbYD5.jpg. Moreover, the before opening the drop down menu shows 404 template (intuitively I think that it is applied), that leads to misunderstanding and 404 can not be applied now;
7 Choose any other template from the list, like Index;
8 Press Update;
9 Look again to the Page Settings, Templates menu: there is no “My-Template” in the list at all.
10 Go back to Dashboard, open the TEST page again, now template “My-Template” appears in Page settings, Templates section.
@maksimurasov I am SO sorry I missed this somehow. I was off work in the following days after you shared this but normally am able to manage get responses upon returning. I appreciate your patience and want to say thank you for sharing this feedback 🙂 It all really helps.
As I’m sure you’ve seen by now, the template selection and creation experience shipped in 5.8 improved since this test in large part due to great feedback from folks like yourself. While there’s still improvements to be made, the current problem you’re describing no longer remains thankfully.
Great.
First of all, kudos for the exact description of what to do. Nothing can go wrong there.
I was able to work on points 1 to 36 without any problems. I didn’t notice any errors in the actual workflow. The second page that was assigned to the template also delivered the desired result.
While creating the template, I missed the global styles. They were displayed when the template was called up again.
I worked integrated with keyboard and mouse.
I found it a little more difficult in design. But maybe my ignorance.
In the cover block, the content is placed directly on the outer edge. There is no space between the screen and the content. And I didn’t find anything appropriate to hire either. The only solution for me was to center the content.
I have now inserted a group block between points 18 and 19 and created the columns (19) in the group block. This allows me to adjust the design better.
@elbsegler thanks so much for jumping into this lengthier call for testing. It always neat to see new names.
Can you clarify this part? Right now, there shouldn’t be a Global Styles interface in Template Editing mode. This is intentional as Global Styles isn’t going to be shipped in 5.8.
If you’re open to it, I’d love to see screenshots of what you’re describing. For example, while writing this test, I found the Columns Block added strange spacing beneath it making it hard to design the background of the Columns Block. This should be resolved as padding control is integrated but still want to be sure we’re talking about the same thing.
I’m not seeing padding control in the UI as I go — not that I’m done.
Because I can’t make myself move on without solving a problem in that step, I stuck a 30-70 Columns block into the left side of the 50-50.
And I’m still worried that every time I click the mouse, I’m going to add another block, which I know is behavior of months ago to years ago. (I’m actually really pleased that after several hours yesterday I did NOT have 600 blocks to figure out how to get rid of!
@marybaum love seeing your name pop up here 😀 Thanks for diving in.
This will show up only on blocks that have added support for padding. For example, here’s where you’ll see it with the Cover Block: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/ceuSEAM3wnN You can dig into this work more here for greater context.
I was able to get through all 36 steps with no issues!
(other than the noted bug on step 30 I didn’t see anything that looked broken)
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.
Also, I think it would be worth adding to these testing steps around step 20 or 23 a step to add the post content to this template. Each page using the template would ideally include a content section rather than just the page title in the cover block. I went back and adding this block to the template and it worked, but I think it’s closer to an actual use case and may give an editor a better sense of template layout options.
@circlecube Thanks so much for testing this and for your great feedback. Glad to hear you made it through in a breeze. Perhaps I made this too straight forward 😉
This is excellent workflow feedback. It took me a bit to figure out what you meant but I think I was able to replicate and capture the problem in this issue. If you don’t mind peaking to confirm, that would be great.
Originally, this was in place and I completely agree. As I was testing though, I ran into this strange duplication and deletion bug with the block so removed it. Ultimately, I try to steer these calls for testing away from busted features so people don’t get completely stuck or discouraged 😀 It sounds like this worked without a problem for you though so I am going to revisit this issue to make sure I can replicate it across a few test sites.
Yes, that’s what I saw, thanks for creating the ticket. I added some clarifying comments and screenshots to it.
I also saw the duplicate post content block, was not sure where it came from and assumed it was my mistake. I was able to just delete it and was ok. But I agree, don’t direct testers to busted features if we can help it! =D
Thank you for this opportunity, Anne! It was fun and I learned a few new things!
My result:
http://wayback.fauppsala.se:80/wayback/20210729151846/https://webfaces.pl/blog/wp-content/uploads/2021/05/fse-wordcamp.png
To answer your questions:
Did the experience crash at any point?
Yes, got the “Updating failed. The response is not a valid JSON response.” message a few times before I saved my template. Once I saved it, the message was gone for good.
Did the saving experience work properly?
Yes, it did but I kept forgetting that I need to press Save twice.
Did you find any features missing?
I was focusing on following your steps and found all I needed to complete the test but I do miss one feature for landing pages – 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. Here’s what I mean: http://wayback.fauppsala.se:80/wayback/20210729151846/https://webfaces.pl/blog/wp-content/uploads/2021/05/fse-wordcamp-long-text.png
Using empty columns on the sides doesn’t help either because of how 3-column layouts are handled on mobiles.
What did you find particularly confusing or frustrating about the experience?
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.
What did you especially enjoy or appreciate about the experience?
The fact that you can create your own templates in such a quick and easy way! Duotone filters are nice! Didn’t know that feature.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Yes, except for the space between the buttons.
Did it work using Keyboard only?
Didn’t focus on that but I do like using / to insert blocks.
Did it work using a screen reader?
Didn’t try.
What I’ve learned:
That you can use the “Insert Before” option. I didn’t know this option existed. I didn’t know I could control the size of the logo by dragging the edge – I learned it from your video.
When creating the template part (footer) I was looking for a way to provide the name, didn’t find it until you asked me to use the Advanced section.
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 thanks so much for testing and passing along the screenshot too! It’s always helpful to have visuals and always nice to see new faces in this work.
Hmm! I’m glad this eventually went away especially since the cause seems to be a bit varied based on this support thread. I’m not going to open an issue for now since that seems to be a more longstanding problem rather than something specific to this test.
Great call out here and example. There is a new feature for padding currently that resolves this in a way. However, as this video shows, because the padding is added on all sides, it can also create a funky experience. Lots of work is underway though to add consistent dimension controls across blocks so, for now, I’m not going to open an issue since this will be covered by the work being done there.
Like you, I’ve gotten tripped on this and have forgotten to first select “Page Link Block” before searching for a page title. This is part of the adjustment to a new feature currently that allows a ton more blocks to be added into navigation while our brains are still used to a more limited set of options 😀 In any case, I’ve captured your feedback in this previously reported issue as some sort of introductory nudge/prompt would go a long way.
There’s SO MUCH hidden in these toolbars. Thank you for noting this specifically as something you learned by doing this call for testing.
Interesting idea! Right now, the options are “Edit Site” and “Edit Page/Post”. It’s unclear to me if Edit Site will stick around in the long run though. While I can see why this would feel nice to add, it’s intentional right now that there are certain pathways into template editing mode. You can get a sneak peak of future designs here for flows into template editing from the post editor. I’ll check in with a designer working on this to see if a new issue to capture this feedback makes sense!
Checked in with a designer and decided to open an issue 😀 http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/32048 Thanks for the idea and feedback!
@annezazu Thank you very much for addressing all the issues I raised! Wow, you care so much.
Yes, the new feature for padding from your video resolves the issue with making content narrow in a way. I can see there are some plans for adding horizontal alignments to the Columns block:
http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/31459. If center-alignment for columns is added too, we could use the 1-column block with the width set in percentage (the ability to set the column width in % is already there). What I like about it is how it works on phones – the column content fills out the entire space (doesn’t happen when using padding).
Thank you for commenting on the other issues Anne and opening a ticket about the Edit Template directly feature. Yes, that would eliminate that extra step of opening the page when we want to edit its template. Nice!
Of course! I do care a ton, especially because people like yourself are taking time out of your life to help with this work. Thanks for the following up too with additional context. I’m already excited to include this in the summary post for this call for testing!
Howdy!
I just completed the test (while also completing the Italian translation, which should be available soon), and here are my notes, but first of all… a screenshot!
http://wayback.fauppsala.se:80/wayback/20210729151846/https://jumpshare.com/v/kGV2bD6jI9fY4L63gDY1
Issues
16. Couldn’t delete the extra paragraph block as the Delete option was out of the viewport and there was no way to scroll down the list. I was eventually able to delete the block by clicking on a menu item, move down the settings context menu using arrow, and pressing Enter hoping I was on the right menu item. This is very frustrating for both new users and experts alike. I also sought help in the List View, but there is currently no option to delete items from there.
http://wayback.fauppsala.se:80/wayback/20210729151846/https://jumpshare.com/v/0HUdHDozZK7yqIH4gOGg
21. Couldn’t find buttons alignment options. I later found out that there’s an alignment setting at the column level, but no setting for the individual button, which is what I was looking for.
Other notes
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?
http://wayback.fauppsala.se:80/wayback/20210729151846/https://jumpshare.com/v/2L3f42OdkTiYEgJSc1da
Did the experience crash at any point?
No
Did the saving experience work properly?
Yes
Did you find any features missing?
Alignment settings, as well as some other (Full Width settings) hiding in places I would have never guessed, if not going checking one by one all the elements in the toolbar.
What did you find particularly confusing or frustrating about the experience?
As usual, the lack of visual reference in Gutenberg.
This time, specifically how awkward it often is to do something as easy as adding a new block under another you just added.
I wish I could just type / in any moment and have Gutenberg understand that I want to add a new block. Quite often I have to search for the current focus, double-check what is currently selected, find the tiny [+] button, and so on.
Whenever I’m testing, I put myself in the shoes of a WordPress / Gutenberg newbie and try to go through the experience as if I knew nothing about it. I still think that our main goal should be having an editor that is so simple and works so seamlessly that even somebody starting from scratch (or coming from the Classic editor) could just hit the ground running. I’ve been advocating for Gutenberg and recommending it to my customers, though I recognize that some users still find it hard and somewhat frustrating to use.
Either way, we’re here to improve it, and I’m sure it’ll keep getting better.
What did you especially enjoy or appreciate about the experience?
I appreciate the speed in page loading time and being able to manage most things on a single browser window.
This time I also noticed some improvements, and the Template Editing Mode seems somehow clearer than the iterations I had seen during the previous calls or while poking around Gutenberg during translation, usually to find out where strings like to hide. 🙂
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Not completely. As an example, I didn’t expect the 50/50 column not to be Full Width.
Did it work using Keyboard only?
I didn’t try. Still hoping to magically find a keyboard shortcuts cheatsheet. 😇
Did it work using a screen reader?
Didn’t try.
I hope this helps! Thanks to everybody for their contributions and especially thanks to @annezazu for the awesome work and the friendliest support ever!
@piermario super hero over here! Translating and giving feedback? Amazing.
What browser are you using? I tried setting my test site to Italian but still found that there was a scrollbar (was wondering if it was a translation issue).
Whew, yes. That’s intentional (needing to select the parent block) but I totally have “fallen” for this too. This is part of the trouble with nested blocks in particular!
Very much agreed. I added your feedback to this issue capturing related feedback on how spread out in many ways various settings are.
You are hitting on a very big piece of feedback about the editor as a whole (not just with full site editing). I’m not sure if you’ve seen this issue that’s digging deep into the + button/block insertion in general but I highly recommend checking it out, particularly the latest comments. Such a tricky design problem but it’s exciting to see some possible improvements to one of the core experiences of interacting with blocks. Expect me to quote you on this in the recap post 🙂
Hello Anne!
My browser is Firefox Developer Edition 89.0b10
Also, you’re the real super hero! 🙂
<3 I tested once more using both Firefox 88.0.1 and Firefox Developer Edition 89.0b14 (a bit ahead of the version you were using). Set my site to Italian and tried to replicate but wasn’t able to: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/ccVqRwe4ABd I kept finding that I could scroll down and that the opened settings would adjust based on whether there was room above or below. Very strange! I’ll keep an eye out for whether this happens again in the future. Thank you for following up 🙂
things I found confusing, and this may seem idiotic but …
I always forget to toggle between page and block. I spent a few minutes wondering why the template selector wasn’t showing. I opened settings cog, wondered if I’d activated a writing preference in /settings … all before I remembered the very subtle white on white tabs to toggle between page and block.
I found this very confusing. I added the Cover Block, I was unsure how to use “insert before” it seems isolated from context. I dragged a cover block in from the drop down tray and then moved it up using the arrows in the top bar which are very confusingly hidden.
the existing post title would not drag, it only responded to the very very subtly indicated but unlabelled up down arrows in the top bar . Pressing the up arrow moves the Post Title above the cover block. The down arrow moves it below. No arrow moves it inside. I deleted the post title and dragged one in from the tray.
I centred the title, and selected the cover block – immediately another Paragraph appeared and I had to delete it again using backspace, This made me happy because usually I instinctively try to delete blocks with backspace and nothing happens. Usually delete block requires some arcane key combo like ctrl & alt & Z or something. So the fact that backspace worked this time was amazing to me.
Immediately selected the cover block, another paragraph appeared. I deleted it again and this time I tried to select the cover block using the super-hidden and ultra secret list view which is unlabelled in the topbar and looks like it makes lists. I selected the Cover.
I looked in the side bar, under the Block tab for the Style of Duotone. I didn’t want to read instructions I wanted it to be obvious. I expected to find it under “Styles” or close to styles. Then I tried “media settings” but eventually I failed and looked at the timage of the icon I was looking for . It is in the top bar, unlabelled.
I am unsure why this particular style lives there, and what makes Duotone similar to Replace, rather than a style control.
At this point I had to stop to go back to work
just an addendum. 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 sidebar 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 Gutenberg editor are under 3 vertical dots. Titled (invisibly) “Options”.
This terminology and labelling or lack of it is confusing.
“Settings” should be a sidebar icon, and labelled “show edit controls”
and the 3 dots icon should be a cog icon.
I typed “space” into the Block add dropdown and was met with the most horrible looking spamvertising list.
there were three items for sale? Fremium add-ons to baffle my clients?
They looked horrible with the mixing of icons, and the nasty upsell methodology into a document edit workflow.
I selected the text in this spamvertising list and the editor crashed.
recovery failed.
@steve-pheriche Thanks so much for testing! As I said above to someone else, it’s always neat to see new names here as it means new perspectives to follow. For the record, none of this is idiotic and it’s all appreciated, especially since you took time away from working to help out.
You’re not alone there. I’ve added your feedback to this issue that’s about the same exact phenomenon. This dynamic hasn’t yet reached a level of intuitiveness just yet.
Ah! You can see what I’m referring to at this point in the video of the test.
What browser were you using for this test? I’m not able to replicate the inability to drag/drop so want to do some further testing here on my end in case there is a bug.
It’s the little things in life, eh? 😀
Love this blunt descriptions 😀 When you say unlabelled, what are you expecting there? It sounds like you want to have text rather than an icon. With that said, I see a label on hover and can see the List View name shows up when using text only mode.
Would love your thoughts on duotone too and what you’d expect to see specifically!
Ah it sounds like you’re experiencing the Block Directory which is a feature that searches a directory of individual block plugins. I tried to replicate the crash you encountered but wasn’t able to do so. When you say “I selected the text in this spamvertising list and the editor crashed”, can you be more specific? For example, did you select a block from that list? Did you just select the Spacer block? I tried everything I could think of to replicate this 😀 Thanks so much for copying the error over either way. That’s a huge help!
Hi Anne, Just quickly on this last item as it’s probably the most important.
I typed “space” into the search of the block chooser, to call up the spacer. I saw the unwanted list of Directory contents (note: I will never want to see this, and never want my clients to see it)
I drag selected over some of the text in the listing in order to paste it into this comment section, but during that drag process the editor (main Gutenberg area) crashed to a white screen with the three options mentioned.
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
A last note: While attempting to trigger the crash I accidentally installed a “superspacer Lite” type of add-on. The install does not give a [yes/no] install prompt. Nor is there a link or description to how to remove these items. I am strongly against this mandatory sales counter, and I need a way of deactivating the Block Directory so it is not inducing my clients Interns from adding all kinds of add-on blocks. Not to mention the interface looks like craigslist. I’m sorry to be blunt but it’s awful and not what my clients want. They want a fixed locked design into which they enter content NOT a store from which to select 57 types of heading block.
Actually I managed to trigger the error again but I wasn’t screen recording unfortunately. This time it crashed while my mouse was on the template head zone, where the site title might live. And I’ll echo other comments here that I am utterly confused whether I am editing a template or a post, so I;m not entirely sure if I was editing post or template content when it crashed again.
I tried to repeat while screen recording but only managed to crash the heading block, which reported that it was unrecoverable.
Anyway, here’s the what happened before I started screen recording. http://wayback.fauppsala.se:80/wayback/20210729151846/https://i.postimg.cc/6Qf4dv31/Screenshot-2021-05-19-at-03-13-47-Edit-Page-gutenberg-test-site-Word-Press.png
I may have more time to try again tomorrow.
[code]Ji@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:7371
ta@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:8335
we@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:84:293
zj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:226:496
Th@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:225
tj@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:152
Te@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:151
Pg/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
unstable_runWithPriority@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260
Da@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:280
Pg@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:16
ha@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:60:451
Ja@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:224:400
ch@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:93:81
e@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:18607
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:18674
instantiate/y</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:12839
b@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:6362
a/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9455
A/</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8214
L/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8517
dispatch@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:7222
a/</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9243
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
524/e.any@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5723
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5128
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
c@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5235
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5491
524/e.iterator@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:6466
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
a/</r</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9210
r/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5205
r@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5180
u/<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5134
c@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5235
t@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:5491
a/</r</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9315
a/</r</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9295
a/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=f43d3e5edac40e5bae37689f61e35ab0:1:9450
A/</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8214
L/</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:8517
instantiate/f</</<@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/data/index.js?ver=934ab721c55c452d9e0c1d81cbe7c3cd:1:11075
i@http://wayback.fauppsala.se:80/wayback/20210729151846/http://gutenberg-test-site.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=eb9ea477656b155fe97003c821768a26:28:4645
[/code]
Thank you for following up! Just to note that there are instructions here for disabling the block directory since it seems like something of interest to do.
I tried replicating this trying everything but was unable to do so using FF Developer Browser, 89.0b14. Here’s a short clip of the testing: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/cg0OTY0ItyG I’ll note this as something that came up during testing in the summary post but, for now, without exact replication steps am going to leave it unreported.
I hear you there. That’s been a big point of feedback. As discussed in this issue, there are an increasing number of ways to make this context switching more apparent.
Hi. Just passing by….. but you can disable the block directory (which shipped with Gutenberg more than a year ago) with the following php snippets:
http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/filters/editor-filters.md#block-directory
I wrote about my time with this test over here: http://wayback.fauppsala.se:80/wayback/20210729151846/https://shaunandrews.com/2021/05/testing-full-site-editing-for-wordpress-5-8/
I didn’t complete the whole test, but hopefully the things I found are helpful. Thank you for organizing all this — its awesome to see so many people trying this stuff.
@shaunandrews ahhh thank you for taking the time for such in depth feedback! Honored to have you swing through here to test. I’ll respond here and link to my comment on your post.
I tried to replicate this with 10.7 RC with a brand new test site but couldn’t manage to do so. If that comes up again, let me know but, for now, going to leave it unreported since this doesn’t seem to be a widespread issue.
This seems to be a browser auto-fill rather than the new template process itself. Here’s a video sharing what I see using Chrome: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/czZYaVXBp85
&
Great feedback per usual. I shared and summarized what you said in the issue that focuses on the welcome tour here. I’m curious to know what would make it less jarring? As Jay notes here, there are three ways to visually show a difference when you jump into template editing mode:
Agreed completely. Opened an issue to kick off this discussion.
Add this to the list of things I would not have noticed had you not pointed it out. I’m not going to open an issue for this at this point but I would encourage you to comment on this issue about allowing users to customize keyboard shortcuts since this seems to fall into that realm and having more examples of customization would be helpful to see.
This seems isolated to Safari as well and was previously reported. I’ve added your GIF and observations to that issue to make sure it’s captured properly!
Excellent find. This seems to be isolated to Safari as I couldn’t replicate in Chrome. I nearly opened an issue for duotone before finding that this the case for other block settings like alignment. Here’s a comparison:
I commented on this issue that I think is in line with your feedback (have asked to make sure). I’ll open a new issue if needed but this seems to be related to a wider problem than just duotone.
Thanks again for spending a few hours on this and writing up your feedback so diligently (screenshots included). It helps loads.
5 comments
I was able to partly reproduce the strangeness reported by @steve-pheriche dragging text selected from the block inserter into the content.
Until that moment I hadn’t realised I could drag and drop content like that… not just from the inserter, but from anywhere – dashboard menu items, the buttons at the bottom of this comment form, and the site logo from the live site.
2a. But I couldn’t drag the logo directly into the site logo.
I think I’ve made this comment before. 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. 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.
It’s really really difficult to stop yourself dragging new blocks for the template into the Post Content block.
Editing a page which has no content, but relies on the template, does feel weird.
@bobbingwide! Thanks as always for diving in and going a step further to test things.
Ah! Sorry about that. This is what’s tricky about sometimes including those advanced steps. I’ll keep this in mind for future tests. Seems like it might actually be wise to have a separate test for this UX across the various blocks sometime in the future likely post 5.8.
Can you say more about how you were attempting to do this? For example, were you trying to drag and drop an image from your desktop into the site logo block?
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. It sounds like you’re looking for a way to “copy template” to then build a new one. I’m going to check with a designer to see if this has been explored just yet and, if not, open an enhancement issue as I agree that this could be neat!
Agreed. This was a compromise I had to make with this test after some oddities with the post content block. Might not have been the right decision looking back but I didn’t want to set people up for an odd experience with too many bugs for this round.
To follow up, I added your feedback as a comment on this issue for now. Going forward, it might need to be it’s own issue but, for now, I think it’s wise to keep the feedback consolidated in the spots where early designs are being worked on.
Hi, Anne, thanks for the updates. I’ve published a post which contains the above comments, including the template and template part I created. I’ve also published Take 4, in which I tried to create a mostly empty template, writing the main part of the template in the page content.
See http://wayback.fauppsala.se:80/wayback/20210729151846/https://sneak-peek.me/2021/05/23/call-6-template-editing-and-navigation-block/
Awesome! Thank you for following up here too and for time stamping your video. I’ll go through what you found.
Yes. I noticed this as well and asked some designers who are working on this whether this needs an issue or if it’s covered by future planned designs. I was directed to this awesome issue that shows what the designs are imagined for the future so, for now, have not opened an issue.
This was VERY strange 😀 I tried replicating by creating a brand new template part called “Foooter” to match what you did and was able to search to find it without a problem using 10.7.1: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/cvNDMOqQ0ba For now, I’m not going to open an issue just yet but, if you can replicate with 10.7.1, let me know and I can.
This is intentional as it focuses on the Button parent block essentially. The same thing happens with other blocks like the Navigation Block!
Whew, yes. I agree that this is an annoying pain point. I captured this feedback originally here for template parts but the same applies to the group block. For now, I’m not going to open a new issue as I think this feedback is covered between the one linked prior and this overarching one on confusion around width settings.
Hi Anne,
Great instructions! I completed the test and learned a few things along the way. Thanks for all of your hard work.
My screengrab:
http://wayback.fauppsala.se:80/wayback/20210729151846/https://dev.askdesign.biz/wp-content/uploads/2021/05/fse-call6-test-askdesign.png
Did the experience crash at any point?
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.”
Followed by 3 buttons: “Attempt Recovery”, “Copy Post Text”, “Copy Error”
Did the saving experience work properly?
Yes.
Did you find any features missing?
Using the columns block inside the cover block:
(1) Spacing was challenging. The left column text flushed left against the edge of the browser window. I inserted an empty 3rd column to add padding on the left.
I think it would be good to add padding and margin options to the columns block.
(2) Spacing between the buttons was not ideal (not enough control).
What did you find particularly confusing or frustrating about the experience?
(1) The navigation block: I’m happy to see this block! Yet, configuration is confusing, with the Starting Empty and Page Link options. Also, will this block include the option to use an existing menu that you build the in Menu area?
(2) Footer: 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?
What did you especially enjoy or appreciate about the experience?
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 block! Always learning new things.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
Yes.
Did it work using Keyboard only?
Keyboard.
Did it work using a screen reader?
Didn’t try a screen reader, sorry.
@askdesign From what I can see, you are another Anne so hello to you too :D. Thanks so much for jumping into this test. I love the filler text you added to your landing page (very clever).
Any chance you were able to copy the error you got? If so, it would be a huge help as that’s now two reported crashes with this test and I’d love to dig into what might be going wrong.
Whew! You aren’t alone there. There’s an open issue about exactly that along with some recent work to explore adding consistent controls to various blocks. Stay tuned.
You will be able to “import”/insert existing menus using the Navigation Block. Here’s a screenshot of what the setup will look like where you can choose an existing menu: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/c0j1hOoxR4s However, since there’s work underway to make the Menu/Navigation Editor block based as well, it’s still a bit TBD how the interaction will work between the navigation block and the Navigation Editor (Appearance > Menus). You can see the compatibility with the Navigation Block is on the overview issue for this work though!
Excellent call out. This actually came up in a previous call for testing so I’ve included your lovely thoughts as a comment on the open issue that relates to this. I agree that I don’t find it terribly intuitive to have these important settings under Advanced.
Don’t just feel like you contributed to WordPress. You very much have :).
YES! In case you missed it, you can also drag and drop from the Block Inserter too
Hello Anne, thank you for the clear instructions!
Did the experience crash at any point?
No
Did the saving experience work properly?
Yes, though sometimes surprised a save is required to reflect a change.
Did you find any features missing?
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.
What did you find particularly confusing or frustrating about the experience?
I was initially confused as to how a template as created here can be useful. When I switched out the text in step 21 with a post content block, it suddenly made more sense to me.
What did you especially enjoy or appreciate about the experience?
The overall experience felt smoother than anticipated.
Did you find that what you created in Template Editing Mode matched what you saw on your site?
No, there’s still a lot of difference between the editor and public-facing view.
Did it work using Keyboard only?
Did it work using a screen reader?
I didn’t test either of these options.
Difficulties
Step 12: I couldn’t select the Separator block, however hard I tried. I had to resort to using the List View.
Step 17: The duotone effect seems very niche to be included in the core plugin. Unless it’s applicable to the design of a site, this becomes another UI element that must be managed and hidden away from a client (where providing a managed admin experience is important to help maintain strict brand guidelines).
Step 27 (1): 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. Looks like there’s an existing issue: http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/32107
Step 27 (2): after naming the template part in the Advanced section, I was surprised the block’s title did not update to reflect its new name. It seems this will not update until a Save is performed? Looks like there’s an existing issue: http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/29844
Overall, the most unexpected behaviour I experienced is this: the only indication a template is applied to a page is a template name displayed in the Template panel, is this correct? I was very surprised the template selection was not “loaded” into the page or represented graphically in some way. If I hadn’t switched a post content block for the static text entered in Step 21, the only page content displayed in the editor view would be the title. I think this has the potential to be extremely confusing to users.
@chthnc thanks for jumping into testing, Daniel, and for making my life easier by checking against open issues. It can be tricky to do so I appreciate you taking the time.
Seems like this needs to be quoted in the recap post :). This falls into the category of “technically working” but not yet in a place of refinement where it’s easy to create wonderful content. I have a feeling more integrated patterns might help aid this along with greater control over dimensions.
Any chance you can share screenshots? Feel free to DM me on slack if that’s easier (my username is @annezazu).
I also found it difficult to select and have opened an issue here to collect this feedback: http://wayback.fauppsala.se:80/wayback/20210729151846/https://github.com/WordPress/gutenberg/issues/32129
You can get more context on this feature in the GitHub issue introducing it here or in this 8 min long YouTube video by one of the folks who worked on this.
Currently, that’s correct. What you’re describing touches on some of what’s being explored here around being able to view a template while editing content (would make a template more salient to a user). Separately, there are some upcoming designs to improve the overall template editing experience including potentially moving some of the these details like what template a page/post is using, to the top toolbar. It’s still just a proposal at this stage but it’s neat to see how this experience can be refined further.
Hi Anne,
Here’s some screenshots comparing a single section from this test’s content. I’d deleted my initial test site before I saw your reply, and what you see here is a bare minimum re-do of this testing call.
Template Editor fse-6-backend-0001.jpg
Front-end result fse-6-frontend-0001.jpg
The first image is a snapshot from the template editor, from steps 19-22. Each button has a small default top margin applied and there’s no default horizontal spacing between these elements.
The second image is the same content as rendered on the front of the site. In the first column, the first child of the column has a top margin applied; in the second column, the first child has no top margin applied (the top margins applied here and in the previous image are also different values). The buttons now have a small horizontal margin applied by default.
It’s these types of details that often mean the difference between a design that looks well-resolved vs. one that looks unintentional. So far, I’ve been able to manage this in my own themes by not using the native block styles, though I’m concerned there’ll be a point where it’s no longer feasible to write custom CSS for this task.
Thanks so much for these screenshots. It’s very helpful to have a visual and I appreciate you repeating aspects of this test in order to make it happen. I shared this in a previously opened issue around the differences between the editor and front end with TT1 Blocks as I’m assuming that’s where the problem lies. If not, I’ll be opening new issues as the root problem gets clearer!
Hi Anne
Great job you are doing here. Thanks for the clarity and patiance.
Some quick feedback:
Did the experience crash at any point?
Yes, when editing the duotone a 2nd time.
What did you find particularly confusing or frustrating about the experience?
1. Selecting blocks. Even trough the list view sometimes they didn’t seem selected
2. Not being able to format text differently in the same paragraph.
3. I tested changing the columns widths and when I tried to delete them, it had some weird reactions: random values showing and it was hard to delete them.
4. Hard to select separator (clicking in 1 pixel?)
5. Missed a “OK / Cancel” button after ending custom duotone or editing a color
6. 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?)
7. The UI isn’t clear. The weight on the “headings” should follow the structure’s weight. Hard to explain but “Template / Bolck” is a h1 in the sidebar. Advanced a h2? Link settings a h2, Description a h3, etc. They should feel that way. We loose to much time searching for them. They are all very similar.
8. When creating the new page and assigning the Template, I expected it would show up in the editor imediatly. Or at least when “Published” not just in the preview.
What did you especially enjoy or appreciate about the experience?
Everything else.
Thanks!
@ridesirat thanks so much for jumping into this call for testing! As mentioned in the post, it’s a very high impact time to help out and it’s always lovely to see new people share their experiences. I’ll go through each point one at a time 🙂
Does this reported and now fixed issue match your experience? If not, let me know so I can dig in deeper and make sure it can be reported.
This should be possible! Here’s an example of what I’m referring to: http://wayback.fauppsala.se:80/wayback/20210729151846/https://cloudup.com/cNtHnFcfpll Can you share more though about what you expected to be able to do but were unable to accomplish?
Agreed! Someone else noted that above causing me to open this issue to get it addressed. The good news is that there might be a fix underway that resolves this.
Hmm – the process for adding a duotone filter matches the same process for adding a custom inline text color (no okay/cancel button). Can you explain another feature that has an OK / Cancel button that you’d like to see replicate with Duotone? Right now, the “clear” button acts as the cancel option.
Interesting feedback! I’m going to check with the folks working on this block and see if there’s a technical reason for this before deciding whether it makes sense to open up an issue.
Agreed on the UI for setting being quite split across various items. I updated my comment on this related issue gathering feedback to include what you shared.
Can you explain more here? After assigning a template, it should show up upon saving it. However, there is a known problem where switching template assignments won’t show up when previewing.
Hi Anne
Some more feedback
[Firefox 88.0.1 (64 bit)]
I was mainly trying to change the color, I knew I’ve used it before (in the sidebar) but I didn’t find it – thinking it was maybe because of editing the template. But, I find it it now on the sidebar & tools(?) bar. There is so much space up there, it could be more visible.
Some “bugs” while formating (the color):
The behavior changing it in the sidebar is different then in the tools. It looks like the tools overrides the sidebar. Ok, forget it, just realised the sidebar edits the
and the tool creates s [I suppose?]
I mean picking the color, on both. When we choose “custom color” it opens the palette, we choose our color and then I search for a “ok” button to be sure it’s confirmed and to close it. Clicking outside the modal is weird, It makes you choose something else. You loose “control”.
Other thing.. the color picker on the “tools” is not acting normal, it doesn’t allow to drag the color around. As soon as I click on the color ramp it closes the modal (with the color clicked chosen).
I think a simple solution could be just having a subtle bkg on the main ones. i.e., on the “Paragraph” block, “Typography”, “Color” and “Text Settings” could be a light grey bar.
I know I could give this feedback on Git but there are so many tickets, it’s hard to find the right one.
Sorry, when I said “preview” I meant “View page” (permalink).
I was expecting to edit the new page with the selected template showing on the editor. But nevermind, it’s the normal behaviour.
I hope it helps
Sorry, I tried to edit the message but it’s not possible.
I repeat here that final paragraph of the fist issue since it was formatted by te <>
«Just realised the sidebar edits the “p” and the tool creates “span”s [I suppose?]»
To follow up on this, I added your feedback to this issue on the ability to bulk add items to the navigation block. In talking with those who worked on this feature, the feedback I got for why this decision was made was as follows:
1) Scope – didn’t have much time to implement a lazy load approach.
2) It’s a search – you can find any page by name.
With that said, future explorations to bulk add items is on their mind and your feedback has been noted 🙂
The sidebar sets things for the entire block (can set text color to black) whereas the color options allow you to have granular control within the text itself (can set text color for a single word to white).
I dug into this and was able to replicate some oddness there that I think is a regression as this did not happen previously. Thanks for flagging!
Hi Anne,
I am new to FSE, so there might be some inaccuracy due to gaps in knowledge.
Newly created template name does not appear in the template list unless the page is reopened again in the editor:
1 Create new page;
2 Call it “TEST”;
3 Create a new template “My-Template” (In Page settings, Templates section click New, add name “My-Template”;
4 Save unchanged template by pressing “Publish” twice;
5 Go back to Page editing by pressing Back;
6 In Page Settings, Templates section I see that my new template “My-Template” is already in use, example: http://wayback.fauppsala.se:80/wayback/20210729151846/https://snipboard.io/rqbYD5.jpg. Moreover, the before opening the drop down menu shows 404 template (intuitively I think that it is applied), that leads to misunderstanding and 404 can not be applied now;
7 Choose any other template from the list, like Index;
8 Press Update;
9 Look again to the Page Settings, Templates menu: there is no “My-Template” in the list at all.
10 Go back to Dashboard, open the TEST page again, now template “My-Template” appears in Page settings, Templates section.
@maksimurasov I am SO sorry I missed this somehow. I was off work in the following days after you shared this but normally am able to manage get responses upon returning. I appreciate your patience and want to say thank you for sharing this feedback 🙂 It all really helps.
As I’m sure you’ve seen by now, the template selection and creation experience shipped in 5.8 improved since this test in large part due to great feedback from folks like yourself. While there’s still improvements to be made, the current problem you’re describing no longer remains thankfully.