Make WordPress Core


Ignore:
Timestamp:
06/21/2023 05:54:27 AM (11 months ago)
Author:
isabel_brison
Message:

Editor: add grid layout type

Add a new grid type to the layout block support.

Props andrewserong, costdev, ramonopoly.
Fixes #58554.

File:
1 edited

Legend:

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

    r55956 r55957  
    3535 * @since 5.9.0
    3636 * @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles.
     37 * @since 6.3.0 Added grid layout type.
    3738 * @access private
    3839 *
     
    285286                    'selector'     => $selector,
    286287                    'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
     288                );
     289            }
     290        }
     291    } elseif ( 'grid' === $layout_type ) {
     292        if ( ! empty( $layout['columnCount'] ) ) {
     293            $layout_styles[] = array(
     294                'selector'     => $selector,
     295                'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
     296            );
     297        } else {
     298            $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
     299
     300            $layout_styles[] = array(
     301                'selector'     => $selector,
     302                'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
     303            );
     304        }
     305
     306        if ( $has_block_gap_support && isset( $gap_value ) ) {
     307            $combined_gap_value = '';
     308            $gap_sides          = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
     309
     310            foreach ( $gap_sides as $gap_side ) {
     311                $process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
     312                // Get spacing CSS variable from preset value if provided.
     313                if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
     314                    $index_to_splice = strrpos( $process_value, '|' ) + 1;
     315                    $slug            = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
     316                    $process_value   = "var(--wp--preset--spacing--$slug)";
     317                }
     318                $combined_gap_value .= "$process_value ";
     319            }
     320            $gap_value = trim( $combined_gap_value );
     321
     322            if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
     323                $layout_styles[] = array(
     324                    'selector'     => $selector,
     325                    'declarations' => array( 'gap' => $gap_value ),
    287326                );
    288327            }
Note: See TracChangeset for help on using the changeset viewer.