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

Add a built-in exploded mode instead of a separate view #40376

Closed
wants to merge 21 commits into from

Conversation

youknowriad
Copy link
Contributor

Related #39281 #40319

Alternative to #40314

What?

We want to explore an "exploded block view" where the blocks (and sections) of the top level are separated and the actions for each block/sections are separate from the regular toolbar.

See #39281 (comment)

This PR just bootstraps that mode to allow us to iterate on it.

Why?

I think the reasoning is to make it easy to build templates from scratch by leveraging ready to use patterns.

How?

This PR thought differs from the original one in the sense that instead of building this mode into a separate tree view. This PR "just" tries to style the BlockList view. The advantage of this solution is that it's easier to implement the "animation" when entering/existing the mode. The con is that this is basically hacky. We have code to copy the background from the parent (body) to inner blocks dynamically. The other challenge is that it's going to be hard to inject UI: in-between inserter, the proposed right sidebar. As opposed to the other PR I didn't add the "inserter" yet for this reason.

Notes and questions?

I'm surprised that I managed to get this far with this approach. I'm still not sure if it's better though. In terms of code quality, I also don't like how this is very intrusive in the existing UI code... Some bugs/regressions are not to be excluded every time we add exceptions/cases to existing stuff.

Testing Instructions

1- Open the site editor
2- Click the "exploded view" button on the header.

@github-actions
Copy link

github-actions bot commented Apr 15, 2022

Size Change: +1.3 kB (0%)

Total Size: 1.24 MB

Filename Size Change
build/block-editor/index.min.js 151 kB +803 B (+1%)
build/block-editor/style-rtl.css 14.6 kB +129 B (+1%)
build/block-editor/style.css 14.6 kB +133 B (+1%)
build/components/index.min.js 227 kB +18 B (0%)
build/dom/index.min.js 4.69 kB +6 B (0%)
build/edit-site/index.min.js 48.1 kB +207 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.51 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 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 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 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 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 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 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/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 127 B
build/block-library/blocks/comment-template/style.css 127 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 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.53 kB
build/block-library/blocks/cover/style.css 1.53 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 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 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 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 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 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 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 738 B
build/block-library/blocks/image/editor.css 737 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 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 199 B
build/block-library/blocks/latest-posts/editor.css 198 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 493 B
build/block-library/blocks/media-text/style.css 490 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 708 B
build/block-library/blocks/navigation-link/editor.css 706 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.95 kB
build/block-library/blocks/navigation/style.css 1.94 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 395 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 157 B
build/block-library/blocks/paragraph/editor.css 157 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 69 B
build/block-library/blocks/post-comments-form/editor.css 69 B
build/block-library/blocks/post-comments-form/style-rtl.css 495 B
build/block-library/blocks/post-comments-form/style.css 495 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 628 B
build/block-library/blocks/post-comments/style.css 628 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 323 B
build/block-library/blocks/post-template/style.css 323 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 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 369 B
build/block-library/blocks/query/editor.css 369 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 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 177 B
build/block-library/blocks/social-link/editor.css 177 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.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 504 B
build/block-library/blocks/table/editor.css 504 B
build/block-library/blocks/table/style-rtl.css 625 B
build/block-library/blocks/table/style.css 625 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 993 B
build/block-library/common.css 990 B
build/block-library/editor-rtl.css 10.2 kB
build/block-library/editor.css 10.3 kB
build/block-library/index.min.js 181 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.5 kB
build/block-library/style.css 11.6 kB
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 47.1 kB
build/components/style-rtl.css 14.5 kB
build/components/style.css 14.5 kB
build/compose/index.min.js 11.7 kB
build/core-data/index.min.js 14.6 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.98 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 4.05 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.4 kB
build/edit-post/style-rtl.css 7.08 kB
build/edit-post/style.css 7.08 kB
build/edit-site/style-rtl.css 7.73 kB
build/edit-site/style.css 7.71 kB
build/edit-widgets/index.min.js 16.4 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.4 kB
build/editor/index.min.js 38.5 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.7 kB
build/element/index.min.js 4.3 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 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.9 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.1 kB
build/nux/style-rtl.css 744 B
build/nux/style.css 741 B
build/plugins/index.min.js 1.98 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.32 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 628 B
build/react-i18n/index.min.js 704 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.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 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 280 B
build/widgets/index.min.js 7.2 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Something is off with my local environment and I can't test the site editor 😩 I'm trying to figure out what's up. But from what I can tell by the CSS, this should definitely make animation easier. Thank you for looking into it — if we do go this route it would be good to think long about how we can best manage the hacky pieces, see whether the tradeoffs are manageable or worth it.

@youknowriad
Copy link
Contributor Author

@jasmussen Try cleaning local storage, maybe the leftovers from the other PR are breaking the site editor in this one.

@jasmussen
Copy link
Contributor

That did the trick, many thanks!

Testing this branch I can only validate that this feels massively snappier, and I can easily see how animation can play a part here. All the more validation of my thought before: whatever we can do to identify the pieces about this approach that make us uncomfortable and seeing how/if we can address them would be great.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

I'm surprised that this simple approach is working so well. It also has the advantage of being in the block editor so we can easily include in edit posts for template editing.
I guess it would be good to include in this PR the mechanism for when a click happens on an exploded mode to go back to normal edit mode with the block that was clicked on selected.
And it would also be good to fix the in between inserter
image

But other than that I think it is an approach we can try 👍

@@ -160,10 +162,70 @@ async function loadScript( head, { id, src } ) {
} );
}

function useExplodedModeBackgroundStyles( isExplodedMode, deps = [] ) {
Copy link
Member

Choose a reason for hiding this comment

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

This hook seems to be the most hacky part but it is working 👍

@youknowriad
Copy link
Contributor Author

youknowriad commented Apr 18, 2022

Made some progress here. Would love some 👀 on this.

My feeling right now is that we have a lot of "modes" and a lot of code that does similar things but differently (outline mode, exploded mode, navigation mode, active entities (something for template parts), block overlay (something used in template parts and reusable blocks)). We keep adding modes and experiments without cleaning what we already have which is basically the perfect recipe for bugs.

So while I think the approach in this PR could work, it does add more complexity and have a way higher potential for bugs and performance impact.

@jasmussen
Copy link
Contributor

jasmussen commented Apr 18, 2022

This is looking better and better, the animation is a great touch. I'd love for the spacing to also animate — right now it's a fast shift from normal to exploded view. Not necessarily something that has to happen in this same PR if you're seeking out a small first version, but something to look at. We should also use the same dark background as shown in @jameskoster's prototype in #40319.

Speaking of "modes", yes I agree, there's a great deal of cleanup work to be done here.

@youknowriad
Copy link
Contributor Author

youknowriad commented Apr 19, 2022

In the three last commits I had to do some bigger refactoring to the BlockPopover components, in order to be able to render the "in between" inserters at the right position. You'll notice that when scrolling, the position of the inserter might take a few milliseconds to adjust itself. This is basically one of the downsides of the approach in this PR. Any UI we render that is contextual to blocks has to be rendered outside of the canvas (iframe), meaning positioning it properly is challenging (has to use popover).

Potentially we could do some small tweaks, like hiding the inserters when we're scrolling or things like that.

Let me know what you think

Comment on lines +37 to +42
// This is a temporary hack to get the inbetween inserter to recompute properly.
const [ positionRecompute, forceRecompute ] = useState( {} );
useEffect( () => {
const intervalHandle = setInterval( forceRecompute, 500 );
return () => clearInterval( intervalHandle );
}, [] );
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 is a hack to be able to adjust the popover position while the animation is on going. Basically the popover position is dependent on the "block position" and every time the block position changes, we need to recompute the popover position and unfortunately we don't have APIs to "subscribe" to position and size of a given DOM element. (without inserting anything inside that element like we do with the resize handler).

Please let me know if there's anything better that we can use here.

@jasmussen
Copy link
Contributor

Potentially we could do some small tweaks, like hiding the inserters when we're scrolling or things like that.

Yes, that does feel a bit gnarly, and if we can't make these feel more resilient in this approach we might want to do something like that.

That said, the animation and instantaneous behavior of clicking the button does feel very strong in this one.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

I'm seeing a big space between sections:
image
The background is also appearing on the header when it should not (2022 theme).

@jorgefilipecosta
Copy link
Member

I'm not able to use the section movers with success. Sometimes I click and the section disappears other times checking does nothing like if the click did not happen.

@jorgefilipecosta
Copy link
Member

If I was with an innerblock selected when I got to the exploded view that block keeps being selected:
image

Should we update the selection to the parent?

@jorgefilipecosta
Copy link
Member

If I select the footer, sometimes clicking on the header does not select the header.

@youknowriad
Copy link
Contributor Author

The background is also appearing on the header when it should not (2022 theme).

If you select the header even in normal view, you'll see that you're selecting more than the "black" background. There's a spacer at the end of the header template part, So I think that's something in the theme and not a bug.

@youknowriad
Copy link
Contributor Author

Should we update the selection to the parent?

This makes sense yes.

@youknowriad
Copy link
Contributor Author

Solved some of the issues above, notably: clicking the movers, selection the parent block when entering exploded mode. It still not perfect, I believe there's still an issue that sometimes the "in-between inserters" hide the block (so it appears like a big blank)

@jameskoster
Copy link
Contributor

This feels very laggy to me 🤔 Even hover effects have a big delay:

laggy.mp4

I'm seeing this in and out of Exploded view, but only in the Site Editor.

Sometimes child blocks are randomly selected:

selection.mp4

Some other observations:

  • The gaps between blocks/inserters seem to be much larger than the last PR?
  • Animation feels really good.
  • Agree that the jumpy inserters are awkward, hiding them on scroll could work.
  • Double-click to exit exploded view is missing.
  • Sibling inserters (the black ones in the bottom right corner) are visible in exploded view.

@youknowriad
Copy link
Contributor Author

Yeah, most of the issues/fragility here at the moment is coming from the inserters, how to position them... It's the downside of this approach, I can take more time to polish things more but conceptually, this is the downside of the approach and will be hard to have the same feeling here to the other branch.

On the other side, the other branch can't (or let's say 95% certain it can't) have the same animation we have here.

--

I'll continue to polish this branch bit by bit during the next days and we'll see how far we can get.

@youknowriad youknowriad force-pushed the try/built-in-exploded-mode branch 2 times, most recently from 7af4204 to 8c88927 Compare April 28, 2022 09:54
@youknowriad
Copy link
Contributor Author

Sibling inserters (the black ones in the bottom right corner) are visible in exploded view.

This is fixed

Agree that the jumpy inserters are awkward, hiding them on scroll could work.

I hid the inserters on scroll, it's a bit better but it's not perfect

@jameskoster
Copy link
Contributor

This is starting to feel really good! Consequently it's time for a design nitpick – apologies in advance 🙏

Appreciate I may be asking for the moon on a stick, but is there any way to hide the inserters when they are due to be re-positioned? Then we can avoid this jumpiness:

jump.mp4

Can opening panels trigger the re-position of inserters? At the moment it can lead to mis-alignment:

list.mp4

I assume the answer to this question will be "no" since we're using scale, but is there any way to set the spacing between sections / inserters more precisely? In the mockups we had a 32px gap, it would be good to aim for something closer to that.

On a similar note, the mockups scaled sections down to 70%, lets try that rather than 80%.

Is there a way to increase the spacing at the top / bottom of the exploded view?

Separate to this issue, but a small visual detail we'll need to address:

Screenshot 2022-05-17 at 09 32 13

@youknowriad
Copy link
Contributor Author

Appreciate I may be asking for the moon on a stick, but is there any way to hide the inserters when they are due to be re-positioned?
Can opening panels trigger the re-position of inserters? At the moment it can lead to mis-alignment:

The answer is "I don't know" for both :P. Ideally I'd like to land #40740 before this one and see what impact it will have here and if we can find better ways to handle these cases.

@youknowriad
Copy link
Contributor Author

This was a nice exploration but I'm going to close this PR for now in favor of #41156

There are still too many technical challenges and fragility in trying to "explode" blocks properly.

@youknowriad youknowriad deleted the try/built-in-exploded-mode branch May 23, 2022 10:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants