Skip to content

Conversation

@shrivastavanolo
Copy link
Contributor

@shrivastavanolo shrivastavanolo commented Aug 11, 2025

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
Copy link
Contributor

@getdave getdave left a comment

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
Copy link

github-actions bot commented Oct 1, 2025

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.

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

2 participants