WordPress.org
Get WordPress

Make WordPress Core

Changeset 55985


Ignore:
Timestamp:
06/22/2023 08:16:05 AM (22 months ago)
Author:
isabel_brison
Message:

Editor: add text columns to typography support.

Adds a text columns feature to the typography block support that uses CSS column-count for multi-column text.

Props ramonopoly, aaronrobertshaw.
Fixes #58549.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-supports/typography.php

    r55947 r55985  
    1111 *
    1212 * @since 5.6.0
     13 * @since 6.3.0 Added support for text-columns.
    1314 * @access private
    1415 *
    … …  
    3132    $has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
    3233    $has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
     34    $has_text_columns_support    = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
    3335    $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
    3436    $has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
    … …  
    4042        || $has_letter_spacing_support
    4143        || $has_line_height_support
     44        || $has_text_columns_support
    4245        || $has_text_decoration_support
    4346        || $has_text_transform_support;
    … …  
    7376 * @since 5.6.0
    7477 * @since 6.1.0 Used the style engine to generate CSS and classnames.
     78 * @since 6.3.0 Added support for text-columns.
    7579 * @access private
    7680 *
    … …  
    99103    $has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
    100104    $has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
     105    $has_text_columns_support    = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
    101106    $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
    102107    $has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
    … …  
    108113    $should_skip_font_weight     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
    109114    $should_skip_line_height     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
     115    $should_skip_text_columns    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
    110116    $should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
    111117    $should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
    … …  
    163169    }
    164170
     171    if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
     172        $typography_block_styles['textColumns'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textColumns' ), null );
     173    }
     174
    165175    if (
    166176        $has_text_decoration_support &&

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

    r55975 r55985  
    202202     *              removed the `--wp--style--block-gap` property.
    203203     * @since 6.2.0 Added `outline-*`, and `min-height` properties.
     204     * @since 6.3.0 Added `column-count` property.
    204205     *
    205206     * @var array
    … …  
    229230        'border-left-style'                 => array( 'border', 'left', 'style' ),
    230231        'color'                             => array( 'color', 'text' ),
     232        'column-count'                      => array( 'typography', 'textColumns' ),
    231233        'font-family'                       => array( 'typography', 'fontFamily' ),
    232234        'font-size'                         => array( 'typography', 'fontSize' ),
    … …  
    335337     * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
    336338     *              `position.fixed` and `position.sticky`.
     339     * @since 6.3.0 Added support for `typography.textColumns`.
     340     *
    337341     * @var array
    338342     */
    … …  
    396400            'letterSpacing'  => null,
    397401            'lineHeight'     => null,
     402            'textColumns'    => null,
    398403            'textDecoration' => null,
    399404            'textTransform'  => null,
    … …  
    412417     *              updated `blockGap` to be allowed at any level.
    413418     * @since 6.2.0 Added `outline`, and `minHeight` properties.
     419     * @since 6.3.0 Added support for `typography.textColumns`.
    414420     *
    415421     * @var array
    … …  
    456462            'letterSpacing'  => null,
    457463            'lineHeight'     => null,
     464            'textColumns'    => null,
    458465            'textDecoration' => null,
    459466            'textTransform'  => null,

  • trunk/src/wp-includes/style-engine/class-wp-style-engine.php

    r55820 r55985  
    2222 * @access private
    2323 * @since 6.1.0
     24 * @since 6.3.0 Added support for text-columns.
    2425 */
    2526#[AllowDynamicProperties]
    … …  
    218219                'path'          => array( 'typography', 'lineHeight' ),
    219220            ),
     221            'textColumns'    => array(
     222                'property_keys' => array(
     223                    'default' => 'column-count',
     224                ),
     225                'path'          => array( 'typography', 'textColumns' ),
     226            ),
    220227            'textDecoration' => array(
    221228                'property_keys' => array(

  • trunk/tests/phpunit/tests/style-engine/styleEngine.php

    r55175 r55985  
    2626     *
    2727     * @ticket 56467
     28     * @ticket 58549
    2829     *
    2930     * @covers ::wp_style_engine_get_styles
    … …  
    190191                        'fontWeight'     => '800',
    191192                        'lineHeight'     => '1.3',
     193                        'textColumns'    => '2',
    192194                        'textDecoration' => 'underline',
    193195                        'textTransform'  => 'uppercase',
    … …  
    197199                'options'         => null,
    198200                'expected_output' => array(
    199                     'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
     201                    'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
    200202                    'declarations' => array(
    201203                        'font-size'       => 'clamp(2em, 2vw, 4em)',
    … …  
    204206                        'font-weight'     => '800',
    205207                        'line-height'     => '1.3',
     208                        'column-count'    => '2',
    206209                        'text-decoration' => 'underline',
    207210                        'text-transform'  => 'uppercase',

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r55959 r55985  
    477477     * @ticket 54336
    478478     * @ticket 56611
     479     * @ticket 58549
    479480     */
    480481    public function test_get_stylesheet() {
    … …  
    549550                    ),
    550551                    'blocks'   => array(
    551                         'core/group'     => array(
     552                        'core/group'        => array(
    552553                            'color'    => array(
    553554                                'gradient' => 'var:preset|gradient|custom-gradient',
    … …  
    567568                            ),
    568569                        ),
    569                         'core/heading'   => array(
     570                        'core/heading'      => array(
    570571                            'color'    => array(
    571572                                'text' => '#123456',
    … …  
    583584                            ),
    584585                        ),
    585                         'core/post-date' => array(
     586                        'core/post-date'    => array(
    586587                            'color'    => array(
    587588                                'text' => '#123456',
    … …  
    596597                            ),
    597598                        ),
    598                         'core/image'     => array(
     599                        'core/post-excerpt' => array(
     600                            'typography' => array(
     601                                'textColumns' => 2,
     602                            ),
     603                        ),
     604                        'core/image'        => array(
    599605                            'border'  => array(
    600606                                'radius' => array(
    … …  
    622628
    623629        $variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}";
    624         $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
     630        $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
    625631        $presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
    626632        $all       = $variables . $styles . $presets;
Note: See TracChangeset for help on using the changeset viewer.