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

Try restoring the site editor animation #51956

Merged
merged 9 commits into from
Jul 4, 2023

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Jun 27, 2023

What?

Attempts to fix #51903

How?

Restores how the code looked before (relying on AnimatePresence to handle entry and exit animations rather than the display property). Unfortunately bringing this back reintroduces routing issues on mobile that were solved by #51558.

Since we're not sure how to fix the routing issues on mobile, we're leaving the sidebar present ini the DOM, but hiding it visually and marking it as inert to stop all user interactions on the sidebar.

Also resolves some issues with the editor header animation that seem to have been introduced by the addition of Distraction Free mode.

Testing Instructions

  1. Open the site editor
  2. Switch between view and edit mode and back again.
  3. There should be an animation of the viewport when switching back to view mode.
  4. Switch to Distraction Free
  5. Switch between view and edit mode and back again.
  6. All animations should look nice :)

Screenshots or screencast

Before

Kapture.2023-06-27.at.13.19.00.mp4

After

Kapture.2023-06-27.at.13.20.49.mp4

@talldan talldan added [Type] Regression Related to a regression in the latest release [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jun 27, 2023
@talldan talldan self-assigned this Jun 27, 2023
@github-actions
Copy link

github-actions bot commented Jun 27, 2023

Size Change: -36.4 kB (-3%)

Total Size: 1.42 MB

Filename Size Change
build/block-editor/content-rtl.css 4.25 kB +26 B (+1%)
build/block-editor/content.css 4.24 kB +25 B (+1%)
build/block-editor/index.min.js 209 kB +390 B (0%)
build/block-editor/style.css 14.6 kB -1 B (0%)
build/block-library/blocks/file/interactivity.min.js 0 B -395 B (removed) 🏆
build/block-library/blocks/file/view.min.js 312 B -63 B (-17%) 👏
build/block-library/blocks/image/interactivity.min.js 0 B -1.52 kB (removed) 🏆
build/block-library/blocks/image/style-rtl.css 1.42 kB +77 B (+6%) 🔍
build/block-library/blocks/image/style.css 1.42 kB +74 B (+5%) 🔍
build/block-library/blocks/navigation/interactivity.min.js 0 B -978 B (removed) 🏆
build/block-library/blocks/navigation/view-modal.min.js 0 B -2.78 kB (removed) 🏆
build/block-library/blocks/navigation/view.min.js 906 B +468 B (+107%) 🆘
build/block-library/index.min.js 201 kB +208 B (0%)
build/block-library/interactivity/runtime.min.js 0 B -2.69 kB (removed) 🏆
build/block-library/interactivity/vendors.min.js 0 B -8.2 kB (removed) 🏆
build/block-library/style-rtl.css 13.7 kB +72 B (+1%)
build/block-library/style.css 13.7 kB +71 B (+1%)
build/blocks/index.min.js 51 kB +48 B (0%)
build/components/index.min.js 240 kB +45 B (0%)
build/components/style-rtl.css 11.8 kB -6 B (0%)
build/components/style.css 11.8 kB -6 B (0%)
build/core-commands/index.min.js 2.26 kB -3 B (0%)
build/core-data/index.min.js 16.1 kB +32 B (0%)
build/customize-widgets/index.min.js 12 kB +93 B (+1%)
build/data/index.min.js 8.27 kB +22 B (0%)
build/date/index.min.js 17.8 kB -22.7 kB (-56%) 🏆
build/edit-post/index.min.js 35.2 kB +385 B (+1%)
build/edit-post/style-rtl.css 7.58 kB -1 B (0%)
build/edit-post/style.css 7.57 kB -1 B (0%)
build/edit-site/index.min.js 84.7 kB +789 B (+1%)
build/edit-site/style-rtl.css 12.6 kB +12 B (0%)
build/edit-site/style.css 12.6 kB +12 B (0%)
build/edit-widgets/index.min.js 16.9 kB +100 B (+1%)
build/editor/index.min.js 45.4 kB -64 B (0%)
build/editor/style-rtl.css 3.58 kB -4 B (0%)
build/editor/style.css 3.58 kB -4 B (0%)
build/reusable-blocks/index.min.js 2.39 kB +8 B (0%)
build/style-engine/index.min.js 1.83 kB +17 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 6.99 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 14.6 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 90 B
build/block-library/blocks/archives/style.css 90 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 126 B
build/block-library/blocks/audio/theme.css 126 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 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 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 409 B
build/block-library/blocks/columns/style.css 409 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.61 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 159 B
build/block-library/blocks/details/style.css 159 B
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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/footnotes/style-rtl.css 183 B
build/block-library/blocks/footnotes/style.css 182 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 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 654 B
build/block-library/blocks/group/editor.css 654 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.46 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 478 B
build/block-library/blocks/latest-posts/style.css 478 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
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 401 B
build/block-library/blocks/page-list/editor.css 401 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 279 B
build/block-library/blocks/paragraph/style.css 281 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 314 B
build/block-library/blocks/post-template/style.css 314 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 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 587 B
build/block-library/blocks/search/style.css 584 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 531 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 234 B
build/block-library/blocks/separator/style.css 234 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 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.43 kB
build/block-library/blocks/social-links/style.css 1.42 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 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 126 B
build/block-library/blocks/video/theme.css 126 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/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 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 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/compose/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.62 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 10 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/plugins/index.min.js 1.77 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 943 B
build/react-i18n/index.min.js 615 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.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.9 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@@ -247,21 +256,13 @@ export default function Layout() {

<div className="edit-site-layout__content">
<AnimatePresence initial={ false }>
{
{ showSidebar && (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@kevin940726 mentioned to me that the issue with completely unmounting the sidebar is that it contains hooks that sync the routing state, and while it's unmounted those hooks aren't running, so some navigation doesn't work as expected. This is the reason it was changed in #51558.

@youknowriad Wondering if you have any suggestions for solving that in a different way?

Copy link
Member

Choose a reason for hiding this comment

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

Specifically, here's a bug I found while testing on mobile:

Kapture.2023-06-27.at.14.54.22.mp4

The previous sidebar still exists but hidden if we use the browser's back button to go back from the edit mode. It has a higher z-index value too so it intercepts the click event (the add new pattern dropdown shouldn't be opened).

There might be a better and more elegant solution for this though! I didn't have time so I settled with the CSS hack 🤦 .

Copy link
Contributor

Choose a reason for hiding this comment

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

Also related is the issue found here that actually existed before that PR and is potentially related to AnimatePresence not unmounting properly. The added complication is we now need the sidebar mounted on mobile for routing reasons.

Copy link
Contributor

Choose a reason for hiding this comment

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

it contains hooks that sync the routing state

Can you clarify which hooks we're talking about here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@kevin940726 Do you know the which specific code might be causing that issue?

Copy link
Member

Choose a reason for hiding this comment

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

I think it's useSyncPathWithURL which is called inside the sidebar. I'm not entirely sure if we need it here though, this whole thing is a bit out of my league.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can't we move useSyncPathWithURL to the layout component instead?

Copy link
Member

Choose a reason for hiding this comment

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

IIRC, that hook relies on useNavigator which relies on the Navigator context, so we probably have to move the whole NavigatorProvider too. Last time I tried it failed on a weird error which I can't recall. To minimize the scope of the PR, fixing the CSS seems like an easier solution for now.

@github-actions
Copy link

github-actions bot commented Jun 27, 2023

Flaky tests detected in 828f2da.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5415454086
📝 Reported issues:

@talldan talldan requested a review from draganescu June 27, 2023 06:59
@jasmussen
Copy link
Contributor

GIFs don't do this justice, so here'a s video showing the smooth animation restored:

Screeny.Video.27.Jun.2023.at.11.58.07.mov

This is so important to have in place, so thanks for working on this!

@draganescu
Copy link
Contributor

Also resolves some issues with the editor header animation that seem to have been introduced by the addition of Distraction Free mode.

What did exactly distraction free break? @jeryj and I worked a lot on respecting the animation while also adding the hover ones for DFM. It's important to know what we broke in the process :)

@draganescu
Copy link
Contributor

I tested this and it does fix the animation for the frame and the editor header. However it introduces a weird entry animation when in Distraction Free Mode:

Trunk

dfm-entry-animation-trunk.mp4

This PR

dfm-entry-animation-51956.mp4

This PR makes the header in DFM do a weird fade out and the site hub looks out of place with nothing to support it behind. @jeryj you may have some ideas?

@talldan
Copy link
Contributor Author

talldan commented Jun 28, 2023

What did exactly distraction free break? @jeryj and I worked a lot on respecting the animation while also adding the hover ones for DFM. It's important to know what we broke in the process :)

@draganescu All I know is that when the regression that was accidentally introduced by the Library was reverted, there was still a remaining issue with the header animation that seemed to be last modified by the distraction free PR.

Worth noting that the library change was merged before distraction free, so it's possible that it masked the problems.

@talldan
Copy link
Contributor Author

talldan commented Jun 29, 2023

Status update - I believe this PR still has the bug being discussed here.

I'm not familiar with the routing code. I'll be going AFK for a while soon and won't have time to look into it, so any help appreciated on this. Please feel free to push to this PR or open up an alternative PR using any code from this PR.

It might be worth adding an end-to-end test case for the bug to demonstrate the issue (cc @kevin940726).

I think there are really two options for moving forwards:

  • Find a solution to the routing issue for mobile.
  • Implement the animation of the content element in a different way that leaves the sidebar mounted.

@jeryj
Copy link
Contributor

jeryj commented Jun 29, 2023

Implement the animation of the content element in a different way that leaves the sidebar mounted.

I can try working on this.

@jeryj
Copy link
Contributor

jeryj commented Jun 29, 2023

When the sidebar exits, should it:

  • only fade out
  • fade out and slide to the left

The current behavior on this branch is for it to also slide to the left, but I wasn't sure if that was intentional. This screen recording shows both animations. First two clicks are the slide out animation and the second two are only an opacity fadein/out.

Sidebar.animation.mov

@mtias
Copy link
Member

mtias commented Jun 29, 2023

Only fade, the slide out was a bug previously as well.

sidebar animation

The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown.
</NavigableRegion>
) }
</AnimatePresence>
</motion.div>

<div className="edit-site-layout__content">
<AnimatePresence initial={ false }>
Copy link
Contributor

Choose a reason for hiding this comment

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

<AnimatePresence /> is only needed when we need to animate removing an element. We're not removing it from the DOM, just hiding it from user interactions, so we don't need to use this anymore.

@jeryj
Copy link
Contributor

jeryj commented Jun 29, 2023

This is ready for review, if anyone wants to hop in :)

@kevin940726
Copy link
Member

This is what I'm getting on mobile viewport after clicking on a pattern category 😅

image

@jeryj
Copy link
Contributor

jeryj commented Jun 30, 2023

This is what I'm getting on mobile viewport after clicking on a pattern category 😅

That... could be better 😅 I'll take a look!

On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting.
@jeryj
Copy link
Contributor

jeryj commented Jun 30, 2023

@kevin940726 Fixed! Thanks for catching that.

@draganescu
Copy link
Contributor

@jeryj is this PR something that could also address this #51173 (comment) ? It seems the site hub is rendered as [Object object]?

@draganescu
Copy link
Contributor

I don't think this is blocking:

  • when distraction free mode is active, when entering edit mode the header does not slide in from the top, but instead it appears suddenly

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

I tested this and it works very well for what I tried. I'll leave the final call to @kevin940726 because I am not sure I am looking at all the things in the mobile case.

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

Tested it and it works! Thanks for picking this up, @jeryj !

@scruffian scruffian merged commit 98c9501 into trunk Jul 4, 2023
@scruffian scruffian deleted the try/restore-site-editor-animation branch July 4, 2023 09:49
@github-actions github-actions bot added this to the Gutenberg 16.2 milestone Jul 4, 2023
@tellthemachines
Copy link
Contributor

Should this be cherry-picked to 6.3? The issue it fixes is in the 6.3 board.

@tellthemachines tellthemachines 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 Jul 14, 2023
@tellthemachines
Copy link
Contributor

I just cherry-picked this PR to the update/second-round-RC1 branch to get it included in the next release: d733cc5

tellthemachines pushed a commit that referenced this pull request Jul 17, 2023
* Try restoring the site editor animation

* fix header animation

* Remove accidental addition of layout prop

* tidy up formatting

* fix animate presence issue

* Fix animation between sidebar view and distraction free edit view

* Leave sidebar present and maintain canvas to
sidebar animation

The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown.

* Fix mobile view for pattern library

On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting.

---------

Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Jerry Jones <[email protected]>
@tellthemachines tellthemachines 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 Jul 17, 2023
ramonjd added a commit that referenced this pull request Jul 18, 2023
* Try restoring the site editor animation (#51956)

* Try restoring the site editor animation

* fix header animation

* Remove accidental addition of layout prop

* tidy up formatting

* fix animate presence issue

* Fix animation between sidebar view and distraction free edit view

* Leave sidebar present and maintain canvas to
sidebar animation

The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown.

* Fix mobile view for pattern library

On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting.

---------

Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Jerry Jones <[email protected]>

* Change password input to type text so contents are visible. (#52622)

* Iframe: Silence style compat warnings when in a BlockPreview (#52627)

* Do not autofocus page title field in the Create new page modal dialog. (#52603)

* Use lowercase p in "Manage Patterns" (#52617)

* Remove theme patterns title (#52570)

* Block editor store: also attach private APIs to old store descriptor (#52088)

As a workaround, until #39632 is merged, make sure that private actions
and selectors can be unlocked from the original store descriptor (the
one created by `createReduxStore`) and not just the one registered in
the default registry (created by `registerStore`).

Without this workaround, specific setups will unexpectedly fail, such as
the action tests in the `reusable-blocks` package, due to the way that
those tests create their own registries in which they register stores
like `block-editor`.

Context: #51145 (comment)

Props jsnajdr

* Block removal prompt: let consumers pass their own rules (#51841)

* Block removal prompt: let consumers pass their own rules

Following up on #51145, this untangles `edit-site` from `block-editor`
by removing the hard-coded set of rules `blockTypePromptMessages` from
the generic `BlockRemovalWarningModal` component. Rules are now to be
passed to that component by whichever block editor is using it.

Names and comments have been updated accordingly and improved.

* Site editor: Add e2e test for block removal prompt

* Fix Shift+Tab to Block Toolbar (#52613)

* Fix Shift+Tab to Block Toolbar

* Add changelog entry

* Show warning on removal of Post Template block in the site editor. (#52666)

* Avoid copying global style presets via the styles compatibility hook (#52640)

* i18n: Make the tab labels of `ColorGradientSettingsDropdown` component translatable (#52669)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save (#52682)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save

* Address feedback

* Patterns: Remove `reusable` text from menu once rename hint has been dismissed (#52664)

* Show uncategorized patterns on the Editor > Patterns page (#52633)

* Patterns: fix bug with Create Patterns menu not showing in site editor page editing (#52671)

* Pass the root client id into the reusable blocks menu

* Check that clientIds array is defined

* Make check for array item more specific

* Search block: Enqueue view script through block.json (#52552)

* Search block: Enqueue view script through block.json

* Remove extra space

* Use `_get_block_template_file` function and set $area variable. (#52708)

* Use `_get_block_template_file` function and set $area variable.

* Update packages/block-library/src/template-part/index.php

Co-authored-by: Felix Arntz <[email protected]>

---------

Co-authored-by: Felix Arntz <[email protected]>

* Site Editor: Don't allow creating template part on the Patterns page for non-block themes (#52656)

* Don't allow template part to be created on the Patterns page for non-block themes

* Remove unnecessary theme directory name in E2E test

* Change Delete page menu item to Move to trash. (#52641)

* Use relative path internally to include packages in dependencies (#52712)

* Spacing Sizes: Fix zero size (#52711)

* DimensionsPanel: Fix unexpected value decoding/encoding (#52661)

---------

Co-authored-by: Daniel Richards <[email protected]>
Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Jerry Jones <[email protected]>
Co-authored-by: Robert Anderson <[email protected]>
Co-authored-by: Andrea Fercia <[email protected]>
Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: James Koster <[email protected]>
Co-authored-by: Miguel Fonseca <[email protected]>
Co-authored-by: Haz <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Ella <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Carolina Nymark <[email protected]>
Co-authored-by: Petter Walbø Johnsgård <[email protected]>
Co-authored-by: Jonny Harris <[email protected]>
Co-authored-by: Felix Arntz <[email protected]>
Co-authored-by: Ramon <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Regression Related to a regression in the latest release
Projects
Development

Successfully merging this pull request may close these issues.

Regression: Site Editor animation from edit to view
10 participants