[ Index ] |
PHP Cross Reference of WordPress |
[Summary view] [Print] [Text view]
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 */ 17 function 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 40 * the existence of default block layout. 41 * @param boolean $has_block_gap_support Whether the theme has support for the block gap. 42 * @param string $gap_value The block gap value to apply. 43 * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. 44 * @return string CSS style. 45 */ 46 function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) { 47 $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; 48 49 $style = ''; 50 if ( 'default' === $layout_type ) { 51 $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; 52 $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; 53 54 $all_max_width_value = $content_size ? $content_size : $wide_size; 55 $wide_max_width_value = $wide_size ? $wide_size : $content_size; 56 57 // Make sure there is a single CSS rule, and all tags are stripped for security. 58 $all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] ); 59 $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] ); 60 61 if ( $content_size || $wide_size ) { 62 $style = "$selector > :where(:not(.alignleft):not(.alignright)) {"; 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-inline-start: 0; margin-inline-end: 2em; }"; 73 $style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }"; 74 $style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }"; 75 if ( $has_block_gap_support ) { 76 if ( is_array( $gap_value ) ) { 77 $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; 78 } 79 $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )'; 80 $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; 81 $style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }"; 82 } 83 } elseif ( 'flex' === $layout_type ) { 84 $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; 85 86 $justify_content_options = array( 87 'left' => 'flex-start', 88 'right' => 'flex-end', 89 'center' => 'center', 90 ); 91 92 if ( 'horizontal' === $layout_orientation ) { 93 $justify_content_options += array( 'space-between' => 'space-between' ); 94 } 95 96 $flex_wrap_options = array( 'wrap', 'nowrap' ); 97 $flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ? 98 $layout['flexWrap'] : 99 'wrap'; 100 101 $style = "$selector {"; 102 $style .= 'display: flex;'; 103 if ( $has_block_gap_support ) { 104 if ( is_array( $gap_value ) ) { 105 $gap_row = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em'; 106 $gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em'; 107 $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; 108 } 109 $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )'; 110 $style .= "gap: $gap_style;"; 111 } else { 112 $style .= 'gap: 0.5em;'; 113 } 114 115 $style .= "flex-wrap: $flex_wrap;"; 116 if ( 'horizontal' === $layout_orientation ) { 117 $style .= 'align-items: center;'; 118 /** 119 * Add this style only if is not empty for backwards compatibility, 120 * since we intend to convert blocks that had flex layout implemented 121 * by custom css. 122 */ 123 if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { 124 $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; 125 } 126 } else { 127 $style .= 'flex-direction: column;'; 128 if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { 129 $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; 130 } else { 131 $style .= 'align-items: flex-start;'; 132 } 133 } 134 $style .= '}'; 135 136 $style .= "$selector > * { margin: 0; }"; 137 } 138 139 return $style; 140 } 141 142 /** 143 * Renders the layout config to the block wrapper. 144 * 145 * @since 5.8.0 146 * @access private 147 * 148 * @param string $block_content Rendered block content. 149 * @param array $block Block object. 150 * @return string Filtered block content. 151 */ 152 function wp_render_layout_support_flag( $block_content, $block ) { 153 $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); 154 $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); 155 156 if ( ! $support_layout ) { 157 return $block_content; 158 } 159 160 $block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) ); 161 $default_layout = wp_get_global_settings( array( 'layout' ) ); 162 $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; 163 $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); 164 $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; 165 if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { 166 if ( ! $default_layout ) { 167 return $block_content; 168 } 169 $used_layout = $default_layout; 170 } 171 172 $class_name = wp_unique_id( 'wp-container-' ); 173 $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) ); 174 // Skip if gap value contains unsupported characters. 175 // Regex for CSS value borrowed from `safecss_filter_attr`, and used here 176 // because we only want to match against the value, not the CSS attribute. 177 if ( is_array( $gap_value ) ) { 178 foreach ( $gap_value as $key => $value ) { 179 $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value; 180 } 181 } else { 182 $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value; 183 } 184 185 // If a block's block.json skips serialization for spacing or spacing.blockGap, 186 // don't apply the user-defined value to the styles. 187 $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); 188 $style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization ); 189 // This assumes the hook only applies to blocks with a single wrapper. 190 // I think this is a reasonable limitation for that particular hook. 191 $content = preg_replace( 192 '/' . preg_quote( 'class="', '/' ) . '/', 193 'class="' . esc_attr( $class_name ) . ' ', 194 $block_content, 195 1 196 ); 197 198 wp_enqueue_block_support_styles( $style ); 199 200 return $content; 201 } 202 203 // Register the block support. 204 WP_Block_Supports::get_instance()->register( 205 'layout', 206 array( 207 'register_attribute' => 'wp_register_layout_support', 208 ) 209 ); 210 add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 ); 211 212 /** 213 * For themes without theme.json file, make sure 214 * to restore the inner div for the group block 215 * to avoid breaking styles relying on that div. 216 * 217 * @since 5.8.0 218 * @access private 219 * 220 * @param string $block_content Rendered block content. 221 * @param array $block Block object. 222 * @return string Filtered block content. 223 */ 224 function wp_restore_group_inner_container( $block_content, $block ) { 225 $tag_name = isset( $block['attrs']['tagName'] ) ? $block['attrs']['tagName'] : 'div'; 226 $group_with_inner_container_regex = sprintf( 227 '/(^\s*<%1$s\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/U', 228 preg_quote( $tag_name, '/' ) 229 ); 230 231 if ( 232 WP_Theme_JSON_Resolver::theme_has_support() || 233 1 === preg_match( $group_with_inner_container_regex, $block_content ) || 234 ( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] ) 235 ) { 236 return $block_content; 237 } 238 239 $replace_regex = sprintf( 240 '/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms', 241 preg_quote( $tag_name, '/' ) 242 ); 243 $updated_content = preg_replace_callback( 244 $replace_regex, 245 static function( $matches ) { 246 return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3]; 247 }, 248 $block_content 249 ); 250 return $updated_content; 251 } 252 253 add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 ); 254 255 /** 256 * For themes without theme.json file, make sure 257 * to restore the outer div for the aligned image block 258 * to avoid breaking styles relying on that div. 259 * 260 * @since 6.0.0 261 * @access private 262 * 263 * @param string $block_content Rendered block content. 264 * @param array $block Block object. 265 * @return string Filtered block content. 266 */ 267 function wp_restore_image_outer_container( $block_content, $block ) { 268 $image_with_align = " 269 /# 1) everything up to the class attribute contents 270 ( 271 ^\s* 272 <figure\b 273 [^>]* 274 \bclass= 275 [\"'] 276 ) 277 # 2) the class attribute contents 278 ( 279 [^\"']* 280 \bwp-block-image\b 281 [^\"']* 282 \b(?:alignleft|alignright|aligncenter)\b 283 [^\"']* 284 ) 285 # 3) everything after the class attribute contents 286 ( 287 [\"'] 288 [^>]* 289 > 290 .* 291 <\/figure> 292 )/iUx"; 293 294 if ( 295 WP_Theme_JSON_Resolver::theme_has_support() || 296 0 === preg_match( $image_with_align, $block_content, $matches ) 297 ) { 298 return $block_content; 299 } 300 301 $wrapper_classnames = array( 'wp-block-image' ); 302 303 // If the block has a classNames attribute these classnames need to be removed from the content and added back 304 // to the new wrapper div also. 305 if ( ! empty( $block['attrs']['className'] ) ) { 306 $wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) ); 307 } 308 $content_classnames = explode( ' ', $matches[2] ); 309 $filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames ); 310 311 return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>'; 312 } 313 314 add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Sun Nov 10 01:00:03 2024 | Cross-referenced by PHPXref 0.7.1 |