From 325e60a744185bd07e0f45af3739a3aa9f7bcf0c Mon Sep 17 00:00:00 2001 From: audrasjb Date: Wed, 21 Sep 2022 11:43:13 +0000 Subject: [PATCH] Editor: Introduce spacing presets in global style properties. This changeset is part of the Gutenberg changes merged into WP 6.1. It adds spacing presets support in global style properties. Follow-up to [54211]. Props glendaviesnz, andrewserong, costdev, audrasjb, mukesh27. See #56467. Built from https://develop.svn.wordpress.org/trunk@54272 git-svn-id: http://core.svn.wordpress.org/trunk@53831 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-editor.php | 2 +- wp-includes/class-wp-theme-json-resolver.php | 5 +- wp-includes/class-wp-theme-json.php | 147 ++++++++++++++++++- wp-includes/theme-i18n.json | 14 ++ wp-includes/version.php | 2 +- 5 files changed, 163 insertions(+), 7 deletions(-) diff --git a/wp-includes/block-editor.php b/wp-includes/block-editor.php index 3aed6e627c..c177d9619d 100644 --- a/wp-includes/block-editor.php +++ b/wp-includes/block-editor.php @@ -488,7 +488,7 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex unset( $editor_settings['__experimentalFeatures']['spacing']['padding'] ); } if ( isset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) { - $editor_settings['disableCustomSpacingSizes'] = ! $editor_ettings['__experimentalFeatures']['spacing']['customSpacingSize']; + $editor_settings['disableCustomSpacingSizes'] = ! $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize']; unset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] ); } diff --git a/wp-includes/class-wp-theme-json-resolver.php b/wp-includes/class-wp-theme-json-resolver.php index 4acc61a784..d9fae09ba3 100644 --- a/wp-includes/class-wp-theme-json-resolver.php +++ b/wp-includes/class-wp-theme-json-resolver.php @@ -470,7 +470,7 @@ class WP_Theme_JSON_Resolver { * @since 5.8.0 * @since 5.9.0 Added user data, removed the `$settings` parameter, * added the `$origin` parameter. - * @since 6.1.0 Added block data. + * @since 6.1.0 Added block data and generation of spacingSizes array. * * @param string $origin Optional. To what level should we merge data. * Valid values are 'theme' or 'custom'. Default 'custom'. @@ -490,6 +490,9 @@ class WP_Theme_JSON_Resolver { $result->merge( static::get_user_data() ); } + // Generate the default spacingSizes array based on the merged spacingScale settings. + $result->set_spacing_sizes(); + return $result; } diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 0c3af21bf3..77b77388af 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -164,6 +164,24 @@ class WP_Theme_JSON { 'classes' => array( '.has-$slug-font-family' => 'font-family' ), 'properties' => array( 'font-family' ), ), + array( + 'path' => array( 'spacing', 'spacingSizes' ), + 'prevent_override' => false, + 'use_default_names' => true, + 'value_key' => 'size', + 'css_vars' => '--wp--preset--spacing--$slug', + 'classes' => array(), + 'properties' => array( 'padding', 'margin' ), + ), + array( + 'path' => array( 'spacing', 'spacingScale' ), + 'prevent_override' => false, + 'use_default_names' => true, + 'value_key' => 'size', + 'css_vars' => '--wp--preset--spacing--$slug', + 'classes' => array(), + 'properties' => array( 'padding', 'margin' ), + ), ); /** @@ -307,10 +325,13 @@ class WP_Theme_JSON { 'wideSize' => null, ), 'spacing' => array( - 'blockGap' => null, - 'margin' => null, - 'padding' => null, - 'units' => null, + 'customSpacingSize' => null, + 'spacingSizes' => null, + 'spacingScale' => null, + 'blockGap' => null, + 'margin' => null, + 'padding' => null, + 'units' => null, ), 'typography' => array( 'customFontSize' => null, @@ -2890,4 +2911,122 @@ class WP_Theme_JSON { return $output; } + /** + * Sets the spacingSizes array based on the spacingScale values from theme.json. + * + * @since 6.1.0 + * + * @return null|void + */ + public function set_spacing_sizes() { + $spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() ); + + if ( ! is_numeric( $spacing_scale['steps'] ) + || ! isset( $spacing_scale['mediumStep'] ) + || ! isset( $spacing_scale['unit'] ) + || ! isset( $spacing_scale['operator'] ) + || ! isset( $spacing_scale['increment'] ) + || ! isset( $spacing_scale['steps'] ) + || ! is_numeric( $spacing_scale['increment'] ) + || ! is_numeric( $spacing_scale['mediumStep'] ) + || ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) { + if ( ! empty( $spacing_scale ) ) { + trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid' ), E_USER_NOTICE ); + } + return null; + } + + // If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0. + if ( 0 === $spacing_scale['steps'] ) { + return null; + } + + $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] ); + $current_step = $spacing_scale['mediumStep']; + $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 ); + $x_small_count = null; + $below_sizes = array(); + $slug = 40; + $remainder = 0; + + for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) { + if ( '+' === $spacing_scale['operator'] ) { + $current_step -= $spacing_scale['increment']; + } elseif ( $spacing_scale['increment'] > 1 ) { + $current_step /= $spacing_scale['increment']; + } else { + $current_step *= $spacing_scale['increment']; + } + + if ( $current_step <= 0 ) { + $remainder = $below_midpoint_count; + break; + } + + $below_sizes[] = array( + /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */ + 'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $x_small_count ), + 'slug' => (string) $slug, + 'size' => round( $current_step, 2 ) . $unit, + ); + + if ( $below_midpoint_count === $steps_mid_point - 2 ) { + $x_small_count = 2; + } + + if ( $below_midpoint_count < $steps_mid_point - 2 ) { + $x_small_count++; + } + + $slug -= 10; + } + + $below_sizes = array_reverse( $below_sizes ); + + $below_sizes[] = array( + 'name' => __( 'Medium' ), + 'slug' => '50', + 'size' => $spacing_scale['mediumStep'] . $unit, + ); + + $current_step = $spacing_scale['mediumStep']; + $x_large_count = null; + $above_sizes = array(); + $slug = 60; + $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder; + + for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) { + $current_step = '+' === $spacing_scale['operator'] + ? $current_step + $spacing_scale['increment'] + : ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] ); + + $above_sizes[] = array( + /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */ + 'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $x_large_count ), + 'slug' => (string) $slug, + 'size' => round( $current_step, 2 ) . $unit, + ); + + if ( 1 === $above_midpoint_count ) { + $x_large_count = 2; + } + + if ( $above_midpoint_count > 1 ) { + $x_large_count++; + } + + $slug += 10; + } + + $spacing_sizes = array_merge( $below_sizes, $above_sizes ); + + // If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes. + if ( $spacing_scale['steps'] <= 7 ) { + for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { + $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 ); + } + } + + _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); + } } diff --git a/wp-includes/theme-i18n.json b/wp-includes/theme-i18n.json index f5a65dbddc..82f89bd3d2 100644 --- a/wp-includes/theme-i18n.json +++ b/wp-includes/theme-i18n.json @@ -30,6 +30,13 @@ } ] }, + "spacing": { + "spacingSizes": [ + { + "name": "Space size name" + } + ] + }, "blocks": { "*": { "typography": { @@ -55,6 +62,13 @@ "name": "Gradient name" } ] + }, + "spacing": { + "spacingSizes": [ + { + "name": "Space size name" + } + ] } } } diff --git a/wp-includes/version.php b/wp-includes/version.php index 5c012e8790..f4821601a5 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.1-alpha-54271'; +$wp_version = '6.1-alpha-54272'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.