Make WordPress Core


Ignore:
Timestamp:
06/27/2023 07:23:04 AM (3 years 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.