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

Gallery block: add gap support / block spacing #38164

Merged
merged 22 commits into from
Mar 17, 2022

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Jan 23, 2022

Fixes #20705 & #33582

Description

Adds block gap support to the Gallery block.

This PR makes use of the gap layout setting added in #37360, but required the addition of a new scoped css var --wp--style--unstable-gallery-gap as the Gallery needs to have access to the current gap setting in css in order to recalculate the width of the images when the gap size changes.

If this css var is not added, because flex layout is used the number of columns reduces as the gap size increases.

I investigated using css grid instead of flex, and this works without the use of this var as the number of columns can be fixed and images automatically resize ... but, there is no way to easily make orphaned images in the last row span empty rows, eg. if 3 columns set, and only 5 images, the images on the last row should expand to fill 50% each instead of 33%. There are some css hacks to make this work, but accounting for all the permutations of last row % splits when you have 8 columns is practically impossible.

Flex is designed to handle this sort of layout, so adding the new css var in order to allow the gap support to work seems like the best option, but I am open to suggestions on alternative approaches.

How has this been tested?

  • Add a Gallery block and add a number of images
  • Test that the block gap can be adjusted and displays as expected in editor and frontend in both block and non-block themes

Screenshots

gallery-gap

@glendaviesnz glendaviesnz added [Status] In Progress Tracking issues with work in progress [Block] Gallery Affects the Gallery Block - used to display groups of images labels Jan 23, 2022
@glendaviesnz glendaviesnz self-assigned this Jan 23, 2022
@github-actions
Copy link

github-actions bot commented Jan 24, 2022

Size Change: -174 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-library/blocks/gallery/editor-rtl.css 961 B -4 B (0%)
build/block-library/blocks/gallery/editor.css 964 B -3 B (0%)
build/block-library/blocks/gallery/style-rtl.css 1.51 kB -101 B (-6%)
build/block-library/blocks/gallery/style.css 1.51 kB -103 B (-6%)
build/block-library/editor-rtl.css 9.96 kB -4 B (0%)
build/block-library/editor.css 9.96 kB -5 B (0%)
build/block-library/index.min.js 169 kB +290 B (0%)
build/block-library/style-rtl.css 11.2 kB -122 B (-1%)
build/block-library/style.css 11.3 kB -122 B (-1%)
ℹ️ 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/index.min.js 6.49 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-editor/index.min.js 145 kB
build/block-editor/style-rtl.css 15 kB
build/block-editor/style.css 15 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 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/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/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/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 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 708 B
build/block-library/blocks/navigation-link/editor.css 706 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 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.89 kB
build/block-library/blocks/navigation/style.css 1.88 kB
build/block-library/blocks/navigation/view.min.js 2.85 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 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-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 389 B
build/block-library/blocks/pullquote/style.css 388 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 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 201 B
build/block-library/blocks/quote/style.css 201 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 99 B
build/block-library/blocks/separator/editor.css 99 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 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 744 B
build/block-library/blocks/site-logo/editor.css 744 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 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 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 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/common-rtl.css 934 B
build/block-library/common.css 932 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 670 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 46.5 kB
build/components/index.min.js 218 kB
build/components/style-rtl.css 15.6 kB
build/components/style.css 15.6 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.2 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 8.19 kB
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.53 kB
build/edit-navigation/index.min.js 16.1 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/index.min.js 29.8 kB
build/edit-post/style-rtl.css 7.07 kB
build/edit-post/style.css 7.07 kB
build/edit-site/index.min.js 43.8 kB
build/edit-site/style-rtl.css 7.44 kB
build/edit-site/style.css 7.42 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.39 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 38.4 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.1 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/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

// after that, so loading in the footer for now.
// See https://core.trac.wordpress.org/ticket/53494.
add_action(
'wp_footer',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

There are issues with adding this to the footer, but this is the same temporary approach as taken by the layout support here, and can hopefully be sorted as part of the new style engine implementation.

Copy link
Contributor

Choose a reason for hiding this comment

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

It's becoming more a more clear that we should look at having a function to do this for us (inject block support style tag) and reuse in layout, duotone and here. (the wp_footer becomes just an implementation detail of it)

Copy link
Contributor

Choose a reason for hiding this comment

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

Note here that a function has been introduced on a separate branch to use the right hook (header or footer, depending on the theme), I guess it should be used here.

@@ -534,6 +536,7 @@ function GalleryEdit( props ) {
/>
</BlockControls>
{ noticeUI }
<style>{ style }</style>
Copy link
Contributor

Choose a reason for hiding this comment

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

The additional style tag added inline can cause issues (block gap with previous block ...), ideally it should use the same mechanism used for layout styles to inject the style tags (I think it's a Head slot or something like that)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks - have switched it out for a similar approach to the layout styles as suggested.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@youknowriad I have moved this to a portal as used by the layout lib. Do you have any other feedback on how the block gap is now being used in this PR?

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Left some small comments but this approach looks good to me

@glendaviesnz glendaviesnz changed the title Gallery block: Try using a custom gallery specific var to calculate image sizes based on gap setting Gallery block: add gap support Jan 24, 2022
@glendaviesnz glendaviesnz removed the [Status] In Progress Tracking issues with work in progress label Jan 24, 2022
@glendaviesnz glendaviesnz marked this pull request as ready for review January 24, 2022 21:32
@glendaviesnz glendaviesnz force-pushed the try/gallery-gap-css-var branch from 22d0984 to 5422714 Compare January 24, 2022 23:32
@ramonjd
Copy link
Member

ramonjd commented Jan 25, 2022

This is a general question rather than an observation on this PR, as I think it's an existing issue.

Should a block style definition in theme.json determine the default value of block spacing for an individual block?

"styles": {
    "blocks": {
        "core/gallery": {
            "spacing": {
                "blockGap": "20px"
            }
        }
    }
}

I noticed it while testing blockGap axial support

@ramonjd
Copy link
Member

ramonjd commented Jan 25, 2022

This is testing well for me @glendaviesnz Thanks for making those changes. 🙇

I don't really understand what's going on with the mobile E2Es. Looking at the Gutenberg commit history I don't see the corresponding test failing elsewhere.

The gallery appears in the fixture, and the test is complaining that Warning: "lastBlockElement" was not found in the first attempt. Could be that all the blocks were not loaded yet.

@glendaviesnz
Copy link
Contributor Author

I don't really understand what's going on with the mobile E2Es

The code in that fixture is the v1 format and for some reason the use of createPortal to add the style is breaking the deprecation/migration of the block and throwing an invalid block error. I will sort that out tomorrow.

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

I used TwentyTwentyTwo and added a Gallery block with ten images.

✅ Altered block gap setting to 1px and it adjusted in the editor correctly.
✅ Published post and looked at it in the front end and the 1px gap appeared correctly.
✅ Modified to a 20px gap in the editor and it appeared correctly in the frontend and editor.

I switched to TwentyTen an old non-block theme and the gap setting was removed. The gap switched to the theme setting and appeared the same in the editor and front end.

@glendaviesnz glendaviesnz force-pushed the try/gallery-gap-css-var branch from 547a46c to 8ab1544 Compare January 27, 2022 22:32
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Nice work @glendaviesnz! The gap itself is working pretty well for me, but I noticed a couple of issues.

In the editor, the gap between the images and the figcaption for the gallery appears to be slightly too big. I think this is due to an empty media placeholder wrapper? In the other PR I believe we wrapped the media placeholder in an isSelected check, but I wasn't sure if that approach is still valid with the move to using the Add button in the block toolbar?

image

The other issue is that I think the e2e test failure for the gallery tests might be legitimate when it comes to the figcaption. I had trouble running the e2e tests locally, but manually stepping through the steps, I noticed that after uploading an image to the gallery with this PR applied, the figcaption moves slightly (where it doesn't on trunk), and if you then go to view the code view of the block and switch back to the visual view, the block throws an error:

Kapture.2022-01-28.at.12.42.42.mp4

I wasn't quite sure what the culprit would be since the diff in this PR doesn't appear to change all that much from the JS side of things, so perhaps there's either a conflict in this block with using the layout support, or it could be to do with the portal? Let me know if you need any other testing info!

@glendaviesnz
Copy link
Contributor Author

In the editor, the gap between the images and the figcaption for the gallery appears to be slightly too big

Good point @andrewserong - have applied the same fix as in the other PR to not display the empty media placeholder wrapper.

The e2e test issue seemed to be caused by the GapStyle not returning null in the instances when it had no content - they are running locally with a fix for this in place, so 🤞 will be ok on CI now also.

@andrewserong
Copy link
Contributor

Thanks @glendaviesnz, that's fixed the caption gap issue, and I can no longer reproduce the block error when switching between the code and visual editor views 👍

@ramonjd
Copy link
Member

ramonjd commented Jan 28, 2022

This is looking GTM!

✅ Gap is applied consistently in the post editor and frontend when set, and falls back to theme.json value
✅ Multiple galleries work as expected

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

This is still working well for me, and a good use case for context-aware CSS vars. Because it's block-specific, I can't imagine any scenario where it would impact a potential refactoring of layout or blockGap, but I'll leave that open to folks who have more insight in that area.

gallery-gap

@github-actions github-actions bot added this to the Gutenberg 12.9 milestone Mar 17, 2022
@scruffian
Copy link
Contributor

Thank you so much for doing this! @getdave can we try to do the same for the navigation block?

@justintadlock
Copy link
Contributor

Noting that this change breaks back-compat for themes that currently target --gallery-block--gutter-size to set the default gap between images.

@justintadlock
Copy link
Contributor

I'm also getting this warning when adjusting the block spacing on a clean copy of 12.9:

Warning: preg_match() expects parameter 2 to be string, array given in ...wp-content/plugins/gutenberg/build/block-library/blocks/gallery.php on line 51

@ramonjd
Copy link
Member

ramonjd commented Mar 31, 2022

I'm also getting this warning when adjusting the block spacing on a clean copy of 12.9:

Thanks!

It was reported in #39778 and fixed #39788

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Mar 31, 2022

Noting that this change breaks back-compat for themes that currently target --gallery-block--gutter-size to set the default gap between images.

😄 woops - thanks for pointing that out @justintadlock - I think --gallery-block--gutter-size was only added when we were initially going to include a gutter adjustment option in the refactor of the Gallery to innerBlocks. The change was pulled out as the refactor was complex enough without it, but we left that var in there thinking we would circle back and add it - so theme authors have been very astute to pick that this up and use it in the meantime!

Since the Gallery refactor was released a lot happened in terms of a general block flex gap support, so it made sense to use this for the gallery instead of using the gutter var to adjust margins. The move from margins to gap to set the gallery image gap is going to be a breaking change in itself if theme authors are currently targeting margins, and a dev note will be written up for this for the 6.0 release, and will also include details about the removal of this var in the dev note.

I thought we might be able to map any existing --gallery-block--gutter-sizes to --wp--style--unstable-gallery-gap with something like --wp--style--unstable-gallery-gap: var(--gallery-block--gutter-size, var(--wp--style--unstable-gallery-gap)) but in trying this I remembered that --wp--style--unstable-gallery-gap is only set in order to resize the images as the gap increases/decreases, not to actually set the gap. The actually flex gap is set on the block wrapper with the generic block layout supports code, so it isn't possible to add a mapping to this old var.

It is still possible to override the gap in themes with something like:

figure.wp-block-gallery.has-nested-images {
    gap: 0px;
}

With --gallery-block--gutter-size having been in the wild for such a short time do you have a view on the potential impact of this change on theme authors?

Looking at https://wpdirectory.net/, in terms of themes and plugins listed on .org there appear to be 2 themes and 2 plugins making use of it, but I will have a closer look at potential impact, and mitigations, as part of writing up the dev note for this.

@justintadlock
Copy link
Contributor

@glendaviesnz - Thanks for the thorough explanation.

It is still possible to override the gap in themes with something like...

That works for a full override but not for overriding the default.

Just with a quick test, it looks like targeting figure.wp-block-gallery.has-nested-images or even .wp-block-gallery.has-nested-images is too specific, overruling the user's choice. And, .wp-block-gallery is not specific enough, not overruling the default.

Themes should be able to set a default, but user choice should take precedence. I'll do some more testing to see if I can find the sweet spot in the middle of all that.

With --gallery-block--gutter-size having been in the wild for such a short time do you have a view on the potential impact of this change on theme authors?

I consider anything added to the public code as part of a WordPress release to be important. FWIW, these types of breaking changes are often the most-cited issues I hear when talking to theme authors about why they are not building block themes at all. I understand the reasoning behind this and others, but it puts themers in a tough spot.

Ideally, themers could just set the default gallery gap via theme.json. It'd still require an update, but it would require less compatibility code for theme authors going forward.

Looking at https://wpdirectory.net/, in terms of themes and plugins listed on .org there appear to be 2 themes and 2 plugins making use of it, but I will have a closer look at potential impact, and mitigations, as part of writing up the dev note for this.

I was going to say one of those themes was mine, but it's not appearing in the search at all. So, there's at least a third. :)

@glendaviesnz
Copy link
Contributor Author

@justintadlock thanks for the extra feedback, I will take another good look at this next week to see if any modifications are possible to make it easier for themes to set a default ahead of 6.0.

Comment on lines +52 to +53
$id = uniqid();
$class = 'wp-block-gallery-' . $id;
Copy link
Member

@westonruter westonruter Apr 1, 2022

Choose a reason for hiding this comment

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

I just noticed this. This should rather have been:

$class     = wp_unique_id( 'wp-block-gallery-' );

See #38889 and #38891

Copy link
Member

Choose a reason for hiding this comment

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

I've applied this change in #39983.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for this fix @westonruter

@abhansnuk
Copy link

Reviewing

@courtneyr-dev
Copy link
Contributor

A small note that it'd be helpful to name the issue similarly to what displays in the UI. Often folks close to developing this work use the issue name but when folks go looking in the UI, it's not there. Instead, it's block spacing. I understand that logically, but new to WordPress or new to FSE folks may get lost if we commonly refer to one thing and then the same terminology isn't in the UI.

@glendaviesnz glendaviesnz changed the title Gallery block: add gap support Gallery block: add gap support / block spacing May 4, 2022
@glendaviesnz
Copy link
Contributor Author

A small note that it'd be helpful to name the issue similarly to what displays in the UI

Thanks @courtneyr-dev, good point, have renamed for future reference.

@abhansnuk
Copy link

abhansnuk commented May 6, 2022 via email

@courtneyr-dev
Copy link
Contributor

We could also adjust wording in the UI for consistency as well - whichever way. Great move though so far.

$id = uniqid();
$class = 'wp-block-gallery-' . $id;
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
Copy link
Member

Choose a reason for hiding this comment

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

Curious why we have this preg_quote here as it doesn't do anything. We generally never need to RegExp-quote a static string literal, especially if the string value doesn't have the delimiter we're escaping in it, as this one does.

Note too that this PCRE pattern isn't doing anything that simple string substitution doesn't do already - why did we use a preg_replace() here instead of str_replace()?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not too sure why it was used originally but I believe the implementation here was duplicated from layout.php as it matches the logic used here: https://github.com/WordPress/gutenberg/blob/trunk/lib/block-supports/layout.php#L318, which doesn't appear to have been updated from when the Layout block support was initially introduced back in: #29335, unless I'm missing something.

It sound like str_replace() would work too and be simpler to read. If we update it here it'd be good to update it in the Layout support too for consistency. And of course I'm hopeful for us to be able to switch over to WP_HTML_Walker at some point 😀

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, it was definitely a case of copy pasta from layout, so @youknowriad is potentially the one that knows the reason for the use of preg_replace if there was one.

Copy link
Member

Choose a reason for hiding this comment

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

Something like $content = str_replace( 'wp-block-gallery', "wp-block-gallery $class", $content ); seems to work in this instance. There are several nested <figure class="..., hence the use of the classname.

Doing a dodgy microtime speed test with 10 galleries on a page, the difference appears negligible on my machine.

Copy link
Member

Choose a reason for hiding this comment

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

Doing a dodgy microtime speed test with 10 galleries on a page, the difference appears negligible on my machine.

My question was definitely geared towards "this looks obviously wrong so I'm confident that I'm misunderstanding the intent of the code and its implementation" more than "this could potentially be slower than another micro-optimized approach."

Thanks for the clarification y'all. In the meantime, would someone be willing to simplify so this doesn't confuse even more folks? To be clear, I'm not commenting on the method of HTML modification, just on the superfluous use of preg_ functions which emulate str_ varieties.

Well, it may be the case that str_replace() won't only replace a single instance. If that's important we might need to stick with preg_ but we absolutely don't need preg_quote() because it's being passed a literal with no quotable characters.

$content = preg_replace( '/class="/', 'class="' . $class . ' ', $content, 1 );

And of course I'm hopeful for us to be able to switch over to #42485 at some point 😀

Yes indeed

$w = new WP_HTML_Walker( $html );
$w->next_tag( [ 'class_name' => "wp-block-gallery-{$id}" ] );
$w->add_class( $class );
$content = (string) $w;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images Needs Dev Note Requires a developer note for a major WordPress release cycle
Projects
No open projects
Status: Ready for Review
Development

Successfully merging this pull request may close these issues.

Add a way to control spacing between gallery images