From cc143381e1441192067dd72367c785ca930f1ba7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Apr 2022 16:18:38 +1000 Subject: [PATCH] Fix full widths in the post editor --- .../class-wp-theme-json-gutenberg.php | 106 +++++++++++------- 1 file changed, 64 insertions(+), 42 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php index 56187d304a821..6d4687e6fc2c0 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php @@ -150,48 +150,9 @@ protected function get_block_classes( $style_nodes ) { if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $shorthand_top = '17px'; - $shorthand_right = '17px'; - $shorthand_bottom = '17px'; - $shorthand_left = '17px'; - - // Check if a shorthand padding value is provided, and if so break it up into its component parts and use the values as fallbacks. - if ( is_string( $node['spacing']['padding'] ) ) { - - $shorthand_components = explode( ' ', $node['spacing']['padding'] ); - - switch ( count( $shorthand_components ) ) { - case 1: - $shorthand_top = $shorthand_components[0]; - $shorthand_right = $shorthand_components[0]; - $shorthand_bottom = $shorthand_components[0]; - $shorthand_left = $shorthand_components[0]; - break; - case 2: - $shorthand_top = $shorthand_components[0]; - $shorthand_right = $shorthand_components[1]; - $shorthand_bottom = $shorthand_components[0]; - $shorthand_left = $shorthand_components[1]; - break; - case 3: - $shorthand_top = $shorthand_components[0]; - $shorthand_right = $shorthand_components[1]; - $shorthand_bottom = $shorthand_components[2]; - $shorthand_left = $shorthand_components[1]; - break; - case 4: - $shorthand_top = $shorthand_components[0]; - $shorthand_right = $shorthand_components[1]; - $shorthand_bottom = $shorthand_components[2]; - $shorthand_left = $shorthand_components[3]; - break; - } - - } - - $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top, ' . $shorthand_top . '); padding-bottom: var(--wp--style--root--padding-bottom, ' . $shorthand_bottom . '); }'; - $block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right, ' . $shorthand_right . '); padding-left: var(--wp--style--root--padding-left, ' . $shorthand_left . '); }'; - $block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right, ' . $shorthand_right . ') * -1); margin-left: calc(var(--wp--style--root--padding-left, ' . $shorthand_left . ') * -1); }'; + $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); }'; $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; @@ -247,6 +208,67 @@ protected static function compute_style_properties( $styles, $settings = array() $root_variable_duplicates[] = substr( $css_property, strlen('--wp--style--root--') ); } + // Root padding requires special logic to split shorthand values. + if ( '--wp--style--root--padding' === $css_property && is_string($value) ) { + + $shorthand_top = '17px'; + $shorthand_right = '17px'; + $shorthand_bottom = '17px'; + $shorthand_left = '17px'; + + $separate_values = explode( ' ', $value ); + + switch ( count( $separate_values ) ) { + case 1: + $shorthand_top = $separate_values[0]; + $shorthand_right = $separate_values[0]; + $shorthand_bottom = $separate_values[0]; + $shorthand_left = $separate_values[0]; + break; + case 2: + $shorthand_top = $separate_values[0]; + $shorthand_right = $separate_values[1]; + $shorthand_bottom = $separate_values[0]; + $shorthand_left = $separate_values[1]; + break; + case 3: + $shorthand_top = $separate_values[0]; + $shorthand_right = $separate_values[1]; + $shorthand_bottom = $separate_values[2]; + $shorthand_left = $separate_values[1]; + break; + case 4: + $shorthand_top = $separate_values[0]; + $shorthand_right = $separate_values[1]; + $shorthand_bottom = $separate_values[2]; + $shorthand_left = $separate_values[3]; + break; + } + + $all_properties = array( + array( + 'name' => '--wp--style--root--padding-top', + 'value' => $shorthand_top, + ), + array( + 'name' => '--wp--style--root--padding-right', + 'value' => $shorthand_right, + ), + array( + 'name' => '--wp--style--root--padding-bottom', + 'value' => $shorthand_bottom, + ), + array( + 'name' => '--wp--style--root--padding-left', + 'value' => $shorthand_left, + ), + ); + + $declarations = array_merge($declarations,$all_properties); + + continue; + } + // Look up protected properties, keyed by value path. // Skip protected properties that are explicitly set to `null`. if ( is_array( $value_path ) ) {