WordPress
Try using `manualPlacement` attribute to set manual grid mode and allow responsive behaviour in both modes.
What?
Follow-up to #61025; addresses part of #57478; alternative to #60941.
- In #61025 we're changing the distinction between Manual and Auto modes to be about placement: in Auto mode, grid children occupy the first available grid cell, while in Manual all grid children can be placed in any grid cell.
- To provide the same functionality as Manual mode did previously, this PR allows setting either/both
minimumColumnWidthandcolumnCountin Auto mode. When setting both, the grid becomes responsive with a maximum column count. - This PR also adds
minimumColumnWidthas an option in Manual mode, which enables the grid to become responsive in that mode.
Testing Instructions
- In Gutenberg > Experiments enable the Grid experiment;
- Add a Grid block to a post or template and add some blocks inside it;
- In Auto mode, try setting"Columns" and resize the grid (it should max at the set column number but resize down);
- Try setting "Minimum column width" to 0 and resize the grid (it should maintain same number of columns);
- In Manual mode, try setting "Minimum column width" and check that the grid resizes.
Screenshots or screencast
Auto mode:
https://github.com/WordPress/gutenberg/assets/8096000/606a4e80-8a81-4041-ad66-446a84af50da
Manual mode:
https://github.com/WordPress/gutenberg/assets/8096000/b4bbdd0e-c6e7-4cc3-b94d-e1eb16e0e322
Size Change: -11.9 kB (-0.68%)
Total Size: 1.75 MB
| Filename | Size | Change | |
|---|---|---|---|
build/block-editor/content-rtl.css |
4.58 kB | +6 B (+0.13%) | |
build/block-editor/content.css |
4.58 kB | +6 B (+0.13%) | |
build/block-editor/index.min.js |
252 kB | -12.9 kB (-4.85%) | â |
build/block-editor/style-rtl.css |
15.9 kB | +255 B (+1.63%) | |
build/block-editor/style.css |
15.9 kB | +253 B (+1.61%) | |
build/block-library/blocks/social-links/style-rtl.css |
1.51 kB | +7 B (+0.47%) | |
build/block-library/blocks/social-links/style.css |
1.5 kB | +7 B (+0.47%) | |
build/block-library/index.min.js |
219 kB | +126 B (+0.06%) | |
build/block-library/style-rtl.css |
14.6 kB | +11 B (+0.08%) | |
build/block-library/style.css |
14.6 kB | +12 B (+0.08%) | |
build/commands/index.min.js |
15.2 kB | +5 B (+0.03%) | |
build/components/index.min.js |
223 kB | +295 B (+0.13%) | |
build/core-commands/index.min.js |
2.77 kB | +25 B (+0.91%) | |
build/core-data/index.min.js |
72.6 kB | -5 B (-0.01%) | |
build/data/index.min.js |
8.98 kB | -14 B (-0.16%) | |
build/edit-post/index.min.js |
12.5 kB | +16 B (+0.13%) | |
build/edit-post/style-rtl.css |
2.34 kB | +25 B (+1.08%) | |
build/edit-post/style.css |
2.33 kB | +26 B (+1.13%) | |
build/edit-site/index.min.js |
208 kB | -11 B (-0.01%) | |
build/edit-site/posts-rtl.css |
6.54 kB | +186 B (+2.93%) | |
build/edit-site/posts.css |
6.54 kB | +188 B (+2.96%) | |
build/edit-site/style-rtl.css |
11.7 kB | -62 B (-0.53%) | |
build/edit-site/style.css |
11.7 kB | -63 B (-0.54%) | |
build/editor/index.min.js |
98.2 kB | +102 B (+0.1%) | |
build/editor/style-rtl.css |
9.15 kB | -87 B (-0.94%) | |
build/editor/style.css |
9.15 kB | -89 B (-0.96%) | |
build/format-library/index.min.js |
8.07 kB | -31 B (-0.38%) | |
build/patterns/index.min.js |
7.35 kB | +4 B (+0.05%) | |
build/preferences/style-rtl.css |
578 B | -137 B (-19.16%) | đ |
build/preferences/style.css |
578 B | -137 B (-19.16%) | đ |
build/router/index.min.js |
1.96 kB | +2 B (+0.1%) |
âšī¸ 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/default-editor-styles-rtl.css |
394 B |
build/block-editor/default-editor-styles.css |
394 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 |
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/editor-rtl.css |
958 B |
build/block-library/blocks/gallery/editor.css |
962 B |
build/block-library/blocks/gallery/style-rtl.css |
1.71 kB |
build/block-library/blocks/gallery/style.css |
1.71 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/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/editor-rtl.css |
11.9 kB |
build/block-library/editor.css |
11.9 kB |
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/style-rtl.css |
955 B |
build/commands/style.css |
952 B |
build/components/style-rtl.css |
12.1 kB |
build/components/style.css |
12.1 kB |
build/compose/index.min.js |
12.9 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/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-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/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
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/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/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/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 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.
If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core GitHub repository soon after this pull request is merged.
If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.
Thank you! :heart:
View changed files
:grey_question: lib/block-supports/layout.php
I think this is in a good place functionality-wise, so marking ready for review!
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: ramonjd <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
Thanks for keeping at this. I tried the test steps and things seem to work as intended, though I'm curious what's actually new. The min-column width was already in place, no? Forgive me if I'm missing something, CSS grid is still pretty complex for me.
Sidenote, did the grid-outline-indicators change to become dotted? I'd personally prefer still they are solid lines rather than dots; the dots become busy due to their more complex silhouette.
I'm curious what's actually new. The min-column width was already in place, no?
Min column width is already in place but only for Auto grids. What this PR changes is adding it to Manual grids too, so they can become responsive. The other change is adding the colums control to Auto mode, so that responsive grids can have a max number of columns.
This only makes sense after #61025, which added custom placement to Manual mode. Essentially, the difference between Auto and Manual now is how the grid children are placed:
- In Auto, children are auto-placed on the grid in consecutive cells;
- In Manual, children are explicitly placed in their cells with
grid-columnandgrid-rowattributes, which is why we can drag and drop them into a specific cell.
I hope this makes it a bit clearer! I also did a demo of the responsive behaviour in both modes in the recent hallway hangout .
Sidenote, did the grid-outline-indicators change to become dotted?
I can see this on trunk when a grid child is selected, but if the grid block itself is selected the indicator becomes a solid line. Let me see what might have borked it! The good news is it's appearing correctly in 6.6 đ
Thanks for giving this a test run!
when I quickly clicked on the number spinner, I then ran into a maximum update depth exceeded error:
This should be fixed now. It was due to the effect inside useGridLayoutSync being re-run every time the layout object changed đ
Thanks for the updates! Not sure if it was introduced in this PR, but I notice with the experiment switched off that the range control in Manual mode isn't aligned correctly to the column count:
| Auto (correct) | Manual (not centered) |
|---|---|
Also, with the experiment off and selecting a Post Template block, the help text isn't quite right. In manual mode, we're setting the number of columns but in this context manual placement doesn't apply, but the help text says "Grid items can be manually placed in any position on the grid."
Also, with the experiment off and selecting a Post Template block, the help text isn't quite right. In manual mode, we're setting the number of columns but in this context manual placement doesn't apply, but the help text says "Grid items can be manually placed in any position on the grid."
Hmm, that help text was added in #61025 and inadvertently exposed in non-experimental mode; I'll put it behind the flag again!
with the experiment switched off that the range control in Manual mode isn't aligned correctly to the column count
This should also be fixed now!
Hi! I'm a bit of a grid newbie, so I think I'm doing something wrong.
Is there a difference between a null value and 0px for min column width? I'm not sure what I'm supposed be seeing when I set it to 0px using the slider vs deleting the value.
Most of the video is me fumbling about, but at around 18 seconds I toggle between 0px and empty value and see different column counts. The video is on manual mode, but I get the same for Auto mode.
https://github.com/WordPress/gutenberg/assets/6458278/158687ea-1ae5-4fc1-8916-53dc3a5c4c51
Thanks!
at around 18 seconds I toggle between 0px and empty value and see different column counts.
Thanks for testing! that definitely shouldn't be happening, looking into it now!
There's a few bugs when you try to set a manual number of rows.
I'm not seeing row lines appear in the grid visualiser when I increase the number of rows:
https://github.com/WordPress/gutenberg/assets/612155/7ceece15-01f0-4da8-a569-367c3497fa65
The number of rows is reset to 0 (or 1, if there's inner blocks) when I re-select the grid block:
https://github.com/WordPress/gutenberg/assets/612155/e24f7fac-03c1-4e9f-9215-4f1f71041424
Thanks for reviewing @noisysocks!
I'm not seeing row lines appear in the grid visualiser when I increase the number of rows:
This was a side-effect of addressing the feedback about uniform row height in #62928. Because I changed the default row size to auto, empty rows collapse. I've now compromised on minmax(8px, auto) so there's always a min height.
Empty rows should now also be preserved.
Should the
manualPlacementattribute begin with anisprefix since it's a boolean? I can't remember if we do that for attributes or not.
I'm not sure we have that many boolean attributes. The approach tends to be to deduce state from whatever attribute values are present, not to use explicit booleans. But in this case we need the boolean, so if isManualPlacement makes it clearer then let's change it!
Looks like our naming is a mixed bag. Sometimes we use is* e.g. isLink but mostly we use a verb e.g. showComments. So... I don't know. Up to you đ
https://github.com/search?q=repo%3AWordPress%2Fgutenberg%20%22type%22%3A%20%22boolean%22&type=code
In testing, I am no longer seeing those two issues đ but now when I switch from Auto to Manual all of the grid items are put into the first cell:
https://github.com/WordPress/gutenberg/assets/612155/54c1bdb6-79a3-4caa-a210-2ad430f99ab8
Ok I think it's working properly now:
- switching from Manual to Auto and back to Manual preserves empty rows and leaves blocks positioned sequentially
- switching from an Auto to Manual for the first time (no rows explicitly defined) positions blocks sequentially and adds the minimum needed amount of rows
Flaky tests detected in fe8cc84f98c1635d93d040d4ea08b13026b998fe. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
đ Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9772135723 đ Reported issues:
- #57525 in
/test/e2e/specs/widgets/editing-widgets.spec.js