← All changes | lib/block-supports/duotone.php +192 -103 23.3.1 → 14.5.2 View file →

		@@ -4,75 +4,19 @@
4	4	*
5	5	* @package gutenberg
6	6	*/
7	7
8		-// Register the block support. (overrides core one).
9		-WP_Block_Supports::get_instance()->register(
10		- 'duotone',
11		- array(
12		- 'register_attribute' => array( 'WP_Duotone_Gutenberg', 'register_duotone_support' ),
13		- )
14		-);
15		-
16		-// Add classnames to blocks using duotone support.
17		-if ( function_exists( 'wp_render_duotone_support' ) ) {
18		- // Deprecated render function.
19		- remove_filter( 'render_block', 'wp_render_duotone_support' );
20		-}
21		-if ( class_exists( 'WP_Duotone' ) ) {
22		- remove_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ) );
23		- remove_filter( 'render_block_core/image', array( 'WP_Duotone', 'restore_image_outer_container' ) );
24		-}
25		-add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 3 );
26		-add_filter( 'render_block_core/image', array( 'WP_Duotone_Gutenberg', 'restore_image_outer_container' ), 10, 1 );
27		-
28		-// Enqueue styles.
29		-// Block styles (core-block-supports-inline-css) before the style engine (gutenberg_enqueue_stored_styles).
30		-// Global styles (global-styles-inline-css) after the other global styles (gutenberg_enqueue_global_styles).
31		-if ( class_exists( 'WP_Duotone' ) ) {
32		- remove_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_block_styles' ) );
33		- remove_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_global_styles' ) );
34		-}
35		-add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_block_styles' ), 9 );
36		-add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 );
37		-
38		-// Add SVG filters to the footer. Also, for classic themes, output block styles (core-block-supports-inline-css).
39		-if ( class_exists( 'WP_Duotone' ) ) {
40		- remove_action( 'wp_footer', array( 'WP_Duotone', 'output_footer_assets' ) );
41		-}
42		-add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 );
43		-
44		-// Add styles and SVGs for use in the editor via the EditorStyles component.
45		-if ( class_exists( 'WP_Duotone' ) ) {
46		- remove_filter( 'block_editor_settings_all', array( 'WP_Duotone', 'add_editor_settings' ) );
47		-}
48		-add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 );
49		-
50		-// Migrate the old experimental duotone support flag.
51		-if ( class_exists( 'WP_Duotone' ) ) {
52		- remove_filter( 'block_type_metadata_settings', array( 'WP_Duotone', 'migrate_experimental_duotone_support_flag' ) );
53		-}
54		-add_filter( 'block_type_metadata_settings', array( 'WP_Duotone_Gutenberg', 'migrate_experimental_duotone_support_flag' ), 10, 2 );
55		-
56		-/*
57		- * Deprecated functions below. All new functions should be added in class-wp-duotone-gutenberg.php.
58		- */
59		-
60	8	/**
61	9	* Direct port of tinycolor's bound01 function, lightly simplified to maintain
62	10	* consistency with tinycolor.
63	11	*
64		- * @link https://github.com/bgrins/TinyColor
	12	+ * @see https://github.com/bgrins/TinyColor
65	13	*
66		- * @deprecated 6.3.0
67		- *
68	14	* @param mixed $n Number of unknown type.
69	15	* @param int $max Upper value of the range to bound to.
70	16	* @return float Value in the range [0,1].
71	17	*/
72	18	function gutenberg_tinycolor_bound01( $n, $max ) {
73		- _deprecated_function( __FUNCTION__, '6.3.0' );
74		-
75	19	if ( 'string' === gettype( $n ) && str_contains( $n, '.' ) && 1 === (float) $n ) {
76	20	$n = '100%';
77	21	}
78	22
		@@ -95,18 +39,14 @@
95	39	/**
96	40	* Direct port of tinycolor's boundAlpha function to maintain consistency with
97	41	* how tinycolor works.
98	42	*
99		- * @link https://github.com/bgrins/TinyColor
	43	+ * @see https://github.com/bgrins/TinyColor
100	44	*
101		- * @deprecated 6.3.0
102		- *
103	45	* @param mixed $n Number of unknown type.
104	46	* @return float Value in the range [0,1].
105	47	*/
106	48	function gutenberg_tinycolor_bound_alpha( $n ) {
107		- _deprecated_function( __FUNCTION__, '6.3.0' );
108		-
109	49	if ( is_numeric( $n ) ) {
110	50	$n = (float) $n;
111	51	if ( $n >= 0 && $n <= 1 ) {
112	52	return $n;
		@@ -117,18 +57,14 @@
117	57
118	58	/**
119	59	* Round and convert values of an RGB object.
120	60	*
121		- * @link https://github.com/bgrins/TinyColor
	61	+ * @see https://github.com/bgrins/TinyColor
122	62	*
123		- * @deprecated 6.3.0
124		- *
125	63	* @param array $rgb_color RGB object.
126	64	* @return array Rounded and converted RGB object.
127	65	*/
128	66	function gutenberg_tinycolor_rgb_to_rgb( $rgb_color ) {
129		- _deprecated_function( __FUNCTION__, '6.3.0' );
130		-
131	67	return array(
132	68	'r' => gutenberg_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
133	69	'g' => gutenberg_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
134	70	'b' => gutenberg_tinycolor_bound01( $rgb_color['b'], 255 ) * 255,
		@@ -137,12 +73,10 @@
137	73
138	74	/**
139	75	* Helper function for hsl to rgb conversion.
140	76	*
141		- * @link https://github.com/bgrins/TinyColor
	77	+ * @see https://github.com/bgrins/TinyColor
142	78	*
143		- * @deprecated 6.3.0
144		- *
145	79	* @param float $p first component.
146	80	* @param float $q second component.
147	81	* @param float $t third component.
148	82	* @return float R, G, or B component.
		@@ -147,10 +81,8 @@
147	81	* @param float $t third component.
148	82	* @return float R, G, or B component.
149	83	*/
150	84	function gutenberg_tinycolor_hue_to_rgb( $p, $q, $t ) {
151		- _deprecated_function( __FUNCTION__, '6.3.0' );
152		-
153	85	if ( $t < 0 ) {
154	86	++$t;
155	87	}
156	88	if ( $t > 1 ) {
		@@ -170,18 +102,14 @@
170	102
171	103	/**
172	104	* Convert an HSL object to an RGB object with converted and rounded values.
173	105	*
174		- * @link https://github.com/bgrins/TinyColor
	106	+ * @see https://github.com/bgrins/TinyColor
175	107	*
176		- * @deprecated 6.3.0
177		- *
178	108	* @param array $hsl_color HSL object.
179	109	* @return array Rounded and converted RGB object.
180	110	*/
181	111	function gutenberg_tinycolor_hsl_to_rgb( $hsl_color ) {
182		- _deprecated_function( __FUNCTION__, '6.3.0' );
183		-
184	112	$h = gutenberg_tinycolor_bound01( $hsl_color['h'], 360 );
185	113	$s = gutenberg_tinycolor_bound01( $hsl_color['s'], 100 );
186	114	$l = gutenberg_tinycolor_bound01( $hsl_color['l'], 100 );
187	115
		@@ -208,19 +136,15 @@
208	136	/**
209	137	* Parses hex, hsl, and rgb CSS strings using the same regex as tinycolor v1.4.2
210	138	* used in the JavaScript. Only colors output from react-color are implemented.
211	139	*
212		- * @link https://github.com/bgrins/TinyColor
213		- * @link https://github.com/casesandberg/react-color/
	140	+ * @see https://github.com/bgrins/TinyColor
	141	+ * @see https://github.com/casesandberg/react-color/
214	142	*
215		- * @deprecated 6.3.0
216		- *
217	143	* @param string $color_str CSS color string.
218	144	* @return array RGB object.
219	145	*/
220	146	function gutenberg_tinycolor_string_to_rgb( $color_str ) {
221		- _deprecated_function( __FUNCTION__, '6.3.0' );
222		-
223	147	$color_str = strtolower( trim( $color_str ) );
224	148
225	149	$css_integer = '[-\\+]?\\d+%?';
226	150	$css_number = '[-\\+]?\\d*\\.\\d+%?';
		@@ -368,65 +292,230 @@
368	292
369	293	/**
370	294	* Returns the prefixed id for the duotone filter for use as a CSS id.
371	295	*
372		- * @deprecated 6.3.0
373		- *
374	296	* @param array $preset Duotone preset value as seen in theme.json.
375	297	* @return string Duotone filter CSS id.
376	298	*/
377	299	function gutenberg_get_duotone_filter_id( $preset ) {
378		- _deprecated_function( __FUNCTION__, '6.3.0' );
379		- return WP_Duotone_Gutenberg::get_filter_id_from_preset( $preset );
	300	+ if ( ! isset( $preset['slug'] ) ) {
	301	+ return '';
	302	+ }
	303	+
	304	+ return 'wp-duotone-' . $preset['slug'];
380	305	}
381	306
382	307	/**
383	308	* Returns the CSS filter property url to reference the rendered SVG.
384	309	*
385		- * @deprecated 6.3.0
386		- *
387	310	* @param array $preset Duotone preset value as seen in theme.json.
388	311	* @return string Duotone CSS filter property url value.
389	312	*/
390	313	function gutenberg_get_duotone_filter_property( $preset ) {
391		- _deprecated_function( __FUNCTION__, '6.3.0' );
392		- return WP_Duotone_Gutenberg::get_filter_css_property_value_from_preset( $preset );
	314	+ if ( isset( $preset['colors'] ) && 'unset' === $preset['colors'] ) {
	315	+ return 'none';
	316	+ }
	317	+ $filter_id = gutenberg_get_duotone_filter_id( $preset );
	318	+ return "url('#" . $filter_id . "')";
393	319	}
394	320
395	321	/**
396	322	* Returns the duotone filter SVG string for the preset.
397	323	*
398		- * @deprecated 6.3.0
399		- *
400	324	* @param array $preset Duotone preset value as seen in theme.json.
401	325	* @return string Duotone SVG filter.
402	326	*/
403	327	function gutenberg_get_duotone_filter_svg( $preset ) {
404		- _deprecated_function( __FUNCTION__, '6.3.0' );
405		- return WP_Duotone_Gutenberg::get_filter_svg_from_preset( $preset );
	328	+ $filter_id = gutenberg_get_duotone_filter_id( $preset );
	329	+
	330	+ $duotone_values = array(
	331	+ 'r' => array(),
	332	+ 'g' => array(),
	333	+ 'b' => array(),
	334	+ 'a' => array(),
	335	+ );
	336	+
	337	+ if ( ! isset( $preset['colors'] ) || ! is_array( $preset['colors'] ) ) {
	338	+ $preset['colors'] = array();
	339	+ }
	340	+
	341	+ foreach ( $preset['colors'] as $color_str ) {
	342	+ $color = gutenberg_tinycolor_string_to_rgb( $color_str );
	343	+
	344	+ $duotone_values['r'][] = $color['r'] / 255;
	345	+ $duotone_values['g'][] = $color['g'] / 255;
	346	+ $duotone_values['b'][] = $color['b'] / 255;
	347	+ $duotone_values['a'][] = $color['a'];
	348	+ }
	349	+
	350	+ ob_start();
	351	+
	352	+ ?>
	353	+
	354	+ <svg
	355	+ xmlns="http://www.w3.org/2000/svg"
	356	+ viewBox="0 0 0 0"
	357	+ width="0"
	358	+ height="0"
	359	+ focusable="false"
	360	+ role="none"
	361	+ style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
	362	+ >
	363	+ <defs>
	364	+ <filter id="<?php echo esc_attr( $filter_id ); ?>">
	365	+ <feColorMatrix
	366	+ color-interpolation-filters="sRGB"
	367	+ type="matrix"
	368	+ values="
	369	+ .299 .587 .114 0 0
	370	+ .299 .587 .114 0 0
	371	+ .299 .587 .114 0 0
	372	+ .299 .587 .114 0 0
	373	+ "
	374	+ />
	375	+ <feComponentTransfer color-interpolation-filters="sRGB" >
	376	+ <feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
	377	+ <feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
	378	+ <feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
	379	+ <feFuncA type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['a'] ) ); ?>" />
	380	+ </feComponentTransfer>
	381	+ <feComposite in2="SourceGraphic" operator="in" />
	382	+ </filter>
	383	+ </defs>
	384	+ </svg>
	385	+
	386	+ <?php
	387	+
	388	+ $svg = ob_get_clean();
	389	+
	390	+ if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
	391	+ // Clean up the whitespace.
	392	+ $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
	393	+ $svg = str_replace( '> <', '><', $svg );
	394	+ $svg = trim( $svg );
	395	+ }
	396	+
	397	+ return $svg;
406	398	}
407	399
408	400	/**
409	401	* Registers the style and colors block attributes for block types that support it.
410	402	*
411		- * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::register_duotone_support() instead.
412		- *
413	403	* @param WP_Block_Type $block_type Block Type.
414	404	*/
415	405	function gutenberg_register_duotone_support( $block_type ) {
416		- _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::register_duotone_support' );
417		- return WP_Duotone_Gutenberg::register_duotone_support( $block_type );
	406	+ $has_duotone_support = false;
	407	+ if ( property_exists( $block_type, 'supports' ) ) {
	408	+ $has_duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
	409	+ }
	410	+
	411	+ if ( $has_duotone_support ) {
	412	+ if ( ! $block_type->attributes ) {
	413	+ $block_type->attributes = array();
	414	+ }
	415	+
	416	+ if ( ! array_key_exists( 'style', $block_type->attributes ) ) {
	417	+ $block_type->attributes['style'] = array(
	418	+ 'type' => 'object',
	419	+ );
	420	+ }
	421	+ }
418	422	}
419	423
420	424	/**
421	425	* Render out the duotone stylesheet and SVG.
422	426	*
423		- * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::render_duotone_support() instead.
424		- *
425	427	* @param string $block_content Rendered block content.
426	428	* @param array $block Block object.
427	429	* @return string Filtered block content.
428	430	*/
429	431	function gutenberg_render_duotone_support( $block_content, $block ) {
430		- _deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::render_duotone_support' );
431		- return WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block );
	432	+ $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
	433	+
	434	+ $duotone_support = false;
	435	+ if ( $block_type && property_exists( $block_type, 'supports' ) ) {
	436	+ $duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
	437	+ }
	438	+
	439	+ $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
	440	+
	441	+ if (
	442	+ ! $duotone_support ||
	443	+ ! $has_duotone_attribute
	444	+ ) {
	445	+ return $block_content;
	446	+ }
	447	+
	448	+ $colors = $block['attrs']['style']['color']['duotone'];
	449	+ $filter_key = is_array( $colors ) ? implode( '-', $colors ) : $colors;
	450	+ $filter_preset = array(
	451	+ 'slug' => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
	452	+ 'colors' => $colors,
	453	+ );
	454	+ $filter_property = gutenberg_get_duotone_filter_property( $filter_preset );
	455	+ $filter_id = gutenberg_get_duotone_filter_id( $filter_preset );
	456	+
	457	+ $scope = '.' . $filter_id;
	458	+ $selectors = explode( ',', $duotone_support );
	459	+ $scoped = array();
	460	+ foreach ( $selectors as $sel ) {
	461	+ $scoped[] = $scope . ' ' . trim( $sel );
	462	+ }
	463	+ $selector = implode( ', ', $scoped );
	464	+
	465	+ // !important is needed because these styles render before global styles,
	466	+ // and they should be overriding the duotone filters set by global styles.
	467	+ $filter_style = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG
	468	+ ? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n"
	469	+ : $selector . '{filter:' . $filter_property . ' !important;}';
	470	+
	471	+ wp_register_style( $filter_id, false, array(), true, true );
	472	+ wp_add_inline_style( $filter_id, $filter_style );
	473	+ wp_enqueue_style( $filter_id );
	474	+
	475	+ if ( 'unset' !== $colors ) {
	476	+ $filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset );
	477	+ add_action(
	478	+ 'wp_footer',
	479	+ static function () use ( $filter_svg, $selector ) {
	480	+ echo $filter_svg;
	481	+
	482	+ /*
	483	+ * Safari renders elements incorrectly on first paint when the
	484	+ * SVG filter comes after the content that it is filtering, so
	485	+ * we force a repaint with a WebKit hack which solves the issue.
	486	+ */
	487	+ global $is_safari;
	488	+ if ( $is_safari ) {
	489	+ /*
	490	+ * Simply accessing el.offsetHeight flushes layout and style
	491	+ * changes in WebKit without having to wait for setTimeout.
	492	+ */
	493	+ printf(
	494	+ '<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
	495	+ wp_json_encode( $selector )
	496	+ );
	497	+ }
	498	+ }
	499	+ );
	500	+ }
	501	+
	502	+ // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
	503	+ return preg_replace(
	504	+ '/' . preg_quote( 'class="', '/' ) . '/',
	505	+ 'class="' . $filter_id . ' ',
	506	+ $block_content,
	507	+ 1
	508	+ );
432	509	}
	510	+
	511	+// Register the block support.
	512	+WP_Block_Supports::get_instance()->register(
	513	+ 'duotone',
	514	+ array(
	515	+ 'register_attribute' => 'gutenberg_register_duotone_support',
	516	+ )
	517	+);
	518	+
	519	+// Remove WordPress core filter to avoid rendering duplicate support elements.
	520	+remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
	521	+add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );