Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme.json: Add spacing size presets #41527

Merged
merged 43 commits into from
Jul 1, 2022
Merged

Theme.json: Add spacing size presets #41527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
63dbefb
Add spacing presets
Jun 27, 2022
ebc0118
Update theme.json schema
Jun 23, 2022
f0eb259
Remove invalid deprecated settings
Jun 6, 2022
320d176
More theme.json changes
Jun 23, 2022
4e44fee
Change size-slug to numbers to make it easier for theme authors to in…
Jun 7, 2022
0977a77
Change naming from t-shirt sizes to full word
Jun 7, 2022
d673992
Update docs
Jun 7, 2022
144f2e0
Remove class generation for now as possibly not needed.
Jun 8, 2022
c3242d8
switch to empty array to match duotone
Jun 8, 2022
c7a24d3
Add a spacing scale option
Jun 10, 2022
4ad45ac
An a 0 space option
Jun 10, 2022
3b5233a
Switch back to slugs as multiples of ten to make it is for themes to …
Jun 10, 2022
94a1dda
Give a theme's spacingSizes setting priority over core spacingScale
Jun 13, 2022
af25188
Update comment
Jun 13, 2022
2d6e413
Move setting of spacing presets into theme json merge method
Jun 13, 2022
b0f1af3
Remove unchanged method from 6.1 compat file
Jun 15, 2022
22b8423
Check for valid spacing.spacingScale values before generating spacing…
Jun 16, 2022
4f57479
Add warning message if spacingScale values invalid
Jun 16, 2022
5d86d32
Fixing issue with current_step not numeric
Jun 16, 2022
5835f63
Fix linting errors
Jun 16, 2022
6a96788
Update docs
Jun 16, 2022
65b6fbc
Remove note about generation of classname for now
Jun 16, 2022
68ce764
Fix theme.json schema issues
Jun 20, 2022
1295196
One more theme.json change
Jun 20, 2022
b5eb496
Switch to a wider default scale using a 1.5 multiplier and t-shirt sizes
Jun 22, 2022
9c86142
Mover generation of spacing presets until after the theme.json files …
Jun 22, 2022
4d3b97e
Switch back to numeric slugs
Jun 22, 2022
b4c5560
Reduce length of preset var
Jun 22, 2022
93354cd
Translation fix
Jun 23, 2022
a231237
Remove 0 step and improve translation of tshirt size names
Jun 27, 2022
d398be2
Fix issue with even step numbers, and steps > 10
Jun 28, 2022
319d2a8
fix linting error
Jun 28, 2022
8518b26
Account for a multiplier of < 1, in which case it needs to act like a…
Jun 29, 2022
357596c
Allow single step as it might be easier than explaining that a single…
Jun 29, 2022
97af3a3
Add initial tests
Jun 29, 2022
3b173ba
Add more tests and fix issues identified by tests
Jun 29, 2022
5b22765
Fix test fixture name
Jun 29, 2022
b87084d
Tidy up some variable naming
Jun 29, 2022
66327a1
Fixes from PR review
Jun 29, 2022
df0240a
Remove method from 6.1 that is not being modified now
Jun 30, 2022
35f107b
Fix naming of spacingScale units in theme.json
Jun 30, 2022
6eecad6
Fix linting issues
Jun 30, 2022
64479cf
Add style engine handling of spacing presets
Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Open in desktop
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 | | |

glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
---

Expand Down
2 changes: 1 addition & 1 deletion lib/block-supports/border.php
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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