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

Query Loop: Add useBlockPreview, fix Query Loop wide alignment in the editor #36431

Merged
merged 12 commits into from
Dec 15, 2021

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Nov 12, 2021

Description

This is an alternative to #35932 and is intended to resolve #33248.

It pulls in the useBlockPreview and useDisabled hooks from #35863 and uses them to render a block preview for the Post Template block, for those instances within the query loop that are not currently selected (and are therefore not interactive). By using these hooks, we can avoid adding the DOM nesting involved in using the BlockPreview component directly.

The useDisabled hook is mostly comprised of logic borrowed from the Disabled component. The context behaviour has not been included in the hook version, because we don't (yet) have a need for it. In a future follow-up, we could refactor the Disabled component to use the useDisabled hook introduced here, internally.

How has this been tested?

In a page, insert a Query Loop block and set the alignment to Wide and make sure that the number of items within the loop is at least 2-3. Within the query loop block, select between the instances within the loop. Unlike in the reported issue (#33248), selecting between blocks should preserve the Wide layout.

Note: this is specifically about dealing with adding a Query Loop block to a page — behaviour in the site editor should be unaffected

Screenshots

Before After
Kapture 2021-11-12 at 16 38 49 Kapture 2021-11-12 at 16 34 40

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Block] Query Loop Affects the Query Loop Block labels Nov 12, 2021
@andrewserong andrewserong self-assigned this Nov 12, 2021
@andrewserong andrewserong added the [Package] Block editor /packages/block-editor label Nov 12, 2021
@github-actions
Copy link

github-actions bot commented Nov 12, 2021

Size Change: +2.86 kB (0%)

Total Size: 1.11 MB

Filename Size Change
build/block-editor/index.min.js 140 kB +376 B (0%)
build/block-editor/style-rtl.css 14.5 kB +41 B (0%)
build/block-editor/style.css 14.4 kB +38 B (0%)
build/block-library/blocks/image/editor-rtl.css 810 B +79 B (+11%) ⚠️
build/block-library/blocks/image/editor.css 809 B +79 B (+11%) ⚠️
build/block-library/blocks/navigation/style-rtl.css 1.71 kB +34 B (+2%)
build/block-library/blocks/navigation/style.css 1.7 kB +31 B (+2%)
build/block-library/blocks/post-comments-form/style-rtl.css 446 B +2 B (0%)
build/block-library/blocks/post-comments-form/style.css 446 B +2 B (0%)
build/block-library/blocks/post-comments/style-rtl.css 507 B +15 B (+3%)
build/block-library/blocks/post-comments/style.css 507 B +14 B (+3%)
build/block-library/blocks/pullquote/style-rtl.css 389 B +11 B (+3%)
build/block-library/blocks/pullquote/style.css 388 B +10 B (+3%)
build/block-library/editor-rtl.css 10 kB +75 B (+1%)
build/block-library/editor.css 10 kB +75 B (+1%)
build/block-library/index.min.js 163 kB +504 B (0%)
build/block-library/style-rtl.css 10.8 kB +34 B (0%)
build/block-library/style.css 10.8 kB +29 B (0%)
build/components/index.min.js 215 kB +202 B (0%)
build/components/style-rtl.css 15.5 kB +14 B (0%)
build/components/style.css 15.5 kB +14 B (0%)
build/compose/index.min.js 11.2 kB +248 B (+2%)
build/edit-post/index.min.js 29.3 kB -255 B (-1%)
build/edit-site/index.min.js 35.5 kB +1.19 kB (+3%)
build/edit-site/style-rtl.css 6.57 kB -6 B (0%)
build/edit-site/style.css 6.57 kB -7 B (0%)
build/editor/index.min.js 37.8 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 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 58 B
build/block-library/blocks/audio/editor.css 58 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/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 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 291 B
build/block-library/blocks/buttons/editor.css 291 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 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 210 B
build/block-library/blocks/columns/editor.css 208 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 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/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 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 322 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 966 B
build/block-library/blocks/gallery/editor.css 970 B
build/block-library/blocks/gallery/style-rtl.css 1.63 kB
build/block-library/blocks/gallery/style.css 1.62 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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 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/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 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 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 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 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.91 kB
build/block-library/blocks/navigation/editor.css 1.91 kB
build/block-library/blocks/navigation/view.min.js 2.79 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 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 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 273 B
build/block-library/blocks/paragraph/style.css 273 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-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 391 B
build/block-library/blocks/post-template/style.css 392 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/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 273 B
build/block-library/blocks/query-pagination/style.css 269 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 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 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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 772 B
build/block-library/blocks/site-logo/editor.css 772 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 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 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 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 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 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 569 B
build/block-library/blocks/video/editor.css 570 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 857 B
build/block-library/common.css 856 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/core-data/index.min.js 13.2 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.49 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.58 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.72 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.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@andrewserong andrewserong force-pushed the fix/query-loop-wide-alignment-in-the-editor branch 2 times, most recently from 7dcfacf to 53fb162 Compare November 16, 2021 03:33
@andrewserong andrewserong marked this pull request as ready for review November 16, 2021 05:34
@andrewserong
Copy link
Contributor Author

I think this is ready for review now, so I've switched it out of draft.

@andrewserong andrewserong force-pushed the fix/query-loop-wide-alignment-in-the-editor branch from 7c8af49 to ef7be06 Compare November 24, 2021 06:09
@andrewserong
Copy link
Contributor Author

I've just given this a rebase to fix conflicts.

@getsource
Copy link
Member

Hi! Thanks so much for putting this together.

I did a bit of testing, and it does look to solve the issue!

I noticed a bit of changed behavior, though. Whether this is better or worse than the existing align jumping, I don't know -- but I figured it was worth documenting.

It's hard to describe, but there are a two things I noticed when selecting / unselecting different posts. I wasn't able to pinpoint the exact situations that cause it, but if I clicked in and out from them couple times, I could usually cause it to happen:

  • There's bit of visual flicking / refreshing sometimes, where you can see the other items flash by (or load perhaps?). This comes with it feeling a little slower to respond
  • Sometimes the view scrolls up to the top of the page or down, in situations where it would stay in the same place without the PR.

Before:

Screen.Recording.2021-11-25.at.18.18.33.mov

After:

Screen.Recording.2021-11-25.at.18.15.43.mov

Tested with Firefox 94.0.1 on OSX and Twenty-Twenty Two.

@andrewserong
Copy link
Contributor Author

Thanks so much for giving this a test @getsource and including the demo videos, that's super helpful! I don't think I tested this while using a background colour, so didn't notice the flickering issue (nor the scroll issue either 🤔). I'll investigate further (if I don't get time today, I'll follow up next week). Cheers!

@andrewserong andrewserong force-pushed the fix/query-loop-wide-alignment-in-the-editor branch from ef7be06 to 8a34723 Compare December 3, 2021 06:19
@andrewserong
Copy link
Contributor Author

It took me a little longer than expected to fix up the flickering issue. In 8a34723 I've optimised the PostTemplateBlockPreview component's rendering by doing the following:

  • Memoize the component
  • Pass consistent values and references to the component (e.g. no anonymous function for onClick) to ensure the component doesn't re-render too frequently
  • Always render a block preview for each block context in the list — but use display: none to hide the active preview. This ensures that when switching between block contexts, we switch visibility via CSS rather than requiring the preview itself to be re-rendered from scratch, which appears to have been the main culprit in the flickering issue that was most visible in Firefox (I had a harder time reproducing it in Chrome).

I believe this is now working pretty well, but could do with some more testing, as I just got this finished before wrapping up my week. CC: @getsource.

Before After
Kapture 2021-12-03 at 17 26 11 Kapture 2021-12-03 at 17 24 39

@ramonjd
Copy link
Member

ramonjd commented Dec 7, 2021

This is working as described for me I cannot detect any layout change with selecting inner blocks within the Query Loop block in the post editor.

Kapture 2021-12-08 at 09 14 50

It's not within the purview of this PR, but I'm not entirely sure that it addresses the Comments Query Loop block issue in #37154

Kapture 2021-12-08 at 09 34 36

@ramonjd
Copy link
Member

ramonjd commented Dec 7, 2021

I can't comment on the implementation in great detail, but, having played with trunk, this is a clear improvement and I'm happy to approve once folks with more high-level context are happy with it.

@andrewserong
Copy link
Contributor Author

Thanks for testing @ramonjd!

It's not within the purview of this PR, but I'm not entirely sure that it addresses the Comments Query Loop block issue in #37154

Yes, the Comments Query Loop block is quite similar so if this PR ends up being accepted, I think we'd then look at a follow-up for that block to deal with that issue 🤞.

@andrewserong andrewserong force-pushed the fix/query-loop-wide-alignment-in-the-editor branch from cf6b844 to a00533e Compare December 9, 2021 01:25
@Mamaduka Mamaduka requested a review from a team December 10, 2021 08:29
@getsource
Copy link
Member

Oh! I'm so sorry, I missed the mention for re-testing on this one. It looks like it's been tested now, but I'll take another look on Monday if it hasn't already been merged before then.

@andrewserong
Copy link
Contributor Author

Oh! I'm so sorry, I missed the mention for re-testing on this one.

Thanks @getsource! No worries, I've had plenty of other things to keep me busy 😄 It'd be great to get another review/test to confirm the approach as both block previews and the Query Loop block can have quite a few edge cases. Also, since this uses a new hook-based approach for rendering the preview and the disabled behaviour, it'd be good make sure I haven't missed anything from the existing component-based approach, that might be needed here.

Copy link
Member

@getsource getsource left a comment

Choose a reason for hiding this comment

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

Okay! I went through and re-tested this, and the flickering seems to be resolved, along with the layout change being fixed.

This is great! In general, everything feels much smoother than pre-PR/trunk.

I don't think I'm the best person for a final code review, so submitting as Comment for that reason. Thanks so much!

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I would be in favor of giving it a try based on the feedback shared during testing. That's the most important aspect of this enhancement. We are planning to recreate a similar set of changes for the Comments Query Loop block as documented in #37154. That should be a good way to validate whether the approach takes scales well.

This PR introduced a new experimental API in @wordpress/components – useDisabled hook. Is that a necessary step at the start or can it be inlined in the @wordpress/block-editor package for now? Do we have more use cases where the same hook could be used? @youknowriad and @ellatrix what do you think about it? If you think it's going to be useful in other places, we should include the documentation so the community knows how to use it.

@andrewserong
Copy link
Contributor Author

andrewserong commented Dec 14, 2021

Thanks for testing, folks!

This PR introduced a new experimental API in @wordpress/componentsuseDisabled hook. Is that a necessary step at the start or can it be inlined in the @wordpress/block-editor package for now? Do we have more use cases where the same hook could be used?

Good question @gziolo! I originally added this hook in a previous PR that didn't land, and over there @youknowriad had the suggestion of placing it in @wordpress/compose, which I've done here. The longer-term goal is to refactor the Disabled component in @wordpress/components to use this hook internally so that there's less duplication of logic (this hook borrows its logic from that component). I think the hook is generic enough that it could potentially be used in other circumstances, too, where a component might need to be rendered in a disabled state (disarming a form, perhaps?), so 🤞 the hook will sit nicely there alongside hooks like useConstrainedTabbing. Happy to move it if folks feel strongly about where it should go, though!

I like the suggestion of adding documentation, so I've had a go at adding in an entry for it in the compose/README.md file in 57461d4 — I know we often avoid adding documentation for experimental features, but I also see that the components package sometimes includes experimental features with a notice that it's experimental, so I've used that pattern here as well. Update: I've moved the documentation to the hook in ee8881f — I just noticed that in CI it complains if we add it manually to the readme, I think the git commit hook must have failed for me locally 😄

Let me know if you'd like further changes!

@gziolo
Copy link
Member

gziolo commented Dec 15, 2021

The longer-term goal is to refactor the Disabled component in @wordpress/components to use this hook internally so that there's less duplication of logic (this hook borrows its logic from that component).

That and the suggestion from @youknowriad was the missing bit of information. I think it's a solid plan and with the JSDoc comment included for the new hook, it should be enough to expose the documentation once the API is promoted to stable. I hope you can do it in a follow-up that refactors the Disabled component.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Let's get this in. I'm not the best person to approve, but you only live once and I trust all other reviewers 😄

Thank you everyone for an excellent team work to help @andrewserong to take it to the finish line 🎉

@gziolo gziolo merged commit 7a050db into trunk Dec 15, 2021
@gziolo gziolo deleted the fix/query-loop-wide-alignment-in-the-editor branch December 15, 2021 13:12
@github-actions github-actions bot added this to the Gutenberg 12.2 milestone Dec 15, 2021
@andrewserong
Copy link
Contributor Author

I think it's a solid plan and with the JSDoc comment included for the new hook, it should be enough to expose the documentation once the API is promoted to stable. I hope you can do it in a follow-up that refactors the Disabled component.

Yes, of course! There's a few other tasks to wrap up first, but my goal is to follow-up with a refactor for the Disabled component in the new year. (In the shorter-term, I'd like to continue refining the click behaviour when switching between blocks and block previews in the instances of the loop). Thanks again for the review and merge!

@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 Dec 21, 2021
tellthemachines pushed a commit that referenced this pull request Dec 21, 2021
… editor (#36431)

* Add useBlockPreview, fix Query Loop wide alignment in the editor

* Add test for useDisabled

* Add minimal test for useBlockPreview hook

* Add useDisabled test to cover updates to a component

* Update useBlockPreview test to ensure elements within the block content are disabled

* Switch queryBy to getBy to ensure check for block is stricter

* Remove comment

* Export useBlockPreview as __experimentalUseBlockPreview

* Optimise block preview via memoizing the component, and always rendering a preview for each block context

* Tidy up settings useMemo

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

* Add documentation for useDisabled hook

* Move documentation to the hook

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
@ellatrix
Copy link
Member

ellatrix commented Apr 6, 2024

@andrewserong I don't get at all why we must render all inner blocks twice to fix and alignment issue. Could you try to explain this to me? I don't know anything about this block.

@andrewserong
Copy link
Contributor Author

I don't get at all why we must render all inner blocks twice to fix and alignment issue.

Thanks for the ping @ellatrix! The only one that gets rendered twice is the current instance of the loop — the double rendering is to avoid flickering when switching between instances. Without it, when clicking between instances, there's a flash of white as the preview renders. If the current instance is rendered for "real" as well as there being a hidden preview version of it, then the preview can be shown / hidden instantaneously. Not the best approach, but resulted in a smoother UI. That could totally be revisited if there are better approaches now, though.

For a bit more content: and my memory is a little fuzzy on this particular PR since it's a couple of years old now, but my understanding is that the way that the block works is that it should only render the "real" inner blocks once, for the instance selected. And all other instances of the loop should render a preview instead. If we accidentally render each child as "real" inner blocks (as in #60535) then we wind up with a bunch of duplicate controls in the UI (in both the block toolbar and inspector controls):

image

I believe using previews for the non-selected instances of the loop was a workaround for that problem. The previews pre-date this particular PR — this one was an attempt to work around some of the downsides of the preview approach prior to this PR (alignment display, reduce flickering etc).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Query loop block: Wide alignment not working correctly on the editor
7 participants