Rich Text: Make inline toolbar more reactive for proper positioning#73853
Merged
ntsekouras merged 6 commits intotrunkfrom Dec 16, 2025
Merged
Rich Text: Make inline toolbar more reactive for proper positioning#73853ntsekouras merged 6 commits intotrunkfrom
ntsekouras merged 6 commits intotrunkfrom
Conversation
ntsekouras
added
[Type] Bug
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Mamaduka
reviewed
Dec 9, 2025
Member
|
Should we replace the remaining |
|
Size Change: +17 B (0%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
Contributor
Author
Actually I'm looking into this now and we should probably have a fresh ref to also pass in FormatEdit. That should also fix the linked issue. I'll explore and update tomorrow though. |
ellatrix
reviewed
Dec 15, 2025
| */ | ||
| import { usePrevious } from '@wordpress/compose'; | ||
| import { useState, useLayoutEffect } from '@wordpress/element'; | ||
| import { getRectangleFromRange } from '@wordpress/dom'; |
Member
There was a problem hiding this comment.
Perhaps we need a new range utility package or something, it's kind of annoying that rich text now depends on the DOM package...
Member
There was a problem hiding this comment.
The DOM is supposed to be a small package, so I wouldn't worry too much about it 😄
ntsekouras
force-pushed
the
richtext/fix-inline-toolbar-positioning-on-remount
branch
from
7294720 to
1d2c081
Compare
Contributor
Author
|
Flaky tests detected in 5e6308b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20240462520
|
Mamaduka
reviewed
Dec 16, 2025
ntsekouras
deleted the
richtext/fix-inline-toolbar-positioning-on-remount
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Fixes: #73832
This PR solves the above issue with the Link popover (@ellatrix 's commit).
The below video from the issue demonstrates the bug:
caption.mp4
When I started exploring the linked issue I observed another bug with a stale reference of the InlineToolbar, when we remove and add again the Caption of some blocks.
This PR also makes the RichText InlineToolbar more reactive for proper positioning of the popover.
I used state to track the anchor element and a ref callback to trigger a re-render of InlineToolbar with the valid anchor.
I'm not exactly sure how why it works properly when we click for the first time, but I guess more re-renders are triggered then.
Testing Instructions for the InlineToolbar bug
Captionutil. That meansimage, audio, embed, gallery, quote, table and videoblocks.add captionbutton.Testing Instructions for Link popover bug
LinkbuttonVideos for the InlineToolbar bug
Before
before.mov
After
Screen.Recording.2025-12-09.at.8.52.39.PM.mov