Skip to content

Commit

Permalink
Allow full width elements in root
Browse files Browse the repository at this point in the history
  • Loading branch information
scruffian committed May 26, 2022
1 parent a13fa7a commit 9c506cb
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 9 deletions.
27 changes: 20 additions & 7 deletions lib/block-supports/layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_ga
$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );

if ( $content_size || $wide_size ) {
$style = "$selector {";
// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level
$style = ".wp-container-default-layout $selector {";
// Using important here to override the inline padding that could be potentially
// applied using the custom padding control before the layout inheritance is applied.
$style .= sprintf(
Expand All @@ -73,11 +74,18 @@ function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_ga
$style .= '}';

$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
$style .= "$selector > .alignfull {";
// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level.
$style .= ".wp-container-default-layout $selector > .alignfull {";
$style .= 'max-width: none;';
$style .= isset( $padding['left'] ) ? sprintf( 'margin-left: calc( -1 * %s ) !important;', $padding['left'] ) : '';
$style .= isset( $padding['right'] ) ? sprintf( 'margin-right: calc( -1 * %s ) !important;', $padding['right'] ) : '';
$style .= '}';

// Add padding to full wide blocks that inherit default layout, so the content doesn't touch the edges.
$style .= "$selector > .alignfull {";
$style .= isset( $padding['left'] ) ? sprintf( 'padding-left: %s !important;', $padding['left'] ) : '';
$style .= isset( $padding['right'] ) ? sprintf( 'padding-right: %s !important;', $padding['right'] ) : '';
$style .= '}';
}

$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
Expand Down Expand Up @@ -175,9 +183,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
if ( ! $support_layout ) {
return $block_content;
}

$class_name = wp_unique_id( 'wp-container-' );
$selector = '.' . $class_name;
$block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) );
$default_layout = gutenberg_get_global_settings( array( 'layout' ) );
$default_padding = gutenberg_get_global_styles( array( 'spacing', 'padding' ) );
$padding = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null );
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
Expand All @@ -186,11 +196,14 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
if ( ! $default_layout ) {
return $block_content;
}
$used_layout = $default_layout;
$padding = isset( $default_layout['padding'] ) ? $default_layout['padding'] : null;
$class_name .= ' wp-container-default-layout';
$selector .= '.wp-container-default-layout';
$used_layout = $default_layout;
//TODO - can we allow padding from the block settings?
$padding = isset( $default_padding ) ? $default_padding : null;
}

$class_name = wp_unique_id( 'wp-container-' );

$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
Expand All @@ -208,7 +221,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = gutenberg_get_layout_style( ".$class_name", $used_layout, $padding, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
$style = gutenberg_get_layout_style( $selector, $used_layout, $padding, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
Expand Down
6 changes: 4 additions & 2 deletions lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
Original file line number Diff line number Diff line change
Expand Up @@ -373,11 +373,13 @@ protected function get_block_classes( $style_nodes ) {
if ( $use_root_vars ) {
$block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
$block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
$block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';

// This will be overridden by children who inherit default layout.
$block_rules .= '.wp-site-blocks .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); width: auto;}';

// Alignfull blocks in the block editor that are direct children of post content should also get negative margins.
if ( is_callable( 'get_current_screen' ) && get_current_screen()->is_block_editor() ) {
$block_rules .= '.is-root-container > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
$block_rules .= '.is-root-container .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); width: auto; }';
}
}
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
Expand Down

0 comments on commit 9c506cb

Please sign in to comment.