Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BorderBoxControl: use Popover's new anchor prop #43789

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Sep 1, 2022

What?

Refactor the way the BorderBoxControl component passes an anchor to Popover, using the new anchor prop

Why?

See #43691 for more context

How?

  • Swap anchorRef with anchor
  • Use internal state and a callback ref to make sure that the component re-renders when the anchor changes (including updating after the initial render, when the anchor's ref is still unset)

Testing Instructions

In Storybook:

Open the BorderBoxControl component and:

  • make sure that the popover appears as expected when clicking on the "circle" icon button:
  • play around with the popoverPlacement prop and make sure that the popover's position updates as expected when changing that prop
    • When a popoverPlacement is set, the popover uses the control group as its anchor
    • When a popoverPlacement is not set, the popover uses the icon button as its anchor
  • click the "link" icon in order to show split controls for each border size, and make sure that:
    • When a popoverPlacement is set, the popover uses the control group as its anchor
    • When a popoverPlacement is not set, the popover uses each individual icon button as its anchor

In the editor:

  • add an image block and select it
  • in the sidebar, play with the BorderBoxControl component
  • make sure that the component behaves like on trunk
border-box-control.mp4

@ciampo ciampo self-assigned this Sep 1, 2022
@ciampo ciampo added [Type] Enhancement A suggestion for improvement. [Feature] UI Components Impacts or related to the UI component system [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Sep 1, 2022
Comment on lines 39 to 57
const [ popoverProps, setPopoverProps ] = useState< PopoverPartialProps >();
const [ popoverAnchor, setPopoverAnchor ] = useState< Element >();

const containerRef = useCallback( ( node ) => {
setPopoverAnchor( node );
}, [] );

useEffect( () => {
if ( popoverPlacement ) {
setPopoverProps( {
placement: popoverPlacement,
offset: popoverOffset,
anchorRef: containerRef,
anchor: popoverAnchor,
__unstableShift: true,
}
: undefined;
} );
} else {
setPopoverProps( undefined );
}
}, [ popoverPlacement, popoverOffset, popoverAnchor ] );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This changes are in place to make sure that, when the containerRef is updated, popoverProps are updated too.

Without it, the ref would be updated after the initial value of popoverProps was computed, and because of how React refs work, React wouldn't re-render the component — meaning that the anchor property in popoverProps would be stale until a re-render would be caused by whatever reason.

placement: popoverPlacement,
offset: popoverOffset,
anchorRef: containerRef,
anchor: popoverAnchor,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Using anchor instead of anchorRef

Comment on lines 66 to 86
const [ popoverProps, setPopoverProps ] = useState< PopoverPartialProps >();
const [ popoverAnchor, setPopoverAnchor ] = useState< Element >();

const containerRef = useCallback( ( node ) => {
setPopoverAnchor( node );
}, [] );

useEffect( () => {
if ( popoverPlacement ) {
setPopoverProps( {
placement: popoverPlacement,
offset: popoverOffset,
anchorRef: containerRef,
anchor: popoverAnchor,
__unstableShift: true,
}
: undefined;
} );
} else {
setPopoverProps( undefined );
}
}, [ popoverPlacement, popoverOffset, popoverAnchor ] );

const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
Copy link
Contributor Author

@ciampo ciampo Sep 1, 2022

Choose a reason for hiding this comment

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

Same set of changes as in the other component

Comment on lines +24 to +29
export type PopoverPartialProps = {
placement?: Placement;
offset?: number;
anchor?: ReferenceType;
__unstableShift?: boolean;
};
Copy link
Contributor Author

@ciampo ciampo Sep 1, 2022

Choose a reason for hiding this comment

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

This should be removed and replaced with the original PopoverProps type once we type the component (hopefully soon!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Working on it #43823

@@ -85,6 +85,7 @@ Default.args = {
width: '1px',
},
__next36pxDefaultSize: false,
popoverPlacement: 'right-start',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I added popoverPlacement while testing for the stale anchor value, and decided to keep it for convenience.

But the component's stories definitely need to be rewritten in TypeScript so that they can show all props

Copy link
Contributor

Choose a reason for hiding this comment

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

I have it on my radar to rewrite the border control component stories in TypeScript and update them to follow the latest approach and guidelines. Unfortunately, I haven't had the bandwidth in the lead-up to 6.1 but hope to in the not-too-distant future.

}, [] );

useEffect( () => {
if ( popoverPlacement ) {
Copy link
Contributor Author

@ciampo ciampo Sep 1, 2022

Choose a reason for hiding this comment

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

Side note: I'm not in love with the popoverPlacement and popoverOffset props, but these were added as part of #40740 and it's not in the scope of this PR to revisit the APIs of BorderBoxControl

@github-actions
Copy link

github-actions bot commented Sep 1, 2022

Size Change: +45 B (0%)

Total Size: 1.25 MB

Filename Size Change
build/components/index.min.js 198 kB +45 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.05 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 161 kB
build/block-editor/style-rtl.css 15.2 kB
build/block-editor/style.css 15.2 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/button/style-rtl.css 505 B
build/block-library/blocks/button/style.css 505 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 605 B
build/block-library/blocks/cover/editor.css 607 B
build/block-library/blocks/cover/style-rtl.css 1.55 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 110 B
build/block-library/blocks/embed/theme.css 110 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 337 B
build/block-library/blocks/group/editor.css 337 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 876 B
build/block-library/blocks/image/editor.css 873 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 1.98 kB
build/block-library/blocks/navigation/editor.css 1.99 kB
build/block-library/blocks/navigation/style-rtl.css 2.04 kB
build/block-library/blocks/navigation/style.css 2.03 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 493 B
build/block-library/blocks/post-comments-form/style.css 493 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 507 B
build/block-library/blocks/post-featured-image/editor.css 505 B
build/block-library/blocks/post-featured-image/style-rtl.css 166 B
build/block-library/blocks/post-featured-image/style.css 166 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 396 B
build/block-library/blocks/search/style.css 393 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 481 B
build/block-library/blocks/site-logo/editor.css 481 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.39 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 239 B
build/block-library/blocks/tag-cloud/style.css 239 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/common-rtl.css 1.01 kB
build/block-library/common.css 1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11 kB
build/block-library/editor.css 10.9 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 188 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.9 kB
build/block-library/style.css 11.9 kB
build/block-library/theme-rtl.css 695 B
build/block-library/theme.css 700 B
build/block-serialization-default-parser/index.min.js 1.1 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.6 kB
build/components/style-rtl.css 11.5 kB
build/components/style.css 11.5 kB
build/compose/index.min.js 12 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.06 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.69 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 3.99 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.5 kB
build/edit-post/style-rtl.css 6.93 kB
build/edit-post/style.css 6.93 kB
build/edit-site/index.min.js 57.9 kB
build/edit-site/style-rtl.css 8.2 kB
build/edit-site/style.css 8.18 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.33 kB
build/edit-widgets/style.css 4.34 kB
build/editor/index.min.js 41.6 kB
build/editor/style-rtl.css 3.66 kB
build/editor/style.css 3.65 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.75 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.81 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 953 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 612 B
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.4 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.2 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@ciampo ciampo mentioned this pull request Sep 1, 2022
20 tasks
@ciampo ciampo requested a review from Mamaduka September 2, 2022 10:33
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Nice work @ciampo

The changes look good and tested well for me.

✅ Popover appears as expected when clicking on color button
✅ Popover position updates appropriately when adjusting popover placement in Storybook
✅ When no popover placement is set color button is used as the anchor
✅ Split controls and their popovers behave consistently with the linked control
✅ Popover placement between this PR and trunk is consistent in the editor

Storybook video
Screen.Recording.2022-09-05.at.7.03.02.pm.mp4
Editor video
Screen.Recording.2022-09-05.at.7.29.10.pm.mp4

P.S. We'll need a changelog 🙂

@ciampo
Copy link
Contributor Author

ciampo commented Sep 5, 2022

Thank you for the review, @aaronrobertshaw !

P.S. We'll need a changelog 🙂

Good call. I'm planning on adding CHANGELOG entries on the base PR before merging to trunk

@ciampo ciampo merged commit d1e8c9f into refactor/popover-new-anchor-prop Sep 5, 2022
@ciampo ciampo deleted the refactor/border-box-control-new-anchor-prop branch September 5, 2022 09:51
ciampo added a commit that referenced this pull request Sep 6, 2022
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
ciampo added a commit that referenced this pull request Sep 7, 2022
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
ciampo added a commit that referenced this pull request Sep 9, 2022
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
ciampo added a commit that referenced this pull request Sep 14, 2022
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
ciampo added a commit that referenced this pull request Sep 14, 2022
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
ciampo added a commit that referenced this pull request Sep 14, 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 <lena@jaguchi.com>

Co-authored-by: Lena Morita <lena@jaguchi.com>

* 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 <daniel.richards@automattic.com>

* Allow passing a `null` anchor

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* 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 <lena@jaguchi.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
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 <lena@jaguchi.com>

Co-authored-by: Lena Morita <lena@jaguchi.com>

* 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 <daniel.richards@automattic.com>

* Allow passing a `null` anchor

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* 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 <lena@jaguchi.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants