From 1962932ba0f8d48ee699930165d604e88865fe1f Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 10 Dec 2021 16:19:15 +1100 Subject: [PATCH 1/3] Initial commit to test how and where to manipulate the style declarations for block gap. --- src/wp-includes/class-wp-theme-json.php | 113 +++++++++++++++++------- 1 file changed, 79 insertions(+), 34 deletions(-) diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 66b7d55e7dec8..8480118656e4d 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -165,37 +165,47 @@ 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' ), + ); + + /** + * Presets are a set of values that serve + * to bootstrap some top-level styles: spacing, etc. + */ + const STYLE_DECLARATION_TRANSFORMS = array( + '--wp--style--block-gap' => array(), ); /** @@ -766,14 +776,46 @@ 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 ] ); + } + } + + 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'], + ); + $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'], + ); + } } /* @@ -1291,6 +1333,9 @@ private static function compute_style_properties( $styles, $settings = array(), continue; } + // @TODO we could use the $css_property as a key and update $declarations accordingly + + $declarations[] = array( 'name' => $css_property, 'value' => $value, From 7f83f05e12574780a0e3c4d7b64b27dd16a703ea Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 10 Dec 2021 18:11:08 +1100 Subject: [PATCH 2/3] Adding some comments. --- .../themes/twentytwentytwo/theme.json | 35 +++++++++++++++---- src/wp-includes/class-wp-theme-json.php | 20 ++++------- 2 files changed, 34 insertions(+), 21 deletions(-) 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 8480118656e4d..d0ba30df2ce05 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -200,14 +200,6 @@ class WP_Theme_JSON { 'filter' => array( 'filter', 'duotone' ), ); - /** - * Presets are a set of values that serve - * to bootstrap some top-level styles: spacing, etc. - */ - const STYLE_DECLARATION_TRANSFORMS = array( - '--wp--style--block-gap' => array(), - ); - /** * Protected style properties. * @@ -799,14 +791,17 @@ private function get_block_classes( $style_nodes ) { 'name' => '--wp--style--block-gap', 'value' => $declarations_block_gap['--wp--style--block-gap']['value'], ); - $gap_values = explode( ' ', $declarations_block_gap['--wp--style--block-gap']['value'] ); + // @TODO what if the shorthand value is something like "calc(100% - 20px)" + // Do we need to regex the values? + // I don't think we should care about short hand here, and assume that theme.json users will split according to row and column. + //$gap_values = explode( ' ', $declarations_block_gap['--wp--style--block-gap']['value'] ); $declarations[] = array( 'name' => '--wp--style--block-gap-row', - 'value' => $gap_values[0], + 'value' => $declarations_block_gap['--wp--style--block-gap']['value'], ); $declarations[] = array( 'name' => '--wp--style--block-gap-column', - 'value' => isset( $gap_values[1] ) ? $gap_values[1] : $gap_values[0], + 'value' => $declarations_block_gap['--wp--style--block-gap']['value'], ); } @@ -1333,9 +1328,6 @@ private static function compute_style_properties( $styles, $settings = array(), continue; } - // @TODO we could use the $css_property as a key and update $declarations accordingly - - $declarations[] = array( 'name' => $css_property, 'value' => $value, From d66e795554c8d3f4b84b183d9afea65a7562239b Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 10 Dec 2021 18:43:59 +1100 Subject: [PATCH 3/3] Testing a regex --- src/wp-includes/class-wp-theme-json.php | 34 ++++++++++++++++--------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index d0ba30df2ce05..4afac8bfbcd6a 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -785,24 +785,26 @@ private function get_block_classes( $style_nodes ) { } } + // @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)" - // Do we need to regex the values? - // I don't think we should care about short hand here, and assume that theme.json users will split according to row and column. - //$gap_values = explode( ' ', $declarations_block_gap['--wp--style--block-gap']['value'] ); - $declarations[] = array( - 'name' => '--wp--style--block-gap-row', - 'value' => $declarations_block_gap['--wp--style--block-gap']['value'], - ); - $declarations[] = array( - 'name' => '--wp--style--block-gap-column', - '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'] ) ) { @@ -810,6 +812,14 @@ private function get_block_classes( $style_nodes ) { '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'], + ); } }