Try replacing flex with grid in Gallery block.

[tellthemachines]

What?

Addresses #42240.

The initial step towards making Gallery layouts easily editable is converting the existing layout logic to use the layout support grid implementation. This requires some calculations to create a grid with enough columns to support a different number of children on each row, and adding columnSpan attributes to the children accordingly.

This is a WIP - it's mostly reproducing the current Gallery layouts for now; some things still need to be addressed:

• Ensure layout refresh on block addition/deletion (seems to only work sometimes)
• Add correct span attributes to images on the server when their order is randomized
• Work out best back-compat strategy (the styles I commented out might need to be kept and scoped under the is-layout-flex classname)

The main goal of this PR is to test the behaviour of the grid layout UI with complex multi-column and multi-span layouts. Ideally, we'd work out reasonably painless ways to do things like:

• switch from a static column layout to an auto-resizable one without having to fiddle around with all the Image spans manually
• Change the span of an Image and reposition it in the grid without having to adjust every single Image afterwards 😅

Testing Instructions

1. Add a Gallery block to a post and add a few Images to it;
2. Check that things aren't badly broken on first load;
3. Play with the grid controls and give constructive feedback on the experience 😅

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions[bot]]

Size Change: -223 B (-0.01%)

Total Size: 1.76 MB

Filename	Size	Change
build/block-library/blocks/gallery/editor-rtl.css	984 B	+26 B (+2.71%)
build/block-library/blocks/gallery/editor.css	988 B	+26 B (+2.7%)
build/block-library/blocks/gallery/style-rtl.css	1.55 kB	-162 B (-9.45%)	✅
build/block-library/blocks/gallery/style.css	1.55 kB	-162 B (-9.46%)	✅
build/block-library/editor-rtl.css	11.9 kB	+14 B (+0.12%)
build/block-library/editor.css	11.9 kB	+14 B (+0.12%)
build/block-library/index.min.js	219 kB	+353 B (+0.16%)
build/block-library/style-rtl.css	14.4 kB	-169 B (-1.16%)
build/block-library/style.css	14.4 kB	-163 B (-1.12%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	951 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.31 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.31 kB
build/block-directory/style-rtl.css	1.01 kB
build/block-directory/style.css	1.01 kB
build/block-editor/content-rtl.css	4.57 kB
build/block-editor/content.css	4.57 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 B
build/block-editor/index.min.js	265 kB
build/block-editor/style-rtl.css	15.7 kB
build/block-editor/style.css	15.6 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	149 B
build/block-library/blocks/audio/editor.css	151 B
build/block-library/blocks/audio/style-rtl.css	132 B
build/block-library/blocks/audio/style.css	132 B
build/block-library/blocks/audio/theme-rtl.css	134 B
build/block-library/blocks/audio/theme.css	134 B
build/block-library/blocks/avatar/editor-rtl.css	115 B
build/block-library/blocks/avatar/editor.css	115 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/button/editor-rtl.css	310 B
build/block-library/blocks/button/editor.css	310 B
build/block-library/blocks/button/style-rtl.css	538 B
build/block-library/blocks/button/style.css	538 B
build/block-library/blocks/buttons/editor-rtl.css	336 B
build/block-library/blocks/buttons/editor.css	336 B
build/block-library/blocks/buttons/style-rtl.css	328 B
build/block-library/blocks/buttons/style.css	328 B
build/block-library/blocks/calendar/style-rtl.css	240 B
build/block-library/blocks/calendar/style.css	240 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	122 B
build/block-library/blocks/code/theme.css	122 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	420 B
build/block-library/blocks/columns/style.css	420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	124 B
build/block-library/blocks/comment-author-avatar/editor.css	124 B
build/block-library/blocks/comment-content/style-rtl.css	90 B
build/block-library/blocks/comment-content/style.css	90 B
build/block-library/blocks/comment-template/style-rtl.css	200 B
build/block-library/blocks/comment-template/style.css	199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	221 B
build/block-library/blocks/comments-pagination/editor.css	211 B
build/block-library/blocks/comments-pagination/style-rtl.css	234 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	832 B
build/block-library/blocks/comments/editor.css	832 B
build/block-library/blocks/comments/style-rtl.css	632 B
build/block-library/blocks/comments/style.css	631 B
build/block-library/blocks/cover/editor-rtl.css	668 B
build/block-library/blocks/cover/editor.css	669 B
build/block-library/blocks/cover/style-rtl.css	1.62 kB
build/block-library/blocks/cover/style.css	1.6 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	314 B
build/block-library/blocks/embed/editor.css	314 B
build/block-library/blocks/embed/style-rtl.css	419 B
build/block-library/blocks/embed/style.css	419 B
build/block-library/blocks/embed/theme-rtl.css	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	326 B
build/block-library/blocks/file/style-rtl.css	278 B
build/block-library/blocks/file/style.css	279 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	198 B
build/block-library/blocks/footnotes/style.css	197 B
build/block-library/blocks/form-input/editor-rtl.css	229 B
build/block-library/blocks/form-input/editor.css	229 B
build/block-library/blocks/form-input/style-rtl.css	342 B
build/block-library/blocks/form-input/style.css	342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	344 B
build/block-library/blocks/form-submission-notification/editor.css	341 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	470 B
build/block-library/blocks/freeform/editor-rtl.css	2.6 kB
build/block-library/blocks/freeform/editor.css	2.6 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	402 B
build/block-library/blocks/group/editor.css	402 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	79 B
build/block-library/blocks/group/theme.css	79 B
build/block-library/blocks/heading/style-rtl.css	188 B
build/block-library/blocks/heading/style.css	188 B
build/block-library/blocks/html/editor-rtl.css	346 B
build/block-library/blocks/html/editor.css	347 B
build/block-library/blocks/image/editor-rtl.css	845 B
build/block-library/blocks/image/editor.css	843 B
build/block-library/blocks/image/style-rtl.css	1.54 kB
build/block-library/blocks/image/style.css	1.54 kB
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/image/view.min.js	1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css	355 B
build/block-library/blocks/latest-comments/style.css	354 B
build/block-library/blocks/latest-posts/editor-rtl.css	204 B
build/block-library/blocks/latest-posts/editor.css	204 B
build/block-library/blocks/latest-posts/style-rtl.css	509 B
build/block-library/blocks/latest-posts/style.css	510 B
build/block-library/blocks/list/style-rtl.css	104 B
build/block-library/blocks/list/style.css	104 B
build/block-library/blocks/media-text/editor-rtl.css	304 B
build/block-library/blocks/media-text/editor.css	303 B
build/block-library/blocks/media-text/style-rtl.css	516 B
build/block-library/blocks/media-text/style.css	515 B
build/block-library/blocks/more/editor-rtl.css	427 B
build/block-library/blocks/more/editor.css	427 B
build/block-library/blocks/navigation-link/editor-rtl.css	663 B
build/block-library/blocks/navigation-link/editor.css	664 B
build/block-library/blocks/navigation-link/style-rtl.css	192 B
build/block-library/blocks/navigation-link/style.css	191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	295 B
build/block-library/blocks/navigation-submenu/editor.css	294 B
build/block-library/blocks/navigation/editor-rtl.css	2.2 kB
build/block-library/blocks/navigation/editor.css	2.21 kB
build/block-library/blocks/navigation/style-rtl.css	2.26 kB
build/block-library/blocks/navigation/style.css	2.25 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	392 B
build/block-library/blocks/nextpage/editor.css	392 B
build/block-library/blocks/page-list/editor-rtl.css	378 B
build/block-library/blocks/page-list/editor.css	378 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	236 B
build/block-library/blocks/paragraph/editor.css	236 B
build/block-library/blocks/paragraph/style-rtl.css	341 B
build/block-library/blocks/paragraph/style.css	340 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	506 B
build/block-library/blocks/post-comments-form/style.css	506 B
build/block-library/blocks/post-content/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-date/style-rtl.css	62 B
build/block-library/blocks/post-date/style.css	62 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	729 B
build/block-library/blocks/post-featured-image/editor.css	726 B
build/block-library/blocks/post-featured-image/style-rtl.css	341 B
build/block-library/blocks/post-featured-image/style.css	341 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 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	399 B
build/block-library/blocks/post-template/style.css	398 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	70 B
build/block-library/blocks/post-time-to-read/style.css	70 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	134 B
build/block-library/blocks/pullquote/editor.css	134 B
build/block-library/blocks/pullquote/style-rtl.css	342 B
build/block-library/blocks/pullquote/style.css	342 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	121 B
build/block-library/blocks/query-pagination-numbers/editor.css	118 B
build/block-library/blocks/query-pagination/editor-rtl.css	220 B
build/block-library/blocks/query-pagination/editor.css	208 B
build/block-library/blocks/query-pagination/style-rtl.css	287 B
build/block-library/blocks/query-pagination/style.css	283 B
build/block-library/blocks/query-title/style-rtl.css	64 B
build/block-library/blocks/query-title/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	502 B
build/block-library/blocks/query/editor.css	502 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	238 B
build/block-library/blocks/quote/style.css	238 B
build/block-library/blocks/quote/theme-rtl.css	221 B
build/block-library/blocks/quote/theme.css	225 B
build/block-library/blocks/read-more/style-rtl.css	138 B
build/block-library/blocks/read-more/style.css	138 B
build/block-library/blocks/rss/editor-rtl.css	101 B
build/block-library/blocks/rss/editor.css	101 B
build/block-library/blocks/rss/style-rtl.css	288 B
build/block-library/blocks/rss/style.css	287 B
build/block-library/blocks/search/editor-rtl.css	183 B
build/block-library/blocks/search/editor.css	183 B
build/block-library/blocks/search/style-rtl.css	672 B
build/block-library/blocks/search/style.css	671 B
build/block-library/blocks/search/theme-rtl.css	113 B
build/block-library/blocks/search/theme.css	113 B
build/block-library/blocks/search/view.min.js	475 B
build/block-library/blocks/separator/editor-rtl.css	100 B
build/block-library/blocks/separator/editor.css	100 B
build/block-library/blocks/separator/style-rtl.css	248 B
build/block-library/blocks/separator/style.css	248 B
build/block-library/blocks/separator/theme-rtl.css	195 B
build/block-library/blocks/separator/theme.css	195 B
build/block-library/blocks/shortcode/editor-rtl.css	286 B
build/block-library/blocks/shortcode/editor.css	286 B
build/block-library/blocks/site-logo/editor-rtl.css	806 B
build/block-library/blocks/site-logo/editor.css	803 B
build/block-library/blocks/site-logo/style-rtl.css	218 B
build/block-library/blocks/site-logo/style.css	218 B
build/block-library/blocks/site-tagline/editor-rtl.css	87 B
build/block-library/blocks/site-tagline/editor.css	87 B
build/block-library/blocks/site-title/editor-rtl.css	123 B
build/block-library/blocks/site-title/editor.css	123 B
build/block-library/blocks/site-title/style-rtl.css	71 B
build/block-library/blocks/site-title/style.css	71 B
build/block-library/blocks/social-link/editor-rtl.css	338 B
build/block-library/blocks/social-link/editor.css	338 B
build/block-library/blocks/social-links/editor-rtl.css	676 B
build/block-library/blocks/social-links/editor.css	675 B
build/block-library/blocks/social-links/style-rtl.css	1.5 kB
build/block-library/blocks/social-links/style.css	1.5 kB
build/block-library/blocks/spacer/editor-rtl.css	346 B
build/block-library/blocks/spacer/editor.css	346 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	394 B
build/block-library/blocks/table/editor.css	394 B
build/block-library/blocks/table/style-rtl.css	640 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	152 B
build/block-library/blocks/table/theme.css	152 B
build/block-library/blocks/tag-cloud/style-rtl.css	266 B
build/block-library/blocks/tag-cloud/style.css	265 B
build/block-library/blocks/template-part/editor-rtl.css	393 B
build/block-library/blocks/template-part/editor.css	393 B
build/block-library/blocks/template-part/theme-rtl.css	113 B
build/block-library/blocks/template-part/theme.css	113 B
build/block-library/blocks/term-description/style-rtl.css	108 B
build/block-library/blocks/term-description/style.css	108 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	165 B
build/block-library/blocks/text-columns/style.css	165 B
build/block-library/blocks/verse/style-rtl.css	98 B
build/block-library/blocks/verse/style.css	98 B
build/block-library/blocks/video/editor-rtl.css	553 B
build/block-library/blocks/video/editor.css	554 B
build/block-library/blocks/video/style-rtl.css	192 B
build/block-library/blocks/video/style.css	192 B
build/block-library/blocks/video/theme-rtl.css	134 B
build/block-library/blocks/video/theme.css	134 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/theme-rtl.css	702 B
build/block-library/theme.css	707 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	52.2 kB
build/commands/index.min.js	15.2 kB
build/commands/style-rtl.css	955 B
build/commands/style.css	952 B
build/components/index.min.js	223 kB
build/components/style-rtl.css	12.1 kB
build/components/style.css	12.1 kB
build/compose/index.min.js	12.9 kB
build/core-commands/index.min.js	2.75 kB
build/core-data/index.min.js	72.6 kB
build/customize-widgets/index.min.js	10.9 kB
build/customize-widgets/style-rtl.css	1.35 kB
build/customize-widgets/style.css	1.35 kB
build/data-controls/index.min.js	641 B
build/data/index.min.js	8.99 kB
build/date/index.min.js	18 kB
build/deprecated/index.min.js	458 B
build/dom-ready/index.min.js	325 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	12.5 kB
build/edit-post/style-rtl.css	2.31 kB
build/edit-post/style.css	2.31 kB
build/edit-site/index.min.js	208 kB
build/edit-site/posts-rtl.css	6.35 kB
build/edit-site/posts.css	6.35 kB
build/edit-site/style-rtl.css	11.8 kB
build/edit-site/style.css	11.8 kB
build/edit-widgets/index.min.js	17.6 kB
build/edit-widgets/style-rtl.css	4.18 kB
build/edit-widgets/style.css	4.18 kB
build/editor/index.min.js	98 kB
build/editor/style-rtl.css	9.19 kB
build/editor/style.css	9.19 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.1 kB
build/format-library/style-rtl.css	494 B
build/format-library/style.css	493 B
build/hooks/index.min.js	1.54 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.5 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.68 kB
build/interactivity/index.min.js	13.4 kB
build/interactivity/navigation.min.js	1.16 kB
build/interactivity/query.min.js	742 B
build/interactivity/router.min.js	2.8 kB
build/interactivity/search.min.js	615 B
build/is-shallow-equal/index.min.js	526 B
build/keyboard-shortcuts/index.min.js	1.31 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.17 kB
build/list-reusable-blocks/style-rtl.css	846 B
build/list-reusable-blocks/style.css	846 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.3 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.58 kB
build/nux/style-rtl.css	749 B
build/nux/style.css	745 B
build/patterns/index.min.js	7.34 kB
build/patterns/style-rtl.css	687 B
build/patterns/style.css	685 B
build/plugins/index.min.js	1.81 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.9 kB
build/preferences/style-rtl.css	715 B
build/preferences/style.css	715 B
build/primitives/index.min.js	829 B
build/priority-queue/index.min.js	1.54 kB
build/private-apis/index.min.js	1.01 kB
build/react-i18n/index.min.js	630 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.76 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.73 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10.1 kB
build/router/index.min.js	1.96 kB
build/server-side-render/index.min.js	1.94 kB
build/shortcode/index.min.js	1.4 kB
build/style-engine/index.min.js	2.01 kB
build/token-list/index.min.js	581 B
build/url/index.min.js	3.85 kB
build/vendors/react-dom.min.js	42.8 kB
build/vendors/react-jsx-runtime.min.js	560 B
build/vendors/react.min.js	2.65 kB
build/viewport/index.min.js	965 B
build/warning/index.min.js	250 B
build/widgets/index.min.js	7.19 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.03 kB

_{compressed-size-action}

[tellthemachines]

Thanks for the feedback and testing, folks!

One thing I noticed was, when adding columns using the inserter or deleting columns, the columns revert to 2

@ramonjd do you mean adding blocks? Or adding columns via the Gallery block control? Either way I couldn't repro it, would be great to have some specific steps or a screengrab of this! I have noticed wonky behaviour when adding/deleting blocks, but haven't been able to repro it consistently either 😅

Is the plan to implement that in the server-rendering, too? If so, what would the relationship be between the image block's logic and the layout support's?

The only thing that needs some server-side tweaking is placing the Image block span attributes correctly when the Gallery has random order toggled on (random order gets set on the server, so we need to replace whatever attributes the Image had before with the correct ones for their new placement). Aside from that, everything just works!

How I plan to tackle the random order problem is by adding the array of children and their respective spans to block context, so that it's available on the server side without having to duplicate the complex calculations.

So we shouldn't have to touch Image blocks at all. But it's also an interesting idea to try and move the calculations to the layout support itself, because we could leverage the behaviour for other blocks. So that's definitely an avenue to explore!

If we go with the internal-to-the-layout-support idea of calculating the number of grid columns, how do we go about presenting it in the inspector sidebar?

This is one of the questions I'm hoping design folks can give their input on! Perhaps we extend the layout support in a way that allows for "columns" to not correspond to the actual number of columns in the grid and use the existing layout panel control (so in that case you'd have no way of manipulating the actual column number manually) but whether that should be a toggle or something else (maybe not a UI control at all but just something determined by the block support config) remains to be decided.

Would it be worth trying to show the "fake" number of columns to the user in the canvas interactivity, or is better to go with the real grid number?

Yes I think ideally we'd visualise the fake columns.

I also noticed that the grid doesn't collapse down the way the flex one does in narrower viewports, as it currently extends off the side of the viewport. I wasn't sure if that's a known issue since this still a WIP.

Hmm, there's no responsive behaviour yet. The current one should be easy enough to emulate, but perhaps we can improve on it. I don't see galleries extending past the viewport, though my local starts horizontally scrolling below 360px regardless of the presence of galleries 😅

In testing locally, the layout block support's display: grid overrides that theme's styles, so the forcing to 2 columns doesn't wind up being applied.

I'd have to test this, but I think the specificity reduction in #60228 will fix it, given the theme styles are loaded after global/layout styles. Otherwise, I guess there's the same potential for breakage as with any CSS change, so it'll have to be clearly flagged. It might also be good to look into what these themes are trying to do and see if the grid layout solves the problem for them, or if there's anything we can add to it that might do so!

What do you think the trade-offs are between interpolating the flex-based column count to the grid-based one as in this PR, versus treating Grid as an additional layout type that folks can switch to?

If we can replicate current behaviour as the baseline, I don't think there's any advantage to preserving the flex layout. I don't think there'd be any advantage to exposing flex vs grid as a choice to users either (they shouldn't care about the implementation).

The main disadvantage of keeping both side by side is code complexity, and related increasing of chances of stuff breaking.

[jameskoster]

Big +1 to Andrew's comments about the interplay between the two 'columns' settings. That was my main point of friction too.

I tend to agree that the target columns setting should always be respected, regardless of grid layout columns. It feels very unexpected when the canvas does not match the target columns.

I appreciate that can get tricky in certain situations though:

1. What happens if the target is greater than the grid columns?
2. What happens if the values are incompatible, e.g. target = 3, grid columns = 7.
3. What if all the images in the gallery have a custom width that makes them incompatible with the target?

Could the first point be addressed by saying that the min value of the grid columns setting = the current target?

Similar for the second point; maybe grid columns can only be multiples of the target? Would that be too restrictive? I suppose that could get strange if you set the target to 1, but in that case you probably wouldn't need the grid settings anyway and they could be hidden?

For the third point, the only thing I can think to do is add some help text to the control which explains the setting is a target, and if you adjust the widths of individual images then the target won't always be attainable.

It could be conditional similar to the color contrast warning. IE only appear when a child has a custom width, and include button to reset the custom widths:

To be honest I don't love any of these suggestions, and there could be issues I'm not seeing with them all – there are many moving parts here. It may need a step back and deeper design exploration.

Some minor observations:

• The current resize handles feel restrictive. I'd appreciate handles on the north and west sides, and probably corners too.
• I see the grid outline on the gallery placeholder state which looks a bit strange.
• In 'Auto' layout the target columns setting doesn't seem to do anything? Should we hide it, or am I missing something?
• 'Auto' / 'Manual' segmented control should use __next40pxDefaultSize.
• Resizing down seems a bit buggy:

https://github.com/WordPress/gutenberg/assets/846565/6e3d7712-d2b5-43ce-aaed-bdd1b3e3d75b

[richtabor]

A few notes:

1. I had a three column gallery before switching to this branch; that gallery became this, which felt unexpected:

2. Gallery settings reset when I resized my window:

https://github.com/WordPress/gutenberg/assets/1813435/11ed00a3-f340-4e85-a200-a1e3f12fb1a4

5. Image resize didn't quite handle well in manual (layout, not gallery specific).

6. What's the simplest way to explain the difference between Auto and Manual?

7. For clarity, is the idea to deprecate the existing columns control in the Settings panel?

8. Also directly layout related, but perhaps there a visualization of the grid that makes columns/gutters clearer:

[ramonjd]

do you mean adding blocks? Or adding columns via the Gallery block control? Either way I couldn't repro it, would be great to have some specific steps or a screengrab of this! I have noticed wonky behaviour when adding/deleting blocks, but haven't been able to repro it consistently either 😅

Sorry, yes, blocks 🤦🏻 - specifically, adding image blocks via the inbetween inserter, and also deleting individual image blocks. I've noticed it after adjusting the columns manually.

It must be the same thing you've noticed then.

https://github.com/WordPress/gutenberg/assets/6458278/96191524-f9e3-4739-8dee-2735294cd667

[tellthemachines]

Thanks for all the feedback and ideas folks!

I tend to agree that the target columns setting should always be respected, regardless of grid layout columns. It feels very unexpected when the canvas does not match the target columns.

I appreciate that can get tricky in certain situations though:

1. What happens if the target is greater than the grid columns?
2. What happens if the values are incompatible, e.g. target = 3, grid columns = 7.
3. What if all the images in the gallery have a custom width that makes them incompatible with the target?

These are great points @jameskoster! So what this PR does is calculate the real grid column number based on both the target columns and the number of images in the gallery. This is still a very early stage experiment, but ideally I think that when the target column control is available, the real column control should be hidden. There shouldn't be a need to edit both.

Point 3. shouldn't be an issue at all, because the width/height/aspect ratio of Image blocks in a Gallery block isn't editable, and there are styles applied to them to make sure that if an image with existing size attributes is dragged in, those styles won't apply inside the Gallery. Currently this means that users can't really adjust the relative sizes of their images in the Gallery. My hope for this PR is to give them a sensible way to do so with the grid span controls 😄

Currently the resize handles on the images are the ones from the grid experiment (if you have it enabled, otherwise no handles show). I think on-canvas interaction is a big part of making this possible; it would be too clunky to edit column spans manually via the sidebar layout controls.

The current resize handles feel restrictive. I'd appreciate handles on the north and west sides, and probably corners too.

Absolutely! They will happen, the on-canvas interaction is still in very early stages too.

I had a three column gallery before switching to this branch; that gallery became this, which felt unexpected:

@richtabor that's a bug, thanks for spotting it! I haven't really done much work on back compat for existing galleries yet, but the intended behaviour is for it to turn into a grid, with however many columns the original gallery has, set in manual mode.

What's the simplest way to explain the difference between Auto and Manual?

As an engineer, I'm probably not the best person to answer this 😂 but main difference is that in Manual the column number is fixed regardless of screen size, whereas in Auto the columns fill the available space. We could maybe come up with better names for these controls?

For clarity, is the idea to deprecate the existing columns control in the Settings panel?

No, I think it would be better to hide the columns control in the Layout panel, because the Settings panel controls the visual number of columns, which is a better experience. But ideally, we can make this smart column calculation a part of layout itself, in which case we'd add the visual column control to the layout panel (instead of its current one) and deprecate this one. Does that make sense?

I'm thinking of a "smartColumnDistribution" (or whatever better name 😅 ) setting for layout that would enable the items in the grid to be nicely distributed as an initial state, just like happens in Gallery now.

[paaljoachim]

I am in the process of recreating an artist web site here in Norway. Using the Grid will I believe be a very good step up to what exists today in the Gallery block.

Here is an example of a way that she wants one of her gallery pages. Creating a as she said breathable space where things are not aligned perfectly with each other. Creating some mismatch along the way.

[paaljoachim]

I am hoping that this PR can continue even though Isabel has now gone on a 3 month sabbatical. Thank you.

[andrewserong]

Thanks for the enthusiasm here, Paal! This was an early proof of concept to get a sense for how it might work, however it's lower down the list of priorities for the Grid block as there are many other issues that need to be addressed for WordPress 6.7. I'd expect this feature not to make it in for 6.7, but would be a good one for later releases.

For the current list of tasks for the Grid block / layout block support see this tracking issue: https://github.com/WordPress/gutenberg/issues/57478

[paaljoachim]

Thank you for the feedback Andrew!