Skip to content

[WIP] Block Editor: Add contextual label for block inserter button#71160

Draft
shrivastavanolo wants to merge 5 commits into
WordPress:trunkfrom
shrivastavanolo:fix/button-block-appender-tooltip
Draft

[WIP] Block Editor: Add contextual label for block inserter button#71160
shrivastavanolo wants to merge 5 commits into
WordPress:trunkfrom
shrivastavanolo:fix/button-block-appender-tooltip

Conversation

@shrivastavanolo

@shrivastavanolo shrivastavanolo commented Aug 11, 2025

Copy link
Copy Markdown
Contributor

What?

Closes #71162

This PR updates the block inserter button label to show a contextual and clearer message when adding new blocks inside a parent block. Instead of the generic "Add block" tooltip, it shows "Add block to [Parent Block Title]" where applicable (e.g., for navigation menu items).

Why?

The generic "Add block" tooltip can be confusing when adding items inside blocks like the Navigation block, where users expect to add a new menu item rather than just a generic block. This change improves clarity by specifying the type of item being added based on the parent block's title.

How?

  • The ButtonBlockAppender component now receives a parentBlockTitle prop and uses it to customize the button label.
  • The label changes from a generic "Add block" to a contextual string, e.g., "Add block to Navigation" for navigation blocks.
  • The Inserter component obtains the parent block title by retrieving the parent block's block type title or name and passes it down as a prop.
  • The label text uses WordPress translation functions (_x and sprintf) with translator comments for internationalization support.

Reference taken from here: #45238 (comment)

Testing Instructions

  1. Open the editor and add a Navigation block (or any block with nested child blocks).
  2. Hover over or focus the block inserter button inside the parent block.
  3. Confirm that the tooltip/button label reads "Add block to [Parent Block Title]" (e.g., "Add block to Navigation") instead of the generic "Add block."
  4. Verify that the label is properly translated and appears correctly for other block types as well.

Screencast

Before

Screen.Recording.2025-08-11.at.12.22.50.PM.mov

After

Screen.Recording.2025-08-11.at.12.57.01.PM.mov

@shrivastavanolo shrivastavanolo changed the title Block Editor: Add contextual label for block inserter button [WIP] Block Editor: Add contextual label for block inserter button Aug 11, 2025

@getdave getdave left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this PR.

I was looking at the same problem in #71502. I think there's some overlap here and it's possible both approaches can co-exist.

I think there are some situations where we might want to change this label to not be about blocks at all.

For example, in the Navigation block, the concept of "block" is less applicable. We want the appender to read Add page because the "Page link" variation is the default block for the Nav block. I wonder how this can be achieved.

I also note that the addition of the block title/name here increases the verbosity of the tooltip. However, I see that accessibility feedback has noted this would be an enhancement in that regard. We should probably request some design feedback here as well so that we can strike a balance that works for all users.

I also see that once I add a Group the appender + that appears still reads Add block

Screenshot 2025-10-01 at 17 44 01

@getdave getdave added the Needs Design Feedback Needs general design feedback. label Oct 1, 2025
@github-actions

github-actions Bot commented Oct 1, 2025

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin, New Block.
  • Labels found: Needs Design Feedback.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@jasmussen

Copy link
Copy Markdown
Contributor

Late to this PR, and thanks for the work.

When you use the inserter inside a Buttons block, you can't select which block to insert, you can only insert a Button. In that case, it says "Add button":

image

I happen to think in that specific use case, the Buttons block should use the same inline inserter the Navigation block does.

The navigation block is adjacent. It inserts a menu item by default, but you can "transform" it to another block. So there's an argument to be made that it should say "Add navigation item" as its tooltip. I've no strong opinion, but it seems worth doing in as generic as possible a way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Design Feedback Needs general design feedback.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Block Editor: Add contextual label for block inserter button

3 participants