Global styles: background UI control labels #60264
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ramonjd
added
[Type] Copy
ramonjd
requested review from
noisysocks,
jameskoster,
tellthemachines and
andrewserong
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
69 tasks
|
Size Change: +1.17 kB (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Nice update! Code-change-wise this looks good, but it'd be good to see what the designers think. I'll just ping @richtabor for visibility, too, since he looked at some of the wording in the original feature.
Re: Select or upload image, would Add image be simpler?
noisysocks
reviewed
Mar 28, 2024
| @@ -135,7 +135,13 @@ export const backgroundPositionToCoords = ( value ) => { | |||
| }; | |||
|
|
|||
| function InspectorImagePreview( { label, filename, url: imgUrl } ) { | |||
| const imgLabel = label || getFilename( imgUrl ); | |||
| let imgLabel = label || getFilename( imgUrl ); | |||
| // getFilename returns 'undefined' as a string. | |||
There was a problem hiding this comment.
Why? Sounds like a bug we should fix.
There was a problem hiding this comment.
I just wrote that comment to explain why I wrote the condition that way. The PR above should fix it.
Yes. Or Y for short. 😄 I'll update. |
ramonjd
force-pushed
the
update/background-blocks-supports-labels
branch
from
a1467c8
to
4bd596e
Compare
|
At some point I can't help but wonder if we're going to have to group all background tools in the same panel. It feels a bit strange to me that I have to go to completely different sections in global styles to set background color and image. I digress. The spacing between the "Image" heading and the button here is too large: 
Ideally this is 12px to match other panels. Here's the button we find in the Site Logo block when no logo is set: 
Should we stylistically match here? The little 'unset' thumbnail doesn't seem to add much value. I go back and forth a bit on the headings/labels. It would be nice if the panel titles were consistent across. So if the panel title becomes more explicit "Background image", perhaps the global styles section could be "Background": 
Keen to hear Rich's thoughts on that. This has probably been discussed before, but when no image is set I wonder if we need to show the "Open media library" / "Upload" menu, rather than just opening the media library directly (where you can upload). This is how the Featured Image and Site Logo blocks work which feels more seamless. |
|
Thanks for the feedback!
When in doubt, chuck it out 😄 I think it can go.
I like this - it would simplify the interaction. Happy to get it going. Just to note, and in an attempt to centralize things, there are also some UI/UX related comments over on: One thing it would be helpful to resolve early from the above link is the defaults that Gutenberg sets, e.g., currently block's receive a |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Size Change: -104 B (0%)
Total Size: 1.72 MB
| Filename | Size | Change | |
|---|---|---|---|
build/block-editor/index.min.js |
254 kB | +213 B (0%) | |
build/block-editor/style-rtl.css |
15.6 kB | -44 B (0%) | |
build/block-editor/style.css |
15.6 kB | -40 B (0%) | |
build/block-library/index.min.js |
218 kB | -21 B (0%) | |
build/blocks/index.min.js |
51.9 kB | +83 B (0%) | |
build/components/index.min.js |
222 kB | -1.25 kB (-1%) | |
build/components/style-rtl.css |
11.8 kB | +1 B (0%) | |
build/components/style.css |
11.8 kB | -1 B (0%) | |
build/edit-post/index.min.js |
24 kB | -10 B (0%) | |
build/edit-site/index.min.js |
216 kB | -844 B (0%) | |
build/edit-site/style-rtl.css |
15.1 kB | +2 B (0%) | |
build/edit-site/style.css |
15.2 kB | +1 B (0%) | |
build/editor/index.min.js |
67.1 kB | +1.67 kB (+3%) | |
build/format-library/index.min.js |
8.11 kB | +7 B (0%) | |
build/preferences-persistence/index.min.js |
2.06 kB | +6 B (0%) | |
build/preferences/index.min.js |
2.83 kB | +17 B (+1%) | |
build/router/index.min.js |
1.88 kB | +103 B (+6%) | 🔍 |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
955 B |
build/annotations/index.min.js |
2.69 kB |
build/api-fetch/index.min.js |
2.32 kB |
build/autop/index.min.js |
2.1 kB |
build/blob/index.min.js |
578 B |
build/block-directory/index.min.js |
7.26 kB |
build/block-directory/style-rtl.css |
1.03 kB |
build/block-directory/style.css |
1.03 kB |
build/block-editor/content-rtl.css |
4.46 kB |
build/block-editor/content.css |
4.46 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 |
150 B |
build/block-library/blocks/audio/editor.css |
150 B |
build/block-library/blocks/audio/style-rtl.css |
122 B |
build/block-library/blocks/audio/style.css |
122 B |
build/block-library/blocks/audio/theme-rtl.css |
133 B |
build/block-library/blocks/audio/theme.css |
133 B |
build/block-library/blocks/avatar/editor-rtl.css |
116 B |
build/block-library/blocks/avatar/editor.css |
116 B |
build/block-library/blocks/avatar/style-rtl.css |
104 B |
build/block-library/blocks/avatar/style.css |
104 B |
build/block-library/blocks/block/editor-rtl.css |
305 B |
build/block-library/blocks/block/editor.css |
305 B |
build/block-library/blocks/button/editor-rtl.css |
415 B |
build/block-library/blocks/button/editor.css |
414 B |
build/block-library/blocks/button/style-rtl.css |
627 B |
build/block-library/blocks/button/style.css |
626 B |
build/block-library/blocks/buttons/editor-rtl.css |
337 B |
build/block-library/blocks/buttons/editor.css |
337 B |
build/block-library/blocks/buttons/style-rtl.css |
332 B |
build/block-library/blocks/buttons/style.css |
332 B |
build/block-library/blocks/calendar/style-rtl.css |
239 B |
build/block-library/blocks/calendar/style.css |
239 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 |
124 B |
build/block-library/blocks/code/theme.css |
124 B |
build/block-library/blocks/columns/editor-rtl.css |
108 B |
build/block-library/blocks/columns/editor.css |
108 B |
build/block-library/blocks/columns/style-rtl.css |
421 B |
build/block-library/blocks/columns/style.css |
421 B |
build/block-library/blocks/comment-author-avatar/editor-rtl.css |
125 B |
build/block-library/blocks/comment-author-avatar/editor.css |
125 B |
build/block-library/blocks/comment-content/style-rtl.css |
92 B |
build/block-library/blocks/comment-content/style.css |
92 B |
build/block-library/blocks/comment-template/style-rtl.css |
199 B |
build/block-library/blocks/comment-template/style.css |
198 B |
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css |
123 B |
build/block-library/blocks/comments-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/comments-pagination/editor-rtl.css |
222 B |
build/block-library/blocks/comments-pagination/editor.css |
209 B |
build/block-library/blocks/comments-pagination/style-rtl.css |
235 B |
build/block-library/blocks/comments-pagination/style.css |
231 B |
build/block-library/blocks/comments-title/editor-rtl.css |
75 B |
build/block-library/blocks/comments-title/editor.css |
75 B |
build/block-library/blocks/comments/editor-rtl.css |
840 B |
build/block-library/blocks/comments/editor.css |
839 B |
build/block-library/blocks/comments/style-rtl.css |
637 B |
build/block-library/blocks/comments/style.css |
636 B |
build/block-library/blocks/cover/editor-rtl.css |
647 B |
build/block-library/blocks/cover/editor.css |
650 B |
build/block-library/blocks/cover/style-rtl.css |
1.7 kB |
build/block-library/blocks/cover/style.css |
1.69 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 |
98 B |
build/block-library/blocks/details/style.css |
98 B |
build/block-library/blocks/embed/editor-rtl.css |
322 B |
build/block-library/blocks/embed/editor.css |
322 B |
build/block-library/blocks/embed/style-rtl.css |
410 B |
build/block-library/blocks/embed/style.css |
410 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 |
327 B |
build/block-library/blocks/file/style-rtl.css |
280 B |
build/block-library/blocks/file/style.css |
281 B |
build/block-library/blocks/file/view.min.js |
324 B |
build/block-library/blocks/footnotes/style-rtl.css |
201 B |
build/block-library/blocks/footnotes/style.css |
199 B |
build/block-library/blocks/form-input/editor-rtl.css |
227 B |
build/block-library/blocks/form-input/editor.css |
227 B |
build/block-library/blocks/form-input/style-rtl.css |
343 B |
build/block-library/blocks/form-input/style.css |
343 B |
build/block-library/blocks/form-submission-notification/editor-rtl.css |
340 B |
build/block-library/blocks/form-submission-notification/editor.css |
340 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 |
471 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.61 kB |
build/block-library/blocks/freeform/editor.css |
2.61 kB |
build/block-library/blocks/gallery/editor-rtl.css |
947 B |
build/block-library/blocks/gallery/editor.css |
952 B |
build/block-library/blocks/gallery/style-rtl.css |
1.72 kB |
build/block-library/blocks/gallery/style.css |
1.72 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 |
647 B |
build/block-library/blocks/group/editor.css |
647 B |
build/block-library/blocks/group/style-rtl.css |
57 B |
build/block-library/blocks/group/style.css |
57 B |
build/block-library/blocks/group/theme-rtl.css |
78 B |
build/block-library/blocks/group/theme.css |
78 B |
build/block-library/blocks/heading/style-rtl.css |
189 B |
build/block-library/blocks/heading/style.css |
189 B |
build/block-library/blocks/html/editor-rtl.css |
336 B |
build/block-library/blocks/html/editor.css |
337 B |
build/block-library/blocks/image/editor-rtl.css |
878 B |
build/block-library/blocks/image/editor.css |
878 B |
build/block-library/blocks/image/style-rtl.css |
1.6 kB |
build/block-library/blocks/image/style.css |
1.59 kB |
build/block-library/blocks/image/theme-rtl.css |
133 B |
build/block-library/blocks/image/theme.css |
133 B |
build/block-library/blocks/image/view.min.js |
1.54 kB |
build/block-library/blocks/latest-comments/style-rtl.css |
357 B |
build/block-library/blocks/latest-comments/style.css |
357 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
213 B |
build/block-library/blocks/latest-posts/editor.css |
212 B |
build/block-library/blocks/latest-posts/style-rtl.css |
478 B |
build/block-library/blocks/latest-posts/style.css |
478 B |
build/block-library/blocks/list/style-rtl.css |
88 B |
build/block-library/blocks/list/style.css |
88 B |
build/block-library/blocks/media-text/editor-rtl.css |
306 B |
build/block-library/blocks/media-text/editor.css |
305 B |
build/block-library/blocks/media-text/style-rtl.css |
505 B |
build/block-library/blocks/media-text/style.css |
503 B |
build/block-library/blocks/more/editor-rtl.css |
431 B |
build/block-library/blocks/more/editor.css |
431 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
668 B |
build/block-library/blocks/navigation-link/editor.css |
669 B |
build/block-library/blocks/navigation-link/style-rtl.css |
259 B |
build/block-library/blocks/navigation-link/style.css |
257 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
296 B |
build/block-library/blocks/navigation-submenu/editor.css |
295 B |
build/block-library/blocks/navigation/editor-rtl.css |
2.26 kB |
build/block-library/blocks/navigation/editor.css |
2.26 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.02 kB |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B |
build/block-library/blocks/nextpage/editor.css |
395 B |
build/block-library/blocks/page-list/editor-rtl.css |
377 B |
build/block-library/blocks/page-list/editor.css |
377 B |
build/block-library/blocks/page-list/style-rtl.css |
175 B |
build/block-library/blocks/page-list/style.css |
175 B |
build/block-library/blocks/paragraph/editor-rtl.css |
235 B |
build/block-library/blocks/paragraph/editor.css |
235 B |
build/block-library/blocks/paragraph/style-rtl.css |
335 B |
build/block-library/blocks/paragraph/style.css |
335 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 |
508 B |
build/block-library/blocks/post-comments-form/style.css |
508 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 |
61 B |
build/block-library/blocks/post-date/style.css |
61 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 |
666 B |
build/block-library/blocks/post-featured-image/editor.css |
662 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
342 B |
build/block-library/blocks/post-featured-image/style.css |
342 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 |
409 B |
build/block-library/blocks/post-template/style.css |
408 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 |
69 B |
build/block-library/blocks/post-time-to-read/style.css |
69 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 |
135 B |
build/block-library/blocks/pullquote/editor.css |
135 B |
build/block-library/blocks/pullquote/style-rtl.css |
354 B |
build/block-library/blocks/pullquote/style.css |
354 B |
build/block-library/blocks/pullquote/theme-rtl.css |
174 B |
build/block-library/blocks/pullquote/theme.css |
174 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
221 B |
build/block-library/blocks/query-pagination/editor.css |
211 B |
build/block-library/blocks/query-pagination/style-rtl.css |
288 B |
build/block-library/blocks/query-pagination/style.css |
284 B |
build/block-library/blocks/query-title/style-rtl.css |
63 B |
build/block-library/blocks/query-title/style.css |
63 B |
build/block-library/blocks/query/editor-rtl.css |
486 B |
build/block-library/blocks/query/editor.css |
486 B |
build/block-library/blocks/query/view.min.js |
958 B |
build/block-library/blocks/quote/style-rtl.css |
237 B |
build/block-library/blocks/quote/style.css |
237 B |
build/block-library/blocks/quote/theme-rtl.css |
233 B |
build/block-library/blocks/quote/theme.css |
235 B |
build/block-library/blocks/read-more/style-rtl.css |
140 B |
build/block-library/blocks/read-more/style.css |
140 B |
build/block-library/blocks/rss/editor-rtl.css |
149 B |
build/block-library/blocks/rss/editor.css |
149 B |
build/block-library/blocks/rss/style-rtl.css |
289 B |
build/block-library/blocks/rss/style.css |
288 B |
build/block-library/blocks/search/editor-rtl.css |
184 B |
build/block-library/blocks/search/editor.css |
184 B |
build/block-library/blocks/search/style-rtl.css |
629 B |
build/block-library/blocks/search/style.css |
628 B |
build/block-library/blocks/search/theme-rtl.css |
114 B |
build/block-library/blocks/search/theme.css |
114 B |
build/block-library/blocks/search/view.min.js |
478 B |
build/block-library/blocks/separator/editor-rtl.css |
146 B |
build/block-library/blocks/separator/editor.css |
146 B |
build/block-library/blocks/separator/style-rtl.css |
229 B |
build/block-library/blocks/separator/style.css |
229 B |
build/block-library/blocks/separator/theme-rtl.css |
194 B |
build/block-library/blocks/separator/theme.css |
194 B |
build/block-library/blocks/shortcode/editor-rtl.css |
323 B |
build/block-library/blocks/shortcode/editor.css |
323 B |
build/block-library/blocks/site-logo/editor-rtl.css |
754 B |
build/block-library/blocks/site-logo/editor.css |
754 B |
build/block-library/blocks/site-logo/style-rtl.css |
204 B |
build/block-library/blocks/site-logo/style.css |
204 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
86 B |
build/block-library/blocks/site-tagline/editor.css |
86 B |
build/block-library/blocks/site-title/editor-rtl.css |
116 B |
build/block-library/blocks/site-title/editor.css |
116 B |
build/block-library/blocks/site-title/style-rtl.css |
57 B |
build/block-library/blocks/site-title/style.css |
57 B |
build/block-library/blocks/social-link/editor-rtl.css |
184 B |
build/block-library/blocks/social-link/editor.css |
184 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.48 kB |
build/block-library/blocks/social-links/style.css |
1.48 kB |
build/block-library/blocks/spacer/editor-rtl.css |
350 B |
build/block-library/blocks/spacer/editor.css |
350 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 |
395 B |
build/block-library/blocks/table/editor.css |
395 B |
build/block-library/blocks/table/style-rtl.css |
639 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 |
251 B |
build/block-library/blocks/tag-cloud/style.css |
253 B |
build/block-library/blocks/template-part/editor-rtl.css |
431 B |
build/block-library/blocks/template-part/editor.css |
431 B |
build/block-library/blocks/template-part/theme-rtl.css |
107 B |
build/block-library/blocks/template-part/theme.css |
107 B |
build/block-library/blocks/term-description/style-rtl.css |
111 B |
build/block-library/blocks/term-description/style.css |
111 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B |
build/block-library/blocks/text-columns/editor.css |
95 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B |
build/block-library/blocks/text-columns/style.css |
166 B |
build/block-library/blocks/verse/style-rtl.css |
99 B |
build/block-library/blocks/verse/style.css |
99 B |
build/block-library/blocks/video/editor-rtl.css |
552 B |
build/block-library/blocks/video/editor.css |
555 B |
build/block-library/blocks/video/style-rtl.css |
185 B |
build/block-library/blocks/video/style.css |
185 B |
build/block-library/blocks/video/theme-rtl.css |
133 B |
build/block-library/blocks/video/theme.css |
133 B |
build/block-library/classic-rtl.css |
179 B |
build/block-library/classic.css |
179 B |
build/block-library/common-rtl.css |
1.11 kB |
build/block-library/common.css |
1.11 kB |
build/block-library/editor-elements-rtl.css |
75 B |
build/block-library/editor-elements.css |
75 B |
build/block-library/editor-rtl.css |
12.4 kB |
build/block-library/editor.css |
12.4 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/style-rtl.css |
14.8 kB |
build/block-library/style.css |
14.8 kB |
build/block-library/theme-rtl.css |
707 B |
build/block-library/theme.css |
713 B |
build/block-serialization-default-parser/index.min.js |
1.12 kB |
build/block-serialization-spec-parser/index.min.js |
2.87 kB |
build/commands/index.min.js |
15.6 kB |
build/commands/style-rtl.css |
956 B |
build/commands/style.css |
953 B |
build/compose/index.min.js |
12.6 kB |
build/core-commands/index.min.js |
2.77 kB |
build/core-data/index.min.js |
72.9 kB |
build/customize-widgets/index.min.js |
11.2 kB |
build/customize-widgets/style-rtl.css |
1.36 kB |
build/customize-widgets/style.css |
1.36 kB |
build/data-controls/index.min.js |
640 B |
build/data/index.min.js |
8.98 kB |
build/date/index.min.js |
17.9 kB |
build/deprecated/index.min.js |
451 B |
build/dom-ready/index.min.js |
324 B |
build/dom/index.min.js |
4.65 kB |
build/edit-post/classic-rtl.css |
578 B |
build/edit-post/classic.css |
579 B |
build/edit-post/style-rtl.css |
5.56 kB |
build/edit-post/style.css |
5.56 kB |
build/edit-widgets/index.min.js |
17.4 kB |
build/edit-widgets/style-rtl.css |
4.15 kB |
build/edit-widgets/style.css |
4.15 kB |
build/editor/style-rtl.css |
5.43 kB |
build/editor/style.css |
5.43 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/style-rtl.css |
492 B |
build/format-library/style.css |
490 B |
build/hooks/index.min.js |
1.55 kB |
build/html-entities/index.min.js |
448 B |
build/i18n/index.min.js |
3.58 kB |
build/interactivity/file.min.js |
447 B |
build/interactivity/image.min.js |
1.67 kB |
build/interactivity/index.min.js |
13 kB |
build/interactivity/navigation.min.js |
1.15 kB |
build/interactivity/query.min.js |
740 B |
build/interactivity/router.min.js |
1.36 kB |
build/interactivity/search.min.js |
618 B |
build/is-shallow-equal/index.min.js |
527 B |
build/keyboard-shortcuts/index.min.js |
1.74 kB |
build/keycodes/index.min.js |
1.46 kB |
build/list-reusable-blocks/index.min.js |
2.11 kB |
build/list-reusable-blocks/style-rtl.css |
851 B |
build/list-reusable-blocks/style.css |
849 B |
build/media-utils/index.min.js |
2.92 kB |
build/modules/importmap-polyfill.min.js |
12.2 kB |
build/notices/index.min.js |
948 B |
build/nux/index.min.js |
2 kB |
build/nux/style-rtl.css |
747 B |
build/nux/style.css |
742 B |
build/patterns/index.min.js |
5.73 kB |
build/patterns/style-rtl.css |
553 B |
build/patterns/style.css |
552 B |
build/plugins/index.min.js |
1.8 kB |
build/preferences/style-rtl.css |
710 B |
build/preferences/style.css |
712 B |
build/primitives/index.min.js |
975 B |
build/priority-queue/index.min.js |
1.52 kB |
build/private-apis/index.min.js |
1 kB |
build/react-i18n/index.min.js |
623 B |
build/react-refresh-entry/index.min.js |
9.47 kB |
build/react-refresh-runtime/index.min.js |
6.78 kB |
build/redux-routine/index.min.js |
2.7 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.5 kB |
build/server-side-render/index.min.js |
1.96 kB |
build/shortcode/index.min.js |
1.39 kB |
build/style-engine/index.min.js |
2.03 kB |
build/token-list/index.min.js |
582 B |
build/url/index.min.js |
3.74 kB |
build/vendors/inert-polyfill.min.js |
2.48 kB |
build/vendors/react-dom.min.js |
41.7 kB |
build/vendors/react.min.js |
4.02 kB |
build/viewport/index.min.js |
957 B |
build/warning/index.min.js |
249 B |
build/widgets/index.min.js |
7.22 kB |
build/widgets/style-rtl.css |
1.17 kB |
build/widgets/style.css |
1.17 kB |
build/wordcount/index.min.js |
1.02 kB |
It would be good to set something. The 
Cover seems a reasonable default. I'm not sure we can reliably anticipate the users needs – in most cases it seems likely they'll want to adjust with the settings. |
That's how the site logo block works as well. I like it as well.
We use "Cover" as default within the Group block's styles panel:
I think it's an acceptable default. As an aside, I think the global styles and block's panel should both be the same UI/X): |
Agreed. |
|
Thanks for the help @jameskoster and @richtabor I'll get onto this ASAP 👍🏻 |
My only concern with Cover as a default for site wide backgrounds is that I think it's much more common for site wide backgrounds to be repeating backgrounds, since Cover will stretch to different sizes on different pages. So for site wide backgrounds, Fixed felt like a better default to me. |
I forgot to mention, "Fixed" is basically We could indicate that in the control as well. |
1 task
|
Here's a WIP PR that standardizes Gutenberg's default for background-size — sets it to "cover" — and so on in global styles. Just to note, there's also a PR in the works for block global styles as well, which will follow this example as well.
I'll do this in a separate PR. 👍🏻 |
ramonjd
force-pushed
the
update/background-blocks-supports-labels
branch
from
397c38f
to
206ff3b
Compare
|
I think this PR is ready for more 👀 It's deals only with:
This was done in #60490
I'm going to work on this in a separate PR 👍🏻
This is going to come to a head soon, and we'll probably need to find a way to at least categorize gradient and image backgrounds neatly. Color could come along for the ride as well. I'm tracking the following issues:
Thank you! |
|
Another option for global styles is for the background size panel to show by default in the site editor for top-level styles, but only when there's an image available: 2024-04-12.10.44.07.mp4It's slight deviation from the block editor UX, but maybe useful for folks to tweak background images? I haven't committed to this branch, but can if folks think it's okay. |
ramonjd
force-pushed
the
update/background-blocks-supports-labels
branch
from
a55afaa
to
b162181
Compare
|
Nice updates, it's testing well for me so far!
I really like that idea. At the moment in this PR if you go to add an image, you have to know that the controls are there, and I suspect it'll be very common for folks to want to make adjustments as soon as they've added an image. Exposing the controls by default (but only in the global styles panel) once an image has been added sounds good to me 👍 |
|
Thank for the quick feedback! Done. |
andrewserong
approved these changes
Apr 12, 2024
There was a problem hiding this comment.
Thanks for the update! The code change looks good, and it's all working nicely for me now, with the size exposed by default in global styles (but not when adding an image at the block level in post content):
2024-04-12.15.38.20.mp4
It'd be worth double checking with @jameskoster and @richtabor that they're happy with the change from a design angle (I believe Rich did a bunch of polishing work on the styling of the button previously), but this looks good to me! 🎉
- Background > Background image - Using the title/url of the current image in the media uploader component
Harmonize tools panels
…top-level styles, but only when there's an image available. Using constant for "image"
ramonjd
force-pushed
the
update/background-blocks-supports-labels
branch
from
ee0bdf5
to
911089f
Compare
|
A couple of minor visual details to tweak: 
In global styles, would it make sense to auto-expose the size controls only when an image is present? I do wonder whether size should even be separate. The situations in which you'd want to set a background image and not modify at least one of those settings seems almost edge case to me. I suppose this would be addressed if we moved the controls to a popover like the following concept, but I'm not sure if that's on the cards? 
|
|
Thanks again @jameskoster
Just checked and the row gap of each is Anyway it's been fixed 👍🏻 
Done! It looks like we have several different border colors, so it's all relative 😄 
Also already done in 133f9c0 👍🏻 2024-04-16.08.28.46.mp4
I was investigating the popover concept in #60151 (comment) but realized that it could require some toolspanel refactoring if we want the ellipsis menus to work consistently. Another option could be to split the position and size controls? |
|
Oh that's strange, glad to see everything is addressed though, thanks!
Fair enough. We probably need to agree on the long-term design for this before committing. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of:
Follow up to:
What?
This PR changes the heading labels for background block supports tools panel and global styles.
Post editor
Site editor
It also applies the following label logic for the media upload component:
truncatedImageTitle || truncatedImageFilename"Select or upload an image"See context: #59454 (comment)
Tip
This PR also harmonizes the tool panel items between block and site editors except for global styles, where the background size panel displays by default for top-level styles, but only when there's an image available.
Why?
To reduce confusion between background color. Since the only available functionality relates to background image, then I think it's okay to be precise.
Testing Instructions
I'm using 2024 to test.
"Background image"and the status of media upload component:"Select or upload an image""Select or upload an image"Testing Instructions for Keyboard
Screenshots or screencast
Post editor
Site editor