From 97b362cd5653d6558af07959554e42408deeb3d1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 25 Oct 2021 11:04:29 +0100 Subject: [PATCH 1/3] Add outer padding support to the flow layout --- lib/block-supports/layout.php | 18 +++++++++++++----- lib/class-wp-theme-json-gutenberg.php | 5 +++-- packages/block-editor/src/layouts/flow.js | 9 ++++++++- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 1af4a7f842c4d..777dd03d32edd 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -39,8 +39,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = ''; if ( 'default' === $layout_type ) { - $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null; - $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null; + $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null; + $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null; + $outer_padding = isset( $layout['outerPadding'] ) ? $layout['outerPadding'] : 0; $all_max_width_value = $content_size ? $content_size : $wide_size; $wide_max_width_value = $wide_size ? $wide_size : $content_size; @@ -52,14 +53,21 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = ''; if ( $content_size || $wide_size ) { - $style = "$selector > * {"; + $style = "$selector {"; + $style .= "--wp-style-layout-outer-padding: $outer_padding;"; + $style .= 'padding: 0 var(--wp-style-layout-outer-padding);'; + $style .= '}'; + $style .= "$selector > * {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; $style .= 'margin-left: auto !important;'; $style .= 'margin-right: auto !important;'; $style .= '}'; - $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector .alignfull { max-width: none; }"; + $style .= "$selector .alignfull {"; + $style .= 'max-width: none;'; + $style .= 'margin-left: calc( -1 * var(--wp-style-layout-outer-padding) ) !important;'; + $style .= 'margin-right: calc( -1 * var(--wp-style-layout-outer-padding) ) !important;'; + $style .= '}'; } $style .= "$selector .alignleft { float: left; margin-right: 2em; }"; diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f84696e019d23..57650aa06ac99 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -100,8 +100,9 @@ class WP_Theme_JSON_Gutenberg { ), 'custom' => null, 'layout' => array( - 'contentSize' => null, - 'wideSize' => null, + 'contentSize' => null, + 'wideSize' => null, + 'outerPadding' => null, ), 'spacing' => array( 'blockGap' => null, diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index fd83cf822c3e9..338e2d095f9a2 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -106,13 +106,18 @@ export default { return null; }, save: function DefaultLayoutStyle( { selector, layout = {} } ) { - const { contentSize, wideSize } = layout; + const { contentSize, wideSize, outerPadding = 0 } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; let style = !! contentSize || !! wideSize ? ` + ${ appendSelectors( selector ) } { + --wp-style-layout-outer-padding: ${ outerPadding }; + padding: 0 var(--wp-style-layout-outer-padding); + } + ${ appendSelectors( selector, '> *' ) } { max-width: ${ contentSize ?? wideSize }; margin-left: auto !important; @@ -125,6 +130,8 @@ export default { ${ appendSelectors( selector, '> [data-align="full"]' ) } { max-width: none; + margin-left: calc( -1 * var(--wp-style-layout-outer-padding) ) !important; + margin-right: calc( -1 * var(--wp-style-layout-outer-padding) ) !important; } ` : ''; From a585a8778972ada46b8aca56b448812d120b5602 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 25 Oct 2021 11:53:52 +0100 Subject: [PATCH 2/3] Remove useless cover width --- packages/block-library/src/cover/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 0b29c23c595b7..a13ae67594714 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -4,7 +4,6 @@ background-size: cover; background-position: center center; min-height: 430px; - width: 100%; display: flex; justify-content: center; align-items: center; From 981aa5b93bdd31ecba9042083486d074ad29838d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 26 Oct 2021 09:22:35 +0100 Subject: [PATCH 3/3] Update the format of the outer padding --- lib/block-supports/layout.php | 15 ++++++++++----- packages/block-editor/src/layouts/flow.js | 11 ++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 777dd03d32edd..c418f04c02116 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -41,7 +41,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null; - $outer_padding = isset( $layout['outerPadding'] ) ? $layout['outerPadding'] : 0; + $outer_padding = isset( $layout['outerPadding'] ) ? $layout['outerPadding'] : array(); $all_max_width_value = $content_size ? $content_size : $wide_size; $wide_max_width_value = $wide_size ? $wide_size : $content_size; @@ -54,8 +54,13 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = ''; if ( $content_size || $wide_size ) { $style = "$selector {"; - $style .= "--wp-style-layout-outer-padding: $outer_padding;"; - $style .= 'padding: 0 var(--wp-style-layout-outer-padding);'; + $style .= sprintf( + 'padding: %s %s %s %s', + isset( $outer_padding['top'] ) ? $outer_padding['top'] : 0, + isset( $outer_padding['right'] ) ? $outer_padding['right'] : 0, + isset( $outer_padding['bottom'] ) ? $outer_padding['bottom'] : 0, + isset( $outer_padding['left'] ) ? $outer_padding['left'] : 0 + ); $style .= '}'; $style .= "$selector > * {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; @@ -65,8 +70,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; $style .= "$selector .alignfull {"; $style .= 'max-width: none;'; - $style .= 'margin-left: calc( -1 * var(--wp-style-layout-outer-padding) ) !important;'; - $style .= 'margin-right: calc( -1 * var(--wp-style-layout-outer-padding) ) !important;'; + $style .= isset( $outer_padding['left'] ) ? sprintf( 'margin-left: calc( -1 * %s ) !important;', $outer_padding['left'] ) : ''; + $style .= isset( $outer_padding['right'] ) ? sprintf( 'margin-right: calc( -1 * %s ) !important;', $outer_padding['right'] ) : ''; $style .= '}'; } diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 338e2d095f9a2..9408e73f6fed6 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -106,7 +106,7 @@ export default { return null; }, save: function DefaultLayoutStyle( { selector, layout = {} } ) { - const { contentSize, wideSize, outerPadding = 0 } = layout; + const { contentSize, wideSize, outerPadding } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; @@ -114,8 +114,9 @@ export default { !! contentSize || !! wideSize ? ` ${ appendSelectors( selector ) } { - --wp-style-layout-outer-padding: ${ outerPadding }; - padding: 0 var(--wp-style-layout-outer-padding); + padding: ${ outerPadding?.top || 0 } ${ outerPadding?.right || 0 } ${ + outerPadding?.bottom || 0 + } ${ outerPadding?.left || 0 }; } ${ appendSelectors( selector, '> *' ) } { @@ -130,8 +131,8 @@ export default { ${ appendSelectors( selector, '> [data-align="full"]' ) } { max-width: none; - margin-left: calc( -1 * var(--wp-style-layout-outer-padding) ) !important; - margin-right: calc( -1 * var(--wp-style-layout-outer-padding) ) !important; + margin-left: calc( -1 * ${ outerPadding.left || 0 } ) !important; + margin-right: calc( -1 * ${ outerPadding.right || 0 } ) !important; } ` : '';