Skip to content

Commit

Permalink
Editor: Introduce spacing presets in global style properties.
Browse files Browse the repository at this point in the history 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@54272 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@audrasjb
audrasjb committed Sep 21, 2022
1 parent 6c6a674 commit 30de259
Show file tree
Hide file tree
Showing 5 changed files with 543 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/wp-includes/block-editor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'] );
}

Expand Down
5 changes: 4 additions & 1 deletion src/wp-includes/class-wp-theme-json-resolver.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ public static function get_user_data() {
* @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'.
Expand All @@ -490,6 +490,9 @@ public static function get_merged_data( $origin = 'custom' ) {
$result->merge( static::get_user_data() );
}

// Generate the default spacingSizes array based on the merged spacingScale settings.
$result->set_spacing_sizes();

return $result;
}

Expand Down
147 changes: 143 additions & 4 deletions src/wp-includes/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
),
);

/**
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -2890,4 +2911,122 @@ public function get_data() {
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 );
}
}
14 changes: 14 additions & 0 deletions src/wp-includes/theme-i18n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@
}
]
},
"spacing": {
"spacingSizes": [
{
"name": "Space size name"
}
]
},
"blocks": {
"*": {
"typography": {
Expand All @@ -55,6 +62,13 @@
"name": "Gradient name"
}
]
},
"spacing": {
"spacingSizes": [
{
"name": "Space size name"
}
]
}
}
}
Expand Down
Loading

0 comments on commit 30de259

Please sign in to comment.