<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[54101] trunk/src/wp-includes/block-supports/duotone.php: Editor: Update duotone block supports to allow unset for preset colors.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/54101">54101</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/54101","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>SergeyBiryukov</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-09-08 14:32:07 +0000 (Thu, 08 Sep 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Editor: Update duotone block supports to allow unset for preset colors.
This add the ability to unset duotone in themes with default duotone set.
This commit backports the original PRs from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/39564 <a href="https://core.trac.wordpress.org/ticket/39564">#39564</a>: Add ability to unset duotone in themes with default duotone set]
* [https://github.com/WordPress/gutenberg/pull/42020 <a href="https://core.trac.wordpress.org/ticket/42020">#42020</a>: Remove: Unrequired regex search on duotone supports]
Follow-up to <a href="https://core.trac.wordpress.org/changeset/50929">[50929]</a>, <a href="https://core.trac.wordpress.org/changeset/52757">[52757]</a>.
Props ajlende, jorgefilipecosta, Joen, cbravobernal.
See <a href="https://core.trac.wordpress.org/ticket/56467">#56467</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportsduotonephp">trunk/src/wp-includes/block-supports/duotone.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblocksupportsduotonephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-supports/duotone.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-supports/duotone.php 2022-09-08 13:24:10 UTC (rev 54100)
+++ trunk/src/wp-includes/block-supports/duotone.php 2022-09-08 14:32:07 UTC (rev 54101)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -373,6 +373,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Returns the CSS filter property url to reference the rendered SVG.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.9.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.1.0 Allow unset for preset colors.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @access private
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $preset Duotone preset value as seen in theme.json.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -379,6 +380,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return string Duotone CSS filter property url value.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function wp_get_duotone_filter_property( $preset ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isset( $preset['colors'] ) && 'unset' === $preset['colors'] ) {
+ return 'none';
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> $filter_id = wp_get_duotone_filter_id( $preset );
</span><span class="cx" style="display: block; padding: 0 10px"> return "url('#" . $filter_id . "')";
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -458,7 +462,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Clean up the whitespace.
</span><span class="cx" style="display: block; padding: 0 10px"> $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $svg = preg_replace( '/> </', '><', $svg );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $svg = str_replace( '> <', '><', $svg );
</ins><span class="cx" style="display: block; padding: 0 10px"> $svg = trim( $svg );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -496,6 +500,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Render out the duotone stylesheet and SVG.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.1.0 Allow unset for preset colors.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @access private
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param string $block_content Rendered block content.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -519,13 +524,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return $block_content;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $colors = $block['attrs']['style']['color']['duotone'];
+ $filter_key = is_array( $colors ) ? implode( '-', $colors ) : $colors;
</ins><span class="cx" style="display: block; padding: 0 10px"> $filter_preset = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'slug' => wp_unique_id( sanitize_key( implode( '-', $block['attrs']['style']['color']['duotone'] ) . '-' ) ),
- 'colors' => $block['attrs']['style']['color']['duotone'],
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'slug' => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
+ 'colors' => $colors,
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> $filter_property = wp_get_duotone_filter_property( $filter_preset );
</span><span class="cx" style="display: block; padding: 0 10px"> $filter_id = wp_get_duotone_filter_id( $filter_preset );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $filter_svg = wp_get_duotone_filter_svg( $filter_preset );
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scope = '.' . $filter_id;
</span><span class="cx" style="display: block; padding: 0 10px"> $selectors = explode( ',', $duotone_support );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -545,27 +551,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_add_inline_style( $filter_id, $filter_style );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_style( $filter_id );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- add_action(
- 'wp_footer',
- static function () use ( $filter_svg, $selector ) {
- echo $filter_svg;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'unset' !== $colors ) {
+ $filter_svg = wp_get_duotone_filter_svg( $filter_preset );
+ add_action(
+ 'wp_footer',
+ static function () use ( $filter_svg, $selector ) {
+ echo $filter_svg;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /*
- * Safari renders elements incorrectly on first paint when the SVG
- * filter comes after the content that it is filtering, so we force
- * a repaint with a WebKit hack which solves the issue.
- */
- global $is_safari;
- if ( $is_safari ) {
- printf(
- // Simply accessing el.offsetHeight flushes layout and style
- // changes in WebKit without having to wait for setTimeout.
- '<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
- wp_json_encode( $selector )
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Safari renders elements incorrectly on first paint when the
+ * SVG filter comes after the content that it is filtering, so
+ * we force a repaint with a WebKit hack which solves the issue.
+ */
+ global $is_safari;
+ if ( $is_safari ) {
+ /*
+ * Simply accessing el.offsetHeight flushes layout and style
+ * changes in WebKit without having to wait for setTimeout.
+ */
+ printf(
+ '<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
+ wp_json_encode( $selector )
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
</span><span class="cx" style="display: block; padding: 0 10px"> return preg_replace(
</span></span></pre>
</div>
</div>
</body>
</html>