Make WordPress Core

source: trunk/src/wp-includes/block-supports/layout.php @ 52103

Last change on this file since 52103 was 52103, checked in by noisysocks, 7 months ago

Update @wordpress packages

Update packages to include these bug fixes from Gutenberg:

  • Force remount LinkControl when moving between links within same richtext block
  • Site Editor: Change ToolsMoreMenuGroup slot-fill name
  • Respect fields param for global styles REST API requests.
  • Try ensuring the item after post content clears floats
  • Fix submenus not opening on click
  • Apply i18n functions to Nav block menu drops when selecting existing Menu
  • Gallery: Make sure the mobile warning notice only runs when images are added to a new block
  • Prepare navigation php code for core patch
  • Address deprecation issues from Buttons flex layout PR.
  • Block Library: Fix incorrect attributes definitions
  • Fix Navigation accessibility issues

See #54337.

  • Property svn:eol-style set to native
File size: 8.7 KB
Line 
1<?php
2/**
3 * Layout block support flag.
4 *
5 * @package WordPress
6 * @since 5.8.0
7 */
8
9/**
10 * Registers the layout block attribute for block types that support it.
11 *
12 * @since 5.8.0
13 * @access private
14 *
15 * @param WP_Block_Type $block_type Block Type.
16 */
17function wp_register_layout_support( $block_type ) {
18        $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
19        if ( $support_layout ) {
20                if ( ! $block_type->attributes ) {
21                        $block_type->attributes = array();
22                }
23
24                if ( ! array_key_exists( 'layout', $block_type->attributes ) ) {
25                        $block_type->attributes['layout'] = array(
26                                'type' => 'object',
27                        );
28                }
29        }
30}
31
32/**
33 * Generates the CSS corresponding to the provided layout.
34 *
35 * @since 5.9.0
36 * @access private
37 *
38 * @param string  $selector CSS selector.
39 * @param array   $layout   Layout object. The one that is passed has already checked the existance of default block layout.
40 * @param boolean $has_block_gap_support Whether the theme has support for the block gap.
41 *
42 * @return string CSS style.
43 */
44function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
45        $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
46
47        $style = '';
48        if ( 'default' === $layout_type ) {
49                $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null;
50                $wide_size    = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null;
51
52                $all_max_width_value  = $content_size ? $content_size : $wide_size;
53                $wide_max_width_value = $wide_size ? $wide_size : $content_size;
54
55                // Make sure there is a single CSS rule, and all tags are stripped for security.
56                // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
57                $all_max_width_value  = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
58                $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
59
60                $style = '';
61                if ( $content_size || $wide_size ) {
62                        $style  = "$selector > * {";
63                        $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
64                        $style .= 'margin-left: auto !important;';
65                        $style .= 'margin-right: auto !important;';
66                        $style .= '}';
67
68                        $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
69                        $style .= "$selector .alignfull { max-width: none; }";
70                }
71
72                $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
73                $style .= "$selector .alignright { float: right; margin-left: 2em; }";
74                if ( $has_block_gap_support ) {
75                        $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
76                        $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
77                }
78        } elseif ( 'flex' === $layout_type ) {
79                $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
80
81                $justify_content_options = array(
82                        'left'   => 'flex-start',
83                        'right'  => 'flex-end',
84                        'center' => 'center',
85                );
86
87                if ( 'horizontal' === $layout_orientation ) {
88                        $justify_content_options += array( 'space-between' => 'space-between' );
89                }
90
91                $flex_wrap_options = array( 'wrap', 'nowrap' );
92                $flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
93                        $layout['flexWrap'] :
94                        'wrap';
95
96                $style  = "$selector {";
97                $style .= 'display: flex;';
98                if ( $has_block_gap_support ) {
99                        $style .= 'gap: var( --wp--style--block-gap, 0.5em );';
100                } else {
101                        $style .= 'gap: 0.5em;';
102                }
103                $style .= "flex-wrap: $flex_wrap;";
104                $style .= 'align-items: center;';
105                if ( 'horizontal' === $layout_orientation ) {
106                        $style .= 'align-items: center;';
107                        /**
108                         * Add this style only if is not empty for backwards compatibility,
109                         * since we intend to convert blocks that had flex layout implemented
110                         * by custom css.
111                         */
112                        if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
113                                $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
114                                if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
115                                        // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
116                                        $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
117                                        $style .= '--layout-direction: row;';
118                                        $style .= "--layout-wrap: $flex_wrap;";
119                                        $style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};";
120                                        $style .= '--layout-align: center;';
121                                }
122                        }
123                } else {
124                        $style .= 'flex-direction: column;';
125                        if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
126                                $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
127                                if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
128                                        // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
129                                        $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
130                                        $style .= '--layout-direction: column;';
131                                        $style .= '--layout-justify: initial;';
132                                        $style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};";
133                                }
134                        }
135                }
136                $style .= '}';
137
138                $style .= "$selector > * { margin: 0; }";
139        }
140
141        return $style;
142}
143
144/**
145 * Renders the layout config to the block wrapper.
146 *
147 * @since 5.8.0
148 * @access private
149 *
150 * @param string $block_content Rendered block content.
151 * @param array  $block         Block object.
152 * @return string Filtered block content.
153 */
154function wp_render_layout_support_flag( $block_content, $block ) {
155        $block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
156        $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
157
158        if ( ! $support_layout ) {
159                return $block_content;
160        }
161
162        $block_gap             = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
163        $default_layout        = wp_get_global_settings( array( 'layout' ) );
164        $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
165        $default_block_layout  = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
166        $used_layout           = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
167        if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
168                if ( ! $default_layout ) {
169                        return $block_content;
170                }
171                $used_layout = $default_layout;
172        }
173
174        $id    = uniqid();
175        $style = wp_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
176        // This assumes the hook only applies to blocks with a single wrapper.
177        // I think this is a reasonable limitation for that particular hook.
178        $content = preg_replace(
179                '/' . preg_quote( 'class="', '/' ) . '/',
180                'class="wp-container-' . $id . ' ',
181                $block_content,
182                1
183        );
184
185        /*
186         * Ideally styles should be loaded in the head, but blocks may be parsed
187         * after that, so loading in the footer for now.
188         * See https://core.trac.wordpress.org/ticket/53494.
189         */
190        add_action(
191                'wp_footer',
192                static function () use ( $style ) {
193                        echo '<style>' . $style . '</style>';
194                }
195        );
196
197        return $content;
198}
199
200// Register the block support.
201WP_Block_Supports::get_instance()->register(
202        'layout',
203        array(
204                'register_attribute' => 'wp_register_layout_support',
205        )
206);
207add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
208
209/**
210 * For themes without theme.json file, make sure
211 * to restore the inner div for the group block
212 * to avoid breaking styles relying on that div.
213 *
214 * @since 5.8.0
215 * @access private
216 *
217 * @param string $block_content Rendered block content.
218 * @param array  $block         Block object.
219 *
220 * @return string Filtered block content.
221 */
222function wp_restore_group_inner_container( $block_content, $block ) {
223        $group_with_inner_container_regex = '/(^\s*<div\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/';
224
225        if (
226                'core/group' !== $block['blockName'] ||
227                WP_Theme_JSON_Resolver::theme_has_support() ||
228                1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
229                ( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] )
230        ) {
231                return $block_content;
232        }
233
234        $replace_regex   = '/(^\s*<div\b[^>]*wp-block-group[^>]*>)(.*)(<\/div>\s*$)/ms';
235        $updated_content = preg_replace_callback(
236                $replace_regex,
237                static function( $matches ) {
238                        return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
239                },
240                $block_content
241        );
242        return $updated_content;
243}
244
245add_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
Note: See TracBrowser for help on using the repository browser.