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

Block toolbar: use Popover's new anchor prop #43692

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Aug 30, 2022

What?

Refactor the way the block toolbar Popover's anchor is defined, using the new anchor prop

Why?

See #43691 for more context

How?

The logic for showing the popover is the same, but is now part of the block toolbar component.

Testing Instructions

In the editor, select blocks (both single block, and multiple block selections) and make sure that:

  • the behaviour is the same as on trunk
  • there's no warning in the console when a new block is selected

Unit test failures caused by console warnings are expected. The reviews on this PR should focus on the specific refactor to anchor prop. This PR will be merged into #43691, so there will be another chance in that PR to give a final review.

@ciampo ciampo requested a review from ellatrix as a code owner August 30, 2022 07:44
@ciampo ciampo self-assigned this Aug 30, 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 Aug 30, 2022
@ciampo ciampo mentioned this pull request Aug 30, 2022
20 tasks
@github-actions
Copy link

github-actions bot commented Aug 30, 2022

Size Change: +54 B (0%)

Total Size: 1.24 MB

Filename Size Change
build/block-editor/index.min.js 160 kB +93 B (0%)
build/components/index.min.js 198 kB -39 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/style-rtl.css 15.1 kB
build/block-editor/style.css 15.1 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.96 kB
build/block-library/blocks/navigation/editor.css 1.96 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 461 B
build/block-library/blocks/site-logo/editor.css 461 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 10.9 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.5 kB
build/components/style-rtl.css 11.5 kB
build/components/style.css 11.6 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 4 kB
build/edit-navigation/style.css 4.01 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.94 kB
build/edit-post/style.css 6.94 kB
build/edit-site/index.min.js 57.8 kB
build/edit-site/style-rtl.css 8.22 kB
build/edit-site/style.css 8.2 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.35 kB
build/edit-widgets/style.css 4.35 kB
build/editor/index.min.js 41.5 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 force-pushed the refacor/popover-block-toolbar-anchor-prop branch from 5ee2a9f to 1dd3a0b Compare August 30, 2022 07:57
@ciampo ciampo added [Package] Block editor /packages/block-editor and removed [Package] Components /packages/components labels Aug 30, 2022
// selected element and the last selected element:
// - for top/left coordinates, use the smaller numbers
// - for the bottom/right coordinates, use the larget numbers
const left = Math.min( selectedBCR.left, lastSelectedBCR.left );
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 logic is an improved version of the same logic inside the Popover component

@ciampo ciampo requested a review from tyxla August 30, 2022 08:08
@ciampo ciampo force-pushed the refacor/popover-block-toolbar-anchor-prop branch from 1dd3a0b to 09dad10 Compare August 30, 2022 17:55
@ciampo ciampo force-pushed the refactor/popover-new-anchor-prop branch from 76ee67c to fb73356 Compare August 31, 2022 13:20
@ciampo ciampo requested a review from ajitbohra as a code owner August 31, 2022 13:20
@ciampo ciampo force-pushed the refacor/popover-block-toolbar-anchor-prop branch from 09dad10 to 35ff84c Compare August 31, 2022 13:22
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Code looks good, and works as expected in the editor 🚢

Co-authored-by: Lena Morita <lena@jaguchi.com>
@ciampo ciampo merged commit 0743f43 into refactor/popover-new-anchor-prop Aug 31, 2022
@ciampo ciampo deleted the refacor/popover-block-toolbar-anchor-prop branch August 31, 2022 17:39
ciampo added a commit that referenced this pull request Sep 1, 2022
* 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>
ciampo added a commit that referenced this pull request Sep 6, 2022
* 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>
ciampo added a commit that referenced this pull request Sep 7, 2022
* 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>
ciampo added a commit that referenced this pull request Sep 9, 2022
* 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>
ciampo added a commit that referenced this pull request Sep 14, 2022
* 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>
ciampo added a commit that referenced this pull request Sep 14, 2022
* 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>
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] Block editor /packages/block-editor [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