Popover: add anchor prop
#43691
Merged
Popover: add anchor prop
#43691
Conversation
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
ciampo
added
[Type] Enhancement
ciampo
changed the title
anchor prop to supersede all previous anchorsanchor prop to supersede all previous anchor-related props
|
Size Change: +567 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
This was referenced Aug 30, 2022
ntsekouras
reviewed
Aug 30, 2022
Contributor
ntsekouras
left a comment
ntsekouras
left a comment
There was a problem hiding this comment.
I like this Marco! Thanks for all your work in Popover 💯
This was referenced Aug 30, 2022
ciampo
force-pushed
the
fix/popover-update-deps
branch
3 times, most recently
from
1c0b7c9 to
1de9502
Compare
ciampo
force-pushed
the
refactor/popover-new-anchor-prop
branch
from
76ee67c to
fb73356
Compare
ciampo
commented
Aug 31, 2022
ciampo
commented
Aug 31, 2022
ciampo
force-pushed
the
refactor/popover-new-anchor-prop
branch
2 times, most recently
from
78a6127 to
1de32a8
Compare
This was referenced Sep 1, 2022
* Edit Post: use Popover s new anchor prop * Update comment * SImplify code * Update packages/edit-post/src/components/sidebar/post-schedule/index.js Co-authored-by: Daniel Richards <[email protected]> * Allow passing a `null` anchor Co-authored-by: Daniel Richards <[email protected]>
…opover `anchor` prop (#43713) * useAnchorRef: return a VirtualElement instead of a range * Update useAnchorRef usage in FormatToolbarContainer, use anchor prop * Update remaining `useAnchorRef` usages, switch to the `anchor` prop * useAnchorRef: normalize `null` returns to `undefined` as it is not a valid `anchor` value * Revert changes to native RichText component * Update docs * Allow useAnchorRef to return `null`
ciampo
force-pushed
the
refactor/popover-new-anchor-prop
branch
from
0dc076a to
caacb0e
Compare
Contributor
|
@ockham @ciampo @c4rl0sbr4v0 I was wondering if we should backport this to 14.1 / 6.1 as well. It introduces a new hook and marks a few things as deprecated, so there is a two version warning for it. |
Contributor
|
We were just about to release 14.1; TBH, it's a bit big for a last-minute addition, so I'd rather not include it. However, if y'all would like to include it in 6.1, we have a couple more days until Feature Freeze, so that's still an option. We'd need to add the "Backport to WP Beta/RC" label (and IIRC cherry-pick it to a LMK if you'd like to proceed with that! |
Contributor
|
Thanks for all the amazing work all these months around Popover Marco! 💯 |
Contributor
Author
|
I was AFK on Friday, sorry for the late response @ockham @c4rl0sbr4v0 My preference would be to include it, mostly in order to deprecate those props in 6.1 and therefore be able to remove them in 6.3 (instead of 6.4). This PR has already received a very good amount of testing, and reverting could be done on a per-component basis without the need of reverting the whole PR. I also have already prepared a dev note here But of course you should have the last word on this. |
ockham
added
the
Backport to WP 6.9 Beta/RC
Contributor
ockham
pushed a commit
that referenced
this pull request
Sep 19, 2022
* Popover: add new anchor prop, mark other anchor props as deprecated * Add `anchor` prop to Storybook * Add WP version for deprecated props removal * Do not render fallback anchor if there is already a prop-derived anchor * Block inbetween inserter: use Popover's new anchor prop (#43693) * BlockPopoverInbetween: refactor to use `anchor` prop * Simplify logic, use DOMRect * Add missing hook deps * ListViewDropIndicator: use Popover s new anchor prop (#43694) * Temporarily disable derpecation warnings * Block toolbar: use Popover's new anchor prop (#43692) * Block toolbar: use anchor prop instead of anchorRef.{top,bottom} * Update packages/block-editor/src/components/block-popover/index.js Co-authored-by: Lena Morita <[email protected]> Co-authored-by: Lena Morita <[email protected]> * Dropdown: use Popover s new anchor prop (#43698) * BlockPopover: prevent error when `selectedElement` is not defined * Try to avoid infinite loop * Update PanelRow docs * Edit navigation menu actions: use Popover s new anchor prop * BorderBoxControl: use Popover's new anchor prop (#43789) * BorderBoxControl: use new `anchor` prop for `Popover` * Make sure anchor value is `undefined` instead of `null` * Image URL Input: use new anchor prop for Popover (#43784) * Image URL Input: use new anchor prop for Popover * Prevent value from being `null` * Edit site Actions: use new anchor prop for Popover (#43810) * Buttons block: use new Popover anchor prop (#43785) * Buttons block: use new `anchor` prop for `Popover` * Prevent anchor value from being `null` * Navigation block: use new anchor prop for Popover (#43786) * Navigation block: use new `anchor` prop for `Popover` * Use anchor for the Navigation submenu block too * Prevent anchor value from being `null` * Post Date block: use new anchor prop for Popover (#43787) * Post Date block: use new `anchor` prop for `Popover` * Prevent anchor value from being `null` * Tooltip: refactor using Popover's new anchor prop (#43799) * Tooltip: use Popover s new anchor prop * Use internal state to force re-renders when the anchor ref changes * Simplify code * Improve docs around using state instead of refs for the anchor element * Allow `anchor` to be `null` * Edit Post: use Popover's new anchor prop (#43808) * Edit Post: use Popover s new anchor prop * Update comment * SImplify code * Update packages/edit-post/src/components/sidebar/post-schedule/index.js Co-authored-by: Daniel Richards <[email protected]> * Allow passing a `null` anchor Co-authored-by: Daniel Richards <[email protected]> * Refactor `useAnchorRef` and related components to work with the new Popover `anchor` prop (#43713) * useAnchorRef: return a VirtualElement instead of a range * Update useAnchorRef usage in FormatToolbarContainer, use anchor prop * Update remaining `useAnchorRef` usages, switch to the `anchor` prop * useAnchorRef: normalize `null` returns to `undefined` as it is not a valid `anchor` value * Revert changes to native RichText component * Update docs * Allow useAnchorRef to return `null` * Re-enable deprecation warnings * Remove fall back to `undefined` from `null` * Ensure reactive updates when the popover anchor updates * Refactor SocialLinkEdit component to use `anchor` instead of `anchorRef` * CHANGELOG * Add new `useAnchor` hook instead of changing existing `useAnchorRef` hook * Fix API docs * Update Popover unit tests * Remove unused import * Use DOMRect in the DomRectWithOwnerDocument type * Improve the wording of deprecation warnings * Put more emphasis on storing anchor in local state Co-authored-by: Lena Morita <[email protected]> Co-authored-by: Daniel Richards <[email protected]>
Contributor
|
I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 453f253 |
ockham
removed
the
Backport to WP 6.9 Beta/RC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Dev note
See the dev note in #44195
What?
Requires changes from #43335
This PR:
Popovercomponent namedanchorwhich supersedes all previous anchor-related propsuseAnchorhook in the@wordpress/rich-textpackage, which supersedes theuseAnchorRefhookPopoveracross the codebase to use the newanchorprop and the newuseAnchorhookanchorRef,anchorRectandgetAnchorRectprops for thePopovercomponent as deprecated. These props are scheduled to be deleted in WordPress 6.3, but until then they will still be supporteduseAnchorRefhook as deprecated. This hook is also scheduled to be deleted in WordPress 6.3See the "How" section below for more details
Plan of action
See the details
This PR served as a "base" PR for a series of smaller PRs (listed below) that will refactor all usages of
Popoveracross the codebase, allowing us to review each change separately.useAnchorRefand related components to work with the new Popoveranchorprop #43713?? undefined(now thatanchorcan benull)anchorre-render when the anchor's value updates (and potentially remove unnecessary ref callbacks)anchorOnce all of those PRs are merged back into this PR, we'll be able to merge this PR with the whole refactor.
Why?
Despite the strong xkcd "standards" vibe, I believe this is a good change.
Currently, there 3 props to explicitly pass an anchor to the
Popovercomponent:anchorRef,anchorRectandgetAnchorRect. On top of that,anchorRefis currently used sometimes as anElement, sometimes as a Reactrefholding an element, sometimes as an object with thetopandbottomproperties... basically, the code is currently very messy, it is tightly coupled with some implementation details of the editor (example) and can lead to some unpredictable behavior.How?
Here's a few more details:
anchorprop doesn't mention the wordreforrecton purpose, and it can hold either a domElementor aVirtualElement(ie. an object containing thegetBoundingClientRect()and theownerDocumentprops).anchorReftoanchoris the simplest and most frequent case — it's mostly about passing the actual element instead of a reference.anchorRefcases and thegetAnchorRectcases is slightly more complicated, but ultimately it boils down to making sure that we pass the expectedVirtualElementto thePopoveruseAnchorhook instead of editing the existinguseAnchorRefhook in order to ensure backwards compatfloating-uidocs say about the anchor element: "The element should be stored in state rather than a plain ref to ensure reactive updating when it changes.". I've therefore refactored as many usages ofPopoveras possible to useuseStateinstead ofuseRefto store a reference to the anchor element. I've also left inline comments and updated the Popover docs in order to make this recommended pattern as discoverable as possible.Testing Instructions
Interact with the popovers across the codebase:
trunkPopoverprops and using the deprecateduseAnchorRefList of known affected popovers
In the editor:
BorderBoxControlcomponent and make sure that the popover behaves as expected.trunk.trunk)trunktrunktrunktrunktrunk@— a popover allowing you to pick from the list of existing users should appearIn Storybook:
BorderBoxControlcomponent and:popoverPlacementprop and make sure that the popover's position updates as expected when changing that proppopoverPlacementis set, the popover uses the control group as its anchorpopoverPlacementis not set, the popover uses the icon button as its anchorpopoverPlacementis set, the popover uses the control group as its anchorpopoverPlacementis not set, the popover uses each individual icon button as its anchorTooltipstories and make sure that the component works as expected.DropdownandDropdownMenustories and make sure that the components work as expected.