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

Fix useResizeObserver bugs #65389

Merged
merged 5 commits into from
Sep 19, 2024
Merged

Fix useResizeObserver bugs #65389

merged 5 commits into from
Sep 19, 2024

Conversation

DaniGuardiola
Copy link
Contributor

What?

  • Fixed a circular dependency issue (original comment)
  • Fixed a bug that caused elements to not be properly unobserved (original comment)
  • Renamed the _legacy dir to just legacy

Thanks @jsnajdr! Original post-merge review: #64943 (review)

Copy link

github-actions bot commented Sep 17, 2024

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: DaniGuardiola <[email protected]>
Co-authored-by: jsnajdr <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

@DaniGuardiola
Copy link
Contributor Author

Following up on the discussion here: #64943 (review)

cc @jsnajdr

Regarding React Native, I don't think this utility should try to cover that use case. ResizeObserver is not a thing in React Native afaik. At most, we can create an API that's somewhat similar to the legacy one (e.g. useTrackElementSize or something like that) so it can be used from React Native, but the new one should just be web-only since that's the only context where ResizeObserver exists. FWIW, my assumption is that the legacy API will still work in React Native so nothing should break.

@DaniGuardiola DaniGuardiola self-assigned this Sep 17, 2024
@DaniGuardiola DaniGuardiola added [Type] Bug An existing feature does not function as intended [Package] Compose /packages/compose labels Sep 17, 2024
Copy link

github-actions bot commented Sep 17, 2024

Size Change: +159 B (+0.01%)

Total Size: 1.77 MB

Filename Size Change
build-module/a11y/index.min.js 482 B -416 B (-46.33%) 🎉
build-module/interactivity-router/index.min.js 3 kB +202 B (+7.21%) 🔍
build-module/interactivity/debug.min.js 16.4 kB -160 B (-0.97%)
build-module/interactivity/index.min.js 13.2 kB -150 B (-1.13%)
build/a11y/index.min.js 952 B +3 B (+0.32%)
build/blob/index.min.js 594 B +15 B (+2.59%)
build/block-editor/index.min.js 258 kB +220 B (+0.09%)
build/block-editor/style-rtl.css 15.7 kB -332 B (-2.07%)
build/block-editor/style.css 15.7 kB -330 B (-2.06%)
build/block-library/blocks/form/view.min.js 484 B +14 B (+2.98%)
build/block-library/blocks/gallery/editor-rtl.css 946 B -9 B (-0.94%)
build/block-library/blocks/gallery/editor.css 951 B -7 B (-0.73%)
build/block-library/blocks/post-title/style-rtl.css 162 B -64 B (-28.32%) 🎉
build/block-library/blocks/post-title/style.css 162 B -64 B (-28.32%) 🎉
build/block-library/blocks/site-title/style-rtl.css 143 B -63 B (-30.58%) 🎉
build/block-library/blocks/site-title/style.css 143 B -63 B (-30.58%) 🎉
build/block-library/editor-rtl.css 11.7 kB -10 B (-0.09%)
build/block-library/editor.css 11.7 kB -9 B (-0.08%)
build/block-library/index.min.js 219 kB +409 B (+0.19%)
build/block-library/style-rtl.css 14.9 kB -120 B (-0.8%)
build/block-library/style.css 14.9 kB -119 B (-0.79%)
build/blocks/index.min.js 52.3 kB +18 B (+0.03%)
build/components/index.min.js 225 kB +340 B (+0.15%)
build/components/style-rtl.css 12.3 kB +181 B (+1.49%)
build/components/style.css 12.3 kB +181 B (+1.49%)
build/compose/index.min.js 12.7 kB +3 B (+0.02%)
build/core-data/index.min.js 73.4 kB +218 B (+0.3%)
build/edit-post/index.min.js 13.6 kB +488 B (+3.72%)
build/edit-post/style-rtl.css 2.54 kB -34 B (-1.32%)
build/edit-post/style.css 2.54 kB -34 B (-1.32%)
build/edit-site/index.min.js 217 kB -302 B (-0.14%)
build/edit-site/style-rtl.css 12.6 kB -6 B (-0.05%)
build/edit-site/style.css 12.6 kB -10 B (-0.08%)
build/edit-widgets/index.min.js 17.7 kB -3 B (-0.02%)
build/edit-widgets/style-rtl.css 4.19 kB -11 B (-0.26%)
build/edit-widgets/style.css 4.19 kB -11 B (-0.26%)
build/editor/index.min.js 102 kB +142 B (+0.14%)
build/editor/style-rtl.css 9.33 kB +4 B (+0.04%)
build/editor/style.css 9.34 kB +4 B (+0.04%)
build/url/index.min.js 3.93 kB +25 B (+0.64%)
build/widgets/index.min.js 7.21 kB +19 B (+0.26%)
ℹ️ View Unchanged
Filename Size
build-module/block-library/file/view.min.js 447 B
build-module/block-library/image/view.min.js 1.78 kB
build-module/block-library/navigation/view.min.js 1.16 kB
build-module/block-library/query/view.min.js 743 B
build-module/block-library/search/view.min.js 616 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/block-directory/index.min.js 7.11 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.65 kB
build/block-editor/content.css 4.64 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
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 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 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 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-edit-link/style-rtl.css 70 B
build/block-library/blocks/comment-edit-link/style.css 70 B
build/block-library/blocks/comment-reply-link/style-rtl.css 71 B
build/block-library/blocks/comment-reply-link/style.css 71 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 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 832 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 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 357 B
build/block-library/blocks/form-input/style.css 357 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 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 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 785 B
build/block-library/blocks/image/editor.css 787 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 321 B
build/block-library/blocks/media-text/editor.css 320 B
build/block-library/blocks/media-text/style-rtl.css 558 B
build/block-library/blocks/media-text/style.css 556 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.19 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 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 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 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 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 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 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 154 B
build/block-library/blocks/query-pagination/editor.css 154 B
build/block-library/blocks/query-pagination/style-rtl.css 237 B
build/block-library/blocks/query-pagination/style.css 237 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/core-commands/index.min.js 2.82 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.66 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-site/posts-rtl.css 7.3 kB
build/edit-site/posts.css 7.3 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.11 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 3.2 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@ciampo ciampo requested a review from jsnajdr September 17, 2024 07:50
@jsnajdr
Copy link
Member

jsnajdr commented Sep 17, 2024

Regarding React Native, I don't think this utility should try to cover that use case. ResizeObserver is not a thing in React Native afaik.

What if React Native module imports

import { useResizeObserver } from '@wordpress/compose';

? Then it also imports the web version of the new hook, and that hook can be called as useResizeObserver( callback ), and it will execute the web version and will probably fail. That's what I'm worried about. Not that we don't implement a RN version of the new hook, but that we're incorrectly exposing the new version of it. The web and RN versions should be better isolated from each other.

@DaniGuardiola
Copy link
Contributor Author

I see the point about React Native, however I wonder, do all @wordpress/compose utilities guarantee that they will function in a React Native context? I would be surprised if so. In this case, I guess there are two considerations:

  • Since the previous API did support React Native, should we publish a dev note or similar to give the community a heads up?
  • Should we implement an API that does work in React Native too, like I was proposing? Is this a recurrent enough need? Is there an advantage in having a "homomorphic" utility that works in both web and React Native with the same API?

What do you think?

@jsnajdr
Copy link
Member

jsnajdr commented Sep 17, 2024

do all @wordpress/compose utilities guarantee that they will function in a React Native context?

There are two separate index files, index.js and index.native.js, and each exports only the utils that are relevant for a given platform. So, yes, there is such a guarantee.

All I'm asking for is that there is a new use-resize-observer/index.native.js file that exports only the legacy/index.native.js hook. Don't export the web version at all.

You don't need to write any new code or remove anything. Just exclude the web version of useResizeObserver( callback ) from the RN version. The RN version should be completely untouched by this addition.

@tyxla
Copy link
Member

tyxla commented Sep 18, 2024

do all @wordpress/compose utilities guarantee that they will function in a React Native context?

There are two separate index files, index.js and index.native.js, and each exports only the utils that are relevant for a given platform. So, yes, there is such a guarantee.

All I'm asking for is that there is a new use-resize-observer/index.native.js file that exports only the legacy/index.native.js hook. Don't export the web version at all.

You don't need to write any new code or remove anything. Just exclude the web version of useResizeObserver( callback ) from the RN version. The RN version should be completely untouched by this addition.

This makes sense to me, but if in doubt, we can always ping some folks from the mobile team for confirmation.

@DaniGuardiola DaniGuardiola enabled auto-merge (squash) September 19, 2024 04:06
@DaniGuardiola
Copy link
Contributor Author

@jsnajdr alright, that makes sense though there are some details to discuss. For example, what happens with the difference in API. The new API is web-only so it won't be possible to re-create for React Native in any case. Will that be okay?

Anyway, I'm merging this but let's keep discussing and I'll open a new PR to handle that.

@DaniGuardiola DaniGuardiola merged commit a90e35b into trunk Sep 19, 2024
62 checks passed
@DaniGuardiola DaniGuardiola deleted the fix/use-resize-observer branch September 19, 2024 04:41
@github-actions github-actions bot added this to the Gutenberg 19.4 milestone Sep 19, 2024
@jsnajdr
Copy link
Member

jsnajdr commented Sep 19, 2024

For example, what happens with the difference in API. The new API is web-only so it won't be possible to re-create for React Native in any case. Will that be okay?

At this moment, the React Native API stays the same. There is the useResizeObserver hook that returns a helper element. I'm only proposing that we stop breaking that API by exposing a web version of the new API that doesn't work in RN anyway.

It should be possible to implement a pretty good version of the new API also for React Native. View elements in RN have an onLayout event handler, and we can use it, something like this:

function useResizeObserver( callback ) {
  const elRef = useRef();
  const cb = useEvent( callback );
  useEffect( () => {
    function handleLayout( e ) {
      const entries = [ { contentBoxSize: [ { inlineSize: e.layout.width, blockSize: e.layout.height } ] } ];
      cb( entries );
    }
    const el = elRef.current;
    el.addEventListener( 'layout', handleLayout );
    return () => el.removeEventListener( 'layout', handleLayout );
  } );
  return elRef;
}

The existing RN usages of useResizeObserver that I've found should be happy with this.

There are details to figure out like whether the reported layout is contentBoxSize or rather borderBoxSize. I don't know how that works in RN, or even if there is such a thing as borders and paddings and margins there at all.

@ciampo
Copy link
Contributor

ciampo commented Sep 19, 2024

Just to understand, with this PR merged, is there a chance that the native APIs got a breaking change? If so, we should make sure we quickly put up a PR to export only the legacy version to react native, as proposed by Jarda above.

@DaniGuardiola
Copy link
Contributor Author

@ciampo nothing that already is in use will break. I will put up a PR that handles the React Native situation very soon, but don't worry about it as there's no chance new code will be submitted that breaks, as the error would be immediate.

This PR doesn't affect the React Native situation fwiw, it just addresses some bugs and tweaks related to the web version.

@noisysocks noisysocks added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 23, 2024
gutenbergplugin pushed a commit that referenced this pull request Sep 23, 2024
* Rename "_legacy" dir to "legacy"

* Fix circular dependency issue

* Fix bug that caused elements to not be unobserved.

* Add changelog

* Remove changelog entry

Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: jsnajdr <[email protected]>
Co-authored-by: tyxla <[email protected]>
@github-actions github-actions bot removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 23, 2024
@github-actions github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Sep 23, 2024
Copy link

I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: d87b39b

@DaniGuardiola
Copy link
Contributor Author

See #65588

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Backported to WP Core Pull request that has been successfully merged into WP Core [Package] Compose /packages/compose [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants