wp_render_duotone_support

函式
wp_render_duotone_support ( $block_content, $block )
Access
Private
引數
  • (string) $block_content Rendered block content.
    Required:
  • (array) $block Block object.
    Required:
返回值
  • (string) Filtered block content.
定義位置
相關方法
wp_register_duotone_supportwp_render_elements_supportwp_render_typography_supportwp_render_layout_support_flagwp_register_colors_support
引入
5.8.0
棄用
-

wp_render_duotone_support: 這個函式輸出為影象元素新增支援雙色過濾效果所需的HTML和CSS。

渲染出雙色調樣式表和SVG。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function wp_render_duotone_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$duotone_support = false;
if ( $block_type && property_exists( $block_type, 'supports' ) ) {
$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
}
$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
if (
! $duotone_support ||
! $has_duotone_attribute
) {
return $block_content;
}
$colors = $block['attrs']['style']['color']['duotone'];
$filter_key = is_array( $colors ) ? implode( '-', $colors ) : $colors;
$filter_preset = array(
'slug' => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
'colors' => $colors,
);
$filter_property = wp_get_duotone_filter_property( $filter_preset );
$filter_id = wp_get_duotone_filter_id( $filter_preset );
$scope = '.' . $filter_id;
$selectors = explode( ',', $duotone_support );
$scoped = array();
foreach ( $selectors as $sel ) {
$scoped[] = $scope . ' ' . trim( $sel );
}
$selector = implode( ', ', $scoped );
// !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 . " {ntfilter: " . $filter_property . " !important;n}n"
: $selector . '{filter:' . $filter_property . ' !important;}';
wp_register_style( $filter_id, false, array(), true, true );
wp_add_inline_style( $filter_id, $filter_style );
wp_enqueue_style( $filter_id );
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;
/*
* 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 )
);
}
}
);
}
// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
return preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . $filter_id . ' ',
$block_content,
1
);
}
function wp_render_duotone_support( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $duotone_support = false; if ( $block_type && property_exists( $block_type, 'supports' ) ) { $duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false ); } $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] ); if ( ! $duotone_support || ! $has_duotone_attribute ) { return $block_content; } $colors = $block['attrs']['style']['color']['duotone']; $filter_key = is_array( $colors ) ? implode( '-', $colors ) : $colors; $filter_preset = array( 'slug' => wp_unique_id( sanitize_key( $filter_key . '-' ) ), 'colors' => $colors, ); $filter_property = wp_get_duotone_filter_property( $filter_preset ); $filter_id = wp_get_duotone_filter_id( $filter_preset ); $scope = '.' . $filter_id; $selectors = explode( ',', $duotone_support ); $scoped = array(); foreach ( $selectors as $sel ) { $scoped[] = $scope . ' ' . trim( $sel ); } $selector = implode( ', ', $scoped ); // !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 . " {ntfilter: " . $filter_property . " !important;n}n" : $selector . '{filter:' . $filter_property . ' !important;}'; wp_register_style( $filter_id, false, array(), true, true ); wp_add_inline_style( $filter_id, $filter_style ); wp_enqueue_style( $filter_id ); 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; /* * 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 ) ); } } ); } // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper. return preg_replace( '/' . preg_quote( 'class="', '/' ) . '/', 'class="' . $filter_id . ' ', $block_content, 1 ); }
function wp_render_duotone_support( $block_content, $block ) {
	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );

	$duotone_support = false;
	if ( $block_type && property_exists( $block_type, 'supports' ) ) {
		$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
	}

	$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );

	if (
		! $duotone_support ||
		! $has_duotone_attribute
	) {
		return $block_content;
	}

	$colors          = $block['attrs']['style']['color']['duotone'];
	$filter_key      = is_array( $colors ) ? implode( '-', $colors ) : $colors;
	$filter_preset   = array(
		'slug'   => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
		'colors' => $colors,
	);
	$filter_property = wp_get_duotone_filter_property( $filter_preset );
	$filter_id       = wp_get_duotone_filter_id( $filter_preset );

	$scope     = '.' . $filter_id;
	$selectors = explode( ',', $duotone_support );
	$scoped    = array();
	foreach ( $selectors as $sel ) {
		$scoped[] = $scope . ' ' . trim( $sel );
	}
	$selector = implode( ', ', $scoped );

	// !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 . " {ntfilter: " . $filter_property . " !important;n}n"
		: $selector . '{filter:' . $filter_property . ' !important;}';

	wp_register_style( $filter_id, false, array(), true, true );
	wp_add_inline_style( $filter_id, $filter_style );
	wp_enqueue_style( $filter_id );

	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;

				/*
				 * 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 )
					);
				}
			}
		);
	}

	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
	return preg_replace(
		'/' . preg_quote( 'class="', '/' ) . '/',
		'class="' . $filter_id . ' ',
		$block_content,
		1
	);
}

常見問題

FAQs
檢視更多 >