WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
audrasjb 2022-09-21 11:43:13 +00:00
parent 2d21751903
commit 325e60a744
5 changed files with 163 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-includes/block-editor.php
View File

@ -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'] );
}

5
wp-includes/class-wp-theme-json-resolver.php
View File

@ -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;
}

139
wp-includes/class-wp-theme-json.php
View File

@ -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,6 +325,9 @@ class WP_Theme_JSON {
'wideSize' => null,
),
'spacing' => array(
'customSpacingSize' => null,
'spacingSizes' => null,
'spacingScale' => null,
'blockGap' => null,
'margin' => null,
'padding' => 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 );
}
}

14
wp-includes/theme-i18n.json
View File

@ -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"
}
]
}
}
}

2
wp-includes/version.php
View File

@ -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.