Skip to content

Commit

Permalink
Theme.json: Add initial spacing size presets infrastructure (#41527)
Browse files Browse the repository at this point in the history
Co-authored-by: Glen Davies <glen.davies@a8c.com>
  • Loading branch information
glendaviesnz and Glen Davies authored Jul 1, 2022
1 parent f319f4c commit b5582f9
Show file tree
Hide file tree
Showing 17 changed files with 1,036 additions and 175 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,9 @@ Settings related to spacing.
| margin | boolean | false | |
| padding | boolean | false | |
| units | array | px,em,rem,vh,vw,% | |
| customSpacingSize | boolean | true | |
| spacingSizes | array | | name, size, slug |
| spacingScale | object | | |

---

Expand Down
2 changes: 1 addition & 1 deletion lib/block-supports/border.php
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Collect classes and styles.
$attributes = array();
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ) );
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ), array( 'css_vars' => true ) );

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
Expand Down
3 changes: 2 additions & 1 deletion lib/block-supports/spacing.php
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
$spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
$styles = gutenberg_style_engine_generate(
array( 'spacing' => $spacing_block_styles )
array( 'spacing' => $spacing_block_styles ),
array( 'css_vars' => true )
);

if ( ! empty( $styles['css'] ) ) {
Expand Down
146 changes: 0 additions & 146 deletions lib/compat/wordpress-6.0/block-editor-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,149 +47,3 @@ function gutenberg_is_global_styles_in_5_9( $style ) {

return false;
}

/**
* Adds styles and __experimentalFeatures to the block editor settings.
*
* @param array $settings Existing block editor settings.
*
* @return array New block editor settings.
*/
function gutenberg_get_block_editor_settings( $settings ) {
// Set what is the context for this data request.
$context = 'other';
if (
defined( 'REST_REQUEST' ) &&
REST_REQUEST &&
isset( $_GET['context'] ) &&
'mobile' === $_GET['context']
) {
$context = 'mobile';
}

if ( 'other' === $context ) {
global $wp_version;
$is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' );
$is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' );
$is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' );

// Make sure the styles array exists.
// In some contexts, like the navigation editor, it doesn't.
if ( ! isset( $settings['styles'] ) ) {
$settings['styles'] = array();
}

// Remove existing global styles provided by core.
$styles_without_existing_global_styles = array();
foreach ( $settings['styles'] as $style ) {
if (
( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || // Can be removed when plugin minimum version is 5.9.
( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0.
( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) )
) {
$styles_without_existing_global_styles[] = $style;
}
}

// Recreate global styles.
$new_global_styles = array();
$presets = array(
array(
'css' => 'variables',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
array(
'css' => 'presets',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
);
foreach ( $presets as $preset_style ) {
$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
if ( '' !== $actual_css ) {
$preset_style['css'] = $actual_css;
$new_global_styles[] = $preset_style;
}
}

if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
$block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
'isGlobalStyles' => true,
);
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
if ( '' !== $actual_css ) {
$block_classes['css'] = $actual_css;
$new_global_styles[] = $block_classes;
}
}

$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
}

// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();

if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
$colors_by_origin['custom'] : (
isset( $colors_by_origin['theme'] ) ?
$colors_by_origin['theme'] :
$colors_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
$gradients_by_origin['custom'] : (
isset( $gradients_by_origin['theme'] ) ?
$gradients_by_origin['theme'] :
$gradients_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
$font_sizes_by_origin['custom'] : (
isset( $font_sizes_by_origin['theme'] ) ?
$font_sizes_by_origin['theme'] :
$font_sizes_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
unset( $settings['__experimentalFeatures']['color']['custom'] );
}
if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
unset( $settings['__experimentalFeatures']['color']['customGradient'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
unset( $settings['__experimentalFeatures']['spacing']['units'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
unset( $settings['__experimentalFeatures']['spacing']['padding'] );
}

$settings['localAutosaveInterval'] = 15;

return $settings;
}

add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );
166 changes: 166 additions & 0 deletions lib/compat/wordpress-6.1/block-editor-settings.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<?php
/**
* Adds settings to the block editor.
*
* @package gutenberg
*/

/**
* Adds styles and __experimentalFeatures to the block editor settings.
*
* @param array $settings Existing block editor settings.
*
* @return array New block editor settings.
*/
function gutenberg_get_block_editor_settings( $settings ) {
// Set what is the context for this data request.
$context = 'other';
if (
defined( 'REST_REQUEST' ) &&
REST_REQUEST &&
isset( $_GET['context'] ) &&
'mobile' === $_GET['context']
) {
$context = 'mobile';
}

if ( 'other' === $context ) {
global $wp_version;
$is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' );
$is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' );
$is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' );

// Make sure the styles array exists.
// In some contexts, like the navigation editor, it doesn't.
if ( ! isset( $settings['styles'] ) ) {
$settings['styles'] = array();
}

// Remove existing global styles provided by core.
$styles_without_existing_global_styles = array();
foreach ( $settings['styles'] as $style ) {
if (
( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || // Can be removed when plugin minimum version is 5.9.
( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0.
( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) )
) {
$styles_without_existing_global_styles[] = $style;
}
}

// Recreate global styles.
$new_global_styles = array();
$presets = array(
array(
'css' => 'variables',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
array(
'css' => 'presets',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
);
foreach ( $presets as $preset_style ) {
$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
if ( '' !== $actual_css ) {
$preset_style['css'] = $actual_css;
$new_global_styles[] = $preset_style;
}
}

if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
$block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
'isGlobalStyles' => true,
);
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
if ( '' !== $actual_css ) {
$block_classes['css'] = $actual_css;
$new_global_styles[] = $block_classes;
}
}

$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
}

// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();

if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
$colors_by_origin['custom'] : (
isset( $colors_by_origin['theme'] ) ?
$colors_by_origin['theme'] :
$colors_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
$gradients_by_origin['custom'] : (
isset( $gradients_by_origin['theme'] ) ?
$gradients_by_origin['theme'] :
$gradients_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
$font_sizes_by_origin['custom'] : (
isset( $font_sizes_by_origin['theme'] ) ?
$font_sizes_by_origin['theme'] :
$font_sizes_by_origin['default']
);
}

if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
unset( $settings['__experimentalFeatures']['color']['custom'] );
}
if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
unset( $settings['__experimentalFeatures']['color']['customGradient'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
unset( $settings['__experimentalFeatures']['spacing']['units'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
unset( $settings['__experimentalFeatures']['spacing']['padding'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
$settings['disableCustomSpacingSize'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
}

if ( isset( $settings['__experimentalFeatures']['spacing']['spacingSizes'] ) ) {
$spacing_sizes_by_origin = $settings['__experimentalFeatures']['spacing']['spacingSizes'];
$settings['spacingSizes'] = isset( $spacing_sizes_by_origin['custom'] ) ?
$spacing_sizes_by_origin['custom'] : (
isset( $spacing_sizes_by_origin['theme'] ) ?
$spacing_sizes_by_origin['theme'] :
$spacing_sizes_by_origin['default']
);
}

$settings['localAutosaveInterval'] = 15;

return $settings;
}

add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );
Loading

0 comments on commit b5582f9

Please sign in to comment.