Block Supports: Add border color, style and width support #30124
Conversation
@nosolosw I've made a start on adding the extra properties to the border block support. It would be great if you could spare a few moments to sanity check the approach taken for the border colors. Thanks in advance! |
Size Change: +1.07 kB (0%) Total Size: 1.43 MB
|
Filename | Size | Change |
---|---|---|
build/a11y/index.js |
1.14 kB | 0 B |
build/autop/index.js |
2.82 kB | 0 B |
build/blob/index.js |
665 B | 0 B |
build/block-directory/style-rtl.css |
1 kB | 0 B |
build/block-directory/style.css |
1.01 kB | 0 B |
build/block-library/blocks/archives/editor-rtl.css |
61 B | 0 B |
build/block-library/blocks/archives/editor.css |
60 B | 0 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B | 0 B |
build/block-library/blocks/audio/editor.css |
58 B | 0 B |
build/block-library/blocks/audio/style-rtl.css |
112 B | 0 B |
build/block-library/blocks/audio/style.css |
112 B | 0 B |
build/block-library/blocks/block/editor-rtl.css |
161 B | 0 B |
build/block-library/blocks/block/editor.css |
161 B | 0 B |
build/block-library/blocks/button/editor-rtl.css |
475 B | 0 B |
build/block-library/blocks/button/editor.css |
474 B | 0 B |
build/block-library/blocks/button/style-rtl.css |
503 B | 0 B |
build/block-library/blocks/button/style.css |
503 B | 0 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B | 0 B |
build/block-library/blocks/buttons/editor.css |
315 B | 0 B |
build/block-library/blocks/buttons/style-rtl.css |
364 B | 0 B |
build/block-library/blocks/buttons/style.css |
363 B | 0 B |
build/block-library/blocks/calendar/style-rtl.css |
208 B | 0 B |
build/block-library/blocks/calendar/style.css |
208 B | 0 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B | 0 B |
build/block-library/blocks/categories/editor.css |
83 B | 0 B |
build/block-library/blocks/categories/style-rtl.css |
79 B | 0 B |
build/block-library/blocks/categories/style.css |
79 B | 0 B |
build/block-library/blocks/code/style-rtl.css |
90 B | 0 B |
build/block-library/blocks/code/style.css |
90 B | 0 B |
build/block-library/blocks/columns/editor-rtl.css |
190 B | 0 B |
build/block-library/blocks/columns/editor.css |
190 B | 0 B |
build/block-library/blocks/columns/style-rtl.css |
436 B | 0 B |
build/block-library/blocks/columns/style.css |
435 B | 0 B |
build/block-library/blocks/cover/editor-rtl.css |
605 B | 0 B |
build/block-library/blocks/cover/editor.css |
605 B | 0 B |
build/block-library/blocks/cover/style-rtl.css |
1.23 kB | 0 B |
build/block-library/blocks/cover/style.css |
1.23 kB | 0 B |
build/block-library/blocks/embed/editor-rtl.css |
486 B | 0 B |
build/block-library/blocks/embed/editor.css |
486 B | 0 B |
build/block-library/blocks/embed/style-rtl.css |
401 B | 0 B |
build/block-library/blocks/embed/style.css |
400 B | 0 B |
build/block-library/blocks/file/editor-rtl.css |
175 B | 0 B |
build/block-library/blocks/file/editor.css |
174 B | 0 B |
build/block-library/blocks/file/style-rtl.css |
248 B | 0 B |
build/block-library/blocks/file/style.css |
248 B | 0 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.44 kB | 0 B |
build/block-library/blocks/freeform/editor.css |
2.44 kB | 0 B |
build/block-library/blocks/gallery/editor-rtl.css |
704 B | 0 B |
build/block-library/blocks/gallery/editor.css |
705 B | 0 B |
build/block-library/blocks/gallery/style-rtl.css |
1.09 kB | 0 B |
build/block-library/blocks/gallery/style.css |
1.09 kB | 0 B |
build/block-library/blocks/group/editor-rtl.css |
160 B | 0 B |
build/block-library/blocks/group/editor.css |
160 B | 0 B |
build/block-library/blocks/group/style-rtl.css |
57 B | 0 B |
build/block-library/blocks/group/style.css |
57 B | 0 B |
build/block-library/blocks/heading/editor-rtl.css |
129 B | 0 B |
build/block-library/blocks/heading/editor.css |
129 B | 0 B |
build/block-library/blocks/heading/style-rtl.css |
76 B | 0 B |
build/block-library/blocks/heading/style.css |
76 B | 0 B |
build/block-library/blocks/html/editor-rtl.css |
281 B | 0 B |
build/block-library/blocks/html/editor.css |
281 B | 0 B |
build/block-library/blocks/image/editor-rtl.css |
717 B | 0 B |
build/block-library/blocks/image/editor.css |
716 B | 0 B |
build/block-library/blocks/image/style-rtl.css |
476 B | 0 B |
build/block-library/blocks/image/style.css |
478 B | 0 B |
build/block-library/blocks/latest-comments/style-rtl.css |
281 B | 0 B |
build/block-library/blocks/latest-comments/style.css |
282 B | 0 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/editor.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/style-rtl.css |
523 B | 0 B |
build/block-library/blocks/latest-posts/style.css |
522 B | 0 B |
build/block-library/blocks/legacy-widget/editor-rtl.css |
398 B | 0 B |
build/block-library/blocks/legacy-widget/editor.css |
399 B | 0 B |
build/block-library/blocks/list/style-rtl.css |
63 B | 0 B |
build/block-library/blocks/list/style.css |
63 B | 0 B |
build/block-library/blocks/media-text/editor-rtl.css |
191 B | 0 B |
build/block-library/blocks/media-text/editor.css |
191 B | 0 B |
build/block-library/blocks/media-text/style-rtl.css |
535 B | 0 B |
build/block-library/blocks/media-text/style.css |
532 B | 0 B |
build/block-library/blocks/more/editor-rtl.css |
434 B | 0 B |
build/block-library/blocks/more/editor.css |
434 B | 0 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
597 B | 0 B |
build/block-library/blocks/navigation-link/editor.css |
597 B | 0 B |
build/block-library/blocks/navigation-link/style-rtl.css |
1.07 kB | 0 B |
build/block-library/blocks/navigation-link/style.css |
1.07 kB | 0 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.24 kB | 0 B |
build/block-library/blocks/navigation/editor.css |
1.24 kB | 0 B |
build/block-library/blocks/navigation/style-rtl.css |
204 B | 0 B |
build/block-library/blocks/navigation/style.css |
205 B | 0 B |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B | 0 B |
build/block-library/blocks/nextpage/editor.css |
395 B | 0 B |
build/block-library/blocks/page-list/editor-rtl.css |
239 B | 0 B |
build/block-library/blocks/page-list/editor.css |
240 B | 0 B |
build/block-library/blocks/page-list/style-rtl.css |
167 B | 0 B |
build/block-library/blocks/page-list/style.css |
167 B | 0 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B | 0 B |
build/block-library/blocks/paragraph/editor.css |
157 B | 0 B |
build/block-library/blocks/paragraph/style-rtl.css |
247 B | 0 B |
build/block-library/blocks/paragraph/style.css |
248 B | 0 B |
build/block-library/blocks/post-author/editor-rtl.css |
209 B | 0 B |
build/block-library/blocks/post-author/editor.css |
209 B | 0 B |
build/block-library/blocks/post-author/style-rtl.css |
183 B | 0 B |
build/block-library/blocks/post-author/style.css |
184 B | 0 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
250 B | 0 B |
build/block-library/blocks/post-comments-form/style.css |
250 B | 0 B |
build/block-library/blocks/post-content/editor-rtl.css |
139 B | 0 B |
build/block-library/blocks/post-content/editor.css |
139 B | 0 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B | 0 B |
build/block-library/blocks/post-excerpt/style.css |
69 B | 0 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/editor.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
100 B | 0 B |
build/block-library/blocks/post-featured-image/style.css |
100 B | 0 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B | 0 B |
build/block-library/blocks/preformatted/style.css |
103 B | 0 B |
build/block-library/blocks/pullquote/editor-rtl.css |
183 B | 0 B |
build/block-library/blocks/pullquote/editor.css |
183 B | 0 B |
build/block-library/blocks/pullquote/style-rtl.css |
318 B | 0 B |
build/block-library/blocks/pullquote/style.css |
318 B | 0 B |
build/block-library/blocks/query-loop/editor-rtl.css |
83 B | 0 B |
build/block-library/blocks/query-loop/editor.css |
82 B | 0 B |
build/block-library/blocks/query-loop/style-rtl.css |
315 B | 0 B |
build/block-library/blocks/query-loop/style.css |
317 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B | 0 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
270 B | 0 B |
build/block-library/blocks/query-pagination/editor.css |
262 B | 0 B |
build/block-library/blocks/query-pagination/style-rtl.css |
168 B | 0 B |
build/block-library/blocks/query-pagination/style.css |
168 B | 0 B |
build/block-library/blocks/query-title/editor-rtl.css |
86 B | 0 B |
build/block-library/blocks/query-title/editor.css |
86 B | 0 B |
build/block-library/blocks/query/editor-rtl.css |
795 B | 0 B |
build/block-library/blocks/query/editor.css |
794 B | 0 B |
build/block-library/blocks/quote/style-rtl.css |
169 B | 0 B |
build/block-library/blocks/quote/style.css |
169 B | 0 B |
build/block-library/blocks/rss/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/rss/editor.css |
202 B | 0 B |
build/block-library/blocks/rss/style-rtl.css |
290 B | 0 B |
build/block-library/blocks/rss/style.css |
290 B | 0 B |
build/block-library/blocks/search/editor-rtl.css |
189 B | 0 B |
build/block-library/blocks/search/editor.css |
189 B | 0 B |
build/block-library/blocks/search/style-rtl.css |
359 B | 0 B |
build/block-library/blocks/search/style.css |
362 B | 0 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B | 0 B |
build/block-library/blocks/separator/editor.css |
99 B | 0 B |
build/block-library/blocks/separator/style-rtl.css |
251 B | 0 B |
build/block-library/blocks/separator/style.css |
251 B | 0 B |
build/block-library/blocks/shortcode/editor-rtl.css |
512 B | 0 B |
build/block-library/blocks/shortcode/editor.css |
512 B | 0 B |
build/block-library/blocks/site-logo/editor-rtl.css |
438 B | 0 B |
build/block-library/blocks/site-logo/editor.css |
438 B | 0 B |
build/block-library/blocks/site-logo/style-rtl.css |
150 B | 0 B |
build/block-library/blocks/site-logo/style.css |
150 B | 0 B |
build/block-library/blocks/social-link/editor-rtl.css |
164 B | 0 B |
build/block-library/blocks/social-link/editor.css |
165 B | 0 B |
build/block-library/blocks/social-links/editor-rtl.css |
776 B | 0 B |
build/block-library/blocks/social-links/editor.css |
776 B | 0 B |
build/block-library/blocks/social-links/style-rtl.css |
1.32 kB | 0 B |
build/block-library/blocks/social-links/style.css |
1.33 kB | 0 B |
build/block-library/blocks/spacer/editor-rtl.css |
308 B | 0 B |
build/block-library/blocks/spacer/editor.css |
308 B | 0 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B | 0 B |
build/block-library/blocks/spacer/style.css |
48 B | 0 B |
build/block-library/blocks/table/editor-rtl.css |
478 B | 0 B |
build/block-library/blocks/table/editor.css |
478 B | 0 B |
build/block-library/blocks/table/style-rtl.css |
402 B | 0 B |
build/block-library/blocks/table/style.css |
402 B | 0 B |
build/block-library/blocks/tag-cloud/editor-rtl.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/editor.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
94 B | 0 B |
build/block-library/blocks/tag-cloud/style.css |
94 B | 0 B |
build/block-library/blocks/template-part/editor-rtl.css |
552 B | 0 B |
build/block-library/blocks/template-part/editor.css |
551 B | 0 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B | 0 B |
build/block-library/blocks/term-description/editor.css |
90 B | 0 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B | 0 B |
build/block-library/blocks/text-columns/editor.css |
95 B | 0 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B | 0 B |
build/block-library/blocks/text-columns/style.css |
166 B | 0 B |
build/block-library/blocks/verse/editor-rtl.css |
50 B | 0 B |
build/block-library/blocks/verse/editor.css |
50 B | 0 B |
build/block-library/blocks/verse/style-rtl.css |
87 B | 0 B |
build/block-library/blocks/verse/style.css |
87 B | 0 B |
build/block-library/blocks/video/editor-rtl.css |
504 B | 0 B |
build/block-library/blocks/video/editor.css |
503 B | 0 B |
build/block-library/blocks/video/style-rtl.css |
173 B | 0 B |
build/block-library/blocks/video/style.css |
173 B | 0 B |
build/block-library/common-rtl.css |
1.31 kB | 0 B |
build/block-library/common.css |
1.31 kB | 0 B |
build/block-library/editor-rtl.css |
9.76 kB | 0 B |
build/block-library/editor.css |
9.75 kB | 0 B |
build/block-library/reset-rtl.css |
502 B | 0 B |
build/block-library/reset.css |
503 B | 0 B |
build/block-library/style-rtl.css |
9.38 kB | 0 B |
build/block-library/style.css |
9.38 kB | 0 B |
build/block-library/theme-rtl.css |
692 B | 0 B |
build/block-library/theme.css |
693 B | 0 B |
build/block-serialization-default-parser/index.js |
1.87 kB | 0 B |
build/block-serialization-spec-parser/index.js |
3.06 kB | 0 B |
build/components/style-rtl.css |
16.3 kB | 0 B |
build/components/style.css |
16.3 kB | 0 B |
build/customize-widgets/style-rtl.css |
630 B | 0 B |
build/customize-widgets/style.css |
631 B | 0 B |
build/data-controls/index.js |
839 B | 0 B |
build/date/index.js |
31.9 kB | 0 B |
build/deprecated/index.js |
787 B | 0 B |
build/dom-ready/index.js |
576 B | 0 B |
build/edit-navigation/style-rtl.css |
2.86 kB | 0 B |
build/edit-navigation/style.css |
2.86 kB | 0 B |
build/edit-post/classic-rtl.css |
454 B | 0 B |
build/edit-post/classic.css |
454 B | 0 B |
build/edit-post/style-rtl.css |
6.94 kB | 0 B |
build/edit-post/style.css |
6.93 kB | 0 B |
build/edit-site/style-rtl.css |
4.61 kB | 0 B |
build/edit-site/style.css |
4.6 kB | 0 B |
build/edit-widgets/style-rtl.css |
2.97 kB | 0 B |
build/edit-widgets/style.css |
2.98 kB | 0 B |
build/editor/style-rtl.css |
3.92 kB | 0 B |
build/editor/style.css |
3.92 kB | 0 B |
build/escape-html/index.js |
735 B | 0 B |
build/format-library/style-rtl.css |
637 B | 0 B |
build/format-library/style.css |
639 B | 0 B |
build/hooks/index.js |
2.28 kB | 0 B |
build/html-entities/index.js |
623 B | 0 B |
build/is-shallow-equal/index.js |
699 B | 0 B |
build/list-reusable-blocks/index.js |
3.19 kB | 0 B |
build/list-reusable-blocks/style-rtl.css |
629 B | 0 B |
build/list-reusable-blocks/style.css |
628 B | 0 B |
build/nux/style-rtl.css |
731 B | 0 B |
build/nux/style.css |
727 B | 0 B |
build/priority-queue/index.js |
790 B | 0 B |
build/react-i18n/index.js |
1.46 kB | 0 B |
build/redux-routine/index.js |
2.84 kB | 0 B |
build/reusable-blocks/style-rtl.css |
225 B | 0 B |
build/reusable-blocks/style.css |
225 B | 0 B |
build/shortcode/index.js |
1.7 kB | 0 B |
build/token-list/index.js |
1.27 kB | 0 B |
build/viewport/index.js |
1.86 kB | 0 B |
build/warning/index.js |
1.14 kB | 0 B |
build/wordcount/index.js |
1.22 kB | 0 B |
Thanks for the time and effort on the review @grzim. Appreciate it |
0f3b345
to
c8071d9
I've rebased this PR and added skipping serialization of border support properties. There have also been a few inline comments added to help clarify the intent of the code. |
This tests well for me in both the editor and on the frontend, with various permutations of the available settings. I also tested enabling only a subset of the color/style/width/radius options in the LGTM, this would be a great addition |
Looking really good, thanks for your work on this one. Tested as per instructions and it worked well. |
A new border panel has been added to the Global Styles sidebar and the PRs testing instructions updated. This side of the changes could do with closer inspection and testing. |
...style, | ||
border: { | ||
...style?.border, | ||
color: colorObject?.slug ? undefined : value, |
ramonjd
Apr 12, 2021
•
Contributor
I'm just testing this PR and, for me, the border color panel doesn't add the border color inline style to the root element. The has-{color}-border-color
class is present however.
The result is that the border color doesn't change when I select a new border color.
Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.
If I change this line to color: colorObject?.color || value,
it works as I'd expect.
Is there a reason why the style prop should be undefined
here in the presence of colorObject?.slug
?
Or are there CSS definitions for .has-{color}-border-color
classes that I'm not seeing (or something else I'm missing)?
Thanks!
I'm just testing this PR and, for me, the border color panel doesn't add the border color inline style to the root element. The has-{color}-border-color
class is present however.
The result is that the border color doesn't change when I select a new border color.
Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.
If I change this line to color: colorObject?.color || value,
it works as I'd expect.
Is there a reason why the style prop should be undefined
here in the presence of colorObject?.slug
?
Or are there CSS definitions for .has-{color}-border-color
classes that I'm not seeing (or something else I'm missing)?
Thanks!
aaronrobertshaw
Apr 12, 2021
Author
Contributor
There's a good chance I missed something here so I'll look into it. Thanks for testing.
Is there a reason why the style prop should be undefined here?
This was undefined
so that when using a named color it uses the CSS classes generated for the color from the current palette. If it stored the color value there the inline style overrules it. This could become a problem if the theme changes the color palette or the user switches themes.
There's a good chance I missed something here so I'll look into it. Thanks for testing.
Is there a reason why the style prop should be undefined here?
This was undefined
so that when using a named color it uses the CSS classes generated for the color from the current palette. If it stored the color value there the inline style overrules it. This could become a problem if the theme changes the color palette or the user switches themes.
aaronrobertshaw
Apr 12, 2021
Author
Contributor
Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.
I have the suspicion that the theme sets the border color to the currentColor
which would be determined by the text color. The inline border style works for me when a border style is set though.
Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.
I have the suspicion that the theme sets the border color to the currentColor
which would be determined by the text color. The inline border style works for me when a border style is set though.
ramonjd
Apr 12, 2021
Contributor
This was undefined so that when using a named color it uses the CSS classes generated for the color from the current palette.
Thanks, that's what I suspected, was just scratching my head as to where those CSS class definitions were being (or should be) generated.
This was undefined so that when using a named color it uses the CSS classes generated for the color from the current palette.
Thanks, that's what I suspected, was just scratching my head as to where those CSS class definitions were being (or should be) generated.
ramonjd
Apr 12, 2021
Contributor
Thanks for the clarification. Just dropping here to add that I had the TwentyTwentyOne theme activated.
I could see the expected behaviour after switching to TT1 Blocks.
Thanks for the clarification. Just dropping here to add that I had the TwentyTwentyOne theme activated.
I could see the expected behaviour after switching to TT1 Blocks.
aaronrobertshaw
Apr 12, 2021
Author
Contributor
I've added the missing filter to force the inline styles for themes that don't load their color palettes in the editor.
Testing TwentyTwentyOne, the appropriate border colors are now correctly shown in the editor. The CSS classes on the frontend still do not appear to be having any effect there though.
I've added the missing filter to force the inline styles for themes that don't load their color palettes in the editor.
Testing TwentyTwentyOne, the appropriate border colors are now correctly shown in the editor. The CSS classes on the frontend still do not appear to be having any effect there though.
aaronrobertshaw
Apr 12, 2021
Author
Contributor
After a rebase, the named color css classes do work for the TwentyTwentyOne theme. TwentyTwenty and some other older themes don't look to be qualifying for the generation of the css classes via the theme.json. I'm still looking into those.
After a rebase, the named color css classes do work for the TwentyTwentyOne theme. TwentyTwenty and some other older themes don't look to be qualifying for the generation of the css classes via the theme.json. I'm still looking into those.
aaronrobertshaw
Apr 13, 2021
Author
Contributor
@nosolosw would you be able to point me in the right direction for getting the color styles generated from the theme.json color palette available for themes such as TwentyTwenty?
I believe the active theme currently has to satisfy this check before the necessary styles are included.
@nosolosw would you be able to point me in the right direction for getting the color styles generated from the theme.json color palette available for themes such as TwentyTwenty?
I believe the active theme currently has to satisfy this check before the necessary styles are included.
Passing these props prevents the need for the ColorGradientControl to retrieve the colors a second time.
This fixes issue where themes don't load their palettes in the editor. Approach is the same as the colors block support that was missed on first pass updating the borders block support.
7a2a25c
to
699895b
aaronrobertshaw commentedMar 23, 2021
•
edited
Fixes: #29616
Description
This PR extends the border related block support to include color, style and width options.
These border options are disabled by default.
How has this been tested?
Manually with a couple of small updates to existing unit tests.
Testing Instructions:
Unit Tests:
npm run test-unit:watch packages/block-editor/src/hooks/test/style.js
wp-env run phpunit "phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist /var/www/html/wp-content/plugins/gutenberg/phpunit/class-wp-theme-json-test.php"
Screenshots
Types of changes
New feature
Next steps
Checklist: