Alternative approach to the layout outer padding

lib/block-supports/layout.php

@@ -28,13 +28,14 @@ function gutenberg_register_layout_support( $block_type ) {
 /**
  * Generates the CSS corresponding to the provided layout.
  *
- * @param string  $selector CSS selector.
- * @param array   $layout   Layout object. The one that is passed has already checked the existance of default block layout.
- * @param boolean $has_block_gap_support Whether the theme has support for the block gap.
+ * @param string     $selector CSS selector.
+ * @param array      $layout  Layout object. The one that is passed has already checked the existance of default block layout.
+ * @param array|null $padding Padding applied to the current block.
+ * @param boolean    $has_block_gap_support Whether the theme has support for the block gap.
  *
  * @return string CSS style.
  */
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
+function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_gap_support = false ) {
 	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
 	$style = '';
@@ -52,14 +53,28 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 
 		$style = '';
 		if ( $content_size || $wide_size ) {
-			$style  = "$selector > * {";
+			$style = "$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(
+				'padding: %s %s %s %s !important',
+				isset( $padding['top'] ) ? $padding['top'] : 0,
+				isset( $padding['right'] ) ? $padding['right'] : 0,
+				isset( $padding['bottom'] ) ? $padding['bottom'] : 0,
+				isset( $padding['left'] ) ? $padding['left'] : 0
+			);
+			$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 .= 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 .= '}';
 		}
 
 		$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
@@ -154,6 +169,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	$block_gap             = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
 	$default_layout        = wp_get_global_settings( array( 'layout' ) );
+	$padding               = _wp_array_get( $block, array( 'attrs', 'style', '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() );
 	$used_layout           = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
@@ -162,10 +178,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			return $block_content;
 		}
 		$used_layout = $default_layout;
+		$padding     = isset( $default_layout['padding'] ) ? $default_layout['padding'] : null;
 	}
 
 	$id              = uniqid();
-	$style           = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
+	$style           = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $padding, $has_block_gap_support );
 	$container_class = 'wp-container-' . $id . ' ';
 	$justify_class   = $used_layout['justifyContent'] ? 'wp-justify-' . $used_layout['justifyContent'] . ' ' : '';
 	// This assumes the hook only applies to blocks with a single wrapper.

lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php

@@ -236,6 +236,7 @@ class WP_Theme_JSON_Gutenberg {
 		'layout'          => array(
 			'contentSize' => null,
 			'wideSize'    => null,
+			'padding'     => null,
 		),
 		'spacing'         => array(
 			'blockGap' => null,

packages/block-editor/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has } from 'lodash';
+import { get, has } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,36 +34,23 @@ const layoutBlockSupportKey = '__experimentalLayout';
 
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
-	const defaultThemeLayout = useSetting( 'layout' );
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
-	}, [] );
-
-	const layoutBlockSupport = getBlockSupport(
-		blockName,
-		layoutBlockSupportKey,
-		{}
+	const { supportsFlowLayout, defaultLayout, config } = useLayout(
+		blockName
 	);
 	const {
 		allowSwitching,
 		allowEditing = true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
-	} = layoutBlockSupport;
+	} = config;
 
 	if ( ! allowEditing ) {
 		return null;
 	}
 
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, type = 'default' } = usedLayout;
-	/**
-	 * `themeSupportsLayout` is only relevant to the `default/flow`
-	 * layout and it should not be taken into account when other
-	 * `layout` types are used.
-	 */
-	if ( type === 'default' && ! themeSupportsLayout ) {
+	if ( type === 'default' && ! supportsFlowLayout ) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );
@@ -77,7 +64,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Layout' ) }>
-					{ allowInheriting && !! defaultThemeLayout && (
+					{ allowInheriting && !! defaultLayout && (
 						<ToggleControl
 							label={ __( 'Inherit default layout' ) }
 							checked={ !! inherit }
@@ -100,7 +87,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ config }
 						/>
 					) }
 				</PanelBody>
@@ -109,7 +96,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
-					layoutBlockSupport={ layoutBlockSupport }
+					layoutBlockSupport={ config }
 				/>
 			) }
 		</>
@@ -134,6 +121,26 @@ function LayoutTypeSwitcher( { type, onChange } ) {
 	);
 }
 
+export function useLayout( blockName ) {
+	const defaultThemeLayout = useSetting( 'layout' );
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().supportsLayout;
+	}, [] );
+
+	const layoutBlockSupport = getBlockSupport(
+		blockName,
+		layoutBlockSupportKey,
+		{}
+	);
+
+	return {
+		supportsFlowLayout: themeSupportsLayout,
+		defaultLayout: defaultThemeLayout,
+		config: layoutBlockSupport,
+	};
+}
+
 /**
  * Filters registered block settings, extending attributes to include `layout`.
  *
@@ -203,6 +210,9 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
+		const padding = layout?.inherit
+			? usedLayout?.padding
+			: get( attributes, [ 'style', 'padding' ] );
 		const className = classnames( props?.className, {
 			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
 		} );
@@ -215,6 +225,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						<LayoutStyle
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
+							padding={ padding }
 						/>,
 						element
 					) }

packages/block-editor/src/hooks/padding.js

@@ -20,6 +20,7 @@ import {
 	useIsDimensionsSupportValid,
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
+import { useLayout } from './layout';
 
 /**
  * Determines if there is padding support.
@@ -72,11 +73,19 @@ export function resetPadding( { attributes = {}, setAttributes } ) {
  *
  * @return {boolean} Whether padding setting is disabled.
  */
-export function useIsPaddingDisabled( { name: blockName } = {} ) {
+export function useIsPaddingDisabled( { name: blockName, attributes } = {} ) {
+	const { supportsFlowLayout, config } = useLayout( blockName );
+	const hasInheritedLayout =
+		supportsFlowLayout && !! config && attributes?.layout?.inherit;
 	const isDisabled = ! useSetting( 'spacing.padding' );
 	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );
 
-	return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;
+	return (
+		! hasPaddingSupport( blockName ) ||
+		hasInheritedLayout ||
+		isDisabled ||
+		isInvalid
+	);
 }
 
 /**

packages/block-editor/src/layouts/flow.js

@@ -105,14 +105,22 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+	save: function DefaultLayoutStyle( { selector, layout = {}, padding } ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 
+		// Using important here for the padding to override the inline padding that could be potentially
+		// applied using the custom padding control before the layout inheritance is applied.
 		let style =
 			!! contentSize || !! wideSize
 				? `
+					${ appendSelectors( selector ) } {
+						padding: ${ padding?.top || 0 } ${ padding?.right || 0 } ${
+						padding?.bottom || 0
+				  } ${ padding?.left || 0 } !important;
+					}
+
 					${ appendSelectors( selector, '> *' ) } {
 						max-width: ${ contentSize ?? wideSize };
 						margin-left: auto !important;
@@ -125,6 +133,8 @@ export default {
 
 					${ appendSelectors( selector, '> [data-align="full"]' ) } {
 						max-width: none;
+						margin-left: calc( -1 * ${ padding?.left || 0 } ) !important;
+						margin-right: calc( -1 * ${ padding?.right || 0 } ) !important;
 					}
 				`
 				: '';

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;

packages/edit-post/src/components/visual-editor/index.js

@@ -176,6 +176,14 @@ export default function VisualEditor( { styles } ) {
 		return undefined;
 	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
 
+	const padding = useMemo( () => {
+		if ( isTemplateMode || ! themeSupportsLayout ) {
+			return undefined;
+		}
+
+		return defaultLayout?.padding;
+	} );
+
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }
@@ -222,6 +230,7 @@ export default function VisualEditor( { styles } ) {
 							<LayoutStyle
 								selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
 								layout={ defaultLayout }
+								padding={ padding }
 							/>
 						) }
 						{ ! isTemplateMode && (

test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:navigation {"style":{"typography":{"textTransform":"lowercase","textDecoration":"line-through","fontStyle":"italic","fontWeight":"100"}},"layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"}} -->
+<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"},"style":{"typography":{"textTransform":"lowercase","textDecoration":"line-through","fontStyle":"italic","fontWeight":"100"}}} -->
 <!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
 <!-- /wp:navigation -->