Нема описа

duotone.php 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  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. * Takes input from [0, n] and returns it as [0, 1].
  36. *
  37. * Direct port of TinyColor's function, lightly simplified to maintain
  38. * consistency with TinyColor.
  39. *
  40. * @see https://github.com/bgrins/TinyColor
  41. *
  42. * @since 5.8.0
  43. * @access private
  44. *
  45. * @param mixed $n Number of unknown type.
  46. * @param int $max Upper value of the range to bound to.
  47. *
  48. * @return float Value in the range [0, 1].
  49. */
  50. function wp_tinycolor_bound01( $n, $max ) {
  51. if ( 'string' === gettype( $n ) && false !== strpos( $n, '.' ) && 1 === (float) $n ) {
  52. $n = '100%';
  53. }
  54. $n = min( $max, max( 0, (float) $n ) );
  55. // Automatically convert percentage into number.
  56. if ( 'string' === gettype( $n ) && false !== strpos( $n, '%' ) ) {
  57. $n = (int) ( $n * $max ) / 100;
  58. }
  59. // Handle floating point rounding errors.
  60. if ( ( abs( $n - $max ) < 0.000001 ) ) {
  61. return 1.0;
  62. }
  63. // Convert into [0, 1] range if it isn't already.
  64. return ( $n % $max ) / (float) $max;
  65. }
  66. /**
  67. * Round and convert values of an RGB object.
  68. *
  69. * Direct port of TinyColor's function, lightly simplified to maintain
  70. * consistency with TinyColor.
  71. *
  72. * @see https://github.com/bgrins/TinyColor
  73. *
  74. * @since 5.8.0
  75. * @access private
  76. *
  77. * @param array $rgb_color RGB object.
  78. *
  79. * @return array Rounded and converted RGB object.
  80. */
  81. function wp_tinycolor_rgb_to_rgb( $rgb_color ) {
  82. return array(
  83. 'r' => wp_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
  84. 'g' => wp_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
  85. 'b' => wp_tinycolor_bound01( $rgb_color['b'], 255 ) * 255,
  86. );
  87. }
  88. /**
  89. * Helper function for hsl to rgb conversion.
  90. *
  91. * Direct port of TinyColor's function, lightly simplified to maintain
  92. * consistency with TinyColor.
  93. *
  94. * @see https://github.com/bgrins/TinyColor
  95. *
  96. * @since 5.8.0
  97. * @access private
  98. *
  99. * @param float $p first component.
  100. * @param float $q second component.
  101. * @param float $t third component.
  102. *
  103. * @return float R, G, or B component.
  104. */
  105. function wp_tinycolor_hue_to_rgb( $p, $q, $t ) {
  106. if ( $t < 0 ) {
  107. $t += 1;
  108. }
  109. if ( $t > 1 ) {
  110. $t -= 1;
  111. }
  112. if ( $t < 1 / 6 ) {
  113. return $p + ( $q - $p ) * 6 * $t;
  114. }
  115. if ( $t < 1 / 2 ) {
  116. return $q;
  117. }
  118. if ( $t < 2 / 3 ) {
  119. return $p + ( $q - $p ) * ( 2 / 3 - $t ) * 6;
  120. }
  121. return $p;
  122. }
  123. /**
  124. * Convert an HSL object to an RGB object with converted and rounded values.
  125. *
  126. * Direct port of TinyColor's function, lightly simplified to maintain
  127. * consistency with TinyColor.
  128. *
  129. * @see https://github.com/bgrins/TinyColor
  130. *
  131. * @since 5.8.0
  132. * @access private
  133. *
  134. * @param array $hsl_color HSL object.
  135. *
  136. * @return array Rounded and converted RGB object.
  137. */
  138. function wp_tinycolor_hsl_to_rgb( $hsl_color ) {
  139. $h = wp_tinycolor_bound01( $hsl_color['h'], 360 );
  140. $s = wp_tinycolor_bound01( $hsl_color['s'], 100 );
  141. $l = wp_tinycolor_bound01( $hsl_color['l'], 100 );
  142. if ( 0 === $s ) {
  143. // Achromatic.
  144. $r = $l;
  145. $g = $l;
  146. $b = $l;
  147. } else {
  148. $q = $l < 0.5 ? $l * ( 1 + $s ) : $l + $s - $l * $s;
  149. $p = 2 * $l - $q;
  150. $r = wp_tinycolor_hue_to_rgb( $p, $q, $h + 1 / 3 );
  151. $g = wp_tinycolor_hue_to_rgb( $p, $q, $h );
  152. $b = wp_tinycolor_hue_to_rgb( $p, $q, $h - 1 / 3 );
  153. }
  154. return array(
  155. 'r' => $r * 255,
  156. 'g' => $g * 255,
  157. 'b' => $b * 255,
  158. );
  159. }
  160. /**
  161. * Parses hex, hsl, and rgb CSS strings using the same regex as TinyColor v1.4.2
  162. * used in the JavaScript. Only colors output from react-color are implemented
  163. * and the alpha value is ignored as it is not used in duotone.
  164. *
  165. * Direct port of TinyColor's function, lightly simplified to maintain
  166. * consistency with TinyColor.
  167. *
  168. * @see https://github.com/bgrins/TinyColor
  169. * @see https://github.com/casesandberg/react-color/
  170. *
  171. * @since 5.8.0
  172. * @access private
  173. *
  174. * @param string $color_str CSS color string.
  175. *
  176. * @return array RGB object.
  177. */
  178. function wp_tinycolor_string_to_rgb( $color_str ) {
  179. $color_str = strtolower( trim( $color_str ) );
  180. $css_integer = '[-\\+]?\\d+%?';
  181. $css_number = '[-\\+]?\\d*\\.\\d+%?';
  182. $css_unit = '(?:' . $css_number . ')|(?:' . $css_integer . ')';
  183. $permissive_match3 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
  184. $permissive_match4 = '[\\s|\\(]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')[,|\\s]+(' . $css_unit . ')\\s*\\)?';
  185. $rgb_regexp = '/^rgb' . $permissive_match3 . '$/';
  186. if ( preg_match( $rgb_regexp, $color_str, $match ) ) {
  187. return wp_tinycolor_rgb_to_rgb(
  188. array(
  189. 'r' => $match[1],
  190. 'g' => $match[2],
  191. 'b' => $match[3],
  192. )
  193. );
  194. }
  195. $rgba_regexp = '/^rgba' . $permissive_match4 . '$/';
  196. if ( preg_match( $rgba_regexp, $color_str, $match ) ) {
  197. return wp_tinycolor_rgb_to_rgb(
  198. array(
  199. 'r' => $match[1],
  200. 'g' => $match[2],
  201. 'b' => $match[3],
  202. )
  203. );
  204. }
  205. $hsl_regexp = '/^hsl' . $permissive_match3 . '$/';
  206. if ( preg_match( $hsl_regexp, $color_str, $match ) ) {
  207. return wp_tinycolor_hsl_to_rgb(
  208. array(
  209. 'h' => $match[1],
  210. 's' => $match[2],
  211. 'l' => $match[3],
  212. )
  213. );
  214. }
  215. $hsla_regexp = '/^hsla' . $permissive_match4 . '$/';
  216. if ( preg_match( $hsla_regexp, $color_str, $match ) ) {
  217. return wp_tinycolor_hsl_to_rgb(
  218. array(
  219. 'h' => $match[1],
  220. 's' => $match[2],
  221. 'l' => $match[3],
  222. )
  223. );
  224. }
  225. $hex8_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
  226. if ( preg_match( $hex8_regexp, $color_str, $match ) ) {
  227. return wp_tinycolor_rgb_to_rgb(
  228. array(
  229. 'r' => base_convert( $match[1], 16, 10 ),
  230. 'g' => base_convert( $match[2], 16, 10 ),
  231. 'b' => base_convert( $match[3], 16, 10 ),
  232. )
  233. );
  234. }
  235. $hex6_regexp = '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/';
  236. if ( preg_match( $hex6_regexp, $color_str, $match ) ) {
  237. return wp_tinycolor_rgb_to_rgb(
  238. array(
  239. 'r' => base_convert( $match[1], 16, 10 ),
  240. 'g' => base_convert( $match[2], 16, 10 ),
  241. 'b' => base_convert( $match[3], 16, 10 ),
  242. )
  243. );
  244. }
  245. $hex4_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
  246. if ( preg_match( $hex4_regexp, $color_str, $match ) ) {
  247. return wp_tinycolor_rgb_to_rgb(
  248. array(
  249. 'r' => base_convert( $match[1] . $match[1], 16, 10 ),
  250. 'g' => base_convert( $match[2] . $match[2], 16, 10 ),
  251. 'b' => base_convert( $match[3] . $match[3], 16, 10 ),
  252. )
  253. );
  254. }
  255. $hex3_regexp = '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/';
  256. if ( preg_match( $hex3_regexp, $color_str, $match ) ) {
  257. return wp_tinycolor_rgb_to_rgb(
  258. array(
  259. 'r' => base_convert( $match[1] . $match[1], 16, 10 ),
  260. 'g' => base_convert( $match[2] . $match[2], 16, 10 ),
  261. 'b' => base_convert( $match[3] . $match[3], 16, 10 ),
  262. )
  263. );
  264. }
  265. }
  266. /**
  267. * Registers the style and colors block attributes for block types that support it.
  268. *
  269. * @since 5.8.0
  270. * @access private
  271. *
  272. * @param WP_Block_Type $block_type Block Type.
  273. */
  274. function wp_register_duotone_support( $block_type ) {
  275. $has_duotone_support = false;
  276. if ( property_exists( $block_type, 'supports' ) ) {
  277. $has_duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
  278. }
  279. if ( $has_duotone_support ) {
  280. if ( ! $block_type->attributes ) {
  281. $block_type->attributes = array();
  282. }
  283. if ( ! array_key_exists( 'style', $block_type->attributes ) ) {
  284. $block_type->attributes['style'] = array(
  285. 'type' => 'object',
  286. );
  287. }
  288. }
  289. }
  290. /**
  291. * Render out the duotone stylesheet and SVG.
  292. *
  293. * @since 5.8.0
  294. * @access private
  295. *
  296. * @param string $block_content Rendered block content.
  297. * @param array $block Block object.
  298. *
  299. * @return string Filtered block content.
  300. */
  301. function wp_render_duotone_support( $block_content, $block ) {
  302. $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
  303. $duotone_support = false;
  304. if ( $block_type && property_exists( $block_type, 'supports' ) ) {
  305. $duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
  306. }
  307. $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
  308. if (
  309. ! $duotone_support ||
  310. ! $has_duotone_attribute
  311. ) {
  312. return $block_content;
  313. }
  314. $duotone_colors = $block['attrs']['style']['color']['duotone'];
  315. $duotone_values = array(
  316. 'r' => array(),
  317. 'g' => array(),
  318. 'b' => array(),
  319. );
  320. foreach ( $duotone_colors as $color_str ) {
  321. $color = wp_tinycolor_string_to_rgb( $color_str );
  322. $duotone_values['r'][] = $color['r'] / 255;
  323. $duotone_values['g'][] = $color['g'] / 255;
  324. $duotone_values['b'][] = $color['b'] / 255;
  325. }
  326. $duotone_id = 'wp-duotone-filter-' . uniqid();
  327. $selectors = explode( ',', $duotone_support );
  328. $selectors_scoped = array_map(
  329. function ( $selector ) use ( $duotone_id ) {
  330. return '.' . $duotone_id . ' ' . trim( $selector );
  331. },
  332. $selectors
  333. );
  334. $selectors_group = implode( ', ', $selectors_scoped );
  335. ob_start();
  336. ?>
  337. <style>
  338. <?php echo $selectors_group; ?> {
  339. filter: url( <?php echo esc_url( '#' . $duotone_id ); ?> );
  340. }
  341. </style>
  342. <svg
  343. xmlns:xlink="http://www.w3.org/1999/xlink"
  344. viewBox="0 0 0 0"
  345. width="0"
  346. height="0"
  347. focusable="false"
  348. role="none"
  349. style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
  350. >
  351. <defs>
  352. <filter id="<?php echo esc_attr( $duotone_id ); ?>">
  353. <feColorMatrix
  354. type="matrix"
  355. <?php // phpcs:disable Generic.WhiteSpace.DisallowSpaceIndent ?>
  356. values=".299 .587 .114 0 0
  357. .299 .587 .114 0 0
  358. .299 .587 .114 0 0
  359. 0 0 0 1 0"
  360. <?php // phpcs:enable Generic.WhiteSpace.DisallowSpaceIndent ?>
  361. />
  362. <feComponentTransfer color-interpolation-filters="sRGB" >
  363. <feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
  364. <feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
  365. <feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
  366. </feComponentTransfer>
  367. </filter>
  368. </defs>
  369. </svg>
  370. <?php
  371. $duotone = ob_get_clean();
  372. // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
  373. $content = preg_replace(
  374. '/' . preg_quote( 'class="', '/' ) . '/',
  375. 'class="' . $duotone_id . ' ',
  376. $block_content,
  377. 1
  378. );
  379. return $content . $duotone;
  380. }
  381. // Register the block support.
  382. WP_Block_Supports::get_instance()->register(
  383. 'duotone',
  384. array(
  385. 'register_attribute' => 'wp_register_duotone_support',
  386. )
  387. );
  388. add_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );