balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

duotone.php (11851B)


      1 <?php
      2 /**
      3  * Duotone block support flag.
      4  *
      5  * Parts of this source were derived and modified from TinyColor,
      6  * released under the MIT license.
      7  *
      8  * https://github.com/bgrins/TinyColor
      9  *
     10  * Copyright (c), Brian Grinstead, http://briangrinstead.com
     11  *
     12  * Permission is hereby granted, free of charge, to any person obtaining
     13  * a copy of this software and associated documentation files (the
     14  * "Software"), to deal in the Software without restriction, including
     15  * without limitation the rights to use, copy, modify, merge, publish,
     16  * distribute, sublicense, and/or sell copies of the Software, and to
     17  * permit persons to whom the Software is furnished to do so, subject to
     18  * the following conditions:
     19  *
     20  * The above copyright notice and this permission notice shall be
     21  * included in all copies or substantial portions of the Software.
     22  *
     23  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
     24  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
     25  * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
     26  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
     27  * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
     28  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
     29  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
     30  *
     31  * @package WordPress
     32  * @since 5.8.0
     33  */
     34 
     35 /**
     36  * Takes input from [0, n] and returns it as [0, 1].
     37  *
     38  * Direct port of TinyColor's function, lightly simplified to maintain
     39  * consistency with TinyColor.
     40  *
     41  * @see https://github.com/bgrins/TinyColor
     42  *
     43  * @since 5.8.0
     44  * @access private
     45  *
     46  * @param mixed $n   Number of unknown type.
     47  * @param int   $max Upper value of the range to bound to.
     48  *
     49  * @return float Value in the range [0, 1].
     50  */
     51 function wp_tinycolor_bound01( $n, $max ) {
     52 	if ( 'string' === gettype( $n ) && false !== strpos( $n, '.' ) && 1 === (float) $n ) {
     53 		$n = '100%';
     54 	}
     55 
     56 	$n = min( $max, max( 0, (float) $n ) );
     57 
     58 	// Automatically convert percentage into number.
     59 	if ( 'string' === gettype( $n ) && false !== strpos( $n, '%' ) ) {
     60 		$n = (int) ( $n * $max ) / 100;
     61 	}
     62 
     63 	// Handle floating point rounding errors.
     64 	if ( ( abs( $n - $max ) < 0.000001 ) ) {
     65 		return 1.0;
     66 	}
     67 
     68 	// Convert into [0, 1] range if it isn't already.
     69 	return ( $n % $max ) / (float) $max;
     70 }
     71 
     72 /**
     73  * Round and convert values of an RGB object.
     74  *
     75  * Direct port of TinyColor's function, lightly simplified to maintain
     76  * consistency with TinyColor.
     77  *
     78  * @see https://github.com/bgrins/TinyColor
     79  *
     80  * @since 5.8.0
     81  * @access private
     82  *
     83  * @param array $rgb_color RGB object.
     84  *
     85  * @return array Rounded and converted RGB object.
     86  */
     87 function wp_tinycolor_rgb_to_rgb( $rgb_color ) {
     88 	return array(
     89 		'r' => wp_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
     90 		'g' => wp_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
     91 		'b' => wp_tinycolor_bound01( $rgb_color['b'], 255 ) * 255,
     92 	);
     93 }
     94 
     95 /**
     96  * Helper function for hsl to rgb conversion.
     97  *
     98  * Direct port of TinyColor's function, lightly simplified to maintain
     99  * consistency with TinyColor.
    100  *
    101  * @see https://github.com/bgrins/TinyColor
    102  *
    103  * @since 5.8.0
    104  * @access private
    105  *
    106  * @param float $p first component.
    107  * @param float $q second component.
    108  * @param float $t third component.
    109  *
    110  * @return float R, G, or B component.
    111  */
    112 function wp_tinycolor_hue_to_rgb( $p, $q, $t ) {
    113 	if ( $t < 0 ) {
    114 		$t += 1;
    115 	}
    116 	if ( $t > 1 ) {
    117 		$t -= 1;
    118 	}
    119 	if ( $t < 1 / 6 ) {
    120 		return $p + ( $q - $p ) * 6 * $t;
    121 	}
    122 	if ( $t < 1 / 2 ) {
    123 		return $q;
    124 	}
    125 	if ( $t < 2 / 3 ) {
    126 		return $p + ( $q - $p ) * ( 2 / 3 - $t ) * 6;
    127 	}
    128 	return $p;
    129 }
    130 
    131 /**
    132  * Convert an HSL object to an RGB object with converted and rounded values.
    133  *
    134  * Direct port of TinyColor's function, lightly simplified to maintain
    135  * consistency with TinyColor.
    136  *
    137  * @see https://github.com/bgrins/TinyColor
    138  *
    139  * @since 5.8.0
    140  * @access private
    141  *
    142  * @param array $hsl_color HSL object.
    143  *
    144  * @return array Rounded and converted RGB object.
    145  */
    146 function wp_tinycolor_hsl_to_rgb( $hsl_color ) {
    147 	$h = wp_tinycolor_bound01( $hsl_color['h'], 360 );
    148 	$s = wp_tinycolor_bound01( $hsl_color['s'], 100 );
    149 	$l = wp_tinycolor_bound01( $hsl_color['l'], 100 );
    150 
    151 	if ( 0 === $s ) {
    152 		// Achromatic.
    153 		$r = $l;
    154 		$g = $l;
    155 		$b = $l;
    156 	} else {
    157 		$q = $l < 0.5 ? $l * ( 1 + $s ) : $l + $s - $l * $s;
    158 		$p = 2 * $l - $q;
    159 		$r = wp_tinycolor_hue_to_rgb( $p, $q, $h + 1 / 3 );
    160 		$g = wp_tinycolor_hue_to_rgb( $p, $q, $h );
    161 		$b = wp_tinycolor_hue_to_rgb( $p, $q, $h - 1 / 3 );
    162 	}
    163 
    164 	return array(
    165 		'r' => $r * 255,
    166 		'g' => $g * 255,
    167 		'b' => $b * 255,
    168 	);
    169 }
    170 
    171 /**
    172  * Parses hex, hsl, and rgb CSS strings using the same regex as TinyColor v1.4.2
    173  * used in the JavaScript. Only colors output from react-color are implemented
    174  * and the alpha value is ignored as it is not used in duotone.
    175  *
    176  * Direct port of TinyColor's function, lightly simplified to maintain
    177  * consistency with TinyColor.
    178  *
    179  * @see https://github.com/bgrins/TinyColor
    180  * @see https://github.com/casesandberg/react-color/
    181  *
    182  * @since 5.8.0
    183  * @access private
    184  *
    185  * @param string $color_str CSS color string.
    186  *
    187  * @return array RGB object.
    188  */
    189 function wp_tinycolor_string_to_rgb( $color_str ) {
    190 	$color_str = strtolower( trim( $color_str ) );
    191 
    192 	$css_integer = '[-\\+]?\\d+%?';
    193 	$css_number  = '[-\\+]?\\d*\\.\\d+%?';
    194 
    195 	$css_unit = '(?:' . $css_number . ')|(?:' . $css_integer . ')';
    196 
    197 	$permissive_match3 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
    198 	$permissive_match4 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
    199 
    200 	$rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
    201 	if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
    202 		return wp_tinycolor_rgb_to_rgb(
    203 			array(
    204 				'r' => $match[1],
    205 				'g' => $match[2],
    206 				'b' => $match[3],
    207 			)
    208 		);
    209 	}
    210 
    211 	$rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
    212 	if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
    213 		return wp_tinycolor_rgb_to_rgb(
    214 			array(
    215 				'r' => $match[1],
    216 				'g' => $match[2],
    217 				'b' => $match[3],
    218 			)
    219 		);
    220 	}
    221 
    222 	$hsl_regexp = '/^hsl' . $permissive_match3 . '$/';
    223 	if ( preg_match( $hsl_regexp, $color_str, $match ) ) {
    224 		return wp_tinycolor_hsl_to_rgb(
    225 			array(
    226 				'h' => $match[1],
    227 				's' => $match[2],
    228 				'l' => $match[3],
    229 			)
    230 		);
    231 	}
    232 
    233 	$hsla_regexp = '/^hsla' . $permissive_match4 . '$/';
    234 	if ( preg_match( $hsla_regexp, $color_str, $match ) ) {
    235 		return wp_tinycolor_hsl_to_rgb(
    236 			array(
    237 				'h' => $match[1],
    238 				's' => $match[2],
    239 				'l' => $match[3],
    240 			)
    241 		);
    242 	}
    243 
    244 	$hex8_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
    245 	if ( preg_match( $hex8_regexp, $color_str, $match ) ) {
    246 		return wp_tinycolor_rgb_to_rgb(
    247 			array(
    248 				'r' => base_convert( $match[1], 16, 10 ),
    249 				'g' => base_convert( $match[2], 16, 10 ),
    250 				'b' => base_convert( $match[3], 16, 10 ),
    251 			)
    252 		);
    253 	}
    254 
    255 	$hex6_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
    256 	if ( preg_match( $hex6_regexp, $color_str, $match ) ) {
    257 		return wp_tinycolor_rgb_to_rgb(
    258 			array(
    259 				'r' => base_convert( $match[1], 16, 10 ),
    260 				'g' => base_convert( $match[2], 16, 10 ),
    261 				'b' => base_convert( $match[3], 16, 10 ),
    262 			)
    263 		);
    264 	}
    265 
    266 	$hex4_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
    267 	if ( preg_match( $hex4_regexp, $color_str, $match ) ) {
    268 		return wp_tinycolor_rgb_to_rgb(
    269 			array(
    270 				'r' => base_convert( $match[1] . $match[1], 16, 10 ),
    271 				'g' => base_convert( $match[2] . $match[2], 16, 10 ),
    272 				'b' => base_convert( $match[3] . $match[3], 16, 10 ),
    273 			)
    274 		);
    275 	}
    276 
    277 	$hex3_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
    278 	if ( preg_match( $hex3_regexp, $color_str, $match ) ) {
    279 		return wp_tinycolor_rgb_to_rgb(
    280 			array(
    281 				'r' => base_convert( $match[1] . $match[1], 16, 10 ),
    282 				'g' => base_convert( $match[2] . $match[2], 16, 10 ),
    283 				'b' => base_convert( $match[3] . $match[3], 16, 10 ),
    284 			)
    285 		);
    286 	}
    287 }
    288 
    289 
    290 /**
    291  * Registers the style and colors block attributes for block types that support it.
    292  *
    293  * @since 5.8.0
    294  * @access private
    295  *
    296  * @param WP_Block_Type $block_type Block Type.
    297  */
    298 function wp_register_duotone_support( $block_type ) {
    299 	$has_duotone_support = false;
    300 	if ( property_exists( $block_type, 'supports' ) ) {
    301 		$has_duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
    302 	}
    303 
    304 	if ( $has_duotone_support ) {
    305 		if ( ! $block_type->attributes ) {
    306 			$block_type->attributes = array();
    307 		}
    308 
    309 		if ( ! array_key_exists( 'style', $block_type->attributes ) ) {
    310 			$block_type->attributes['style'] = array(
    311 				'type' => 'object',
    312 			);
    313 		}
    314 	}
    315 }
    316 
    317 /**
    318  * Render out the duotone stylesheet and SVG.
    319  *
    320  * @since 5.8.0
    321  * @access private
    322  *
    323  * @param string $block_content Rendered block content.
    324  * @param array  $block         Block object.
    325  *
    326  * @return string Filtered block content.
    327  */
    328 function wp_render_duotone_support( $block_content, $block ) {
    329 	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
    330 
    331 	$duotone_support = false;
    332 	if ( $block_type && property_exists( $block_type, 'supports' ) ) {
    333 		$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
    334 	}
    335 
    336 	$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
    337 
    338 	if (
    339 		! $duotone_support ||
    340 		! $has_duotone_attribute
    341 	) {
    342 		return $block_content;
    343 	}
    344 
    345 	$duotone_colors = $block['attrs']['style']['color']['duotone'];
    346 
    347 	$duotone_values = array(
    348 		'r' => array(),
    349 		'g' => array(),
    350 		'b' => array(),
    351 	);
    352 	foreach ( $duotone_colors as $color_str ) {
    353 		$color = wp_tinycolor_string_to_rgb( $color_str );
    354 
    355 		$duotone_values['r'][] = $color['r'] / 255;
    356 		$duotone_values['g'][] = $color['g'] / 255;
    357 		$duotone_values['b'][] = $color['b'] / 255;
    358 	}
    359 
    360 	$duotone_id = 'wp-duotone-filter-' . uniqid();
    361 
    362 	$selectors        = explode( ',', $duotone_support );
    363 	$selectors_scoped = array_map(
    364 		function ( $selector ) use ( $duotone_id ) {
    365 			return '.' . $duotone_id . ' ' . trim( $selector );
    366 		},
    367 		$selectors
    368 	);
    369 	$selectors_group  = implode( ', ', $selectors_scoped );
    370 
    371 	ob_start();
    372 
    373 	?>
    374 
    375 	<style>
    376 		<?php echo $selectors_group; ?> {
    377 			filter: url( <?php echo esc_url( '#' . $duotone_id ); ?> );
    378 		}
    379 	</style>
    380 
    381 	<svg
    382 		xmlns:xlink="http://www.w3.org/1999/xlink"
    383 		viewBox="0 0 0 0"
    384 		width="0"
    385 		height="0"
    386 		focusable="false"
    387 		role="none"
    388 		style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
    389 	>
    390 		<defs>
    391 			<filter id="<?php echo esc_attr( $duotone_id ); ?>">
    392 				<feColorMatrix
    393 					type="matrix"
    394 					<?php // phpcs:disable Generic.WhiteSpace.DisallowSpaceIndent ?>
    395 					values=".299 .587 .114 0 0
    396 							.299 .587 .114 0 0
    397 							.299 .587 .114 0 0
    398 							0 0 0 1 0"
    399 					<?php // phpcs:enable Generic.WhiteSpace.DisallowSpaceIndent ?>
    400 				/>
    401 				<feComponentTransfer color-interpolation-filters="sRGB" >
    402 					<feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
    403 					<feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
    404 					<feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
    405 				</feComponentTransfer>
    406 			</filter>
    407 		</defs>
    408 	</svg>
    409 
    410 	<?php
    411 
    412 	$duotone = ob_get_clean();
    413 
    414 	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
    415 	$content = preg_replace(
    416 		'/' . preg_quote( 'class="', '/' ) . '/',
    417 		'class="' . $duotone_id . ' ',
    418 		$block_content,
    419 		1
    420 	);
    421 
    422 	return $content . $duotone;
    423 }
    424 
    425 // Register the block support.
    426 WP_Block_Supports::get_instance()->register(
    427 	'duotone',
    428 	array(
    429 		'register_attribute' => 'wp_register_duotone_support',
    430 	)
    431 );
    432 add_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );