From d147da4f33c0416bda92cc55d6185f8e58d4dc1b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 31 Mar 2022 17:33:25 +1100 Subject: [PATCH 01/24] Try using variable for root padding value --- lib/block-supports/layout.php | 2 +- .../class-wp-theme-json-gutenberg.php | 43 +++++++++++++++++++ lib/compat/wordpress-6.0/theme.json | 10 ++++- ...class-wp-theme-json-resolver-gutenberg.php | 17 ++++++++ .../src/components/block-list/style.scss | 5 +++ packages/block-editor/src/hooks/style.js | 3 ++ packages/block-editor/src/layouts/flow.js | 2 +- packages/blocks/src/api/constants.js | 20 +++++++++ .../global-styles/use-global-styles-output.js | 14 ++++-- 9 files changed, 109 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index d7d82d1a113bb..c91c3b7ca09a8 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -53,7 +53,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { - $style = "$selector > :where(:not(.alignleft):not(.alignright)) {"; + $style = "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; $style .= 'margin-left: auto !important;'; $style .= 'margin-right: auto !important;'; 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 8868185360acd..6667c1fecc04f 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 @@ -118,6 +118,46 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { ), ); + /* + * Metadata for style properties. + * + * Each element is a direct mapping from the CSS property name to the + * path to the value in theme.json & block attributes. + */ + const PROPERTIES_METADATA = array( + 'background' => array( 'color', 'gradient' ), + 'background-color' => array( 'color', 'background' ), + 'border-radius' => array( 'border', 'radius' ), + 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), + 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), + 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), + 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), + 'border-color' => array( 'border', 'color' ), + 'border-width' => array( 'border', 'width' ), + 'border-style' => array( 'border', 'style' ), + 'color' => array( 'color', 'text' ), + 'font-family' => array( 'typography', 'fontFamily' ), + 'font-size' => array( 'typography', 'fontSize' ), + 'font-style' => array( 'typography', 'fontStyle' ), + 'font-weight' => array( 'typography', 'fontWeight' ), + 'letter-spacing' => array( 'typography', 'letterSpacing' ), + 'line-height' => array( 'typography', 'lineHeight' ), + 'margin' => array( 'spacing', 'margin' ), + 'margin-top' => array( 'spacing', 'margin', 'top' ), + 'margin-right' => array( 'spacing', 'margin', 'right' ), + 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), + 'margin-left' => array( 'spacing', 'margin', 'left' ), + 'padding' => array( 'spacing', 'padding' ), + '--wp--style--padding-top' => array( 'spacing', 'padding', 'top' ), + '--wp--style--padding-right' => array( 'spacing', 'padding', 'right' ), + '--wp--style--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + '--wp--style--padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), + 'text-decoration' => array( 'typography', 'textDecoration' ), + 'text-transform' => array( 'typography', 'textTransform' ), + 'filter' => array( 'filter', 'duotone' ), + ); + /** * The top-level keys a theme.json can have. * @@ -270,6 +310,9 @@ protected function get_block_classes( $style_nodes ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--padding-top); padding-bottom: var(--wp--style--padding-bottom); }'; + $block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }'; + $block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--padding-right) * -1); margin-left: calc(var(--wp--style--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; }'; diff --git a/lib/compat/wordpress-6.0/theme.json b/lib/compat/wordpress-6.0/theme.json index 7691aa4a64e6a..a107593517f46 100644 --- a/lib/compat/wordpress-6.0/theme.json +++ b/lib/compat/wordpress-6.0/theme.json @@ -240,6 +240,14 @@ } }, "styles": { - "spacing": { "blockGap": "24px" } + "spacing": { + "blockGap": "24px", + "padding": { + "top": "17px", + "right": "17px", + "bottom": "17px", + "left": "17px" + } + } } } diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 960ea659e8d2e..3c48c75beb185 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -16,6 +16,23 @@ * @access private */ class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 { + /** + * Return core's origin config. + * + * @return WP_Theme_JSON_Gutenberg Entity that holds core data. + */ + public static function get_core_data() { + if ( null !== static::$core ) { + return static::$core; + } + + $config = static::read_json_file( __DIR__ . '/theme.json' ); + $config = static::translate( $config ); + static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); + + return static::$core; + } + /** * Returns the theme's data. * diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 73f1579de94d4..6827dbdf8d968 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -319,6 +319,11 @@ } } +.is-root-container > .alignfull { + margin-right: calc(var(--wp--style--padding-right) * -1); + margin-left: calc(var(--wp--style--padding-left) * -1); +} + .wp-block[data-align="left"] > *, .wp-block[data-align="right"] > *, .wp-block.alignleft, diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index cf5626b684315..ac413263d1e0d 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -79,6 +79,9 @@ export function getInlineStyles( styles = {} ) { const ignoredStyles = [ 'spacing.blockGap' ]; const output = {}; Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => { + if ( STYLE_PROPERTY[ propKey ].rootOnly ) { + return; + } const path = STYLE_PROPERTY[ propKey ].value; const subPaths = STYLE_PROPERTY[ propKey ].properties; // Ignore styles on elements because they are handled on the server. diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 82851cb015075..764cee2001dd3 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -132,7 +132,7 @@ export default { ? ` ${ appendSelectors( selector, - '> :where(:not(.alignleft):not(.alignright))' + '> :where(:not(.alignleft):not(.alignright):not(.alignfull))' ) } { max-width: ${ contentSize ?? wideSize }; margin-left: auto !important; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index c9b8d3e0e8f1d..f1bd0988a3e21 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -118,6 +118,26 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'spacing', 'blockGap' ], support: [ 'spacing', 'blockGap' ], }, + '--wp--style--padding-top': { + value: [ 'spacing', 'padding', 'top' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-right': { + value: [ 'spacing', 'padding', 'right' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-bottom': { + value: [ 'spacing', 'padding', 'bottom' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-left': { + value: [ 'spacing', 'padding', 'left' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, }; export const __EXPERIMENTAL_ELEMENTS = { diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 72ed5a5afe32e..9c517fb5d4557 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -142,11 +142,12 @@ function flattenTree( input = {}, prefix, token ) { /** * Transform given style tree into a set of style declarations. * - * @param {Object} blockStyles Block styles. + * @param {Object} blockStyles Block styles. * + * @param {boolean} isRoot Whether the styles apply to the root selector. * @return {Array} An array of style declarations. */ -function getStylesDeclarations( blockStyles = {} ) { +function getStylesDeclarations( blockStyles = {}, isRoot = false ) { const output = reduce( STYLE_PROPERTY, ( declarations, { value, properties, useEngine }, key ) => { @@ -190,6 +191,10 @@ function getStylesDeclarations( blockStyles = {} ) { [] ); + if ( isRoot ) { + return output; + } + // The goal is to move everything to server side generated engine styles // This is temporary as we absorb more and more styles into the engine. const extraRules = getCSSRules( blockStyles, { selector: 'self' } ); @@ -334,9 +339,10 @@ export const toStyles = ( tree, blockSelectors ) => { const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); let ruleset = - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + 'body { padding-right: 0; padding-left: 0; } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; nodesWithStyles.forEach( ( { selector, styles } ) => { - const declarations = getStylesDeclarations( styles ); + const isRoot = ROOT_BLOCK_SELECTOR === selector; + const declarations = getStylesDeclarations( styles, isRoot ); if ( declarations.length === 0 ) { return; } From 24de8267558b562bd67a1b6db4f6bf607ad328eb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 1 Apr 2022 16:09:44 +1100 Subject: [PATCH 02/24] Root vars shouldn't apply to block global styles --- .../class-wp-theme-json-gutenberg.php | 149 ++++++++++++++---- .../src/components/block-list/style.scss | 4 +- packages/blocks/src/api/constants.js | 8 +- .../global-styles/use-global-styles-output.js | 7 +- 4 files changed, 125 insertions(+), 43 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 6667c1fecc04f..de05afd5bdd40 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 @@ -125,37 +125,41 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { * path to the value in theme.json & block attributes. */ const PROPERTIES_METADATA = array( - 'background' => array( 'color', 'gradient' ), - 'background-color' => array( 'color', 'background' ), - 'border-radius' => array( 'border', 'radius' ), - 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), - 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), - 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), - 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), - 'border-color' => array( 'border', 'color' ), - 'border-width' => array( 'border', 'width' ), - 'border-style' => array( 'border', 'style' ), - 'color' => array( 'color', 'text' ), - 'font-family' => array( 'typography', 'fontFamily' ), - 'font-size' => array( 'typography', 'fontSize' ), - 'font-style' => array( 'typography', 'fontStyle' ), - 'font-weight' => array( 'typography', 'fontWeight' ), - 'letter-spacing' => array( 'typography', 'letterSpacing' ), - 'line-height' => array( 'typography', 'lineHeight' ), - 'margin' => array( 'spacing', 'margin' ), - 'margin-top' => array( 'spacing', 'margin', 'top' ), - 'margin-right' => array( 'spacing', 'margin', 'right' ), - 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), - 'margin-left' => array( 'spacing', 'margin', 'left' ), - 'padding' => array( 'spacing', 'padding' ), - '--wp--style--padding-top' => array( 'spacing', 'padding', 'top' ), - '--wp--style--padding-right' => array( 'spacing', 'padding', 'right' ), - '--wp--style--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), - '--wp--style--padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), - 'text-decoration' => array( 'typography', 'textDecoration' ), - 'text-transform' => array( 'typography', 'textTransform' ), - 'filter' => array( 'filter', 'duotone' ), + 'background' => array( 'color', 'gradient' ), + 'background-color' => array( 'color', 'background' ), + 'border-radius' => array( 'border', 'radius' ), + 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), + 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), + 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), + 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), + 'border-color' => array( 'border', 'color' ), + 'border-width' => array( 'border', 'width' ), + 'border-style' => array( 'border', 'style' ), + 'color' => array( 'color', 'text' ), + 'font-family' => array( 'typography', 'fontFamily' ), + 'font-size' => array( 'typography', 'fontSize' ), + 'font-style' => array( 'typography', 'fontStyle' ), + 'font-weight' => array( 'typography', 'fontWeight' ), + 'letter-spacing' => array( 'typography', 'letterSpacing' ), + 'line-height' => array( 'typography', 'lineHeight' ), + 'margin' => array( 'spacing', 'margin' ), + 'margin-top' => array( 'spacing', 'margin', 'top' ), + 'margin-right' => array( 'spacing', 'margin', 'right' ), + 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), + 'margin-left' => array( 'spacing', 'margin', 'left' ), + 'padding' => array( 'spacing', 'padding' ), + 'padding-top' => array( 'spacing', 'padding', 'top' ), + 'padding-right' => array( 'spacing', 'padding', 'right' ), + 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + 'padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ), + '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ), + '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + '--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), + 'text-decoration' => array( 'typography', 'textDecoration' ), + 'text-transform' => array( 'typography', 'textTransform' ), + 'filter' => array( 'filter', 'duotone' ), ); /** @@ -276,7 +280,7 @@ protected function get_block_classes( $style_nodes ) { $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); $selector = $metadata['selector']; $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); - $declarations = static::compute_style_properties( $node, $settings ); + $declarations = static::compute_style_properties( $node, $settings, null, $selector ); // 1. Separate the ones who use the general selector // and the ones who use the duotone selector. @@ -310,9 +314,9 @@ protected function get_block_classes( $style_nodes ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--padding-top); padding-bottom: var(--wp--style--padding-bottom); }'; - $block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }'; - $block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--padding-right) * -1); margin-left: calc(var(--wp--style--padding-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; }'; @@ -480,6 +484,81 @@ protected static function get_metadata_boolean( $data, $path, $default = false ) return $default; } + /** + * Given a styles array, it extracts the style properties + * and adds them to the $declarations array following the format: + * + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` + * + * @param array $styles Styles to process. + * @param array $settings Theme settings. + * @param array $properties Properties metadata. + * @param string $selector Selector for styles. + * @return array Returns the modified $declarations. + */ + protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $selector = null ) { + if ( null === $properties ) { + $properties = static::PROPERTIES_METADATA; + } + + $declarations = array(); + $root_variable_duplicates = array(); + + if ( empty( $styles ) ) { + return $declarations; + } + + foreach ( $properties as $css_property => $value_path ) { + $value = static::get_property_value( $styles, $value_path ); + + if ( strpos( $css_property, '--wp--style--root--') === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) { + continue; + } + + if ( strpos( $css_property, '--wp--style--root--') === 0 ) { + $root_variable_duplicates[] = substr( $css_property, strlen('--wp--style--root--') ); + } + + // Look up protected properties, keyed by value path. + // Skip protected properties that are explicitly set to `null`. + if ( is_array( $value_path ) ) { + $path_string = implode( '.', $value_path ); + if ( + array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) && + _wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null + ) { + continue; + } + } + + // Skip if empty and not "0" or value represents array of longhand values. + $has_missing_value = empty( $value ) && ! is_numeric( $value ); + if ( $has_missing_value || is_array( $value ) ) { + continue; + } + + $declarations[] = array( + 'name' => $css_property, + 'value' => $value, + ); + } + + // If a variable value is added to the root, the corresponding property should be removed. + foreach ( $root_variable_duplicates as $duplicate ) { + $discard = array_search($duplicate,array_column($declarations, 'name')); + if ( $discard ) { + array_splice($declarations, $discard, 1); + } + } + + return $declarations; + } + /** * Returns a valid theme.json as provided by a theme. * diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 6827dbdf8d968..e0c9482700a25 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -320,8 +320,8 @@ } .is-root-container > .alignfull { - margin-right: calc(var(--wp--style--padding-right) * -1); - margin-left: calc(var(--wp--style--padding-left) * -1); + margin-right: calc(var(--wp--style--root--padding-right) * -1); + margin-left: calc(var(--wp--style--root--padding-left) * -1); } .wp-block[data-align="left"] > *, diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index f1bd0988a3e21..930ba60d6cbad 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -118,22 +118,22 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'spacing', 'blockGap' ], support: [ 'spacing', 'blockGap' ], }, - '--wp--style--padding-top': { + '--wp--style--root--padding-top': { value: [ 'spacing', 'padding', 'top' ], support: [ 'spacing', 'padding' ], rootOnly: true, }, - '--wp--style--padding-right': { + '--wp--style--root--padding-right': { value: [ 'spacing', 'padding', 'right' ], support: [ 'spacing', 'padding' ], rootOnly: true, }, - '--wp--style--padding-bottom': { + '--wp--style--root--padding-bottom': { value: [ 'spacing', 'padding', 'bottom' ], support: [ 'spacing', 'padding' ], rootOnly: true, }, - '--wp--style--padding-left': { + '--wp--style--root--padding-left': { value: [ 'spacing', 'padding', 'left' ], support: [ 'spacing', 'padding' ], rootOnly: true, diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 9c517fb5d4557..05f51c7353dc1 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -150,7 +150,10 @@ function flattenTree( input = {}, prefix, token ) { function getStylesDeclarations( blockStyles = {}, isRoot = false ) { const output = reduce( STYLE_PROPERTY, - ( declarations, { value, properties, useEngine }, key ) => { + ( declarations, { value, properties, useEngine, rootOnly }, key ) => { + if ( rootOnly && ! isRoot ) { + return declarations; + } const pathToValue = value; if ( first( pathToValue ) === 'elements' || useEngine ) { return declarations; @@ -339,7 +342,7 @@ export const toStyles = ( tree, blockSelectors ) => { const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); let ruleset = - 'body { padding-right: 0; padding-left: 0; } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + 'body { padding-right: 0; padding-left: 0; } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; nodesWithStyles.forEach( ( { selector, styles } ) => { const isRoot = ROOT_BLOCK_SELECTOR === selector; const declarations = getStylesDeclarations( styles, isRoot ); From 2b07b1574b581c2a850f2be10e425845a958e6c3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 5 Apr 2022 15:21:02 +1000 Subject: [PATCH 03/24] Fix issue with shorthand padding on server side. --- .../class-wp-theme-json-gutenberg.php | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 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 de05afd5bdd40..dcc0c11150749 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 @@ -152,6 +152,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { 'padding-right' => array( 'spacing', 'padding', 'right' ), 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), 'padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--root--padding' => array( 'spacing', 'padding' ), '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ), '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ), '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), @@ -314,9 +315,49 @@ protected function get_block_classes( $style_nodes ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $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); }'; + + $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 > .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; }'; From 59d23c4d91e8b989e905dcb0c802baaec3970549 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 5 Apr 2022 16:44:49 +1000 Subject: [PATCH 04/24] Temp fix for file path error --- .../class-wp-theme-json-resolver-6-0.php | 17 +++++++++++++++++ .../class-wp-theme-json-resolver-gutenberg.php | 16 ---------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php index cc6aa688493de..03682c092df2f 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php @@ -16,6 +16,23 @@ * @access private */ class WP_Theme_JSON_Resolver_6_0 extends WP_Theme_JSON_Resolver_5_9 { + /** + * Return core's origin config. + * + * @return WP_Theme_JSON_Gutenberg Entity that holds core data. + */ + public static function get_core_data() { + if ( null !== static::$core ) { + return static::$core; + } + + $config = static::read_json_file( __DIR__ . '/theme.json' ); + $config = static::translate( $config ); + static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); + + return static::$core; + } + /** * Given a theme.json structure modifies it in place * to update certain values by its translated strings diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 3c48c75beb185..560c756888960 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -16,22 +16,6 @@ * @access private */ class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 { - /** - * Return core's origin config. - * - * @return WP_Theme_JSON_Gutenberg Entity that holds core data. - */ - public static function get_core_data() { - if ( null !== static::$core ) { - return static::$core; - } - - $config = static::read_json_file( __DIR__ . '/theme.json' ); - $config = static::translate( $config ); - static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); - - return static::$core; - } /** * Returns the theme's data. From e2be9f3d987c792986a143ec7139cbbbf4bf3d92 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 6 Apr 2022 17:36:37 +1000 Subject: [PATCH 05/24] Fix site editor top padding not updating --- .../src/components/global-styles/use-global-styles-output.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 05f51c7353dc1..e00abc9e45a63 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -342,7 +342,7 @@ export const toStyles = ( tree, blockSelectors ) => { const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); let ruleset = - 'body { padding-right: 0; padding-left: 0; } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; nodesWithStyles.forEach( ( { selector, styles } ) => { const isRoot = ROOT_BLOCK_SELECTOR === selector; const declarations = getStylesDeclarations( styles, isRoot ); From 9f362975c371ffdaff2126e32c4048e15cbe3cbe Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Apr 2022 13:01:20 +1000 Subject: [PATCH 06/24] Support shorthand properties in site editor. --- packages/blocks/src/api/constants.js | 25 ++++------ .../global-styles/use-global-styles-output.js | 48 +++++++++++++++++++ 2 files changed, 56 insertions(+), 17 deletions(-) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 930ba60d6cbad..42c56400b5a2c 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -118,24 +118,15 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'spacing', 'blockGap' ], support: [ 'spacing', 'blockGap' ], }, - '--wp--style--root--padding-top': { - value: [ 'spacing', 'padding', 'top' ], - support: [ 'spacing', 'padding' ], - rootOnly: true, - }, - '--wp--style--root--padding-right': { - value: [ 'spacing', 'padding', 'right' ], - support: [ 'spacing', 'padding' ], - rootOnly: true, - }, - '--wp--style--root--padding-bottom': { - value: [ 'spacing', 'padding', 'bottom' ], - support: [ 'spacing', 'padding' ], - rootOnly: true, - }, - '--wp--style--root--padding-left': { - value: [ 'spacing', 'padding', 'left' ], + '--wp--style--root--padding': { + value: [ 'spacing', 'padding' ], support: [ 'spacing', 'padding' ], + properties: { + '--wp--style--root--padding-top': 'top', + '--wp--style--root--padding-right': 'right', + '--wp--style--root--padding-bottom': 'bottom', + '--wp--style--root--padding-left': 'left', + }, rootOnly: true, }, }; diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index e00abc9e45a63..f0177faa60631 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -178,6 +178,54 @@ function getStylesDeclarations( blockStyles = {}, isRoot = false ) { ) }` ); } ); + } else if ( !! properties && isString( styleValue ) && rootOnly ) { + const separateValues = styleValue.split( ' ' ); + + const sortedBoxValues = { + top: '17px', + right: '17px', + bottom: '17px', + left: '17px', + }; + + switch ( separateValues.length ) { + case 1: + sortedBoxValues.top = separateValues[ 0 ]; + sortedBoxValues.right = separateValues[ 0 ]; + sortedBoxValues.bottom = separateValues[ 0 ]; + sortedBoxValues.left = separateValues[ 0 ]; + break; + case 2: + sortedBoxValues.top = separateValues[ 0 ]; + sortedBoxValues.right = separateValues[ 1 ]; + sortedBoxValues.bottom = separateValues[ 0 ]; + sortedBoxValues.left = separateValues[ 1 ]; + break; + case 3: + sortedBoxValues.top = separateValues[ 0 ]; + sortedBoxValues.right = separateValues[ 1 ]; + sortedBoxValues.bottom = separateValues[ 2 ]; + sortedBoxValues.left = separateValues[ 1 ]; + break; + case 4: + sortedBoxValues.top = separateValues[ 0 ]; + sortedBoxValues.right = separateValues[ 1 ]; + sortedBoxValues.bottom = separateValues[ 2 ]; + sortedBoxValues.left = separateValues[ 3 ]; + break; + } + + Object.entries( properties ).forEach( ( entry ) => { + const [ name, prop ] = entry; + const cssProperty = name.startsWith( '--' ) + ? name + : kebabCase( name ); + declarations.push( + `${ cssProperty }: ${ compileStyleValue( + get( sortedBoxValues, [ prop ] ) + ) }` + ); + } ); } else if ( get( blockStyles, pathToValue, false ) ) { const cssProperty = key.startsWith( '--' ) ? key From 88035d546d6ab74b68e0a1d367811e119139ecb5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Apr 2022 16:18:38 +1000 Subject: [PATCH 07/24] 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 dcc0c11150749..7a5e6c54456d7 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 @@ -316,48 +316,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; }'; @@ -565,6 +526,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 ) ) { From 34f7205f4c974dd047983df426dcd55386a5d292 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Apr 2022 17:57:00 +1000 Subject: [PATCH 08/24] Check selector inside function. --- .../global-styles/use-global-styles-output.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index f0177faa60631..3f45cd8409b8d 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -142,12 +142,14 @@ function flattenTree( input = {}, prefix, token ) { /** * Transform given style tree into a set of style declarations. * - * @param {Object} blockStyles Block styles. + * @param {Object} blockStyles Block styles. + * + * @param {string} selector The selector these declarations should attach to. * - * @param {boolean} isRoot Whether the styles apply to the root selector. * @return {Array} An array of style declarations. */ -function getStylesDeclarations( blockStyles = {}, isRoot = false ) { +function getStylesDeclarations( blockStyles = {}, selector = '' ) { + const isRoot = ROOT_BLOCK_SELECTOR === selector; const output = reduce( STYLE_PROPERTY, ( declarations, { value, properties, useEngine, rootOnly }, key ) => { @@ -392,8 +394,7 @@ export const toStyles = ( tree, blockSelectors ) => { let ruleset = 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; nodesWithStyles.forEach( ( { selector, styles } ) => { - const isRoot = ROOT_BLOCK_SELECTOR === selector; - const declarations = getStylesDeclarations( styles, isRoot ); + const declarations = getStylesDeclarations( styles, selector ); if ( declarations.length === 0 ) { return; } From 1d2e630985aea3b6b33f5122e547ab952491798d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Apr 2022 18:17:43 +1000 Subject: [PATCH 09/24] Fix kebab-casing of CSS variables. --- .../src/components/global-styles/use-global-styles-output.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 3f45cd8409b8d..c39bf1a9e0629 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -172,8 +172,9 @@ function getStylesDeclarations( blockStyles = {}, selector = '' ) { // for sub-properties that don't have any value. return; } - - const cssProperty = kebabCase( name ); + const cssProperty = name.startsWith( '--' ) + ? name + : kebabCase( name ); declarations.push( `${ cssProperty }: ${ compileStyleValue( get( styleValue, [ prop ] ) From 5f9da6dea0ff31188fa374ea8ef171846fc6e686 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 14:04:08 +1000 Subject: [PATCH 10/24] Fix borked merge conflict solving --- .../class-wp-theme-json-resolver-6-0.php | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php index 03682c092df2f..9fcaef1d06f74 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php @@ -16,22 +16,6 @@ * @access private */ class WP_Theme_JSON_Resolver_6_0 extends WP_Theme_JSON_Resolver_5_9 { - /** - * Return core's origin config. - * - * @return WP_Theme_JSON_Gutenberg Entity that holds core data. - */ - public static function get_core_data() { - if ( null !== static::$core ) { - return static::$core; - } - - $config = static::read_json_file( __DIR__ . '/theme.json' ); - $config = static::translate( $config ); - static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); - - return static::$core; - } /** * Given a theme.json structure modifies it in place From e68ae13eab0fa0bfd1100de2571028fab8f0bde2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 15:25:35 +1000 Subject: [PATCH 11/24] Move post editor full width styles to edit-post package. --- packages/block-editor/src/components/block-list/style.scss | 5 ----- packages/edit-post/src/style.scss | 7 +++++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index e0c9482700a25..73f1579de94d4 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -319,11 +319,6 @@ } } -.is-root-container > .alignfull { - margin-right: calc(var(--wp--style--root--padding-right) * -1); - margin-left: calc(var(--wp--style--root--padding-left) * -1); -} - .wp-block[data-align="left"] > *, .wp-block[data-align="right"] > *, .wp-block.alignleft, diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index c4ec7dc7100df..219694aae4597 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -96,4 +96,11 @@ body.block-editor-page { } } +// For block themes, full width blocks at root level need +// to overlay the root container padding. +.is-root-container > .alignfull { + margin-right: calc(var(--wp--style--root--padding-right) * -1); + margin-left: calc(var(--wp--style--root--padding-left) * -1); +} + @include wordpress-admin-schemes(); From 688376a0a0619246428353f69e8b96f9d56461c3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 15:37:52 +1000 Subject: [PATCH 12/24] Set default padding value to 0. --- .../wordpress-6.0/class-wp-theme-json-gutenberg.php | 8 ++++---- .../components/global-styles/use-global-styles-output.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 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 7a5e6c54456d7..e9cbadf59bde4 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 @@ -529,10 +529,10 @@ protected static function compute_style_properties( $styles, $settings = array() // 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'; + $shorthand_top = '0'; + $shorthand_right = '0'; + $shorthand_bottom = '0'; + $shorthand_left = '0'; $separate_values = explode( ' ', $value ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index c39bf1a9e0629..b5735f775eb05 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -185,10 +185,10 @@ function getStylesDeclarations( blockStyles = {}, selector = '' ) { const separateValues = styleValue.split( ' ' ); const sortedBoxValues = { - top: '17px', - right: '17px', - bottom: '17px', - left: '17px', + top: '0', + right: '0', + bottom: '0', + left: '0', }; switch ( separateValues.length ) { From a9b8fc7b8e6e1ad10909f7ddbead53e0b30a6c29 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 15:41:17 +1000 Subject: [PATCH 13/24] Update test string. --- .../components/global-styles/test/use-global-styles-output.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index 5d1c45af104a7..1b1fc222ee5a0 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -377,7 +377,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); } ); From 3ab23bf1b00551b67609a5b99d6abe1a1c1883dc Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 15:49:23 +1000 Subject: [PATCH 14/24] Fix PHP unit tests --- phpunit/class-wp-theme-json-test.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 89240870399dc..42b72a592596c 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;--wp--style--block-gap: 1em;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }π.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); From c21cc1b1d58f140f1ab06f37b298bd203309422e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 8 Apr 2022 15:57:14 +1000 Subject: [PATCH 15/24] Fix PHP lint --- .../class-wp-theme-json-gutenberg.php | 136 +++++++++--------- .../class-wp-theme-json-resolver-6-0.php | 2 +- 2 files changed, 69 insertions(+), 69 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 e9cbadf59bde4..ef6c70b51d21d 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 @@ -149,18 +149,18 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { 'margin-left' => array( 'spacing', 'margin', 'left' ), 'padding' => array( 'spacing', 'padding' ), 'padding-top' => array( 'spacing', 'padding', 'top' ), - 'padding-right' => array( 'spacing', 'padding', 'right' ), - 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), - 'padding-left' => array( 'spacing', 'padding', 'left' ), + 'padding-right' => array( 'spacing', 'padding', 'right' ), + 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + 'padding-left' => array( 'spacing', 'padding', 'left' ), '--wp--style--root--padding' => array( 'spacing', 'padding' ), '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ), '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ), '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), '--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), - 'text-decoration' => array( 'typography', 'textDecoration' ), - 'text-transform' => array( 'typography', 'textTransform' ), - 'filter' => array( 'filter', 'duotone' ), + '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), + 'text-decoration' => array( 'typography', 'textDecoration' ), + 'text-transform' => array( 'typography', 'textTransform' ), + 'filter' => array( 'filter', 'duotone' ), ); /** @@ -497,9 +497,9 @@ protected static function get_metadata_boolean( $data, $path, $default = false ) * ) * ``` * - * @param array $styles Styles to process. - * @param array $settings Theme settings. - * @param array $properties Properties metadata. + * @param array $styles Styles to process. + * @param array $settings Theme settings. + * @param array $properties Properties metadata. * @param string $selector Selector for styles. * @return array Returns the modified $declarations. */ @@ -508,7 +508,7 @@ protected static function compute_style_properties( $styles, $settings = array() $properties = static::PROPERTIES_METADATA; } - $declarations = array(); + $declarations = array(); $root_variable_duplicates = array(); if ( empty( $styles ) ) { @@ -518,73 +518,73 @@ protected static function compute_style_properties( $styles, $settings = array() foreach ( $properties as $css_property => $value_path ) { $value = static::get_property_value( $styles, $value_path ); - if ( strpos( $css_property, '--wp--style--root--') === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) { + if ( strpos( $css_property, '--wp--style--root--' ) === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) { continue; } - if ( strpos( $css_property, '--wp--style--root--') === 0 ) { - $root_variable_duplicates[] = substr( $css_property, strlen('--wp--style--root--') ); + if ( strpos( $css_property, '--wp--style--root--' ) === 0 ) { + $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) ) { + if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) { - $shorthand_top = '0'; - $shorthand_right = '0'; + $shorthand_top = '0'; + $shorthand_right = '0'; $shorthand_bottom = '0'; - $shorthand_left = '0'; - + $shorthand_left = '0'; + $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; - } + 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); + $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; + continue; } // Look up protected properties, keyed by value path. @@ -613,9 +613,9 @@ protected static function compute_style_properties( $styles, $settings = array() // If a variable value is added to the root, the corresponding property should be removed. foreach ( $root_variable_duplicates as $duplicate ) { - $discard = array_search($duplicate,array_column($declarations, 'name')); + $discard = array_search( $duplicate,array_column( $declarations, 'name' ) ); if ( $discard ) { - array_splice($declarations, $discard, 1); + array_splice( $declarations, $discard, 1 ); } } diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php index 9fcaef1d06f74..11c20951d7faf 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php @@ -16,7 +16,7 @@ * @access private */ class WP_Theme_JSON_Resolver_6_0 extends WP_Theme_JSON_Resolver_5_9 { - + /** * Given a theme.json structure modifies it in place * to update certain values by its translated strings From 4b02d65f8d43f81d87f702af37934ad01aab975f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Apr 2022 11:02:23 +1000 Subject: [PATCH 16/24] Fix failing PHP tests. --- phpunit/class-wp-theme-json-test.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 42b72a592596c..535b75e1e831f 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }π.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; + $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;}body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); } From 54e0e7cc169431aeacc3c9ede16875454b8f73b8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Apr 2022 11:12:51 +1000 Subject: [PATCH 17/24] Use block gap variable as default root padding value. --- lib/compat/wordpress-6.0/theme.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/compat/wordpress-6.0/theme.json b/lib/compat/wordpress-6.0/theme.json index a107593517f46..6a9a1332b313e 100644 --- a/lib/compat/wordpress-6.0/theme.json +++ b/lib/compat/wordpress-6.0/theme.json @@ -243,10 +243,10 @@ "spacing": { "blockGap": "24px", "padding": { - "top": "17px", - "right": "17px", - "bottom": "17px", - "left": "17px" + "top": "var(--wp--style--block-gap)", + "right": "var(--wp--style--block-gap)", + "bottom": "var(--wp--style--block-gap)", + "left": "var(--wp--style--block-gap)" } } } From e69a08c286ef2c830ce757e0982169e7ea569804 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Apr 2022 15:45:37 +1000 Subject: [PATCH 18/24] Fix linting errors. --- lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php | 6 +++--- 1 file changed, 3 insertions(+), 3 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 ef6c70b51d21d..8d3aff75bc41c 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 @@ -533,11 +533,11 @@ protected static function compute_style_properties( $styles, $settings = array() $shorthand_right = '0'; $shorthand_bottom = '0'; $shorthand_left = '0'; - + $separate_values = explode( ' ', $value ); switch ( count( $separate_values ) ) { - case 1: + case 1: $shorthand_top = $separate_values[0]; $shorthand_right = $separate_values[0]; $shorthand_bottom = $separate_values[0]; @@ -613,7 +613,7 @@ protected static function compute_style_properties( $styles, $settings = array() // If a variable value is added to the root, the corresponding property should be removed. foreach ( $root_variable_duplicates as $duplicate ) { - $discard = array_search( $duplicate,array_column( $declarations, 'name' ) ); + $discard = array_search( $duplicate, array_column( $declarations, 'name' ), true ); if ( $discard ) { array_splice( $declarations, $discard, 1 ); } From 43c84a5b0ca641e9b48a99cfd9b1d6ec36388af5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Apr 2022 15:01:12 +1000 Subject: [PATCH 19/24] Add opt-in setting via package.json --- .../class-wp-theme-json-gutenberg.php | 32 +++++++++++-------- .../global-styles/use-global-styles-output.js | 22 +++++++++---- 2 files changed, 34 insertions(+), 20 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 8d3aff75bc41c..eaaa94357db06 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 @@ -196,14 +196,15 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { * @var array */ const VALID_SETTINGS = array( - 'appearanceTools' => null, - 'border' => array( + 'appearanceTools' => null, + 'useRootVariables' => null, + 'border' => array( 'color' => null, 'radius' => null, 'style' => null, 'width' => null, ), - 'color' => array( + 'color' => array( 'background' => null, 'custom' => null, 'customDuotone' => null, @@ -217,18 +218,18 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { 'palette' => null, 'text' => null, ), - 'custom' => null, - 'layout' => array( - 'contentSize' => null, - 'wideSize' => null, + 'custom' => null, + 'layout' => array( + 'contentSize' => null, + 'wideSize' => null, ), - 'spacing' => array( + 'spacing' => array( 'blockGap' => null, 'margin' => null, 'padding' => null, 'units' => null, ), - 'typography' => array( + 'typography' => array( 'customFontSize' => null, 'dropCap' => null, 'fontFamilies' => null, @@ -278,10 +279,12 @@ protected function get_block_classes( $style_nodes ) { continue; } + $use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() ); + var_dump($use_root_vars); $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); $selector = $metadata['selector']; $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); - $declarations = static::compute_style_properties( $node, $settings, null, $selector ); + $declarations = static::compute_style_properties( $node, $settings, null, $selector, $use_root_vars ); // 1. Separate the ones who use the general selector // and the ones who use the duotone selector. @@ -315,10 +318,11 @@ protected function get_block_classes( $style_nodes ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - - $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }'; + 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); }'; + } $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; }'; @@ -503,7 +507,7 @@ protected static function get_metadata_boolean( $data, $path, $default = false ) * @param string $selector Selector for styles. * @return array Returns the modified $declarations. */ - protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $selector = null ) { + protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $selector = null, $use_root_vars = null ) { if ( null === $properties ) { $properties = static::PROPERTIES_METADATA; } @@ -522,7 +526,7 @@ protected static function compute_style_properties( $styles, $settings = array() continue; } - if ( strpos( $css_property, '--wp--style--root--' ) === 0 ) { + if ( strpos( $css_property, '--wp--style--root--' ) === 0 && $use_root_vars ) { $root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) ); } diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index b5735f775eb05..767cebd326d2f 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -142,13 +142,14 @@ function flattenTree( input = {}, prefix, token ) { /** * Transform given style tree into a set of style declarations. * - * @param {Object} blockStyles Block styles. + * @param {Object} blockStyles Block styles. * - * @param {string} selector The selector these declarations should attach to. + * @param {string} selector The selector these declarations should attach to. * + * @param {boolean} useRootVars Whether to use CSS custom properties in root selector. * @return {Array} An array of style declarations. */ -function getStylesDeclarations( blockStyles = {}, selector = '' ) { +function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) { const isRoot = ROOT_BLOCK_SELECTOR === selector; const output = reduce( STYLE_PROPERTY, @@ -245,7 +246,7 @@ function getStylesDeclarations( blockStyles = {}, selector = '' ) { [] ); - if ( isRoot ) { + if ( isRoot && useRootVars ) { return output; } @@ -391,11 +392,20 @@ export const toCustomProperties = ( tree, blockSelectors ) => { export const toStyles = ( tree, blockSelectors ) => { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); + const useRootVars = tree?.settings?.useRootVariables; let ruleset = - 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + if ( useRootVars ) { + ruleset = + 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + } nodesWithStyles.forEach( ( { selector, styles } ) => { - const declarations = getStylesDeclarations( styles, selector ); + const declarations = getStylesDeclarations( + styles, + selector, + useRootVars + ); if ( declarations.length === 0 ) { return; } From 4afc3d61b421ced9094e62fc752ed0e2c5a55de8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Apr 2022 15:23:00 +1000 Subject: [PATCH 20/24] Generate correct block editor styles --- .../wordpress-6.0/class-wp-theme-json-gutenberg.php | 10 +++++++--- .../class-wp-theme-json-resolver-gutenberg.php | 1 - packages/edit-post/src/style.scss | 7 ------- 3 files changed, 7 insertions(+), 11 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 eaaa94357db06..985dbe74901a4 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 @@ -280,7 +280,6 @@ protected function get_block_classes( $style_nodes ) { } $use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() ); - var_dump($use_root_vars); $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); $selector = $metadata['selector']; $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); @@ -320,8 +319,13 @@ protected function get_block_classes( $style_nodes ) { if ( static::ROOT_BLOCK_SELECTOR === $selector ) { 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); }'; + $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); }'; + + // 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 .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 560c756888960..960ea659e8d2e 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -16,7 +16,6 @@ * @access private */ class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 { - /** * Returns the theme's data. * diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 219694aae4597..c4ec7dc7100df 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -96,11 +96,4 @@ body.block-editor-page { } } -// For block themes, full width blocks at root level need -// to overlay the root container padding. -.is-root-container > .alignfull { - margin-right: calc(var(--wp--style--root--padding-right) * -1); - margin-left: calc(var(--wp--style--root--padding-left) * -1); -} - @include wordpress-admin-schemes(); From 72c72ec48262958da1870e0df31e10c59a113bed Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Apr 2022 15:36:19 +1000 Subject: [PATCH 21/24] Fix tests and add prop to core theme.json --- lib/compat/wordpress-6.0/theme.json | 1 + .../global-styles/test/use-global-styles-output.js | 2 +- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/lib/compat/wordpress-6.0/theme.json b/lib/compat/wordpress-6.0/theme.json index 6a9a1332b313e..74098f5194709 100644 --- a/lib/compat/wordpress-6.0/theme.json +++ b/lib/compat/wordpress-6.0/theme.json @@ -2,6 +2,7 @@ "version": 2, "settings": { "appearanceTools": false, + "useRootVariables": false, "border": { "color": false, "radius": false, diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index 1b1fc222ee5a0..5d1c45af104a7 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -377,7 +377,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); } ); diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 535b75e1e831f..89240870399dc 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;--wp--style--block-gap: 1em;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; + $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); } From a26beda804cdca7e6d3b9d4b2fa9de4e6c2daead Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Apr 2022 16:03:43 +1000 Subject: [PATCH 22/24] Fix unit tests properly this time --- .../global-styles/test/use-global-styles-output.js | 2 +- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index 5d1c45af104a7..41d79c4b9ca29 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -377,7 +377,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); } ); diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 89240870399dc..8b7a061e275a5 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + $expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; + $styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;}body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); } From 81b45785e134b612fe5afbe827c0c582fedf2a57 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 26 Apr 2022 15:18:14 +1000 Subject: [PATCH 23/24] Merge remote-tracking branch 'origin/trunk' into try/root-padding-fix # Conflicts: # packages/edit-site/src/components/global-styles/test/use-global-styles-output.js # packages/edit-site/src/components/global-styles/use-global-styles-output.js --- .../class-wp-theme-json-gutenberg.php | 152 +++++++----------- .../global-styles/use-global-styles-output.js | 2 +- 2 files changed, 57 insertions(+), 97 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 d750c14f7a9fc..f57ea54533fd4 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 @@ -22,49 +22,54 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { * path to the value in theme.json & block attributes. */ const PROPERTIES_METADATA = array( - 'background' => array( 'color', 'gradient' ), - 'background-color' => array( 'color', 'background' ), - 'border-radius' => array( 'border', 'radius' ), - 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), - 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), - 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), - 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), - 'border-color' => array( 'border', 'color' ), - 'border-width' => array( 'border', 'width' ), - 'border-style' => array( 'border', 'style' ), - 'border-top-color' => array( 'border', 'top', 'color' ), - 'border-top-width' => array( 'border', 'top', 'width' ), - 'border-top-style' => array( 'border', 'top', 'style' ), - 'border-right-color' => array( 'border', 'right', 'color' ), - 'border-right-width' => array( 'border', 'right', 'width' ), - 'border-right-style' => array( 'border', 'right', 'style' ), - 'border-bottom-color' => array( 'border', 'bottom', 'color' ), - 'border-bottom-width' => array( 'border', 'bottom', 'width' ), - 'border-bottom-style' => array( 'border', 'bottom', 'style' ), - 'border-left-color' => array( 'border', 'left', 'color' ), - 'border-left-width' => array( 'border', 'left', 'width' ), - 'border-left-style' => array( 'border', 'left', 'style' ), - 'color' => array( 'color', 'text' ), - 'font-family' => array( 'typography', 'fontFamily' ), - 'font-size' => array( 'typography', 'fontSize' ), - 'font-style' => array( 'typography', 'fontStyle' ), - 'font-weight' => array( 'typography', 'fontWeight' ), - 'letter-spacing' => array( 'typography', 'letterSpacing' ), - 'line-height' => array( 'typography', 'lineHeight' ), - 'margin' => array( 'spacing', 'margin' ), - 'margin-top' => array( 'spacing', 'margin', 'top' ), - 'margin-right' => array( 'spacing', 'margin', 'right' ), - 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), - 'margin-left' => array( 'spacing', 'margin', 'left' ), - 'padding' => array( 'spacing', 'padding' ), - 'padding-top' => array( 'spacing', 'padding', 'top' ), - 'padding-right' => array( 'spacing', 'padding', 'right' ), - 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), - 'padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), - 'text-decoration' => array( 'typography', 'textDecoration' ), - 'text-transform' => array( 'typography', 'textTransform' ), - 'filter' => array( 'filter', 'duotone' ), + 'background' => array( 'color', 'gradient' ), + 'background-color' => array( 'color', 'background' ), + 'border-radius' => array( 'border', 'radius' ), + 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), + 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), + 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), + 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), + 'border-color' => array( 'border', 'color' ), + 'border-width' => array( 'border', 'width' ), + 'border-style' => array( 'border', 'style' ), + 'border-top-color' => array( 'border', 'top', 'color' ), + 'border-top-width' => array( 'border', 'top', 'width' ), + 'border-top-style' => array( 'border', 'top', 'style' ), + 'border-right-color' => array( 'border', 'right', 'color' ), + 'border-right-width' => array( 'border', 'right', 'width' ), + 'border-right-style' => array( 'border', 'right', 'style' ), + 'border-bottom-color' => array( 'border', 'bottom', 'color' ), + 'border-bottom-width' => array( 'border', 'bottom', 'width' ), + 'border-bottom-style' => array( 'border', 'bottom', 'style' ), + 'border-left-color' => array( 'border', 'left', 'color' ), + 'border-left-width' => array( 'border', 'left', 'width' ), + 'border-left-style' => array( 'border', 'left', 'style' ), + 'color' => array( 'color', 'text' ), + 'font-family' => array( 'typography', 'fontFamily' ), + 'font-size' => array( 'typography', 'fontSize' ), + 'font-style' => array( 'typography', 'fontStyle' ), + 'font-weight' => array( 'typography', 'fontWeight' ), + 'letter-spacing' => array( 'typography', 'letterSpacing' ), + 'line-height' => array( 'typography', 'lineHeight' ), + 'margin' => array( 'spacing', 'margin' ), + 'margin-top' => array( 'spacing', 'margin', 'top' ), + 'margin-right' => array( 'spacing', 'margin', 'right' ), + 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), + 'margin-left' => array( 'spacing', 'margin', 'left' ), + 'padding' => array( 'spacing', 'padding' ), + 'padding-top' => array( 'spacing', 'padding', 'top' ), + 'padding-right' => array( 'spacing', 'padding', 'right' ), + 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + 'padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--root--padding' => array( 'spacing', 'padding' ), + '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ), + '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ), + '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + '--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), + 'text-decoration' => array( 'typography', 'textDecoration' ), + 'text-transform' => array( 'typography', 'textTransform' ), + 'filter' => array( 'filter', 'duotone' ), ); /** @@ -169,51 +174,6 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { ), ); - /* - * Metadata for style properties. - * - * Each element is a direct mapping from the CSS property name to the - * path to the value in theme.json & block attributes. - */ - const PROPERTIES_METADATA = array( - 'background' => array( 'color', 'gradient' ), - 'background-color' => array( 'color', 'background' ), - 'border-radius' => array( 'border', 'radius' ), - 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), - 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), - 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ), - 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ), - 'border-color' => array( 'border', 'color' ), - 'border-width' => array( 'border', 'width' ), - 'border-style' => array( 'border', 'style' ), - 'color' => array( 'color', 'text' ), - 'font-family' => array( 'typography', 'fontFamily' ), - 'font-size' => array( 'typography', 'fontSize' ), - 'font-style' => array( 'typography', 'fontStyle' ), - 'font-weight' => array( 'typography', 'fontWeight' ), - 'letter-spacing' => array( 'typography', 'letterSpacing' ), - 'line-height' => array( 'typography', 'lineHeight' ), - 'margin' => array( 'spacing', 'margin' ), - 'margin-top' => array( 'spacing', 'margin', 'top' ), - 'margin-right' => array( 'spacing', 'margin', 'right' ), - 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ), - 'margin-left' => array( 'spacing', 'margin', 'left' ), - 'padding' => array( 'spacing', 'padding' ), - 'padding-top' => array( 'spacing', 'padding', 'top' ), - 'padding-right' => array( 'spacing', 'padding', 'right' ), - 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), - 'padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp--style--root--padding' => array( 'spacing', 'padding' ), - '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ), - '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ), - '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), - '--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), - 'text-decoration' => array( 'typography', 'textDecoration' ), - 'text-transform' => array( 'typography', 'textTransform' ), - 'filter' => array( 'filter', 'duotone' ), - ); - /** * The top-level keys a theme.json can have. * @@ -271,8 +231,8 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { ), 'custom' => null, 'layout' => array( - 'contentSize' => null, - 'wideSize' => null, + 'contentSize' => null, + 'wideSize' => null, ), 'spacing' => array( 'blockGap' => null, @@ -372,10 +332,10 @@ protected function get_block_classes( $style_nodes ) { } $use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() ); - $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); - $selector = $metadata['selector']; - $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); - $declarations = static::compute_style_properties( $node, $settings, null, $selector, $use_root_vars ); + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + $selector = $metadata['selector']; + $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); + $declarations = static::compute_style_properties( $node, $settings, null, $selector, $use_root_vars ); // 1. Separate the ones who use the general selector // and the ones who use the duotone selector. @@ -418,7 +378,7 @@ protected function get_block_classes( $style_nodes ) { 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 .= '.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; }'; @@ -633,7 +593,7 @@ protected static function compute_style_properties( $styles, $settings = array() $shorthand_right = '0'; $shorthand_bottom = '0'; $shorthand_left = '0'; - + $separate_values = explode( ' ', $value ); switch ( count( $separate_values ) ) { diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 089b6ecff2c2c..f5227015218bd 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -436,7 +436,7 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => { let ruleset = 'body {margin: 0;}'; if ( useRootVars ) { ruleset = - 'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + 'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } }'; } nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => { From 0218267d315b26c265ecfa6af1787b6e0f1120cf Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 26 Apr 2022 15:33:01 +1000 Subject: [PATCH 24/24] Added missing doc comment for parameter "$use_root_vars" --- .../wordpress-6.0/class-wp-theme-json-gutenberg.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 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 f57ea54533fd4..42a22c7061d67 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 @@ -557,10 +557,11 @@ protected static function get_metadata_boolean( $data, $path, $default = false ) * ) * ``` * - * @param array $styles Styles to process. - * @param array $settings Theme settings. - * @param array $properties Properties metadata. - * @param string $selector Selector for styles. + * @param array $styles Styles to process. + * @param array $settings Theme settings. + * @param array $properties Properties metadata. + * @param string $selector Selector for styles. + * @param boolean $use_root_vars Whether to use root variables. * @return array Returns the modified $declarations. */ protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $selector = null, $use_root_vars = null ) {