Skip to content

Commit 30de259

Browse files
audrasjbaudrasjb
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@54272 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 6c6a674 commit 30de259

File tree

5 files changed

+543
-6
lines changed

5 files changed

+543
-6
lines changed

‎src/wp-includes/block-editor.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
488488
unset( $editor_settings['__experimentalFeatures']['spacing']['padding'] );
489489
}
490490
if ( isset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
491-
$editor_settings['disableCustomSpacingSizes'] = ! $editor_ettings['__experimentalFeatures']['spacing']['customSpacingSize'];
491+
$editor_settings['disableCustomSpacingSizes'] = ! $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'];
492492
unset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
493493
}
494494

‎src/wp-includes/class-wp-theme-json-resolver.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -470,7 +470,7 @@ public static function get_user_data() {
470470
* @since 5.8.0
471471
* @since 5.9.0 Added user data, removed the `$settings` parameter,
472472
* added the `$origin` parameter.
473-
* @since 6.1.0 Added block data.
473+
* @since 6.1.0 Added block data and generation of spacingSizes array.
474474
*
475475
* @param string $origin Optional. To what level should we merge data.
476476
* Valid values are 'theme' or 'custom'. Default 'custom'.
@@ -490,6 +490,9 @@ public static function get_merged_data( $origin = 'custom' ) {
490490
$result->merge( static::get_user_data() );
491491
}
492492

493+
// Generate the default spacingSizes array based on the merged spacingScale settings.
494+
$result->set_spacing_sizes();
495+
493496
return $result;
494497
}
495498

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 143 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,24 @@ class WP_Theme_JSON {
164164
'classes' => array( '.has-$slug-font-family' => 'font-family' ),
165165
'properties' => array( 'font-family' ),
166166
),
167+
array(
168+
'path' => array( 'spacing', 'spacingSizes' ),
169+
'prevent_override' => false,
170+
'use_default_names' => true,
171+
'value_key' => 'size',
172+
'css_vars' => '--wp--preset--spacing--$slug',
173+
'classes' => array(),
174+
'properties' => array( 'padding', 'margin' ),
175+
),
176+
array(
177+
'path' => array( 'spacing', 'spacingScale' ),
178+
'prevent_override' => false,
179+
'use_default_names' => true,
180+
'value_key' => 'size',
181+
'css_vars' => '--wp--preset--spacing--$slug',
182+
'classes' => array(),
183+
'properties' => array( 'padding', 'margin' ),
184+
),
167185
);
168186

169187
/**
@@ -307,10 +325,13 @@ class WP_Theme_JSON {
307325
'wideSize' => null,
308326
),
309327
'spacing' => array(
310-
'blockGap' => null,
311-
'margin' => null,
312-
'padding' => null,
313-
'units' => null,
328+
'customSpacingSize' => null,
329+
'spacingSizes' => null,
330+
'spacingScale' => null,
331+
'blockGap' => null,
332+
'margin' => null,
333+
'padding' => null,
334+
'units' => null,
314335
),
315336
'typography' => array(
316337
'customFontSize' => null,
@@ -2890,4 +2911,122 @@ public function get_data() {
28902911
return $output;
28912912
}
28922913

2914+
/**
2915+
* Sets the spacingSizes array based on the spacingScale values from theme.json.
2916+
*
2917+
* @since 6.1.0
2918+
*
2919+
* @return null|void
2920+
*/
2921+
public function set_spacing_sizes() {
2922+
$spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
2923+
2924+
if ( ! is_numeric( $spacing_scale['steps'] )
2925+
|| ! isset( $spacing_scale['mediumStep'] )
2926+
|| ! isset( $spacing_scale['unit'] )
2927+
|| ! isset( $spacing_scale['operator'] )
2928+
|| ! isset( $spacing_scale['increment'] )
2929+
|| ! isset( $spacing_scale['steps'] )
2930+
|| ! is_numeric( $spacing_scale['increment'] )
2931+
|| ! is_numeric( $spacing_scale['mediumStep'] )
2932+
|| ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
2933+
if ( ! empty( $spacing_scale ) ) {
2934+
trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid' ), E_USER_NOTICE );
2935+
}
2936+
return null;
2937+
}
2938+
2939+
// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
2940+
if ( 0 === $spacing_scale['steps'] ) {
2941+
return null;
2942+
}
2943+
2944+
$unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
2945+
$current_step = $spacing_scale['mediumStep'];
2946+
$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
2947+
$x_small_count = null;
2948+
$below_sizes = array();
2949+
$slug = 40;
2950+
$remainder = 0;
2951+
2952+
for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
2953+
if ( '+' === $spacing_scale['operator'] ) {
2954+
$current_step -= $spacing_scale['increment'];
2955+
} elseif ( $spacing_scale['increment'] > 1 ) {
2956+
$current_step /= $spacing_scale['increment'];
2957+
} else {
2958+
$current_step *= $spacing_scale['increment'];
2959+
}
2960+
2961+
if ( $current_step <= 0 ) {
2962+
$remainder = $below_midpoint_count;
2963+
break;
2964+
}
2965+
2966+
$below_sizes[] = array(
2967+
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
2968+
'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $x_small_count ),
2969+
'slug' => (string) $slug,
2970+
'size' => round( $current_step, 2 ) . $unit,
2971+
);
2972+
2973+
if ( $below_midpoint_count === $steps_mid_point - 2 ) {
2974+
$x_small_count = 2;
2975+
}
2976+
2977+
if ( $below_midpoint_count < $steps_mid_point - 2 ) {
2978+
$x_small_count++;
2979+
}
2980+
2981+
$slug -= 10;
2982+
}
2983+
2984+
$below_sizes = array_reverse( $below_sizes );
2985+
2986+
$below_sizes[] = array(
2987+
'name' => __( 'Medium' ),
2988+
'slug' => '50',
2989+
'size' => $spacing_scale['mediumStep'] . $unit,
2990+
);
2991+
2992+
$current_step = $spacing_scale['mediumStep'];
2993+
$x_large_count = null;
2994+
$above_sizes = array();
2995+
$slug = 60;
2996+
$steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
2997+
2998+
for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
2999+
$current_step = '+' === $spacing_scale['operator']
3000+
? $current_step + $spacing_scale['increment']
3001+
: ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
3002+
3003+
$above_sizes[] = array(
3004+
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
3005+
'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $x_large_count ),
3006+
'slug' => (string) $slug,
3007+
'size' => round( $current_step, 2 ) . $unit,
3008+
);
3009+
3010+
if ( 1 === $above_midpoint_count ) {
3011+
$x_large_count = 2;
3012+
}
3013+
3014+
if ( $above_midpoint_count > 1 ) {
3015+
$x_large_count++;
3016+
}
3017+
3018+
$slug += 10;
3019+
}
3020+
3021+
$spacing_sizes = array_merge( $below_sizes, $above_sizes );
3022+
3023+
// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
3024+
if ( $spacing_scale['steps'] <= 7 ) {
3025+
for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
3026+
$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
3027+
}
3028+
}
3029+
3030+
_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
3031+
}
28933032
}

‎src/wp-includes/theme-i18n.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@
3030
}
3131
]
3232
},
33+
"spacing": {
34+
"spacingSizes": [
35+
{
36+
"name": "Space size name"
37+
}
38+
]
39+
},
3340
"blocks": {
3441
"*": {
3542
"typography": {
@@ -55,6 +62,13 @@
5562
"name": "Gradient name"
5663
}
5764
]
65+
},
66+
"spacing": {
67+
"spacingSizes": [
68+
{
69+
"name": "Space size name"
70+
}
71+
]
5872
}
5973
}
6074
}

0 commit comments

Comments
 (0)