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

Bootstrap the sections exploded view #40314

Closed
wants to merge 18 commits into from
Closed

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 13, 2022

Related #39281 #40319

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.

Notes and questions?

There are already some questions that we need to answer in this initial PR:

  • Do we want this view to be available as a reusable "view" for each block editor. Meaning should we implement it as part of the "block-editor" package? This would mean adding a new component to be exported from "block-editor" package. Alternatively we start with a specific component in edit-site leveraging existing components (BlockPreview...). I've started with the latter for now but I'd love to hear thoughts.
  • The proposed design leverages an animation between the two modes. At this point, I'm not really certain that this would ever be possible to be honest. The main reason is that each "box" is going to be a separate iframe because it needs the editor styles to apply inside the box but not bleed outside, while in the default view, the whole canvas is a single iframe. Meaning if we were to implement an animation we need to animate between two completely different DOM elements rendered in different iframes. Right now layoutId based animation from framer-motion (which are our most promising solution) don't seem to work inside a single iframe, so cross-iframe is even less likely to be possible.
  • The exploded view means all blocks render sequentially, meaning if we have “aligned” components at the top level, they’ll probably lose their alignment styles.
  • I wonder if we can use the same design (exploded view) for the current “select mode” to avoid a proliferation of modes. It seems their goals are quiet similar. (manipulate blocks as units). I'm starting separate but there's an opportunity to unify later.
  • Editing of blocks is disabled in exploded view (they are previews).
  • Sometimes when switching back and forth between exploded and regular views, the iframe height kind of resets to 0 for some of the root blocks. I think that's mostly like a bug in BlockPreview component that we need to find and fix.
  • One important caviat for this view as well as that it's kind of only suited for themes with a certain design: Themes with a vertical list of blocks at the root level. For instance, if you try it in a theme like "Kubrick 2", it doesn't work, the whole site is inside "one root" block. I don't know how concerning is that.

Testing Instructions

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

@youknowriad youknowriad added [Type] Experimental Experimental feature or API. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Apr 13, 2022
@youknowriad youknowriad self-assigned this Apr 13, 2022
@github-actions
Copy link

github-actions bot commented Apr 13, 2022

Size Change: +1.57 kB (0%)

Total Size: 1.23 MB

Filename Size Change
build/block-directory/index.min.js 6.51 kB +19 B (0%)
build/block-editor/index.min.js 150 kB +441 B (0%)
build/block-editor/style-rtl.css 15.7 kB +183 B (+1%)
build/block-editor/style.css 15.7 kB +177 B (+1%)
build/block-library/blocks/navigation/view.min.js 395 B -2.45 kB (-86%) 🏆
build/block-library/blocks/table/editor-rtl.css 504 B +33 B (+7%) 🔍
build/block-library/blocks/table/editor.css 504 B +32 B (+7%) 🔍
build/block-library/blocks/table/style-rtl.css 625 B +144 B (+30%) 🚨
build/block-library/blocks/table/style.css 625 B +144 B (+30%) 🚨
build/block-library/common-rtl.css 993 B +59 B (+6%) 🔍
build/block-library/common.css 990 B +58 B (+6%) 🔍
build/block-library/editor-rtl.css 10.2 kB +33 B (0%)
build/block-library/editor.css 10.2 kB +33 B (0%)
build/block-library/index.min.js 175 kB +177 B (0%)
build/block-library/style-rtl.css 11.5 kB +197 B (+2%)
build/block-library/style.css 11.5 kB +194 B (+2%)
build/blocks/index.min.js 47 kB +133 B (0%)
build/components/index.min.js 223 kB +20 B (0%)
build/data/index.min.js 8.66 kB +19 B (0%)
build/edit-post/index.min.js 30.1 kB +85 B (0%)
build/edit-site/index.min.js 47.8 kB +839 B (+2%)
build/edit-site/style-rtl.css 8.25 kB +467 B (+6%) 🔍
build/edit-site/style.css 8.23 kB +469 B (+6%) 🔍
build/editor/index.min.js 38.5 kB +60 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
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/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-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-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/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.56 kB
build/block-library/blocks/cover/style.css 1.56 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 731 B
build/block-library/blocks/image/editor.css 730 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 447 B
build/block-library/blocks/latest-posts/style.css 446 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.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view-modal.min.js 2.65 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 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 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 140 B
build/block-library/blocks/separator/editor.css 140 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/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 571 B
build/block-library/blocks/video/editor.css 572 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/reset-rtl.css 478 B
build/block-library/reset.css 478 B
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/components/style-rtl.css 14.9 kB
build/components/style.css 14.9 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 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/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.04 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/style-rtl.css 7.18 kB
build/edit-post/style.css 7.18 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 4.29 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 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 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.21 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

jasmussen commented Apr 13, 2022

Even in this early state, the exploded view already offers a clear delineation between top level sections, big and convenient points for inserting sections, a distinct context for suggesting particular patterns (headers, sections, footers), a better overview of large page-sized patterns, and a mode that intrinsically could offer intuitive drag and drop. I think there's something to this.

Do we want this view to be available as a reusable "view" for each block editor.

Depends! I imagine it would be useful at the very least for page editing, especially in helping choose page templates, or page-size patterns. It seems prudent to start in the site editor.

The proposed design leverages an animation between the two modes. At this point, I'm not really certain that this would ever be possible to be honest.

I'm curious what others feel, but I'd think the animation to a crucial part of this. Are there any creative solutions we can think of? Instead of animating the iframe itself, could we animate just the contents? I understand there would likely be some challenges with background colors, collapsing margins and such, but those seem worth delving into on their own.

The exploded view means all blocks render sequentially, meaning if we have “aligned” components at the top level, they’ll probably lose their alignment styles.

You mean floats here? I'd think that acceptable.

I wonder if we can use the same design (exploded view) for the current “select mode”

Agreed, there's enough overlap that it could potentially be the same, though I'd push any experiments to merge the two a bit in front of us still.

Editing of blocks is disabled in exploded view (they are previews).

👌 — this would allow us to make the entire thing into a drag/drop'able unit, right?

One important caviat for this view as well as that it's kind of only suited for themes with a certain design: Themes with a vertical list of blocks at the root level. For instance, if you try it in a theme like "Kubrick 2", it doesn't work, the whole site is inside "one root" block. I don't know how concerning is that.

At the moment there is a "focus" feature that lets you edit a template part in isolation. You click the template part, click "Edit" from the ellipsis menu, and you're editing that part in isolation, with dark clearance around it.

To an extent, I'm thinking of this interface as the same as that — a "focused" view. Technical challenges aside (I'm sure they are legion), we could make this view contextual; select a group block and click the button, and it explodes just the blocks inside in an isolated view, just like isolated template part editing. These are vague ideas, to be clear, but it's all to say that if we can get this to a place that makes us happy for vertical themes, there are options we can explore other layouts as well.

@jasmussen
Copy link
Contributor

Exploring some icon options as an alternative to using the Stack icon, I don't really love any of these yet:

a couple of doodles

@jameskoster
Copy link
Contributor

One important caviat for this view as well as that it's kind of only suited for themes with a certain design: Themes with a vertical list of blocks at the root level. For instance, if you try it in a theme like "Kubrick 2", it doesn't work, the whole site is inside "one root" block. I don't know how concerning is that.

Perhaps there are some rules we can apply that determine whether or not this mode is enabled? One could be;

If there are ≤1 root blocks in the current view, disable exploded view.

That way – as Joen says – if you entered focus mode for the single root block, exploded view would become enabled.

The challenge then is how to handle horizontal layouts, I think you mentioned to this in the OP. For example consider this structure:

Screenshot 2022-04-13 at 17 35 58

If I enter focus mode for the root Row, then entered exploded view, it wouldn't work. So we'd probably also need a rule that says;

If the container orientation is horizontal, then disable exploded view.

@youknowriad
Copy link
Contributor Author

I've been thinking about this PR, it's clear that we won't be able to implement the mode entirely in a single PR and since it's a new button and don't have any backward compatibility impact or whatsoever, I was thinking what would be the minimal accepted version for this to land to allow us to iterate on it quickly.

I know the mode needs:

  • Click to select a block
  • A dedicate toolbar with just the movers and the name of the block
  • Pattern switchers for "semantic sections" on the side
  • Animation between the modes
  • Drag and drop to move top level blocks
  • Double click to go back to "normal" mode?
  • Find the right icon in the toolbar
  • A different design for the list view (focused on sections/ root level blocks)
  • A different design for the inserter (focused on patterns)
  • Remove button on the side

Am I missing anything here?

Now, from that list I think the MVP could include the following and leave the rest for dedicated PRs.

  • Click to select a block
  • A dedicate toolbar with just the movers and the name of the block
  • Double click to go back to "normal" mode?
  • Find the right icon in the toolbar

What do you think?

@jameskoster
Copy link
Contributor

Would it be possible to also include some basic logic around when the mode is enabled or not?

We should think about how to handle panels like Inserter / List view / Inspector in the mean time as well, the current disabled state feels a bit strange to me. It might be simpler to just force-close those panels when you enter exploded mode. Then if you click one in exploded mode, you just return to "normal" and the panel opens.

Click to select a block
Double click to go back to "normal" mode?

It would be neat to try this as well, but the original idea was that the toolbar(s) would appear on hover, and a single click on any section would return to "normal" mode. This is likely one of those things we'll need to "feel" to make a decision on.

@youknowriad
Copy link
Contributor Author

Would it be possible to also include some basic logic around when the mode is enabled or not?

Yes, I mean to include that. I think for now since it's only enabled in site editor root which doesn't have any "layout", we can just check the number of blocks.

We should think about how to handle panels like Inserter / List view / Inspector in the mean time as well, the current disabled state feels a bit strange to me. It might be simpler to just force-close those panels when you enter exploded mode. Then if you click one in exploded mode, you just return to "normal" and the panel opens.

We can try things and see how it feels.

It would be neat to try this as well, but the original idea was that the toolbar(s) would appear on hover, and a single click on any section would return to "normal" mode. This is likely one of those things we'll need to "feel" to make a decision on.

Ok, I think I'll always prefer "click" over "hover" though :P

@youknowriad youknowriad marked this pull request as ready for review April 14, 2022 10:35
@youknowriad
Copy link
Contributor Author

Made a lot of updates here, let me know what you think.

@jameskoster
Copy link
Contributor

jameskoster commented Apr 14, 2022

Here's what I'm seeing:

exploded.mp4
  • It's strange that list view stays open because you cannot select child blocks.
  • If we're only going to reveal toolbars on click then we still need a hover effect to make it obvious the sections are interactive.
  • Noticing an occasional on-canvas flicker moving between selections.
  • Header toolbar is missing movers for some reason 🤔
  • I really miss the animation on block re-ordering (I know we won't get to that here, just a note).

Edit: The video above didn't demonstrate the flicker, see below (around 5s):

flicker.mp4

It's tricky to replicate, I'm not sure what is the trigger.

@youknowriad
Copy link
Contributor Author

Header toolbar is missing movers for some reason

Is this because it's locked?

I really miss the animation on block re-ordering (I know we won't get to that here, just a note).

Felt the same, that will be my first follow-up. It's not complex, I just want to make it right (move stuff around) without making this PR huge.

It's strange that list view stays open because you cannot select child blocks.

I guess, I can just close it for now. We can also decide to leave it functional later. (You select a child, its root parent gets highlighted)

If we're only going to reveal toolbars on click then we still need a hover effect to make it obvious the sections are interactive.

Makes sense.

Noticing an occasional on-canvas flicker moving between selections.

The flickering is actually a nightmare in Safari. But these bugs are the hardest to track and fix 😬

@jameskoster
Copy link
Contributor

jameskoster commented Apr 14, 2022

Is this because it's locked?

Derp, yes. Will just need to style the toolbar so that it doesn't look strange. Or perhaps include the lock icon?

Edit: On second thoughts, definitely include the lock icon. It would be frustrating to have to exit this mode in order to unlock a block you want to change.

I guess, I can just close it for now.

I think that would be best. There may be a more unique visual treatment we can apply in this mode.

@youknowriad
Copy link
Contributor Author

Should we disable the Inspector as we've disabled List View? I don't think it serves much purpose in this mode.

This is a bit tricky. I'm not sure I'll be able to do that simply. I can close the sidebar easily on open but disabling entirely is not easy (cc @jorgefilipecosta as it's a complementary area)

@jorgefilipecosta
Copy link
Member

Should we disable the Inspector as we've disabled List View? I don't think it serves much purpose in this mode.

This is a bit tricky. I'm not sure I'll be able to do that simply. I can close the sidebar easily on open but disabling entirely is not easy (cc @jorgefilipecosta as it's a complementary area)

I guess we can not include the slot on the exploded mode?

@youknowriad
Copy link
Contributor Author

I guess we can not include the slot on the exploded mode?

I wanted to disable the button, not remove it entirely (like the other header buttons)

@jorgefilipecosta
Copy link
Member

I guess we can not include the slot on the exploded mode?

I wanted to disable the button, not remove it entirely (like the other header buttons)

This is a more challenging issue. One solution would be to add an optional prop to ComplementaryArea called pinnedUI and when passed that property would be the toggle button of the sidebar, allowing one to have full control and custom logic for when that button on the sidebar is enable or disabled or not rendered or rendered in a different way. We can also go for a simple property if we don't want to allow that level of control like isTooglingDisabled and when true the button would be disabled.

@youknowriad
Copy link
Contributor Author

@jameskoster maybe it's fine for now to just leave it there, or alternatively remove the button entirely?

@jameskoster
Copy link
Contributor

Yeah probably fine to leave it for now. At least most of the block settings are hidden.

@jameskoster
Copy link
Contributor

Some of our inserters are blue others are black. I never know :)

I think these ones should be blue :D

@jasmussen
Copy link
Contributor

This is cool! And it sounds like we can add animation in the future, that's great!

I think these ones should be blue :D

I'd echo that. But — hear me out — what if they were all blue? (⊃。•́‿•̀。)⊃━☆゚.*・。゚

Can we have an inserter after the last block as well?

Screenshot 2022-04-15 at 08 14 23

@youknowriad
Copy link
Contributor Author

This is cool! And it sounds like we can add animation in the future, that's great!

We can add an animation when moving blocks in the view but between the "exploded" and "normal" view, I'm doubtful (or if you're optimistic, I'm unsure at the moment)

@youknowriad
Copy link
Contributor Author

I added an inserter at the end and made all inserters show patterns by default.


/**
* Internal dependencies
*/
import BlockListExplodedItem from './item';

const InserterBeforeBlock = pure( ( { clientId } ) => (
Copy link
Member

Choose a reason for hiding this comment

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

I didn't know we had this HoC. Should I prefer using this over React.memo?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be honest at this point, I don't know. What's certain is that we need to make a decision :P. This HoC was here before React introduced React.memo and if I'm not wrong also works for Class component contrary to React.memo which I think is only suited for function components.

Copy link
Member

Choose a reason for hiding this comment

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

Right, React.memo works only with functional components.

What's certain is that we need to make a decision

Got it. Use React.memo with function components use pure with Class components 😄

@jasmussen
Copy link
Contributor

I know this sounds like a small thing just focusing on the animation, but I want to poke at it a little more to make sure we're on the right path.

Conceptually I don't think of this view as still being the editor view, but in a different mode. Just like Browse Mode where blocks become inert and navigable, these are still the same blocks, just inert and draggable. In that light, I don't know if replacing all the blocks with previews is the right approach. I know the following inspector hack is not representative of the impressive technical challenge, but here the transform is applied to the styles wrapper, and a few background colors are shuffled around:
Screenshot 2022-04-15 at 09 51 00

This is the "before" state, for comparison:

before

That is to say, I think the animation is important, but more important than that, is the flowing in and out of this state. It isn't conceptualized as being a shift — it's meant to be much more similar to select mode. Smooth flowing in and out.

@Mamaduka
Copy link
Member

Sometimes when I toggle "Explode" mode, not all sections are rendered. It usually happens after the third or fourth toggle without page refresh.

I also noticed that the editor remembers that it's in "Explode" mode. Is this intentional?

CleanShot 2022-04-15 at 11 43 52

@youknowriad
Copy link
Contributor Author

Conceptually I don't think of this view as still being the editor view, but in a different mode. Just like Browse Mode where blocks become inert and navigable, these are still the same blocks, just inert and draggable. In that light, I don't know if replacing all the blocks with previews is the right approach. I know the following inspector hack is not representative of the impressive technical challenge, but here the transform is applied to the styles wrapper, and a few background colors are shuffled around:

I'm curious to know what changes you did to the inspector. I agree with you that there were two paths:

  • One is using the initial block list and "style it" to look different.
  • Two is to use a separate view and animate between both.

It's also true that for the first one it's easier to animate things but I don't think it's the right approach for the two things highlighted in the descriptions and the main one for me is this one:

Here we want to apply the editor styles (iframe) to each block separately but we don't want the editor styles to bleed out of the block. And our goal with iframing everything is just to use the "styles" from the theme as is. Meaning if the block itself is not an iframe, we can't apply these styles.

I think trying to use the existing BlockList to show this mode is going to be a hack that will always be very fragile.

@youknowriad
Copy link
Contributor Author

There's also one question here: Do we want to "scale down" the size of the preview according to a given viewportWidth (current state of the PR) or do we want to always render it as is (no scaling down). I tried both, I preferred the scaled version but I can also do "unscaled".

@youknowriad
Copy link
Contributor Author

Sometimes when I toggle "Explode" mode, not all sections are rendered. It usually happens after the third or fourth toggle without page refresh.

I've seen this happen. I think it's a bug in the BlockPreview component, we also see it sometimes in the patterns inserter (height: 0) but it's very hard to reproduce and debug. Could use help there if you manage to do it.

I also noticed that the editor remembers that it's in "Explode" mode. Is this intentional?

Initially unintended but I thought I might just well keep it (like the code editor switch)

@youknowriad
Copy link
Contributor Author

@jasmussen I'm exploring the alternative approach here #40376 I'm not sure yet how I feel about it. I don't have the animation there yet but it's easier to implement for sure.

@youknowriad
Copy link
Contributor Author

closing in favor of #41156

@youknowriad youknowriad deleted the add/exploded-view branch May 23, 2022 10:14
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] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants