diff --git a/src/wp-content/themes/twentytwentytwo/theme.json b/src/wp-content/themes/twentytwentytwo/theme.json index 6469b74719e1a..fe3eafcc84f53 100644 --- a/src/wp-content/themes/twentytwentytwo/theme.json +++ b/src/wp-content/themes/twentytwentytwo/theme.json @@ -36,32 +36,50 @@ "color": { "duotone": [ { - "colors": [ "#000000", "#ffffff" ], + "colors": [ + "#000000", + "#ffffff" + ], "slug": "foreground-and-background", "name": "Foreground and background" }, { - "colors": [ "#000000", "#ffe2c7" ], + "colors": [ + "#000000", + "#ffe2c7" + ], "slug": "foreground-and-secondary", "name": "Foreground and secondary" }, { - "colors": [ "#000000", "#f6f6f6" ], + "colors": [ + "#000000", + "#f6f6f6" + ], "slug": "foreground-and-tertiary", "name": "Foreground and tertiary" }, { - "colors": [ "#1a4548", "#ffffff" ], + "colors": [ + "#1a4548", + "#ffffff" + ], "slug": "primary-and-background", "name": "Primary and background" }, { - "colors": [ "#1a4548", "#ffe2c7" ], + "colors": [ + "#1a4548", + "#ffe2c7" + ], "slug": "primary-and-secondary", "name": "Primary and secondary" }, { - "colors": [ "#1a4548", "#f6f6f6" ], + "colors": [ + "#1a4548", + "#f6f6f6" + ], "slug": "primary-and-tertiary", "name": "Primary and tertiary" } @@ -330,7 +348,10 @@ } }, "spacing": { - "blockGap": "1.5rem" + "blockGap": { + "row": "1.5em", + "column": "1.5em" + } }, "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 66b7d55e7dec8..4afac8bfbcd6a 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -165,37 +165,39 @@ class WP_Theme_JSON { * @var array */ 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--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--block-gap' => array( 'spacing', 'blockGap' ), + '--wp--style--block-gap-row' => array( 'spacing', 'blockGap', 'row' ), + '--wp--style--block-gap-column' => array( 'spacing', 'blockGap', 'column' ), + 'text-decoration' => array( 'typography', 'textDecoration' ), + 'text-transform' => array( 'typography', 'textTransform' ), + 'filter' => array( 'filter', 'duotone' ), ); /** @@ -766,14 +768,59 @@ private function get_block_classes( $style_nodes ) { $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); $declarations = self::compute_style_properties( $node, $settings ); - // 1. Separate the ones who use the general selector - // and the ones who use the duotone selector. - $declarations_duotone = array(); + // Filter the style $declarations. + $declarations_duotone = array(); + $declarations_block_gap = array(); foreach ( $declarations as $index => $declaration ) { + // 1. Separate the ones who use the general selector + // and the ones who use the duotone selector. if ( 'filter' === $declaration['name'] ) { unset( $declarations[ $index ] ); $declarations_duotone[] = $declaration; } + // 2. Save the block gap row and column CSS vars + if ( str_starts_with( $declaration['name'], '--wp--style--block' ) ) { + $declarations_block_gap[ $declaration['name'] ] = $declaration; + unset( $declarations[ $index ] ); + } + } + + // @TODO how to better extract this? + if ( ! empty( $declarations_block_gap ) ) { + if ( isset( $declarations_block_gap['--wp--style--block-gap'] ) ) { + $declarations[] = array( + 'name' => '--wp--style--block-gap', + 'value' => $declarations_block_gap['--wp--style--block-gap']['value'], + ); + // @TODO what if the shorthand value is something like "calc(100% - 20px)"?? + // Or should we regex and enforce only number + unit?? + if ( preg_match( '/^([\d\.]+[a-z%]+[\s]{0,1}){1,2}/', $declarations_block_gap['--wp--style--block-gap']['value'] ) ) { + $gap_values = explode( ' ', $declarations_block_gap['--wp--style--block-gap']['value'] ); + $declarations[] = array( + 'name' => '--wp--style--block-gap-row', + 'value' => $gap_values[0], + ); + $declarations[] = array( + 'name' => '--wp--style--block-gap-column', + 'value' => isset( $gap_values[1] ) ? $gap_values[1] : $gap_values[0], + ); + } + } + + if ( isset( $declarations_block_gap['--wp--style--block-gap-row'] ) && isset( $declarations_block_gap['--wp--style--block-gap-column'] ) ) { + $declarations[] = array( + 'name' => '--wp--style--block-gap', + 'value' => $declarations_block_gap['--wp--style--block-gap-row']['value'] . ' ' . $declarations_block_gap['--wp--style--block-gap-column']['value'], + ); + $declarations[] = array( + 'name' => '--wp--style--block-gap-row', + 'value' => $declarations_block_gap['--wp--style--block-gap-row']['value'], + ); + $declarations[] = array( + 'name' => '--wp--style--block-gap-column', + 'value' => $declarations_block_gap['--wp--style--block-gap-column']['value'], + ); + } } /*