Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add duotone theme.json styles support #34667

Merged
merged 24 commits into from
Sep 29, 2021
Merged

Conversation

ajlende
Copy link
Contributor

@ajlende ajlende commented Sep 8, 2021

Description

Alternative to #34073
Fixes #33642

  • Refactored duotone.php to render to a CSS url() property instead of stylesheet + SVG.
  • Refactored duotone.js and added additional specificity for duotone editor styles.
  • Add a separate duotone selector for rendering duotone filter styles.
  • Render out duotone filters with the new value_func and value_args options from PRESETS_METADATA.

There are some features mentioned in #34037 that are not included here because they may be able to be implemented as follow-up PRs.

Testing Procedure

Configure theme.json

Add var:preset|duotone|<slug> or var(--wp--preset--duotone--<slug>) to your theme.json under styles.blocks.<block>.color.duotone.

<slug> is the kebab-case slug for a duotone filter that a theme supports found under settings.filter.duotone in theme.json.

<block> is the block to apply the filter to. It can be any block that supports duotone.

For example, on TT1 Blocks, you can add the following to the theme.json.

{
	"styles": {
		"blocks": {
			"core/cover": {
				"filter": {
					"duotone": "var:preset|duotone|blue-red"
				}
			},
			"core/image": {
				"filter": {
					"duotone": "var:preset|duotone|blue-red"
				}
			},
			"core/post-author": {
				"filter": {
					"duotone": "var:preset|duotone|blue-red"
				}
			},
			"core/post-featured-image": {
				"filter": {
					"duotone": "var:preset|duotone|blue-red"
				}
			}
		}
	}
}

Or for Skatepark you can add the following to the theme.json.

{
	"styles": {
		"blocks": {
			"core/cover": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			},
			"core/image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			},
			"core/post-author": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			},
			"core/post-featured-image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			}
		}
	}
}

Add blocks with theme duotone styles

Add the supported blocks to the post to see the default filter applied.

<!-- wp:post-author {"byline":"Duotone Post Author"} /-->

<!-- wp:post-featured-image /-->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cldup.com/8lhI-gKnI2.jpg" alt=""/><figcaption>Duotone Image</figcaption></figure>
<!-- /wp:image -->

<!-- wp:cover {"url":"https://cldup.com/8lhI-gKnI2.jpg","dimRatio":0} -->
<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="https://cldup.com/8lhI-gKnI2.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Duotone Cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Override duotone per block

Select a different duotone filter from the duotone toolbar to see the default filter overridden.

<!-- wp:post-author {"byline":"Duotone Post Author","style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} /-->

<!-- wp:post-featured-image {"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} /-->

<!-- wp:image {"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
<figure class="wp-block-image"><img src="https://cldup.com/8lhI-gKnI2.jpg" alt=""/><figcaption>Duotone Image</figcaption></figure>
<!-- /wp:image -->

<!-- wp:cover {"url":"https://cldup.com/8lhI-gKnI2.jpg","dimRatio":0,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="https://cldup.com/8lhI-gKnI2.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Duotone Cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Generated Styles

For the Skatepark example, these are the new global styles that get generated. The duotone filter SVGs get rendered separately in the footer because Safari doesn't like them as data URIs.

<style id="global-styles-inline-css" type="text/css">
body {
	/* ... */
	--wp--preset--duotone--default-filter: url('#wp-duotone-default-filter');
	--wp--preset--duotone--white-filter: url('#wp-duotone-white-filter');
	--wp--preset--duotone--red-filter: url('#wp-duotone-red-filter');
	--wp--preset--duotone--blue-filter: url('#wp-duotone-blue-filter');
	--wp--preset--duotone--blue-cream-filter: url('#wp-duotone-blue-cream-filter');
	--wp--preset--duotone--green-pink-filter: url('#wp-duotone-green-pink-filter');
	/* ... */
}
.wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background {
	filter: var(--wp--preset--duotone--blue-filter);
}
.wp-block-image img {
	filter: var(--wp--preset--duotone--blue-filter);
}
.wp-block-post-author .wp-block-post-author__avatar img {
	filter: var(--wp--preset--duotone--blue-filter);
}
.wp-block-post-featured-image img {
	filter: var(--wp--preset--duotone--blue-filter);
}
</style>

Each custom duotone preset override generates a style like this in the <head>.

<style id="wp-duotone-613973df747a8-inline-css" type="text/css">
.wp-duotone-613973df747a8 > .wp-block-cover__image-background, .wp-duotone-613973df747a8 > .wp-block-cover__video-background {
	filter: url('#wp-duotone-613973df747a8') !important;
}
</style>

Screenshots

Using Skatepark with blue-filter as the default filter in the left column overridden by blue-cream-filter in the right column.

comparison of the post author, post featured image, image, and cover blocks with blue filter in the left column and blue cream filter in the right column

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-author {"byline":"Duotone Post Author"} /-->

<!-- wp:post-featured-image /-->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg" alt=""/><figcaption>Duotone Image</figcaption></figure>
<!-- /wp:image -->

<!-- wp:cover {"url":"https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg"} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background" alt="" src="https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Duotone Cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-author {"byline":"Duotone Post Author Overridden","style":{"color":{"duotone":["#252B39","#F9EED4"]}}} /-->

<!-- wp:post-featured-image {"style":{"color":{"duotone":["#252B39","#F9EED4"]}}} /-->

<!-- wp:image {"style":{"color":{"duotone":["#252B39","#F9EED4"]}}} -->
<figure class="wp-block-image"><img src="https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg" alt=""/><figcaption>Duotone Image Overridden</figcaption></figure>
<!-- /wp:image -->

<!-- wp:cover {"url":"https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg","style":{"color":{"duotone":["#252B39","#F9EED4"]}}} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background" alt="" src="https://cdn.stocksnap.io/img-thumbs/960w/skateboard-skater_5OTFJYVYSE.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Duotone Cover Overridden</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Types of changes

New feature

@ajlende ajlende added [Type] Enhancement A suggestion for improvement. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Sep 8, 2021
@ajlende ajlende self-assigned this Sep 8, 2021
@ajlende ajlende force-pushed the add/duotone-theme-json-styles branch from 081c490 to 4c7bc53 Compare September 8, 2021 19:15
@github-actions
Copy link

github-actions bot commented Sep 8, 2021

Size Change: -1.47 kB (0%)

Total Size: 1.06 MB

Filename Size Change
build/block-editor/index.min.js 134 kB +60 B (0%)
build/block-library/blocks/gallery/editor-rtl.css 977 B -6 B (-1%)
build/block-library/blocks/gallery/editor.css 982 B -6 B (-1%)
build/block-library/editor-rtl.css 9.76 kB -2 B (0%)
build/block-library/editor.css 9.75 kB -2 B (0%)
build/block-library/index.min.js 146 kB -1.4 kB (-1%)
build/blocks/index.min.js 45.7 kB -1.27 kB (-3%)
build/components/index.min.js 210 kB +54 B (0%)
build/components/style-rtl.css 15.9 kB -36 B (0%)
build/components/style.css 15.9 kB -36 B (0%)
build/edit-navigation/style-rtl.css 3.71 kB +12 B (0%)
build/edit-navigation/style.css 3.7 kB +12 B (0%)
build/edit-post/index.min.js 29 kB +9 B (0%)
build/edit-post/style-rtl.css 7.19 kB +12 B (0%)
build/edit-post/style.css 7.18 kB +11 B (0%)
build/edit-site/index.min.js 28.4 kB +641 B (+2%)
build/edit-site/style-rtl.css 5.36 kB +147 B (+3%)
build/edit-site/style.css 5.36 kB +149 B (+3%)
build/edit-widgets/style-rtl.css 4.1 kB +10 B (0%)
build/edit-widgets/style.css 4.1 kB +9 B (0%)
build/editor/index.min.js 37.4 kB +10 B (0%)
build/editor/style.css 3.75 kB +1 B (0%)
build/format-library/index.min.js 5.68 kB +347 B (+7%) 🔍
build/format-library/style-rtl.css 571 B -97 B (-15%) 👏
build/format-library/style.css 571 B -99 B (-15%) 👏
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.19 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 13.9 kB
build/block-editor/style.css 13.9 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 600 B
build/block-library/blocks/button/style.css 600 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 488 B
build/block-library/blocks/media-text/style.css 485 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 568 B
build/block-library/blocks/navigation-link/editor.css 570 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 300 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.72 kB
build/block-library/blocks/navigation/editor.css 1.72 kB
build/block-library/blocks/navigation/style-rtl.css 1.48 kB
build/block-library/blocks/navigation/style.css 1.47 kB
build/block-library/blocks/navigation/view.min.js 2.74 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 198 B
build/block-library/blocks/page-list/style.css 198 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 138 B
build/block-library/blocks/post-content/editor.css 138 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 398 B
build/block-library/blocks/post-featured-image/editor.css 398 B
build/block-library/blocks/post-featured-image/style-rtl.css 143 B
build/block-library/blocks/post-featured-image/style.css 143 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 378 B
build/block-library/blocks/post-template/style.css 379 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 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 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 374 B
build/block-library/blocks/search/style.css 375 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.3 kB
build/block-library/blocks/social-links/style.css 1.3 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 853 B
build/block-library/common.css 849 B
build/block-library/reset-rtl.css 536 B
build/block-library/reset.css 536 B
build/block-library/style-rtl.css 10.3 kB
build/block-library/style.css 10.3 kB
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 669 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/compose/index.min.js 10.3 kB
build/core-data/index.min.js 12.3 kB
build/customize-widgets/index.min.js 11.1 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.45 kB
build/edit-navigation/index.min.js 15.3 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-widgets/index.min.js 15.7 kB
build/editor/style-rtl.css 3.76 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.28 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.5 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

lib/global-styles.php Outdated Show resolved Hide resolved
Comment on lines 247 to 255
/**
* Metadata for style properties that need to use the duotone selector.
*
* Each element is a direct mapping from the CSS property name to the
* path to the value in theme.json & block attributes.
*/
const DUOTONE_PROPERTIES_METADATA = array(
'filter' => array( 'color', 'duotone' ),
);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oandregal I see this as a stepping stone to eventually get us to a better way to configure styles that need different selectors. Since these selectors are still experimental (__experimentalSelector and __experimentalDuotone), I didn't want to worry too much about the final API yet.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is nice but has the drawback to have to consider the two arrays in other methods (remove_insecure_styles). I've pushed a tweak and commenting at #34667 (comment)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've reverted the change I had done, so we need to make this work with remove_insecure_styles. There're some tests we can update to consider duotone at WP_Theme_JSON_Gutenberg_Test.test_remove_insecure_properties_removes_unsafe_styles

@ajlende ajlende force-pushed the add/duotone-theme-json-styles branch 4 times, most recently from 7a38413 to 82dd4b9 Compare September 8, 2021 19:57
@ajlende ajlende force-pushed the add/duotone-theme-json-styles branch from 82dd4b9 to bbdd7ab Compare September 8, 2021 23:36
lib/block-supports/duotone.php Outdated Show resolved Hide resolved
lib/block-supports/duotone.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json-gutenberg.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json-gutenberg.php Show resolved Hide resolved
@ajlende ajlende force-pushed the add/duotone-theme-json-styles branch 2 times, most recently from 741c0ee to ec86c0b Compare September 9, 2021 02:32
@ajlende ajlende force-pushed the add/duotone-theme-json-styles branch from b5f777f to 8c421cc Compare September 9, 2021 02:53
Comment on lines +355 to +359
// !important is needed because these styles render before global styles,
// and they should be overriding the duotone filters set by global styles.
$filter_style = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG
? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n"
: $selector . '{filter:' . $filter_property . ' !important;}';
Copy link
Contributor Author

@ajlende ajlende Sep 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be safe to add specificity by prepending this with .wp-site-blocks instead of using !important? Can I count on having that as a container? Is it weird to use body instead of that class if it's not available?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can rely on .wp-site-blocks, but i do wonder if this is a valid use of !important - since this is a setting on an individual block, I think it should always take precedence over other CSS.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was mention of a similar situation for elements block supports in the #core-editor Slack today.

The linked issue is #33437 and there's a fix by removing !important in #34689. That issue is caused by the cascade and because sometimes buttons, that we want to style differently, use the <a> tag.

The filter property doesn't cascade the same way, so we're probably fine here. But the elements block supports goes to show that just because we're setting an individual block, !important still might not be safe to use.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a specific need for the duotone filters to be enqueued before the global styles?

Copy link
Member

@oandregal oandregal Sep 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, if we can make it work without the !important is nice.

The issue with #33437 was that .wp-element-* a targeted any a element in a container (group with paragraph with link + button + social link blocks). So the issue was about how unspecific the selector was. Which makes me think: is it possible that the container with the .wp-duotone-ID has an image with duotone and another without it? I'm just not familiar with all the blocks this can affect to. I can't think of any off the top of my head.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More context about where we use !important: we use it in the preset classes, such as .has-{value}-color to make sure the user selection is respected despite its low specificity. More context #29533

In the case of the link color, it was probably too much due to the wide reach of the selector and side-effects. We're reverting it in this case if the current PR seems solid.

@oandregal
Copy link
Member

Hey, this isn't working. Apparently, we create the CSS Custom Property --wp--preset--duotone--blue-red but the filter is attached to filter: var(--wp--preset--duotone-filter--blue-red).

@oandregal
Copy link
Member

Re: remove_insecure_styles

The current filters work in a couple of situations: when the user doesn't have unfiltered_html permission and when importing content. If we don't do this in this PR, what happens is that the duotone provided by the user would be ignored. Those aren't scenarios we need to make this work via theme.json and it won't be insecure to do this in a follow-up, so we're fine if we prefer to defer that work to a follow-up.

Note that there's the gutenberg_global_styles_include_support_for_wp_variables to which we can add the filter property.

@ajlende
Copy link
Contributor Author

ajlende commented Sep 28, 2021

Hey, this isn't working. Apparently, we create the CSS Custom Property --wp--preset--duotone--blue-red but the filter is attached to filter: var(--wp--preset--duotone-filter--blue-red).

Check your style.color.duotone in theme.json—that's where the variable is defined that gets attached to the filter property. You might have to update that if you were using duotone-filter there before. 🙂

That being said, I forgot to update the duotone ids to match the CSS variables, so I've taken care of that in df50ef0.

@oandregal
Copy link
Member

Check your style.color.duotone in theme.json—that's where the variable is defined that gets attached to the filter property. You might have to update that if you were using duotone-filter there before. slightly_smiling_face

Oh, brilliant, I did have the older name in my theme.json 🤦‍♂️

@ajlende
Copy link
Contributor Author

ajlende commented Sep 28, 2021

Talked to @mtias and he gave the following reasoning for putting it under filter instead of color

I lean towards styles.filters.duotone conceptually
even if we were to have settings.color.palette.duotone for a palette definition
it’s conceivable duotone palettes could be used for more than duotone filters
either as gradient backgrounds or masks or something else

Updated in 008c5d5

@MaggieCabrera
Copy link
Contributor

Thank you for this! I'm implementing this for Skatepark and I found a couple minor issues in the editor/inserter:

The thumbnail for block patterns that use duotone won't show the filter applied:
Screenshot 2021-09-29 at 17 22 27

The site editor shows the image without a filter but the frontend works fine. The post editor when I insert an image does work fine:
Screenshot 2021-09-29 at 17 22 51

You can test on Skatepark applying Automattic/themes#4740

@oandregal
Copy link
Member

@ajlende I've prepared #35228 as a follow-up to simplify preset metadata. It prepares the code so the changes for kses are easier to make.

@ajlende
Copy link
Contributor Author

ajlende commented Sep 29, 2021

The site editor must not render the admin_footer hook where the duotone filters are being applied.

And the thumbnail is going to be tricky because its in an iframe—we're going to need some way for duotone to put the SVG filters into that iframe.

I have an idea for how to fix the site editor that I can get to tomorrow. But I'm not sure where to start for the thumbnail, so if anyone has thoughts on a good way to go about dealing with that iframe let me know.

@jasmussen
Copy link
Contributor

CC: @ellatrix in case you have any thoughts on the thumbnails. Alex do we need to load into that iframe an additional stylesheet?

@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Sep 30, 2021

And the thumbnail is going to be tricky because its in an iframe—we're going to need some way for duotone to put the SVG filters into that iframe.

Just so you know, the thumbnails were working with duotone when the filter was directly applied in the markup of the block. It just broke after my PR linked above for Skatepark.

@oandregal
Copy link
Member

I've prepared #35255 allows presets to use the newly introduced value_func in remove_insecure_settings.

@oandregal
Copy link
Member

#35318 allows users to store duotone data via remove_insecure_styles (needed to make sure duotone works in the global styles sidebar).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Duotone filter: Allow theme.json to set default filters for blocks
6 participants