From 9c506cb1af2c340a19e1ba57b8a4daa319c8836d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 26 May 2022 17:14:05 +0100 Subject: [PATCH] Allow full width elements in root --- lib/block-supports/layout.php | 27 ++++++++++++++----- .../wordpress-6.0/class-wp-theme-json-6-0.php | 6 +++-- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index ba791f56affb3..69d26c4a72b2e 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -55,7 +55,8 @@ function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_ga $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { - $style = "$selector {"; + // Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level + $style = ".wp-container-default-layout $selector {"; // Using important here to override the inline padding that could be potentially // applied using the custom padding control before the layout inheritance is applied. $style .= sprintf( @@ -73,11 +74,18 @@ function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_ga $style .= '}'; $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector > .alignfull {"; + // Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level. + $style .= ".wp-container-default-layout $selector > .alignfull {"; $style .= 'max-width: none;'; $style .= isset( $padding['left'] ) ? sprintf( 'margin-left: calc( -1 * %s ) !important;', $padding['left'] ) : ''; $style .= isset( $padding['right'] ) ? sprintf( 'margin-right: calc( -1 * %s ) !important;', $padding['right'] ) : ''; $style .= '}'; + + // Add padding to full wide blocks that inherit default layout, so the content doesn't touch the edges. + $style .= "$selector > .alignfull {"; + $style .= isset( $padding['left'] ) ? sprintf( 'padding-left: %s !important;', $padding['left'] ) : ''; + $style .= isset( $padding['right'] ) ? sprintf( 'padding-right: %s !important;', $padding['right'] ) : ''; + $style .= '}'; } $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }"; @@ -175,9 +183,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { if ( ! $support_layout ) { return $block_content; } - + $class_name = wp_unique_id( 'wp-container-' ); + $selector = '.' . $class_name; $block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) ); $default_layout = gutenberg_get_global_settings( array( 'layout' ) ); + $default_padding = gutenberg_get_global_styles( array( 'spacing', 'padding' ) ); $padding = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null ); $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); @@ -186,11 +196,14 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { if ( ! $default_layout ) { return $block_content; } - $used_layout = $default_layout; - $padding = isset( $default_layout['padding'] ) ? $default_layout['padding'] : null; + $class_name .= ' wp-container-default-layout'; + $selector .= '.wp-container-default-layout'; + $used_layout = $default_layout; + //TODO - can we allow padding from the block settings? + $padding = isset( $default_padding ) ? $default_padding : null; } - $class_name = wp_unique_id( 'wp-container-' ); + $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 @@ -208,7 +221,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { // 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 = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); - $style = gutenberg_get_layout_style( ".$class_name", $used_layout, $padding, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value ); + $style = gutenberg_get_layout_style( $selector, $used_layout, $padding, $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( diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 27bce4e80d20e..73c204513faee 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -373,11 +373,13 @@ protected function get_block_classes( $style_nodes ) { if ( $use_root_vars ) { $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }'; $block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }'; - $block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }'; + + // This will be overridden by children who inherit default layout. + $block_rules .= '.wp-site-blocks .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); width: auto;}'; // Alignfull blocks in the block editor that are direct children of post content should also get negative margins. if ( is_callable( 'get_current_screen' ) && get_current_screen()->is_block_editor() ) { - $block_rules .= '.is-root-container > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }'; + $block_rules .= '.is-root-container .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); width: auto; }'; } } $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';