Make WordPress Core


Ignore:
Timestamp:
09/21/2022 11:41:44 AM (18 months ago)
Author:
audrasjb
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r54260 r54272  
    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
     
    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(
     
    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}
Note: See TracChangeset for help on using the changeset viewer.