Make WordPress Core


Ignore:
Timestamp:
06/27/2023 07:23:04 AM (15 months ago)
Author:
isabel_brison
Message:

Editor: stabilise layout and refactor definitions.

Marks the layout support stable and moves layout definitions from theme.json into wp-includes/block-supports/layout.php.

Props andrewserong, poena, ramonopoly, peterwilsoncc.
Fixes #58550.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/layout.php

    r55975 r56055  
    88
    99/**
     10 * Returns layout definitions, keyed by layout type.
     11 *
     12 * Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
     13 * When making changes or additions to layout definitions, the corresponding JavaScript definitions should
     14 * also be updated.
     15 *
     16 * @since 6.3.0
     17 * @access private
     18 *
     19 * @return array[] Layout definitions.
     20 */
     21function wp_get_layout_definitions() {
     22    $layout_definitions = array(
     23        'default'     => array(
     24            'name'          => 'default',
     25            'slug'          => 'flow',
     26            'className'     => 'is-layout-flow',
     27            'baseStyles'    => array(
     28                array(
     29                    'selector' => ' > .alignleft',
     30                    'rules'    => array(
     31                        'float'               => 'left',
     32                        'margin-inline-start' => '0',
     33                        'margin-inline-end'   => '2em',
     34                    ),
     35                ),
     36                array(
     37                    'selector' => ' > .alignright',
     38                    'rules'    => array(
     39                        'float'               => 'right',
     40                        'margin-inline-start' => '2em',
     41                        'margin-inline-end'   => '0',
     42                    ),
     43                ),
     44                array(
     45                    'selector' => ' > .aligncenter',
     46                    'rules'    => array(
     47                        'margin-left'  => 'auto !important',
     48                        'margin-right' => 'auto !important',
     49                    ),
     50                ),
     51            ),
     52            'spacingStyles' => array(
     53                array(
     54                    'selector' => ' > :first-child:first-child',
     55                    'rules'    => array(
     56                        'margin-block-start' => '0',
     57                    ),
     58                ),
     59                array(
     60                    'selector' => ' > :last-child:last-child',
     61                    'rules'    => array(
     62                        'margin-block-end' => '0',
     63                    ),
     64                ),
     65                array(
     66                    'selector' => ' > *',
     67                    'rules'    => array(
     68                        'margin-block-start' => null,
     69                        'margin-block-end'   => '0',
     70                    ),
     71                ),
     72            ),
     73        ),
     74        'constrained' => array(
     75            'name'          => 'constrained',
     76            'slug'          => 'constrained',
     77            'className'     => 'is-layout-constrained',
     78            'baseStyles'    => array(
     79                array(
     80                    'selector' => ' > .alignleft',
     81                    'rules'    => array(
     82                        'float'               => 'left',
     83                        'margin-inline-start' => '0',
     84                        'margin-inline-end'   => '2em',
     85                    ),
     86                ),
     87                array(
     88                    'selector' => ' > .alignright',
     89                    'rules'    => array(
     90                        'float'               => 'right',
     91                        'margin-inline-start' => '2em',
     92                        'margin-inline-end'   => '0',
     93                    ),
     94                ),
     95                array(
     96                    'selector' => ' > .aligncenter',
     97                    'rules'    => array(
     98                        'margin-left'  => 'auto !important',
     99                        'margin-right' => 'auto !important',
     100                    ),
     101                ),
     102                array(
     103                    'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
     104                    'rules'    => array(
     105                        'max-width'    => 'var(--wp--style--global--content-size)',
     106                        'margin-left'  => 'auto !important',
     107                        'margin-right' => 'auto !important',
     108                    ),
     109                ),
     110                array(
     111                    'selector' => ' > .alignwide',
     112                    'rules'    => array(
     113                        'max-width' => 'var(--wp--style--global--wide-size)',
     114                    ),
     115                ),
     116            ),
     117            'spacingStyles' => array(
     118                array(
     119                    'selector' => ' > :first-child:first-child',
     120                    'rules'    => array(
     121                        'margin-block-start' => '0',
     122                    ),
     123                ),
     124                array(
     125                    'selector' => ' > :last-child:last-child',
     126                    'rules'    => array(
     127                        'margin-block-end' => '0',
     128                    ),
     129                ),
     130                array(
     131                    'selector' => ' > *',
     132                    'rules'    => array(
     133                        'margin-block-start' => null,
     134                        'margin-block-end'   => '0',
     135                    ),
     136                ),
     137            ),
     138        ),
     139        'flex'        => array(
     140            'name'          => 'flex',
     141            'slug'          => 'flex',
     142            'className'     => 'is-layout-flex',
     143            'displayMode'   => 'flex',
     144            'baseStyles'    => array(
     145                array(
     146                    'selector' => '',
     147                    'rules'    => array(
     148                        'flex-wrap'   => 'wrap',
     149                        'align-items' => 'center',
     150                    ),
     151                ),
     152                array(
     153                    'selector' => ' > *',
     154                    'rules'    => array(
     155                        'margin' => '0',
     156                    ),
     157                ),
     158            ),
     159            'spacingStyles' => array(
     160                array(
     161                    'selector' => '',
     162                    'rules'    => array(
     163                        'gap' => null,
     164                    ),
     165                ),
     166            ),
     167        ),
     168        'grid'        => array(
     169            'name'          => 'grid',
     170            'slug'          => 'grid',
     171            'className'     => 'is-layout-grid',
     172            'displayMode'   => 'grid',
     173            'baseStyles'    => array(
     174                array(
     175                    'selector' => ' > *',
     176                    'rules'    => array(
     177                        'margin' => '0',
     178                    ),
     179                ),
     180            ),
     181            'spacingStyles' => array(
     182                array(
     183                    'selector' => '',
     184                    'rules'    => array(
     185                        'gap' => null,
     186                    ),
     187                ),
     188            ),
     189        ),
     190    );
     191
     192    return $layout_definitions;
     193}
     194
     195/**
    10196 * Registers the layout block attribute for block types that support it.
    11197 *
    12198 * @since 5.8.0
     199 * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
    13200 * @access private
    14201 *
     
    16203 */
    17204function wp_register_layout_support( $block_type ) {
    18     $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
     205    $support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
    19206    if ( $support_layout ) {
    20207        if ( ! $block_type->attributes ) {
     
    353540 * @since 5.8.0
    354541 * @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.
     542 * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
    355543 * @access private
    356544 *
     
    361549function wp_render_layout_support_flag( $block_content, $block ) {
    362550    $block_type       = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
    363     $support_layout   = block_has_support( $block_type, array( '__experimentalLayout' ), false );
     551    $support_layout   = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
    364552    $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
    365553
     
    410598    }
    411599
    412     $global_settings        = wp_get_global_settings();
    413     $global_layout_settings = _wp_array_get( $global_settings, array( 'layout' ), null );
    414     $used_layout            = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
    415 
    416     if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] && ! $global_layout_settings ) {
    417         return $block_content;
    418     }
     600    $global_settings = wp_get_global_settings();
     601    $fallback_layout = ! empty( _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) ) ? _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
     602    $used_layout     = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout;
    419603
    420604    $class_names        = array();
    421     $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
     605    $layout_definitions = wp_get_layout_definitions();
    422606    $container_class    = wp_unique_id( 'wp-container-' );
    423607    $layout_classname   = '';
Note: See TracChangeset for help on using the changeset viewer.