| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[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 * 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 * @since 6.6.0 Updated specificity for compatibility with 0-1-0 global styles specificity. 18 * @access private 19 * 20 * @return array[] Layout definitions. 21 */ 22 function wp_get_layout_definitions() { 23 $layout_definitions = array( 24 'default' => array( 25 'name' => 'default', 26 'slug' => 'flow', 27 'className' => 'is-layout-flow', 28 'baseStyles' => array( 29 array( 30 'selector' => ' > .alignleft', 31 'rules' => array( 32 'float' => 'left', 33 'margin-inline-start' => '0', 34 'margin-inline-end' => '2em', 35 ), 36 ), 37 array( 38 'selector' => ' > .alignright', 39 'rules' => array( 40 'float' => 'right', 41 'margin-inline-start' => '2em', 42 'margin-inline-end' => '0', 43 ), 44 ), 45 array( 46 'selector' => ' > .aligncenter', 47 'rules' => array( 48 'margin-left' => 'auto !important', 49 'margin-right' => 'auto !important', 50 ), 51 ), 52 ), 53 'spacingStyles' => array( 54 array( 55 'selector' => ' > :first-child', 56 'rules' => array( 57 'margin-block-start' => '0', 58 ), 59 ), 60 array( 61 'selector' => ' > :last-child', 62 'rules' => array( 63 'margin-block-end' => '0', 64 ), 65 ), 66 array( 67 'selector' => ' > *', 68 'rules' => array( 69 'margin-block-start' => null, 70 'margin-block-end' => '0', 71 ), 72 ), 73 ), 74 ), 75 'constrained' => array( 76 'name' => 'constrained', 77 'slug' => 'constrained', 78 'className' => 'is-layout-constrained', 79 'baseStyles' => array( 80 array( 81 'selector' => ' > .alignleft', 82 'rules' => array( 83 'float' => 'left', 84 'margin-inline-start' => '0', 85 'margin-inline-end' => '2em', 86 ), 87 ), 88 array( 89 'selector' => ' > .alignright', 90 'rules' => array( 91 'float' => 'right', 92 'margin-inline-start' => '2em', 93 'margin-inline-end' => '0', 94 ), 95 ), 96 array( 97 'selector' => ' > .aligncenter', 98 'rules' => array( 99 'margin-left' => 'auto !important', 100 'margin-right' => 'auto !important', 101 ), 102 ), 103 array( 104 'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))', 105 'rules' => array( 106 'max-width' => 'var(--wp--style--global--content-size)', 107 'margin-left' => 'auto !important', 108 'margin-right' => 'auto !important', 109 ), 110 ), 111 array( 112 'selector' => ' > .alignwide', 113 'rules' => array( 114 'max-width' => 'var(--wp--style--global--wide-size)', 115 ), 116 ), 117 ), 118 'spacingStyles' => array( 119 array( 120 'selector' => ' > :first-child', 121 'rules' => array( 122 'margin-block-start' => '0', 123 ), 124 ), 125 array( 126 'selector' => ' > :last-child', 127 'rules' => array( 128 'margin-block-end' => '0', 129 ), 130 ), 131 array( 132 'selector' => ' > *', 133 'rules' => array( 134 'margin-block-start' => null, 135 'margin-block-end' => '0', 136 ), 137 ), 138 ), 139 ), 140 'flex' => array( 141 'name' => 'flex', 142 'slug' => 'flex', 143 'className' => 'is-layout-flex', 144 'displayMode' => 'flex', 145 'baseStyles' => array( 146 array( 147 'selector' => '', 148 'rules' => array( 149 'flex-wrap' => 'wrap', 150 'align-items' => 'center', 151 ), 152 ), 153 array( 154 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 155 'rules' => array( 156 'margin' => '0', 157 ), 158 ), 159 ), 160 'spacingStyles' => array( 161 array( 162 'selector' => '', 163 'rules' => array( 164 'gap' => null, 165 ), 166 ), 167 ), 168 ), 169 'grid' => array( 170 'name' => 'grid', 171 'slug' => 'grid', 172 'className' => 'is-layout-grid', 173 'displayMode' => 'grid', 174 'baseStyles' => array( 175 array( 176 'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001. 177 'rules' => array( 178 'margin' => '0', 179 ), 180 ), 181 ), 182 'spacingStyles' => array( 183 array( 184 'selector' => '', 185 'rules' => array( 186 'gap' => null, 187 ), 188 ), 189 ), 190 ), 191 ); 192 193 return $layout_definitions; 194 } 195 196 /** 197 * Registers the layout block attribute for block types that support it. 198 * 199 * @since 5.8.0 200 * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`. 201 * @access private 202 * 203 * @param WP_Block_Type $block_type Block Type. 204 */ 205 function wp_register_layout_support( $block_type ) { 206 $support_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false ); 207 if ( $support_layout ) { 208 if ( ! $block_type->attributes ) { 209 $block_type->attributes = array(); 210 } 211 212 if ( ! array_key_exists( 'layout', $block_type->attributes ) ) { 213 $block_type->attributes['layout'] = array( 214 'type' => 'object', 215 ); 216 } 217 } 218 } 219 220 /** 221 * Generates the CSS corresponding to the provided layout. 222 * 223 * @since 5.9.0 224 * @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles. 225 * @since 6.3.0 Added grid layout type. 226 * @since 6.6.0 Removed duplicated selector from layout styles. 227 * Enabled negative margins for alignfull children of blocks with custom padding. 228 * @access private 229 * 230 * @param string $selector CSS selector. 231 * @param array $layout Layout object. The one that is passed has already checked 232 * the existence of default block layout. 233 * @param bool $has_block_gap_support Optional. Whether the theme has support for the block gap. Default false. 234 * @param string|string[]|null $gap_value Optional. The block gap value to apply. Default null. 235 * @param bool $should_skip_gap_serialization Optional. Whether to skip applying the user-defined value set in the editor. Default false. 236 * @param string $fallback_gap_value Optional. The block gap value to apply. Default '0.5em'. 237 * @param array|null $block_spacing Optional. Custom spacing set on the block. Default null. 238 * @return string CSS styles on success. Else, empty string. 239 */ 240 function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { 241 $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; 242 $layout_styles = array(); 243 244 if ( 'default' === $layout_type ) { 245 if ( $has_block_gap_support ) { 246 if ( is_array( $gap_value ) ) { 247 $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; 248 } 249 if ( null !== $gap_value && ! $should_skip_gap_serialization ) { 250 // Get spacing CSS variable from preset value if provided. 251 if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) { 252 $index_to_splice = strrpos( $gap_value, '|' ) + 1; 253 $slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) ); 254 $gap_value = "var(--wp--preset--spacing--$slug)"; 255 } 256 257 array_push( 258 $layout_styles, 259 array( 260 'selector' => "$selector > *", 261 'declarations' => array( 262 'margin-block-start' => '0', 263 'margin-block-end' => '0', 264 ), 265 ), 266 array( 267 'selector' => "$selector > * + *", 268 'declarations' => array( 269 'margin-block-start' => $gap_value, 270 'margin-block-end' => '0', 271 ), 272 ) 273 ); 274 } 275 } 276 } elseif ( 'constrained' === $layout_type ) { 277 $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; 278 $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; 279 $justify_content = isset( $layout['justifyContent'] ) ? $layout['justifyContent'] : 'center'; 280 281 $all_max_width_value = $content_size ? $content_size : $wide_size; 282 $wide_max_width_value = $wide_size ? $wide_size : $content_size; 283 284 // Make sure there is a single CSS rule, and all tags are stripped for security. 285 $all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] ); 286 $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] ); 287 288 $margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important'; 289 $margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important'; 290 291 if ( $content_size || $wide_size ) { 292 array_push( 293 $layout_styles, 294 array( 295 'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))", 296 'declarations' => array( 297 'max-width' => $all_max_width_value, 298 'margin-left' => $margin_left, 299 'margin-right' => $margin_right, 300 ), 301 ), 302 array( 303 'selector' => "$selector > .alignwide", 304 'declarations' => array( 'max-width' => $wide_max_width_value ), 305 ), 306 array( 307 'selector' => "$selector .alignfull", 308 'declarations' => array( 'max-width' => 'none' ), 309 ) 310 ); 311 } 312 313 if ( isset( $block_spacing ) ) { 314 $block_spacing_values = wp_style_engine_get_styles( 315 array( 316 'spacing' => $block_spacing, 317 ) 318 ); 319 320 /* 321 * Handle negative margins for alignfull children of blocks with custom padding set. 322 * They're added separately because padding might only be set on one side. 323 */ 324 if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { 325 $padding_right = $block_spacing_values['declarations']['padding-right']; 326 // Add unit if 0. 327 if ( '0' === $padding_right ) { 328 $padding_right = '0px'; 329 } 330 $layout_styles[] = array( 331 'selector' => "$selector > .alignfull", 332 'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ), 333 ); 334 } 335 if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { 336 $padding_left = $block_spacing_values['declarations']['padding-left']; 337 // Add unit if 0. 338 if ( '0' === $padding_left ) { 339 $padding_left = '0px'; 340 } 341 $layout_styles[] = array( 342 'selector' => "$selector > .alignfull", 343 'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ), 344 ); 345 } 346 } 347 348 if ( 'left' === $justify_content ) { 349 $layout_styles[] = array( 350 'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))", 351 'declarations' => array( 'margin-left' => '0 !important' ), 352 ); 353 } 354 355 if ( 'right' === $justify_content ) { 356 $layout_styles[] = array( 357 'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))", 358 'declarations' => array( 'margin-right' => '0 !important' ), 359 ); 360 } 361 362 if ( $has_block_gap_support ) { 363 if ( is_array( $gap_value ) ) { 364 $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; 365 } 366 if ( null !== $gap_value && ! $should_skip_gap_serialization ) { 367 // Get spacing CSS variable from preset value if provided. 368 if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) { 369 $index_to_splice = strrpos( $gap_value, '|' ) + 1; 370 $slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) ); 371 $gap_value = "var(--wp--preset--spacing--$slug)"; 372 } 373 374 array_push( 375 $layout_styles, 376 array( 377 'selector' => "$selector > *", 378 'declarations' => array( 379 'margin-block-start' => '0', 380 'margin-block-end' => '0', 381 ), 382 ), 383 array( 384 'selector' => "$selector > * + *", 385 'declarations' => array( 386 'margin-block-start' => $gap_value, 387 'margin-block-end' => '0', 388 ), 389 ) 390 ); 391 } 392 } 393 } elseif ( 'flex' === $layout_type ) { 394 $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; 395 396 $justify_content_options = array( 397 'left' => 'flex-start', 398 'right' => 'flex-end', 399 'center' => 'center', 400 ); 401 402 $vertical_alignment_options = array( 403 'top' => 'flex-start', 404 'center' => 'center', 405 'bottom' => 'flex-end', 406 ); 407 408 if ( 'horizontal' === $layout_orientation ) { 409 $justify_content_options += array( 'space-between' => 'space-between' ); 410 $vertical_alignment_options += array( 'stretch' => 'stretch' ); 411 } else { 412 $justify_content_options += array( 'stretch' => 'stretch' ); 413 $vertical_alignment_options += array( 'space-between' => 'space-between' ); 414 } 415 416 if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { 417 $layout_styles[] = array( 418 'selector' => $selector, 419 'declarations' => array( 'flex-wrap' => 'nowrap' ), 420 ); 421 } 422 423 if ( $has_block_gap_support && isset( $gap_value ) ) { 424 $combined_gap_value = ''; 425 $gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' ); 426 427 foreach ( $gap_sides as $gap_side ) { 428 $process_value = $gap_value; 429 if ( is_array( $gap_value ) ) { 430 $process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $gap_side ] : $fallback_gap_value; 431 } 432 // Get spacing CSS variable from preset value if provided. 433 if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) { 434 $index_to_splice = strrpos( $process_value, '|' ) + 1; 435 $slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) ); 436 $process_value = "var(--wp--preset--spacing--$slug)"; 437 } 438 $combined_gap_value .= "$process_value "; 439 } 440 $gap_value = trim( $combined_gap_value ); 441 442 if ( null !== $gap_value && ! $should_skip_gap_serialization ) { 443 $layout_styles[] = array( 444 'selector' => $selector, 445 'declarations' => array( 'gap' => $gap_value ), 446 ); 447 } 448 } 449 450 if ( 'horizontal' === $layout_orientation ) { 451 /* 452 * Add this style only if is not empty for backwards compatibility, 453 * since we intend to convert blocks that had flex layout implemented 454 * by custom css. 455 */ 456 if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { 457 $layout_styles[] = array( 458 'selector' => $selector, 459 'declarations' => array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ), 460 ); 461 } 462 463 if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { 464 $layout_styles[] = array( 465 'selector' => $selector, 466 'declarations' => array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ), 467 ); 468 } 469 } else { 470 $layout_styles[] = array( 471 'selector' => $selector, 472 'declarations' => array( 'flex-direction' => 'column' ), 473 ); 474 if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { 475 $layout_styles[] = array( 476 'selector' => $selector, 477 'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ), 478 ); 479 } else { 480 $layout_styles[] = array( 481 'selector' => $selector, 482 'declarations' => array( 'align-items' => 'flex-start' ), 483 ); 484 } 485 if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { 486 $layout_styles[] = array( 487 'selector' => $selector, 488 'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ), 489 ); 490 } 491 } 492 } elseif ( 'grid' === $layout_type ) { 493 if ( ! empty( $layout['columnCount'] ) ) { 494 $layout_styles[] = array( 495 'selector' => $selector, 496 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ), 497 ); 498 } else { 499 $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; 500 501 $layout_styles[] = array( 502 'selector' => $selector, 503 'declarations' => array( 504 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))', 505 'container-type' => 'inline-size', 506 ), 507 ); 508 } 509 510 if ( $has_block_gap_support && isset( $gap_value ) ) { 511 $combined_gap_value = ''; 512 $gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' ); 513 514 foreach ( $gap_sides as $gap_side ) { 515 $process_value = $gap_value; 516 if ( is_array( $gap_value ) ) { 517 $process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $gap_side ] : $fallback_gap_value; 518 } 519 // Get spacing CSS variable from preset value if provided. 520 if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) { 521 $index_to_splice = strrpos( $process_value, '|' ) + 1; 522 $slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) ); 523 $process_value = "var(--wp--preset--spacing--$slug)"; 524 } 525 $combined_gap_value .= "$process_value "; 526 } 527 $gap_value = trim( $combined_gap_value ); 528 529 if ( null !== $gap_value && ! $should_skip_gap_serialization ) { 530 $layout_styles[] = array( 531 'selector' => $selector, 532 'declarations' => array( 'gap' => $gap_value ), 533 ); 534 } 535 } 536 } 537 538 if ( ! empty( $layout_styles ) ) { 539 /* 540 * Add to the style engine store to enqueue and render layout styles. 541 * Return compiled layout styles to retain backwards compatibility. 542 * Since https://github.com/WordPress/gutenberg/pull/42452, 543 * wp_enqueue_block_support_styles is no longer called in this block supports file. 544 */ 545 return wp_style_engine_get_stylesheet_from_css_rules( 546 $layout_styles, 547 array( 548 'context' => 'block-supports', 549 'prettify' => false, 550 ) 551 ); 552 } 553 554 return ''; 555 } 556 557 /** 558 * Renders the layout config to the block wrapper. 559 * 560 * @since 5.8.0 561 * @since 6.3.0 Adds compound class to layout wrapper for global spacing styles. 562 * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`. 563 * @since 6.6.0 Removed duplicate container class from layout styles. 564 * @access private 565 * 566 * @param string $block_content Rendered block content. 567 * @param array $block Block object. 568 * @return string Filtered block content. 569 */ 570 function wp_render_layout_support_flag( $block_content, $block ) { 571 $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); 572 $block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false ); 573 $child_layout = isset( $block['attrs']['style']['layout'] ) ? $block['attrs']['style']['layout'] : null; 574 575 if ( ! $block_supports_layout && ! $child_layout ) { 576 return $block_content; 577 } 578 579 $outer_class_names = array(); 580 581 // Child layout specific logic. 582 if ( $child_layout ) { 583 /* 584 * Generates a unique class for child block layout styles. 585 * 586 * To ensure consistent class generation across different page renders, 587 * only properties that affect layout styling are used. These properties 588 * come from `$block['attrs']['style']['layout']` and `$block['parentLayout']`. 589 * 590 * As long as these properties coincide, the generated class will be the same. 591 */ 592 $container_content_class = wp_unique_id_from_values( 593 array( 594 'layout' => array_intersect_key( 595 $block['attrs']['style']['layout'] ?? array(), 596 array_flip( 597 array( 'selfStretch', 'flexSize', 'columnStart', 'columnSpan', 'rowStart', 'rowSpan' ) 598 ) 599 ), 600 'parentLayout' => array_intersect_key( 601 $block['parentLayout'] ?? array(), 602 array_flip( 603 array( 'minimumColumnWidth', 'columnCount' ) 604 ) 605 ), 606 ), 607 'wp-container-content-' 608 ); 609 610 $child_layout_declarations = array(); 611 $child_layout_styles = array(); 612 613 $self_stretch = isset( $child_layout['selfStretch'] ) ? $child_layout['selfStretch'] : null; 614 615 if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) { 616 $child_layout_declarations['flex-basis'] = $child_layout['flexSize']; 617 $child_layout_declarations['box-sizing'] = 'border-box'; 618 } elseif ( 'fill' === $self_stretch ) { 619 $child_layout_declarations['flex-grow'] = '1'; 620 } 621 622 if ( isset( $child_layout['columnSpan'] ) ) { 623 $column_span = $child_layout['columnSpan']; 624 $child_layout_declarations['grid-column'] = "span $column_span"; 625 } 626 if ( isset( $child_layout['rowSpan'] ) ) { 627 $row_span = $child_layout['rowSpan']; 628 $child_layout_declarations['grid-row'] = "span $row_span"; 629 } 630 $child_layout_styles[] = array( 631 'selector' => ".$container_content_class", 632 'declarations' => $child_layout_declarations, 633 ); 634 635 /* 636 * If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set, 637 * the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive. 638 * But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't 639 * exist, we can assume that the grid is responsive. 640 */ 641 if ( isset( $child_layout['columnSpan'] ) && ( isset( $block['parentLayout']['minimumColumnWidth'] ) || ! isset( $block['parentLayout']['columnCount'] ) ) ) { 642 $column_span_number = floatval( $child_layout['columnSpan'] ); 643 $parent_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : '12rem'; 644 $parent_column_value = floatval( $parent_column_width ); 645 $parent_column_unit = explode( $parent_column_value, $parent_column_width ); 646 647 /* 648 * If there is no unit, the width has somehow been mangled so we reset both unit and value 649 * to defaults. 650 * Additionally, the unit should be one of px, rem or em, so that also needs to be checked. 651 */ 652 if ( count( $parent_column_unit ) <= 1 ) { 653 $parent_column_unit = 'rem'; 654 $parent_column_value = 12; 655 } else { 656 $parent_column_unit = $parent_column_unit[1]; 657 658 if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) { 659 $parent_column_unit = 'rem'; 660 } 661 } 662 663 /* 664 * A default gap value is used for this computation because custom gap values may not be 665 * viable to use in the computation of the container query value. 666 */ 667 $default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5; 668 $container_query_value = $column_span_number * $parent_column_value + ( $column_span_number - 1 ) * $default_gap_value; 669 $container_query_value = $container_query_value . $parent_column_unit; 670 671 $child_layout_styles[] = array( 672 'rules_group' => "@container (max-width: $container_query_value )", 673 'selector' => ".$container_content_class", 674 'declarations' => array( 675 'grid-column' => '1/-1', 676 ), 677 ); 678 } 679 680 /* 681 * Add to the style engine store to enqueue and render layout styles. 682 * Return styles here just to check if any exist. 683 */ 684 $child_css = wp_style_engine_get_stylesheet_from_css_rules( 685 $child_layout_styles, 686 array( 687 'context' => 'block-supports', 688 'prettify' => false, 689 ) 690 ); 691 692 if ( $child_css ) { 693 $outer_class_names[] = $container_content_class; 694 } 695 } 696 697 // Prep the processor for modifying the block output. 698 $processor = new WP_HTML_Tag_Processor( $block_content ); 699 700 // Having no tags implies there are no tags onto which to add class names. 701 if ( ! $processor->next_tag() ) { 702 return $block_content; 703 } 704 705 /* 706 * A block may not support layout but still be affected by a parent block's layout. 707 * 708 * In these cases add the appropriate class names and then return early; there's 709 * no need to investigate on this block whether additional layout constraints apply. 710 */ 711 if ( ! $block_supports_layout && ! empty( $outer_class_names ) ) { 712 foreach ( $outer_class_names as $class_name ) { 713 $processor->add_class( $class_name ); 714 } 715 return $processor->get_updated_html(); 716 } elseif ( ! $block_supports_layout ) { 717 // Ensure layout classnames are not injected if there is no layout support. 718 return $block_content; 719 } 720 721 $global_settings = wp_get_global_settings(); 722 $fallback_layout = isset( $block_type->supports['layout']['default'] ) 723 ? $block_type->supports['layout']['default'] 724 : array(); 725 if ( empty( $fallback_layout ) ) { 726 $fallback_layout = isset( $block_type->supports['__experimentalLayout']['default'] ) 727 ? $block_type->supports['__experimentalLayout']['default'] 728 : array(); 729 } 730 $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout; 731 732 $class_names = array(); 733 $layout_definitions = wp_get_layout_definitions(); 734 735 // Set the correct layout type for blocks using legacy content width. 736 if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) { 737 $used_layout['type'] = 'constrained'; 738 } 739 740 $root_padding_aware_alignments = isset( $global_settings['useRootPaddingAwareAlignments'] ) 741 ? $global_settings['useRootPaddingAwareAlignments'] 742 : false; 743 744 if ( 745 $root_padding_aware_alignments && 746 isset( $used_layout['type'] ) && 747 'constrained' === $used_layout['type'] 748 ) { 749 $class_names[] = 'has-global-padding'; 750 } 751 752 /* 753 * The following section was added to reintroduce a small set of layout classnames that were 754 * removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is 755 * not intended to provide an extended set of classes to match all block layout attributes 756 * here. 757 */ 758 if ( ! empty( $block['attrs']['layout']['orientation'] ) ) { 759 $class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] ); 760 } 761 762 if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) { 763 $class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] ); 764 } 765 766 if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) { 767 $class_names[] = 'is-nowrap'; 768 } 769 770 // Get classname for layout type. 771 if ( isset( $used_layout['type'] ) ) { 772 $layout_classname = isset( $layout_definitions[ $used_layout['type'] ]['className'] ) 773 ? $layout_definitions[ $used_layout['type'] ]['className'] 774 : ''; 775 } else { 776 $layout_classname = isset( $layout_definitions['default']['className'] ) 777 ? $layout_definitions['default']['className'] 778 : ''; 779 } 780 781 if ( $layout_classname && is_string( $layout_classname ) ) { 782 $class_names[] = sanitize_title( $layout_classname ); 783 } 784 785 /* 786 * Only generate Layout styles if the theme has not opted-out. 787 * Attribute-based Layout classnames are output in all cases. 788 */ 789 if ( ! current_theme_supports( 'disable-layout-styles' ) ) { 790 791 $gap_value = isset( $block['attrs']['style']['spacing']['blockGap'] ) 792 ? $block['attrs']['style']['spacing']['blockGap'] 793 : null; 794 /* 795 * Skip if gap value contains unsupported characters. 796 * Regex for CSS value borrowed from `safecss_filter_attr`, and used here 797 * to only match against the value, not the CSS attribute. 798 */ 799 if ( is_array( $gap_value ) ) { 800 foreach ( $gap_value as $key => $value ) { 801 $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value; 802 } 803 } else { 804 $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value; 805 } 806 807 $fallback_gap_value = isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) 808 ? $block_type->supports['spacing']['blockGap']['__experimentalDefault'] 809 : '0.5em'; 810 $block_spacing = isset( $block['attrs']['style']['spacing'] ) 811 ? $block['attrs']['style']['spacing'] 812 : null; 813 814 /* 815 * If a block's block.json skips serialization for spacing or spacing.blockGap, 816 * don't apply the user-defined value to the styles. 817 */ 818 $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); 819 820 $block_gap = isset( $global_settings['spacing']['blockGap'] ) 821 ? $global_settings['spacing']['blockGap'] 822 : null; 823 $has_block_gap_support = isset( $block_gap ); 824 825 /* 826 * Generates a unique ID based on all the data required to obtain the 827 * corresponding layout style. Keeps the CSS class names the same 828 * even for different blocks on different places, as long as they have 829 * the same layout definition. Makes the CSS class names stable across 830 * paginations for features like the enhanced pagination of the Query block. 831 */ 832 $container_class = wp_unique_id_from_values( 833 array( 834 $used_layout, 835 $has_block_gap_support, 836 $gap_value, 837 $should_skip_gap_serialization, 838 $fallback_gap_value, 839 $block_spacing, 840 ), 841 'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-' 842 ); 843 844 $style = wp_get_layout_style( 845 ".$container_class", 846 $used_layout, 847 $has_block_gap_support, 848 $gap_value, 849 $should_skip_gap_serialization, 850 $fallback_gap_value, 851 $block_spacing 852 ); 853 854 // Only add container class and enqueue block support styles if unique styles were generated. 855 if ( ! empty( $style ) ) { 856 $class_names[] = $container_class; 857 } 858 } 859 860 // Add combined layout and block classname for global styles to hook onto. 861 $split_block_name = explode( '/', $block['blockName'] ); 862 $full_block_name = 'core' === $split_block_name[0] ? end( $split_block_name ) : implode( '-', $split_block_name ); 863 $class_names[] = 'wp-block-' . $full_block_name . '-' . $layout_classname; 864 865 // Add classes to the outermost HTML tag if necessary. 866 if ( ! empty( $outer_class_names ) ) { 867 foreach ( $outer_class_names as $outer_class_name ) { 868 $processor->add_class( $outer_class_name ); 869 } 870 } 871 872 /** 873 * Attempts to refer to the inner-block wrapping element by its class attribute. 874 * 875 * When examining a block's inner content, if a block has inner blocks, then 876 * the first content item will likely be a text (HTML) chunk immediately 877 * preceding the inner blocks. The last HTML tag in that chunk would then be 878 * an opening tag for an element that wraps the inner blocks. 879 * 880 * There's no reliable way to associate this wrapper in $block_content because 881 * it may have changed during the rendering pipeline (as inner contents is 882 * provided before rendering) and through previous filters. In many cases, 883 * however, the `class` attribute will be a good-enough identifier, so this 884 * code finds the last tag in that chunk and stores the `class` attribute 885 * so that it can be used later when working through the rendered block output 886 * to identify the wrapping element and add the remaining class names to it. 887 * 888 * It's also possible that no inner block wrapper even exists. If that's the 889 * case this code could apply the class names to an invalid element. 890 * 891 * Example: 892 * 893 * $block['innerBlocks'] = array( $list_item ); 894 * $block['innerContent'] = array( '<ul class="list-wrapper is-unordered">', null, '</ul>' ); 895 * 896 * // After rendering, the initial contents may have been modified by other renderers or filters. 897 * $block_content = <<<HTML 898 * <figure> 899 * <ul class="annotated-list list-wrapper is-unordered"> 900 * <li>Code</li> 901 * </ul><figcaption>It's a list!</figcaption> 902 * </figure> 903 * HTML; 904 * 905 * Although it is possible that the original block-wrapper classes are changed in $block_content 906 * from how they appear in $block['innerContent'], it's likely that the original class attributes 907 * are still present in the wrapper as they are in this example. Frequently, additional classes 908 * will also be present; rarely should classes be removed. 909 * 910 * @todo Find a better way to match the first inner block. If it's possible to identify where the 911 * first inner block starts, then it will be possible to find the last tag before it starts 912 * and then that tag, if an opening tag, can be solidly identified as a wrapping element. 913 * Can some unique value or class or ID be added to the inner blocks when they process 914 * so that they can be extracted here safely without guessing? Can the block rendering function 915 * return information about where the rendered inner blocks start? 916 * 917 * @var string|null 918 */ 919 $inner_block_wrapper_classes = null; 920 $first_chunk = isset( $block['innerContent'][0] ) ? $block['innerContent'][0] : null; 921 if ( is_string( $first_chunk ) && count( $block['innerContent'] ) > 1 ) { 922 $first_chunk_processor = new WP_HTML_Tag_Processor( $first_chunk ); 923 while ( $first_chunk_processor->next_tag() ) { 924 $class_attribute = $first_chunk_processor->get_attribute( 'class' ); 925 if ( is_string( $class_attribute ) && ! empty( $class_attribute ) ) { 926 $inner_block_wrapper_classes = $class_attribute; 927 } 928 } 929 } 930 931 /* 932 * If necessary, advance to what is likely to be an inner block wrapper tag. 933 * 934 * This advances until it finds the first tag containing the original class 935 * attribute from above. If none is found it will scan to the end of the block 936 * and fail to add any class names. 937 * 938 * If there is no block wrapper it won't advance at all, in which case the 939 * class names will be added to the first and outermost tag of the block. 940 * For cases where this outermost tag is the only tag surrounding inner 941 * blocks then the outer wrapper and inner wrapper are the same. 942 */ 943 do { 944 if ( ! $inner_block_wrapper_classes ) { 945 break; 946 } 947 948 $class_attribute = $processor->get_attribute( 'class' ); 949 if ( is_string( $class_attribute ) && str_contains( $class_attribute, $inner_block_wrapper_classes ) ) { 950 break; 951 } 952 } while ( $processor->next_tag() ); 953 954 // Add the remaining class names. 955 foreach ( $class_names as $class_name ) { 956 $processor->add_class( $class_name ); 957 } 958 959 return $processor->get_updated_html(); 960 } 961 962 /** 963 * Check if the parent block exists and if it has a layout attribute. 964 * If it does, add the parent layout to the parsed block 965 * 966 * @since 6.6.0 967 * @access private 968 * 969 * @param array $parsed_block The parsed block. 970 * @param array $source_block The source block. 971 * @param WP_Block $parent_block The parent block. 972 * @return array The parsed block with parent layout attribute if it exists. 973 */ 974 function wp_add_parent_layout_to_parsed_block( $parsed_block, $source_block, $parent_block ) { 975 if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) { 976 $parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout']; 977 } 978 return $parsed_block; 979 } 980 981 add_filter( 'render_block_data', 'wp_add_parent_layout_to_parsed_block', 10, 3 ); 982 983 // Register the block support. 984 WP_Block_Supports::get_instance()->register( 985 'layout', 986 array( 987 'register_attribute' => 'wp_register_layout_support', 988 ) 989 ); 990 add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 ); 991 992 /** 993 * For themes without theme.json file, make sure 994 * to restore the inner div for the group block 995 * to avoid breaking styles relying on that div. 996 * 997 * @since 5.8.0 998 * @since 6.6.1 Removed inner container from Grid variations. 999 * @access private 1000 * 1001 * @param string $block_content Rendered block content. 1002 * @param array $block Block object. 1003 * @return string Filtered block content. 1004 */ 1005 function wp_restore_group_inner_container( $block_content, $block ) { 1006 $tag_name = isset( $block['attrs']['tagName'] ) ? $block['attrs']['tagName'] : 'div'; 1007 $group_with_inner_container_regex = sprintf( 1008 '/(^\s*<%1$s\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/U', 1009 preg_quote( $tag_name, '/' ) 1010 ); 1011 1012 if ( 1013 wp_theme_has_theme_json() || 1014 1 === preg_match( $group_with_inner_container_regex, $block_content ) || 1015 ( isset( $block['attrs']['layout']['type'] ) && ( 'flex' === $block['attrs']['layout']['type'] || 'grid' === $block['attrs']['layout']['type'] ) ) 1016 ) { 1017 return $block_content; 1018 } 1019 1020 /* 1021 * This filter runs after the layout classnames have been added to the block, so they 1022 * have to be removed from the outer wrapper and then added to the inner. 1023 */ 1024 $layout_classes = array(); 1025 $processor = new WP_HTML_Tag_Processor( $block_content ); 1026 1027 if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) { 1028 foreach ( $processor->class_list() as $class_name ) { 1029 if ( str_contains( $class_name, 'is-layout-' ) ) { 1030 $layout_classes[] = $class_name; 1031 $processor->remove_class( $class_name ); 1032 } 1033 } 1034 } 1035 1036 $content_without_layout_classes = $processor->get_updated_html(); 1037 $replace_regex = sprintf( 1038 '/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms', 1039 preg_quote( $tag_name, '/' ) 1040 ); 1041 $updated_content = preg_replace_callback( 1042 $replace_regex, 1043 static function ( $matches ) { 1044 return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3]; 1045 }, 1046 $content_without_layout_classes 1047 ); 1048 1049 // Add layout classes to inner wrapper. 1050 if ( ! empty( $layout_classes ) ) { 1051 $processor = new WP_HTML_Tag_Processor( $updated_content ); 1052 if ( $processor->next_tag( array( 'class_name' => 'wp-block-group__inner-container' ) ) ) { 1053 foreach ( $layout_classes as $class_name ) { 1054 $processor->add_class( $class_name ); 1055 } 1056 } 1057 $updated_content = $processor->get_updated_html(); 1058 } 1059 return $updated_content; 1060 } 1061 1062 add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 ); 1063 1064 /** 1065 * For themes without theme.json file, make sure 1066 * to restore the outer div for the aligned image block 1067 * to avoid breaking styles relying on that div. 1068 * 1069 * @since 6.0.0 1070 * @access private 1071 * 1072 * @param string $block_content Rendered block content. 1073 * @param array $block Block object. 1074 * @return string Filtered block content. 1075 */ 1076 function wp_restore_image_outer_container( $block_content, $block ) { 1077 $image_with_align = " 1078 /# 1) everything up to the class attribute contents 1079 ( 1080 ^\s* 1081 <figure\b 1082 [^>]* 1083 \bclass= 1084 [\"'] 1085 ) 1086 # 2) the class attribute contents 1087 ( 1088 [^\"']* 1089 \bwp-block-image\b 1090 [^\"']* 1091 \b(?:alignleft|alignright|aligncenter)\b 1092 [^\"']* 1093 ) 1094 # 3) everything after the class attribute contents 1095 ( 1096 [\"'] 1097 [^>]* 1098 > 1099 .* 1100 <\/figure> 1101 )/iUx"; 1102 1103 if ( 1104 wp_theme_has_theme_json() || 1105 0 === preg_match( $image_with_align, $block_content, $matches ) 1106 ) { 1107 return $block_content; 1108 } 1109 1110 $wrapper_classnames = array( 'wp-block-image' ); 1111 1112 // If the block has a classNames attribute these classnames need to be removed from the content and added back 1113 // to the new wrapper div also. 1114 if ( ! empty( $block['attrs']['className'] ) ) { 1115 $wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) ); 1116 } 1117 $content_classnames = explode( ' ', $matches[2] ); 1118 $filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames ); 1119 1120 return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>'; 1121 } 1122 1123 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 : Thu Sep 18 08:20:05 2025 | Cross-referenced by PHPXref |