Size Change: +298 B (0%)

Total Size: 1.2 MB

_{compressed-size-action}

As discussed in #19259, in the interest of keeping the toolbar lean, is it worth considering the idea of grouping template part actions here? I appreciate it's beyond the scope of this PR specifically, but aiming for something like this makes some sense to me and is perhaps worthy of discussion here:

To bring things back in scope, maybe something like this could work as an interim:

I also think it would be nice to have an option to "create new" (or even "duplicate") from this dropdown, but that doesn't have to block this :)

@jameskoster

is it worth considering the idea of grouping template part actions here? I appreciate it's beyond the scope of this PR specifically, but aiming for something like this makes some sense to me and is perhaps worthy of discussion here:

Yes, I think that will definitely make sense especially as we expand on this to add the "create new" and "duplicate" type options. Having these related options in the same dropdown will definitely help keep things organized and the toolbar lean.

To bring things back in scope, maybe something like this could work as an interim:

While it may be worth putting the current picker under this dropdown style, I don't think it makes sense to use a different component/design for sorting through, previewing, and selecting template parts between the placeholder and the instantiated block. Theoretically, picking template parts in either of these places should have the same requirements and using the same component also allows us to keep things more consistent, maintainable, and updatable in the future as well. The design of the picker itself can definitely be iterated upon in the future, but here I think it is best to make the current picker accessible from this flow as opposed to implementing a separate system.

I would also be wary of a design for selecting template parts that lists them without a means of filtering. As a users library of template parts grows, the ability to search/filter them by name/theme/type increases. Without this the list can become long and hard to manage, and if we only show 'related' template parts without the ability to change that filter then we are forcing a restriction on what template parts the user is allowed to switch to, which seems unreasonable.

@noahtallen

I think it makes sense to move the button beside the input field as suggested, especially if we are going to iterate to use a different dropdown menu there in the future
I also think it would be nice to have an option to "create new" (or even "duplicate") from this dropdown, but that doesn't have to block this :)

I think moving it into the dropdown might be a bit weird before we have other options like create/duplicate. Id say we either:

• Merge this with the current button in the toolbar, and follow-up soon after with adding create/duplicate functionality and moving them all into a dropdown.
• Or just keep this open for a bit while we add create/duplicate functionality and the grouped option dropdown system.

Either way seems fine to me.

I don't think it makes sense to use a different component/design for sorting through, previewing, and selecting template parts between the placeholder and the instantiated block

I agree with this. I will say that the options like "duplicate" or "create" would be nice to have for existing blocks and might not be useful for new blocks, so that could be one difference in the ultimate design.

Merge this with the current button in the toolbar

I was thinking that we could use this design for where the button lives

Perhaps changing the icon, and then the actual content of the dropdown is the same as what exists? That way we can reuse the existing component for now.

Then we're in a spot where we can change template parts without much effort, and the interaction is very similar to what it will ultimately be (without having to immediately implement the new designs which are being worked on)

I will say that the options like "duplicate" or "create" would be nice to have for existing blocks and might not be useful for new blocks, so that could be one difference in the ultimate design.

Definitely, the "create" option for the placeholder is separate from the picker there as well. I would imagine that dropdown as noted could have three buttons "Choose another", "Duplicate", and "Create new". Where the "Choose another" button would open the existing picker that would be shared between the two flows for consistency.

Perhaps changing the icon, and then the actual content of the dropdown is the same as what exists?

Yeah I think that makes sense here. Get rid of the separate new button in the toolbar, move it into the name panel with the dropdown icon, and have it open similarly from there. Then in the future we can update that dropdown to have three separate options as we add those functionalities instead of just opening the picker.

e86552a updates to using the dropdown icon and compressing that into the same section as the name panel:

and rebased.

+1 from me if we're not supporting ie11

IE11 is looking wonky, but from my understanding, that's not something we're actively supporting for site editing?

Im not 100% sure on that, it would be nice to fix it for that as well though if able. Im assuming this funkyness isn't present in current master?

Do we have a stance on unit tests for site editing blocks?

I haven't seen much regarding this. Currently for Template Parts we have some e2e tests in https://github.com/WordPress/gutenberg/blob/master/packages/e2e-tests/specs/experiments/template-part.test.js

Im assuming this funkyness isn't present in current master?

Oh that's a great callout. 🤦 I assumed it had to do with the new dropdown icon because of the look of the bug, but I didn't cross-check check master. I'll do it now.

This is what's currently on master. It looks like it's the template part name input interrupts the block toolbar layout, and not the icon in this PR. I think it's fair to tackle the bug in a follow-up 👍

I haven't seen much regarding this. Currently for Template Parts we have some e2e tests in https://github.com/WordPress/gutenberg/blob/master/packages/e2e-tests/specs/experiments/template-part.test.js

Thanks for the heads up. I'll think I'll raise the question about unit testing more broadly in #cylon

IE11 is looking wonky, but from my understanding, that's not something we're actively supporting for site editing?

I don't think it's worth worrying about right now

Pinging @afercia to check this out. (Sorry for so many pings lately.) I think this needs some accessibility feedback. A chevron doesn't seem like the best way to indicate a button to switch the template part. Why not a pencil "Edit" icon? Also, I'm not sure if the chosen control labels are good enough. "Choose another" should probably be "Choose another template part", shouldn't it?

Can anyone be so kind to please update, or better add, test instructions?

• is there the need to install a specific theme to test this UI?
• if so, where this theme is available?
• what are the specific steps to follow to make this UI appear?

I'd like to remind everyone that this is an open source project, where any contributor is supposed to have all the necessary information be able to test a pull request, get familiar with it, and bring in their contributions if they like. Thank you 🙂

Pinging @afercia to check this out. (Sorry for so many pings lately.) I think this needs some accessibility feedback. A chevron doesn't seem like the best way to indicate a button to switch the template part. Why not a pencil "Edit" icon? Also, I'm not sure if the chosen control labels are good enough. "Choose another" should probably be "Choose another template part", shouldn't it?

Agreed. At this point we are adding the functionality with the assumption that the design and accessibility will be reiterated. This is definitely not an end-state for this interaction, and it will need to be reorganized as support for other interactions are added. Given that this is in a more temporary state and that this is still an experiment under constant iteration, we have not stalled to polish a perfect design and interaction at this point in time but aim to reiterate in that direction as we continue to move forward.

Can anyone be so kind to please update, or better add, test instructions?

Id be glad to help! My apologies for the test instructions being very short, the scope of this change is very small within the experiment, but if you are coming into the Site Editor experiment as a whole there are quite a bit of missing pre-existing context.

1. You will need to enable the "Full Site Editing" experiment under Gutenberg -> Experiments in wp-admin. (We recommend NOT enabling "Full Site Editing Demo Templates" as having done this may interfere with other Site Editor testing in other areas, and may require a cleaning the environment if it had been enabled)

is there the need to install a specific theme to test this UI?

2. Install and activate a block based theme that includes template parts. There are a few available https://github.com/WordPress/theme-experiments such as twentynineteen-blocks.

what are the specific steps to follow to make this UI appear?

3. Load the "Site Editor" (there should be a button in wp-admin just under Gutenberg once the experiment is enabled). The top section of the template in the editor will be a header template part. Selecting this Template Part block will allow the toolbar to appear as shown.

or

4. Loading in either the Post Editor, you can insert a block called "Template Part" that becomes available with the experiment enabled. This block is added as a placeholder with the options to select an existing template part or to create a new blank one. Once one of these steps is done, you can access the toolbar from there as well.

Please let me know if you have any other questions or need further assistance.

Why not a pencil "Edit" icon?

You would editing be editing the template part at the time, so switching it is a different interaction from editing. But I totally agree that the chevron might not be ideal.

And as always, we are happy to let others choose the icons and copy for these things! I will totally recognize that my strengths as a developer are not in choosing the text which best describes an interaction.

Can anyone be so kind to please update, or better add, test instructions?

I think an action item here is to create a documentation page which we can link to on FSE-related PRs. That way, it's easy for anyone to get started with it! :)

@Addison-Stavlo thank you. That helped.

My main difficulty in testing this UI was finding a way to actually select the template part. That's really difficult to understand. At the end, I used the Breadcrumbs bad at the bottom.

My main concern with this UI is that inserting an input field within the toolbar breaks the ARIA toolbar pattern, which amongst other things implements arrows navigation and the "roving tabindex" pattern. This has been noted also in other issues and PRs as there are already other UIs designed to use unexpected elements within the toolbar. One of them, already in production, is the Image block "editing tools" UI, which breaks interaction with the toolbar. See for example: #24766, #24676, , #24021, #23375, #24805. This pattern needs to be avoided. The accessibility team already discussed this topic in the latest weekly meeting and it will probably discuss it again in the next one to explore alternative options.

My main difficulty in testing this UI was finding a way to actually select the template part. That's really difficult to understand. At the end, I used the Breadcrumbs bad at the bottom.

Totally agree! We did some investigation into this issue in #22064, but are still iterating on the best way to do so.

Come to think of it, why is this dropdown even a thing in the first place? Wouldn't it make more sense to insert template parts from the inserter, similar to reusable blocks? I know there's no room for another tab, but to me that just says we shouldn't have used tabs in the first place. It seems weird to me that we're switching template parts from the toolbar.

Wouldn't it make more sense to insert template parts from the inserter

Yes, this has been discussed as well (I think I even had a draft PR to add a tab for template parts to the inserter that way, and was prompted to add previews to the placeholder block instead). Currently, we can use the inserter to insert the 'Template Part' placeholder block, which has a button to trigger the preview/selection interface.

why is this dropdown even a thing in the first place?

So template parts can be changed once the block has already been initiated from the placeholder. Instead of inserting an entirely different template part block and deleting the unwanted one, we have an option to switch which one the block references.

I know there's no room for another tab, but to me that just says we shouldn't have used tabs in the first place. It seems weird to me that we're switching template parts from the toolbar.

Yeah, I cant verify if the toolbar will be the final resting place or not. Discussion may move this interaction to the top bar, sidebar, or elsewhere. For now, we just need it 'somewhere' to aid in development and testing. Having it here for a day has already helped point out a silly bug in renaming that was otherwise unnoticed.