WordPress
Background image: move controls into a popover
What?
This PR:
- moves the background controls into a flyout panel
- consolidates properties in the tool panel beneath the "background image" property, which means that resetting an image will reset all associated properties
See:
- https://github.com/WordPress/gutenberg/pull/57005#issuecomment-1866076523
- https://github.com/WordPress/gutenberg/pull/60100#issuecomment-2178866354
Doing this with a view to consolidate colors and fill. See: https://github.com/WordPress/gutenberg/pull/60100#issuecomment-2160054475
Also take into account:
- https://github.com/WordPress/gutenberg/pull/59454#issuecomment-2020150910
- https://github.com/WordPress/gutenberg/pull/59454#issuecomment-2021680599
TODO
- [x] Refactor main components in packages/block-editor/src/components/global-styles/background-panel.js
- [x] Condense and consolidate controls in the popover
- [x] Mobile view - ensure it works as expected.
- [x] Test keyboard interaction
- [ ] ~Wire in tools panel reset for individual properties? E.g., position and repeat?~
Why?
To win back space in the sidebar controls.
How?
Moving background image controls into a flyout popover. This includes, where an image exists, the media select control.
To get the Tools Panel controls to work, I've created an invisible ToolsPanelItem components for each control set - this registers reset callbacks and so on in the Tools Panel.
Testing Instructions
The flyout appears in the Global styles (Layout > Background Image) and at the block level for Group, Quote, Post Content blocks. For both:
- Check that you add/upload/reset background images from the sidebar panel.
- When a background image is selected, the sidebar control activates the flyout.
- The controls the flyout should update the background image properties as expected
- Ensure the Tools Panel controls works, that is, everything should open, close and reset.
- In mobile view (< 782px) check that the flyout appears in the viewport width.
- Resetting the image should also reset size, position, and repeat.
Testing Instructions for Keyboard
Check:
- You can tab through the sidebar controls, and add a background image
- Where a background image exists, check you can tab to the background image control and hit Enter to open and focus the new flyout.
- Tab through the flyout and change the background image properties
Screenshots or screencast
| Global styles | Blocks |
|---|---|
Resetting background properties:
https://github.com/WordPress/gutenberg/assets/6458278/13137e1a-893e-44a4-bc1d-af7d9a9742bf
Related
- https://core.trac.wordpress.org/ticket/22058
Size Change: +723 B (+0.04%)
Total Size: 1.75 MB
| Filename | Size | Change |
|---|---|---|
build/block-editor/index.min.js |
252 kB | +279 B (+0.11%) |
build/block-editor/style-rtl.css |
15.9 kB | +250 B (+1.59%) |
build/block-editor/style.css |
15.9 kB | +250 B (+1.59%) |
build/edit-site/index.min.js |
208 kB | -56 B (-0.03%) |
ℹ️ 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.58 kB |
build/block-editor/content.css |
4.58 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/social-links/style-rtl.css |
1.51 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/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/index.min.js |
219 kB |
build/block-library/reset-rtl.css |
472 B |
build/block-library/reset.css |
472 B |
build/block-library/style-rtl.css |
14.6 kB |
build/block-library/style.css |
14.6 kB |
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.77 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.98 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.34 kB |
build/edit-post/style.css |
2.33 kB |
build/edit-site/posts-rtl.css |
6.54 kB |
build/edit-site/posts.css |
6.54 kB |
build/edit-site/style-rtl.css |
11.7 kB |
build/edit-site/style.css |
11.7 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.2 kB |
build/editor/style-rtl.css |
9.15 kB |
build/editor/style.css |
9.15 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/index.min.js |
8.07 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.35 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 |
578 B |
build/preferences/style.css |
578 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 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Notes:
There's a bit of a blocker on this particular design since I'm not sure I can integrate tools panel functionality (show by default / reset) with the popover contents.
The tools panel registers rendered tools panel items. Given that the background controls are in the dropdown popover, the items aren't rendered and so the tools panel ellipsis menus don't appear.
I've tried adding a "dummy" ToolsPanelItem in the DOM. It kinda works, but it's not consistent with other block supports and style options. Furthermore, it breaks the block supports __experimentalDefaultControls.
Nice work. Took a stab at some designs in this Figma. The main thing I wanted to address was to illustrate the idea of just moving the entire background image panel inside the flyout. That might also address the split behavior of this one, which doesn't feel as ergonomic as it could:
Here are the results, but note that they should be thought of as in a draft state. @jameskoster shared some ideas that went in a different direction on another of these issues, and I'd like him to have a chance to chime in, and perhaps remix the figma pieces.
Group block with no background image:
Note how even the "Add background image" button was moved inside the flyout.
Group block with a background image:
The flyout essentially contain the contents of the panel, including tiling and position options. I didn't see a clear need for tabs yet, but as noted, Jay had some thoughts too that I wanted to give him a chance to illustrate.
Additional note, this mockup tries a different design for the background image "swatch"—instead of being a circle, it is here, a square, to better match what we are showing in the List View for images, etc.
Note how even the "Add background image" button was moved inside the flyout.
This feels a bit of a drawback since it's adding a click. When there's no image set, could the button open the media library directly? There are options to upload or select an image there.
Group block with a background image
This mockup seems like a good direction for now. We're just missing controls to replace or unset the background image.
For unsetting there are a couple of existing patterns to consider:
| Clearing a color | Removing a shadow |
|---|---|
Having a 'Clear' button in the popover might be strange to use, because clicking it would hide all the other settings. For that reason I prefer the latter. It also makes unsetting require one less click.
Replacing is slightly tricker. It's probably okay to place this affordance in the popover, perhaps as an Item which opens the Media Library on click?
The minus to unset is a great argument for making this follow the ItemGroup pattern. And feel free to see if we can keep the "Add background image" CTA right in the Item itself. But we need some way to then "replace" from inside the flyout, it probably shouldn't be that recycle button.
Thanks for the continued support on this @jasmussen and @jameskoster
Also for the Figma link, it helps a lot!
Note how even the "Add background image" button was moved inside the flyout.
This feels a bit of a drawback since it's adding a click. When there's no image set, could the button open the media library directly? There are options to upload or select an image there.
This is very doable. So,
- Where no image is set, the button has the select/upload dropdown menu
- Where an image is set, the preview icon is shown on the button, and the flyout appears. The media library controls are now in the flyout as per the design above?
I'll try it out in the next iteration.
As mentioned over at https://github.com/WordPress/gutenberg/pull/60100#issuecomment-2179586732 it'd be nice to get the flyout/refactor done first and then work on relocating the background controls, e.g., in Color and Fill. These PRs get very chunky very quickly 😄
Took a stab at an i3 that incorporates the conversation of the reset button being added, and the initial state simply opening the media library. It's not quite working so well:
I still think these are the right ingredients, with the majority of work happening in the modal. But there's something here that isn't connecting, and it's all related to @jameskoster's excellent observations here.
The short is, I still think we probably want this panel to live in a flyout. But probably it's good to establish first: where does the button live? Jay, let me know if this inspires any ideas.
In the short/medium term I don't mind putting the button in the Color (& Fill) panel. I also wouldn't mind leaving the Background Image panel and placing it there. I think both provide a pathway to a dedicated 'Background' or 'Fill' panel in the future, once we've fully explored that idea.
Testing out moving the media replace flow to the flyout panel:
https://github.com/WordPress/gutenberg/assets/6458278/e3ec64d2-22d5-4447-bbe0-07ed79e8aa23
A couple of janky issues, mainly the popover has a z-index of 1000000 😱 so it sits on top of the media library:
My instinct tells me the media library should always sit on top of everything, so bumping its z-index could work. The tricker path is closing the background image controls panel when the media library is open.
Looks promising, though!
My instinct tells me the media library should always sit on top of everything, so bumping its z-index could work.
It seems we're doing that for a bunch of other modals, so sounds like it could be a good approach?
https://github.com/WordPress/gutenberg/blob/044a05f1486f2631675ac3a98ddd64018c63e574/packages/base-styles/_z-index.scss#L124-L135
It seems we're doing that for a bunch of other modals, so sounds like it could be a good approach?
That's the ticket. Found a media library-related one too. Thanks!
Flaky tests detected in 34d20ce2ddb44385f2633b4d1df4934c9b5ab194. 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/9769776440 📝 Reported issues:
- #61884 in
/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
This seems to be working quite well! A couple of small details to fix:
The gap between the swatch and the label should be the same as the color button.
Could this menu be the same width as the button?
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.
Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @brentjett.
Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Unlinked contributors: brentjett.
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
The gap between the swatch and the label should be the same as the color button. Could this menu be the same width as the button?
Thanks for catching that. This should be done 👍🏻
One question I had, which can be for another PR: should resetting the image also reset other background image settings?
So, if I remove an image, should we also wipe size, position etc?
https://github.com/WordPress/gutenberg/assets/6458278/f2cebae9-7b53-481f-8f98-bc6c349597cf
I'm thinking that if an image is wiped, it'd be okay to remove associated properties given the variation between images. 🤷🏻
One question I had, which can be for another PR: should resetting the image also reset other background image settings?
When it's part of the toolspanel, no, mainly because as far as possible, we want to avoid exceptions and edgecases in the behavior. That said, now that those controls are moving into the flyout, they should no longer be considered separate controls in the toolspanel at all, they stop being individual design tools, and become part of the singular "Background image" tool that exists in the flyout.
However before you go ahead and change this behavior, I'd love to loop in @jameskoster, per recent conversations around how unifying background tools (https://github.com/WordPress/gutenberg/issues/47369#issuecomment-2191737305). If we want individual size and position tools for each stacked background layer, it's probably fine to go ahead and remove these from the toolspanel, and allow them to be connected to each background layer. If we want something that applies across, it needs separate thinking.
Pretty sure I saw a separate conversation that suggested there be individual properties per background, so that would help decide the above.
Yes, it will be important for each layer in the background stack to have its own settings. So I agree "Size" should be removed from toolspanel for now.
To answer the original question; resetting the background image should also reset the associated size/position values.
Regarding the media modal and popovers showing on top - have you guys considered swapping in a <dialog> element so the media picker would display in the top-level? Dialogs are well supported now and can make the rest of the page inert. They aren't subject to z-index issues because the top-layer is a latest-takes-precedence context.
Regarding the media modal and popovers showing on top - have you guys considered swapping in a
Thanks for the comment.
I don't think it's come up, but it looks like has pretty good support.
If work on the modal is indeed part of it, I think should be a consideration for ongoing Media Library tasks.
Also potentially related:
- https://github.com/WordPress/gutenberg/issues/55894
they stop being individual design tools, and become part of the singular "Background image" tool that exists in the flyout. Yes, it will be important for each layer in the background stack to have its own settings. So I agree "Size" should be removed from toolspanel for now.
Thanks again for confirming, folks.
This works out well as I can delete my dirty hack that injects size into the Tools Panel and no-one has to know 🙈
All updated. I think this PR is close. Once it lands I'll carry on with:
- https://github.com/WordPress/gutenberg/pull/60100
Thanks for testing @andrewserong 🙇🏻 and for the feedback
The Popover opens with a position that aligns the bottom of the popover with the bottom of the button. This looks good at first, but if you toggle between sizes, the height of the popover changes, which means that the position of the buttons on the screen changes, causing things to bump upwards. I'm wondering if we can (somehow) change where the position for the popover is locked to, so that if the height of the popover changes the vertical position of it doesn't? It could be a challenging balancing act, but ideally the buttons wouldn't move when toggling the controls.
You'll notice the color controls popover has does something similar when switching between gradient and color tabs (and if one of those tabs has more color palette options):
https://github.com/WordPress/gutenberg/assets/6458278/1586c0ae-ad18-4394-863a-9afab3392fe4
We might have some success with playing around with position or shift popover props.
I'll try it out.
My hunch is that it's inherent to the popover component.
From what I can see the popover will do it best to position itself vertically, and scroll/not scroll according its contents and its own and the window height.
In relation to the popover contents, the focal point picker further complicates the matter - it will reflect the image's dimensions. Very tall images will result in very tall popovers.
We could mitigate these issues by keeping the controls as static as possible.
For example, the focal point picker image receives either get a max-height, or it is removed completely in favour of X/Y inputs. The latter isn't a popular opinion I understand.
Furthermore, I also had a version where the repeat and width controls were always visible, but disabled appropriately. That could reduce the bump.
On shorter screen heights, I found the popover to not position itself in a way that optimises its position on the screen. This could be a bit of a tricky one, but I think ideally on shorter screen heights, it'd fill as much of the viewport height as possible.
Similarly, this is the case for the color popover. As mentioned above, we might strike a balance with popover props. I'll give it the old college try. I'm not confident given how varied the content background controls are.
This might not have been introduced in this PR, but I'm wondering if we should hide overflow-x for this popover (or something to the effect), to prevent this? It might only be visible on OSes that have set scrollbars to always display
Good one! I'll check if overflow tweaking helps 👍🏻
On mobile screen sizes the popover is isn't visible (I suspect it's off the edge of the viewport)
Oh strange, I thought I'd tested that and it was working. Something might have changed. I'll take another look.
Thanks for taking a look! Feel free to skip any of those nits that I found if they don't feel too bad for now. Popovers are very tricky to get right and as you say, many of these points of friction might be in common for all our design tools popovers rather than this control in particular, so could always be worth looking at separately further down the track 🙂
On mobile screen sizes the popover is isn't visible (I suspect it's off the edge of the viewport)
I tried Firefox, Safari and Chrome and couldn't reproduce 🤔 I'll have another test next week when my brain is rested. Thanks!
I tried Firefox, Safari and Chrome and couldn't reproduce 🤔 I'll have another test next week when my brain is rested. Thanks!
After re-testing this morning, I can't reproduce this either! It's working nicely for me in both the post and site editors, at the block and global styles level:
| Block level | Global styles |
|---|---|
Not sure what was going on when I was testing it last week. Maybe let's just keep an eye on it once this PR has landed?
On mobile screen sizes the popover is isn't visible (I suspect it's off the edge of the viewport)
I tried Firefox, Safari and Chrome and couldn't reproduce 🤔 I'll have another test next week when my brain is rested. Thanks!
I tested this again on various viewport widths and browsers, and still couldn't reproduce.
Nevertheless, I believe adding expandOnMobile makes for a better experience in mobile anyway — the tools are larger and more accessible — so I added that.
👍🏻
https://github.com/WordPress/gutenberg/assets/6458278/415c4a13-7963-4a10-a111-69dcea4dc6cd
On shorter screen heights, I found the popover to not position itself in a way that optimises its position on the screen. This could be a bit of a tricky one, but I think ideally on shorter screen heights, it'd fill as much of the viewport height as possible.
As mentioned, I'm not sure about this. The popover has some constraints. I've tried adding resize: false but that means users with short viewport heights won't be able to access the controls.
shift: true is already activated, and that's meant to optimize the position so that the popovers stay in view when meeting the viewport edges.
Ultimately, the height of the popup is down to the contents, in particular, the focal point picker.
In my view, the options would be to reduce the height and, optionally, make the controls static, that is, disabled and no hidden/reveals.
This could occur on desktop only since expandOnMobile provides a neater interface for mobile users.
For example, for desktop only:
- removing focal point picker image completely and just use position x/y input controls OR
- separating controls using tabs, e.g., Position, Size Options
It's tricky, but I guess it means weighing up how much value the popover provides verses making the controls stable and usable.
Personally, I'm not 100% sold on the popover if it means we sacrifice usability to make it work.
After re-testing this morning, I can't reproduce this either! It's working nicely for me in both the post and site editors, at the block and global styles level:
Ah, I didn't see this comment before posting above.
Thanks for retesting!
What do you think about the expandOnMobile change?
Thanks for the detailed digging in here!
What do you think about the expandOnMobile change?
To me it feels like that makes the controls a bit large overall, as the position picker winds up taking extra space. This is more noticeable with an image that's vertically oriented. So I slightly lean toward the popover without expandOnMobile. Here's how it's looking with one of my test images:
In my view, the options would be to reduce the height and, optionally, make the controls static, that is, disabled and no hidden/reveals.
That could be worth trying. I like the idea of keeping the height of the popover stable while toggling.
Personally, I'm not 100% sold on the popover if it means we sacrifice usability to make it work.
Agreed. Conceptually I really like the idea of the popover, but in practice, I'm finding it harder to use in manual testing in the current state. The main issues for me right now are:
- The popover moving position when toggling (sounds like this could be resolved by the idea of disabled fields)
- The height of the popover when using vertically oriented images
The latter point is more noticeable on a smaller screen. Here's a full screen window on a 13" laptop. In this case I always get a vertical scrollbar:
https://github.com/WordPress/gutenberg/assets/14988353/47b8bb92-f773-4e11-8dc4-09b4b1943254
Would it be worth adding a maximum height for the focal point picker at this stage? Or was the concern about what happens with very narrow images 🤔
It's tricky, but I guess it means weighing up how much value the popover provides verses making the controls stable and usable.
Totally. I do feel like this PR is getting close, but those two main points of friction while testing on my laptop lean me toward trunk feeling a bit more stable in terms of usability in the current state. But if the focal point picker has a max height + the toggles etc are in a stable position? I'm curious if that'll swing things the other way 😄
Keen to hear what @jasmussen and @jameskoster think, too!
Let's not lose sight of why we're trying the popover; the UI on trunk takes up way too much space, and perhaps more importantly; is not going to scale to support multiple background images.
So we either need to make the popover work, or try another pattern like a drilldown.
Could the popover 'hug' the contents when space allows? For instance in the screenshot below there's no reason to rely on scrolling:
Adding a max-height to the focal point control, and disabling settings to stop jumping seem like good suggestions to try.
Adding a max-height to the focal point control, and disabling settings to stop jumping seem like good suggestions to try.
For sure, I'm going to take a stab at that. Thanks for chiming in @jameskoster!
Let's not lose sight of why we're trying the popover; the UI on trunk takes up way too much space, and perhaps more importantly; is not going to scale to support multiple background images.
I agree that the controls monopolize the space in the sidebar, and that something needs to change.
The only point I wanted to make is that we ought not to swap one problem (space) for another (UX headaches).
There's always a compromise, so I'm confident we'll arrive at something that works for most folks. 👍🏻
Could the popover 'hug' the contents when space allows? For instance in the screenshot below there's no reason to rely on scrolling:
I'm not sure that's the scenario @andrewserong was reporting on. Rather, if I understood the feedback correctly, it was the janky behavior of the popover in shorter viewport heights.
The popover has some sophisticated logic to position itself and adapt its height — so it does its best — but, if the contents of the popover are taller than the available window space, it loses the plot.
As said, I'll try to make the internals of the popover more static. I think that would help a lot.
Thanks!!