List view: Rename block on double-click - #68744

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: rinkalpagdar <rinkalpagdar@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Size Change: +105 B (0%)

Total Size: 2.99 MB

_{compressed-size-action}

What's the difference between this PR and #68546?

I'm okay with alternative PS (I create those myself), but I think #68546 needs to be rebased to account for renaming modal component changes.

Thanks for looking 🙌

This is an alternative PR, with the key difference being that it restricts renaming to list view items that actually have the option to be renamed. It's also using the latest changes in the rename component.

That said, we can absolutely move forward with the other PR if preferred.

Don't have a strong opinion, but I guess we can continue working on the feature here. Why?

• PR has a complete description and testing instructions.
• The code has been updated to date with recent changes.

Let's make sure we give @rinkalpagdar props when this is merged.

Thanks, George! Sounds good to me 🫡

I want to confirm that the change to what happens when you use the Enter key was removed? Since this affects how you add new paragraphs.

@carolinan, yes, I believe it was removed in 38c3927. The PR should focus on updating the "double-click" behavior, and any other "shortcuts" for renaming should be discussed separately.

Hi @carolinan, yes, that was removed so we can revisit and discuss it when deciding on shortcuts and keyboard actions.

However, it wasn’t affecting how new paragraphs were added. Pressing “Enter” to rename only worked after a second click in the list view to select the block itself. You can check in trunk that after selecting the block with two clicks, pressing “Enter” doesn’t add a new paragraph.

I think this is working well in the editors. I think there is still a big risk for unintended double clicks, where the modal would show even though I did not mean to rename it.

I am not sure if this is intentional:
If I go to Appearance > Editor > Navigation,
I can now double click to rename the menu items. They can not be renamed on this screen without the PR.

Renaming the page list block works - I do have to save the changes using the save button at the bottom of the sidebar.

Renaming a post link maybe works there is no visible feedback- The modal opens and I can enter the name, but the visible name does not change because this item shows the link text.

Note that renaming these post links is not possible in the List View "Options" menu, and probably shouldn't be possible.

I did not test other blocks inside the navigation.

Quoting from the issue:

rename modal when double-clicking on blocks (in the list view context). This is a typical pattern found in different software programs, such as Figma, when renaming layers.

I'm not sure double-clicking is the ideal interaction to rename. The above sounds to me as an assumption that may work for some users but it may be totally unexpected for other users. This kind of interaction patterns should not be introeuced based on personal feeling that it's better in a way or another. They should be user-tested.

For me, the new interaction breaks at least one of my typical flows.
In the list view, a single click on an item does 'highlight' the item but the actual focus goes to the block in the editor canvas. This is already a little arguable.
As such, to actually select an item in the list view users have to click twice. This way, the item is highlighted and actually selected. From there, as an user, I can for example use arrow keys to perform a multiple selection of adjacent items.

Instead, with this change, a quick double click would (unexpectedly for me) open the Rename modal dialog.
To perform the flow described above, I should be able to understand what has changed and perform a double click very slowly to not trigger the modal dialog.

a typical pattern found in different software programs, such as Figma

It may be true that this pattern is used in some very specialized and niche software. However, on the web, a double click on a word just selects that word. Double clicking is mentally associated with the concept of selection since ages and I'm not sure introducing an unexpected behavior is ideal in the first place.

I also just found this: "Remove Renaming in Pages List Block" #68769
I share some of Andreas thoughts but if this is implemented it needs to respect the renaming block supports.

Closed my PR (#68546) in favor of this proposal.

Thanks for the reviews! I appreciate your thoughts and feedback.

Just to clarify—renaming for navigation isn't intended.

To move forward, I think it’s important to align on one key point: renaming in the list view is currently complicated, especially when users need to rename multiple items, which is a common scenario when creating pages for websites.

If we agree on this challenge, we can see there are limited ways to speed up the renaming process—whether through clicks or keyboard shortcuts.

Double-click feels like the fastest and most intuitive option. While I understand this can be subjective, many applications I use follow this pattern for renaming, indicating a familiar user experience. Whether it’s triggering a modal or inline renaming (which was previously explored), there needs to be a quick and seamless way to rename items in the list view. Right now, having to right-click, open a menu, and locate “Rename” among 12 options isn’t the best user experience.

Not sure what the next steps are if we go with user testing.

For me, the new interaction breaks at least one of my typical flows.
In the list view, a single click on an item does 'highlight' the item but the actual focus goes to the block in the editor canvas. This is already a little arguable.
As such, to actually select an item in the list view users have to click twice. This way, the item is highlighted and actually selected. From there, as an user, I can for example use arrow keys to perform a multiple selection of adjacent items.

It looks like this functionality wouldn't be lost with the changes. You'd just need a slight delay on the second click to maintain that flow.

It may be true that this pattern is used in some very specialized and niche software. However, on the web, a double click on a word just selects that word. Double clicking is mentally associated with the concept of selection since ages and I'm not sure introducing an unexpected behavior is ideal in the first place.

I understand that concern, though I don't believe this is exclusive to niche software. Single-click feels more naturally tied to selection, while double-click is often associated with other actions.

It looks like this functionality wouldn't be lost with the changes. You'd just need a slight delay on the second click to maintain that flow.

Yes and I think the different behavior of a double click depending on the speed will be very confusing for users. I'd also like to remind that double click can be performed only with a pointing device.

Flaky tests detected in 9d78848.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21363610944
📝 Reported issues:

• [Flaky Test] All navigation links should default to the body color and submenus and mobile overlay should default to a white background with black text #55304 in /test/e2e/specs/editor/blocks/navigation-colors.spec.js
• [Flaky Test] should have keyboard navigable link UI popover #61914 in /test/e2e/specs/editor/blocks/image.spec.js
• [Flaky Test] should hide a block completely by selecting "Omit from published content" #74883 in /test/e2e/specs/editor/various/block-hiding.spec.js

I created a PR with a shortcut for the renaming, which could be complementary to this. Also, rebased and updated the PR with the feedback.