Skip to content

Fix: block-mover button tooltip position#77588

Merged
ciampo merged 1 commit into
WordPress:trunkfrom
DarkMatter-999:fix/block-mover-button-tooltip
Apr 23, 2026
Merged

Fix: block-mover button tooltip position#77588
ciampo merged 1 commit into
WordPress:trunkfrom
DarkMatter-999:fix/block-mover-button-tooltip

Conversation

@DarkMatter-999
Copy link
Copy Markdown
Contributor

@DarkMatter-999 DarkMatter-999 commented Apr 23, 2026

What?

Part of #73785

This PR adjusts the tooltip positioning for the block mover buttons. It ensures the "Move Down" button displays its tooltip below the button, while the "Move Up" button (and any others) displays its tooltip above.

Why?

Previously, the tooltips for the block mover controls could overlap other UI elements or the buttons themselves depending on the context. By explicitly setting the tooltip position to 'top' for the up button and 'bottom' for the down button, we provide better visual clarity and prevent the tooltip from obscuring the adjacent mover control.

How?

Modified the BlockMoverButton component to dynamically set the tooltipPosition prop based on the direction prop.

Testing Instructions

  1. Open a post or page.
  2. Insert at least two blocks (e.g., two Paragraph blocks).
  3. Select the bottom block to reveal the block toolbar.
  4. Hover over the Move Up (chevron up) icon. Verify the tooltip appears above the icon.
  5. Hover over the Move Down (chevron down) icon. Verify the tooltip appears below the icon.
  6. Switch to a block layout that uses horizontal movers (like buttons in a Row block) and verify the tooltips still behave predictably.

Screenshots or screencast

Before:

block-mover-tooltip.mov

After:

block-mover-tooltip-fix.mov

Use of AI Tools

I used Gemini 3 Flash to help format this PR description and summarize the logic implementation based on my git diff.

cc: @ciampo, @mirka

@github-actions github-actions Bot added the [Package] Block editor /packages/block-editor label Apr 23, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Apr 23, 2026
@ciampo ciampo requested a review from a team April 23, 2026 07:35
@ciampo ciampo marked this pull request as ready for review April 23, 2026 07:35
@ciampo ciampo requested a review from ellatrix as a code owner April 23, 2026 07:35
@github-actions
Copy link
Copy Markdown

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: DarkMatter-999 <lakshyajeet@git.wordpress.org>

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

Copy link
Copy Markdown
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

LGTM, thank you 🚀

@ciampo ciampo self-requested a review April 23, 2026 07:36
@ciampo ciampo merged commit d2eea63 into WordPress:trunk Apr 23, 2026
52 checks passed
@github-actions github-actions Bot added this to the Gutenberg 23.1 milestone Apr 23, 2026
@t-hamano
Copy link
Copy Markdown
Contributor

Apologies for the feedback after the merge, but could we change the position only when the orientation is vertical? This is because the tooltip display is unnatural in a horizontal layout.

Recording.2026-04-23.132817.mp4

@ciampo
Copy link
Copy Markdown
Contributor

ciampo commented Apr 23, 2026

Good point, I had forgotten to check that variation. @DarkMatter-999 , can you work on a PR for this tweak, too?

@DarkMatter-999
Copy link
Copy Markdown
Contributor Author

Oops. Thanks for the feedback.
Yes, let me create a fix.

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

Labels

[Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants