mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-07 11:20:28 +01:00
bb92e303d7
[https://github.com/WordPress/gutenberg/issues/38719 In 5.9 these utility classnames were removed], which removed the ability for theme/plugin authors to assign their own custom CSS related to specific layout selections. This was mostly related to the Button block. This commit adds these classes dynamically based on attributes, rather than saving them to the serialized content. Original PR from Gutenberg repository: * [https://github.com/WordPress/gutenberg/pull/41487 #41487 Add utility classnames back to blocks that have layout attributes specified] Props glendaviesnz, peterwilsoncc, andrewserong, zieladam, matveb, samikeijonen. See #56058. Built from https://develop.svn.wordpress.org/trunk@53568 git-svn-id: http://core.svn.wordpress.org/trunk@53157 1a063a9b-81f0-0310-95a4-ce76da25c4cd
337 lines
12 KiB
PHP
337 lines
12 KiB
PHP
<?php
|
|
/**
|
|
* Layout block support flag.
|
|
*
|
|
* @package WordPress
|
|
* @since 5.8.0
|
|
*/
|
|
|
|
/**
|
|
* Registers the layout block attribute for block types that support it.
|
|
*
|
|
* @since 5.8.0
|
|
* @access private
|
|
*
|
|
* @param WP_Block_Type $block_type Block Type.
|
|
*/
|
|
function wp_register_layout_support( $block_type ) {
|
|
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
|
|
if ( $support_layout ) {
|
|
if ( ! $block_type->attributes ) {
|
|
$block_type->attributes = array();
|
|
}
|
|
|
|
if ( ! array_key_exists( 'layout', $block_type->attributes ) ) {
|
|
$block_type->attributes['layout'] = array(
|
|
'type' => 'object',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generates the CSS corresponding to the provided layout.
|
|
*
|
|
* @since 5.9.0
|
|
* @access private
|
|
*
|
|
* @param string $selector CSS selector.
|
|
* @param array $layout Layout object. The one that is passed has already checked
|
|
* the existence of default block layout.
|
|
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
|
|
* @param string $gap_value The block gap value to apply.
|
|
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
|
|
* @param string $fallback_gap_value The custom fallback value for block gap.
|
|
* @return string CSS style.
|
|
*/
|
|
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
|
|
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
|
|
|
|
$style = '';
|
|
if ( 'default' === $layout_type ) {
|
|
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
|
|
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
|
|
|
|
$all_max_width_value = $content_size ? $content_size : $wide_size;
|
|
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
|
|
|
|
// Make sure there is a single CSS rule, and all tags are stripped for security.
|
|
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
|
|
$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
|
|
|
|
if ( $content_size || $wide_size ) {
|
|
$style = "$selector > :where(:not(.alignleft):not(.alignright)) {";
|
|
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
|
|
$style .= 'margin-left: auto !important;';
|
|
$style .= 'margin-right: auto !important;';
|
|
$style .= '}';
|
|
|
|
$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
|
|
$style .= "$selector .alignfull { max-width: none; }";
|
|
}
|
|
|
|
$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
|
|
$style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
|
|
$style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
|
|
if ( $has_block_gap_support ) {
|
|
if ( is_array( $gap_value ) ) {
|
|
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
|
|
}
|
|
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
|
|
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
|
|
$style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
|
|
}
|
|
} elseif ( 'flex' === $layout_type ) {
|
|
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
|
|
|
|
$justify_content_options = array(
|
|
'left' => 'flex-start',
|
|
'right' => 'flex-end',
|
|
'center' => 'center',
|
|
);
|
|
|
|
if ( 'horizontal' === $layout_orientation ) {
|
|
$justify_content_options += array( 'space-between' => 'space-between' );
|
|
}
|
|
|
|
$flex_wrap_options = array( 'wrap', 'nowrap' );
|
|
$flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
|
|
$layout['flexWrap'] :
|
|
'wrap';
|
|
|
|
$style = "$selector {";
|
|
$style .= 'display: flex;';
|
|
if ( $has_block_gap_support ) {
|
|
if ( is_array( $gap_value ) ) {
|
|
$gap_row = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap_value;
|
|
$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap_value;
|
|
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
|
|
}
|
|
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : "var( --wp--style--block-gap, $fallback_gap_value )";
|
|
$style .= "gap: $gap_style;";
|
|
} else {
|
|
$style .= "gap: $fallback_gap_value;";
|
|
}
|
|
|
|
$style .= "flex-wrap: $flex_wrap;";
|
|
if ( 'horizontal' === $layout_orientation ) {
|
|
$style .= 'align-items: center;';
|
|
/**
|
|
* Add this style only if is not empty for backwards compatibility,
|
|
* since we intend to convert blocks that had flex layout implemented
|
|
* by custom css.
|
|
*/
|
|
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
|
$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
|
|
}
|
|
} else {
|
|
$style .= 'flex-direction: column;';
|
|
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
|
$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
|
|
} else {
|
|
$style .= 'align-items: flex-start;';
|
|
}
|
|
}
|
|
$style .= '}';
|
|
|
|
$style .= "$selector > * { margin: 0; }";
|
|
}
|
|
|
|
return $style;
|
|
}
|
|
|
|
/**
|
|
* Renders the layout config to the block wrapper.
|
|
*
|
|
* @since 5.8.0
|
|
* @access private
|
|
*
|
|
* @param string $block_content Rendered block content.
|
|
* @param array $block Block object.
|
|
* @return string Filtered block content.
|
|
*/
|
|
function wp_render_layout_support_flag( $block_content, $block ) {
|
|
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
|
|
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
|
|
|
|
if ( ! $support_layout ) {
|
|
return $block_content;
|
|
}
|
|
|
|
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
|
|
$default_layout = wp_get_global_settings( array( 'layout' ) );
|
|
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
|
|
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
|
|
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
|
|
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
|
|
if ( ! $default_layout ) {
|
|
return $block_content;
|
|
}
|
|
$used_layout = $default_layout;
|
|
}
|
|
|
|
$class_names = array();
|
|
$container_class = wp_unique_id( 'wp-container-' );
|
|
$class_names[] = $container_class;
|
|
|
|
// The following section was added to reintroduce a small set of layout classnames that were
|
|
// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
|
|
// not intended to provide an extended set of classes to match all block layout attributes
|
|
// here.
|
|
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
|
|
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
|
|
}
|
|
|
|
if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
|
|
$class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] );
|
|
}
|
|
|
|
if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) {
|
|
$class_names[] = 'is-nowrap';
|
|
}
|
|
|
|
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
|
|
// Skip if gap value contains unsupported characters.
|
|
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
|
|
// because we only want to match against the value, not the CSS attribute.
|
|
if ( is_array( $gap_value ) ) {
|
|
foreach ( $gap_value as $key => $value ) {
|
|
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
|
|
}
|
|
} else {
|
|
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
|
|
}
|
|
|
|
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
|
|
|
|
// If a block's block.json skips serialization for spacing or spacing.blockGap,
|
|
// don't apply the user-defined value to the styles.
|
|
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
|
|
$style = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
|
|
// This assumes the hook only applies to blocks with a single wrapper.
|
|
// I think this is a reasonable limitation for that particular hook.
|
|
$content = preg_replace(
|
|
'/' . preg_quote( 'class="', '/' ) . '/',
|
|
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
|
|
$block_content,
|
|
1
|
|
);
|
|
|
|
wp_enqueue_block_support_styles( $style );
|
|
|
|
return $content;
|
|
}
|
|
|
|
// Register the block support.
|
|
WP_Block_Supports::get_instance()->register(
|
|
'layout',
|
|
array(
|
|
'register_attribute' => 'wp_register_layout_support',
|
|
)
|
|
);
|
|
add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
|
|
|
|
/**
|
|
* For themes without theme.json file, make sure
|
|
* to restore the inner div for the group block
|
|
* to avoid breaking styles relying on that div.
|
|
*
|
|
* @since 5.8.0
|
|
* @access private
|
|
*
|
|
* @param string $block_content Rendered block content.
|
|
* @param array $block Block object.
|
|
* @return string Filtered block content.
|
|
*/
|
|
function wp_restore_group_inner_container( $block_content, $block ) {
|
|
$tag_name = isset( $block['attrs']['tagName'] ) ? $block['attrs']['tagName'] : 'div';
|
|
$group_with_inner_container_regex = sprintf(
|
|
'/(^\s*<%1$s\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/U',
|
|
preg_quote( $tag_name, '/' )
|
|
);
|
|
|
|
if (
|
|
WP_Theme_JSON_Resolver::theme_has_support() ||
|
|
1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
|
|
( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] )
|
|
) {
|
|
return $block_content;
|
|
}
|
|
|
|
$replace_regex = sprintf(
|
|
'/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
|
|
preg_quote( $tag_name, '/' )
|
|
);
|
|
$updated_content = preg_replace_callback(
|
|
$replace_regex,
|
|
static function( $matches ) {
|
|
return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
|
|
},
|
|
$block_content
|
|
);
|
|
return $updated_content;
|
|
}
|
|
|
|
add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
|
|
|
|
/**
|
|
* For themes without theme.json file, make sure
|
|
* to restore the outer div for the aligned image block
|
|
* to avoid breaking styles relying on that div.
|
|
*
|
|
* @since 6.0.0
|
|
* @access private
|
|
*
|
|
* @param string $block_content Rendered block content.
|
|
* @param array $block Block object.
|
|
* @return string Filtered block content.
|
|
*/
|
|
function wp_restore_image_outer_container( $block_content, $block ) {
|
|
$image_with_align = "
|
|
/# 1) everything up to the class attribute contents
|
|
(
|
|
^\s*
|
|
<figure\b
|
|
[^>]*
|
|
\bclass=
|
|
[\"']
|
|
)
|
|
# 2) the class attribute contents
|
|
(
|
|
[^\"']*
|
|
\bwp-block-image\b
|
|
[^\"']*
|
|
\b(?:alignleft|alignright|aligncenter)\b
|
|
[^\"']*
|
|
)
|
|
# 3) everything after the class attribute contents
|
|
(
|
|
[\"']
|
|
[^>]*
|
|
>
|
|
.*
|
|
<\/figure>
|
|
)/iUx";
|
|
|
|
if (
|
|
WP_Theme_JSON_Resolver::theme_has_support() ||
|
|
0 === preg_match( $image_with_align, $block_content, $matches )
|
|
) {
|
|
return $block_content;
|
|
}
|
|
|
|
$wrapper_classnames = array( 'wp-block-image' );
|
|
|
|
// If the block has a classNames attribute these classnames need to be removed from the content and added back
|
|
// to the new wrapper div also.
|
|
if ( ! empty( $block['attrs']['className'] ) ) {
|
|
$wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
|
|
}
|
|
$content_classnames = explode( ' ', $matches[2] );
|
|
$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );
|
|
|
|
return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
|
|
}
|
|
|
|
add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
|