IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Editor: Introduce spacing presets in global style properties.

Browse Source 
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;
}

147
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,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 );
}
}

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.