From d797a50bdc6bc0c0d89696409efbcbd43abf6d97 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 6 May 2022 16:59:42 +1000
Subject: [PATCH 01/37] Layout blockGap: Try using classnames to support
 block-level gap in theme.json

Try implementing partially in editor

Try adding block classname to the container class to deal with specificity, remove fallback gap

Add fallback gap styles rendered at root

Move changes to theme.json class 'up' to 6-1 file

Fix rendering block-level blockGap set in the block's attributes in the post editor

Implement changes in site editor / global styles comparable to PHP changes

Try moving some of the layout definitions to theme.json

Move layout style generation to a separate function

Implement theme.json definitions approach in the site editor, ensure styles load correctly in the post editor

Remove class duplication, use classname stored in theme.json instead of hard-coded classname

Support split row/column values at the block level, and include output of the legacy CSS variable for backwards compatibility

Ensure CSS variable is only output if gap support is opted-in

Tweak tests

Whitespace fix

Update test

Remove duplication block class from server-rendered output, update snapshot

Fix failing PHP test

Attempt to fix PHP test again

Manually fix snapshot

Fix PHP linting issue

Linting

Reorganise rules in theme.json

Remove dead code

Render base styles and only output container classes and styles if unique values are generated

Move blockGap styles in global styles to a separate getLayoutStyles function

Move layout_definitions up so that it's always available to base styles

Linting fixes

Update test snapshot

Add baseStyles output to global styles

Remove test snapshot

Update layout supports to return a CSS string instead of a component, add check that string is non-empty before outputting container classnames and style tags

Update flex layout to only output styles if unique values are set

Fix is-root-container styling in post editor

Update flex/flow layouts to look up layout definitions to generate gap styling

Move blockGap JS logic to a shared utility function, add tests

Add test in case layoutDefinitions is undefined

Add minimal tests that flex and flow layouts that don't contain non-default values return empty strings

Fix rebase in 6-1.php file

Consolidate JS layout classnames generation

Further consolidate classname generation

Implement outputting non-default layout gap for classic themes

Update fallback gap logic so that block themes that opt-out of blockGap but opt-in to wp-block-styles still get flex layout gap styles

Fix Columns fallback gap styles in classic themes

Ensure base layout styles are available in the editor for classic themes

Fix root gap value

Fix linting issues

Fix linting issue

Add a phpunit test for outputting layout styles based on layout definitions in theme.json

Add additional tests, ensure base styles are still output so that alignments continue to function

Remove todo items

Add layout selector regex, css declaration check

Add additional logical margin properties to allow list

Fix flex-wrap rule in JS version of flex layout

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

Rename default_layout to global_layout_settings

Rename blockGapStyles to spacingStyles

Fix rebase issues

Fix linting issues

Fix linting again
---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 5bb0c4fa944231..f01ea2792f91c0 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -702,7 +702,6 @@ function( $pseudo_selector ) use ( $selector ) {
 			$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
 			$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
-			$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
 			if ( $has_block_gap_support ) {
 				$block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
 				$block_rules .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";

From cbb87873f7004cd199383433ef67f06a10e1863e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 27 Jun 2022 17:01:44 +1000
Subject: [PATCH 02/37] Ensure blockGap controls are not exposed in global
 styles when experimental skip serializiation is used.

This ensures that the Gallery block is not exposed in the global styles UI, as its blockGap values are proceeded individually at the block level. Support for the Gallery block in global styles will be looked into in future follow-ups.
---
 packages/edit-site/src/components/global-styles/hooks.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 69bc0762f3a43c..af9fac61d30425 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -27,10 +27,9 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
+		useCallback( () => setUserConfig( () => EMPTY_CONFIG ), [
+			setUserConfig,
+		] ),
 	];
 };
 

From 7efc0e31b02efa141aa70afb5cfc30e63011dab8 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 28 Jun 2022 10:31:09 +1000
Subject: [PATCH 03/37] Fix linting issue

---
 packages/edit-site/src/components/global-styles/hooks.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index af9fac61d30425..69bc0762f3a43c 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -27,9 +27,10 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback( () => setUserConfig( () => EMPTY_CONFIG ), [
-			setUserConfig,
-		] ),
+		useCallback(
+			() => setUserConfig( () => EMPTY_CONFIG ),
+			[ setUserConfig ]
+		),
 	];
 };
 

From 5b5739ff16837eb4cb1cdef9b6164f1996562b64 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 28 Jun 2022 15:16:46 +1000
Subject: [PATCH 04/37] Implement fallback behaviour in site editor where
 default flex gap is still rendered in themes without blockGap but with
 wp-block-styles

---
 .../src/components/global-styles/use-global-styles-output.js    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 7654ebb7fed9cd..e206f760edfc69 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -27,6 +27,8 @@ import {
 	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
 	__experimentalGetGapCSSValue as getGapCSSValue,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies

From ba675a3640e492d0f6f8b130cf2d50f018a94547 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 7 Jul 2022 12:19:44 +1000
Subject: [PATCH 05/37] Remove connection to wp-block-styles so that fallback
 flex layout styles are always output

---
 .../src/components/global-styles/use-global-styles-output.js    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index e206f760edfc69..7654ebb7fed9cd 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -27,8 +27,6 @@ import {
 	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
 	__experimentalGetGapCSSValue as getGapCSSValue,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies

From eb6c662ef5870ea4a845a0d838b94b6575f98c88 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 8 Jul 2022 12:55:54 +1000
Subject: [PATCH 06/37] Update resolver class to add an empty blockGap
 placeholder for a block, if it provides a default blockGap value

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index f01ea2792f91c0..5bb0c4fa944231 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -702,6 +702,7 @@ function( $pseudo_selector ) use ( $selector ) {
 			$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
 			$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
+			$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
 			if ( $has_block_gap_support ) {
 				$block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
 				$block_rules .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";

From fb8dceca2a7326085042afa737fcc38bdbccff4c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 6 May 2022 16:59:42 +1000
Subject: [PATCH 07/37] Layout blockGap: Try using classnames to support
 block-level gap in theme.json

Try implementing partially in editor

Try adding block classname to the container class to deal with specificity, remove fallback gap

Add fallback gap styles rendered at root

Move changes to theme.json class 'up' to 6-1 file

Fix rendering block-level blockGap set in the block's attributes in the post editor

Implement changes in site editor / global styles comparable to PHP changes

Try moving some of the layout definitions to theme.json

Move layout style generation to a separate function

Implement theme.json definitions approach in the site editor, ensure styles load correctly in the post editor

Remove class duplication, use classname stored in theme.json instead of hard-coded classname

Support split row/column values at the block level, and include output of the legacy CSS variable for backwards compatibility

Ensure CSS variable is only output if gap support is opted-in

Tweak tests

Whitespace fix

Update test

Remove duplication block class from server-rendered output, update snapshot

Fix failing PHP test

Attempt to fix PHP test again

Manually fix snapshot

Fix PHP linting issue

Linting

Reorganise rules in theme.json

Remove dead code

Render base styles and only output container classes and styles if unique values are generated

Move blockGap styles in global styles to a separate getLayoutStyles function

Move layout_definitions up so that it's always available to base styles

Linting fixes

Update test snapshot

Add baseStyles output to global styles

Remove test snapshot

Update layout supports to return a CSS string instead of a component, add check that string is non-empty before outputting container classnames and style tags

Update flex layout to only output styles if unique values are set

Fix is-root-container styling in post editor

Update flex/flow layouts to look up layout definitions to generate gap styling

Move blockGap JS logic to a shared utility function, add tests

Add test in case layoutDefinitions is undefined

Add minimal tests that flex and flow layouts that don't contain non-default values return empty strings

Fix rebase in 6-1.php file

Consolidate JS layout classnames generation

Further consolidate classname generation

Implement outputting non-default layout gap for classic themes

Update fallback gap logic so that block themes that opt-out of blockGap but opt-in to wp-block-styles still get flex layout gap styles

Fix Columns fallback gap styles in classic themes

Ensure base layout styles are available in the editor for classic themes

Fix root gap value

Fix linting issues

Fix linting issue

Add a phpunit test for outputting layout styles based on layout definitions in theme.json

Add additional tests, ensure base styles are still output so that alignments continue to function

Remove todo items

Add layout selector regex, css declaration check

Add additional logical margin properties to allow list

Fix flex-wrap rule in JS version of flex layout

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

Rename default_layout to global_layout_settings

Rename blockGapStyles to spacingStyles

Fix rebase issues

Fix linting issues

Fix linting again
---
 lib/load.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/load.php b/lib/load.php
index 9b692f05e15afc..426b46790b4eab 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -76,6 +76,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.0/client-assets.php';
 
 // WordPress 6.1 compat.
+require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/blocks.php';
 require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';

From 67f3e8cbfdc78884247eac4f6387d84d2d76cb97 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 29 Jun 2022 17:51:47 +1000
Subject: [PATCH 08/37] Reuse most of the logic from #39926

---
 lib/block-supports/layout.php                 |   2 +-
 .../wordpress-6.1/class-wp-theme-json-6-1.php | 145 +++++++++++-------
 lib/compat/wordpress-6.1/theme.json           |  11 +-
 packages/block-editor/src/hooks/style.js      |   3 +
 packages/block-editor/src/layouts/flow.js     |   2 +-
 packages/blocks/src/api/constants.js          |  11 ++
 .../test/use-global-styles-output.js          |   2 +-
 .../global-styles/use-global-styles-output.js |  35 ++++-
 8 files changed, 148 insertions(+), 63 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index fa63beef0710b3..466c8a9cf159d1 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -54,7 +54,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
 
 		if ( $content_size || $wide_size ) {
-			$style  = "$selector > :where(:not(.alignleft):not(.alignright)) {";
+			$style  = "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {";
 			$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
 			$style .= 'margin-left: auto !important;';
 			$style .= 'margin-right: auto !important;';
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 5bb0c4fa944231..cb59b2d632989c 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -32,48 +32,53 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 	 * path to the value in theme.json & block attributes.
 	 */
 	const PROPERTIES_METADATA = array(
-		'background'                 => array( 'color', 'gradient' ),
-		'background-color'           => array( 'color', 'background' ),
-		'border-radius'              => array( 'border', 'radius' ),
-		'border-top-left-radius'     => array( 'border', 'radius', 'topLeft' ),
-		'border-top-right-radius'    => array( 'border', 'radius', 'topRight' ),
-		'border-bottom-left-radius'  => array( 'border', 'radius', 'bottomLeft' ),
-		'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
-		'border-color'               => array( 'border', 'color' ),
-		'border-width'               => array( 'border', 'width' ),
-		'border-style'               => array( 'border', 'style' ),
-		'border-top-color'           => array( 'border', 'top', 'color' ),
-		'border-top-width'           => array( 'border', 'top', 'width' ),
-		'border-top-style'           => array( 'border', 'top', 'style' ),
-		'border-right-color'         => array( 'border', 'right', 'color' ),
-		'border-right-width'         => array( 'border', 'right', 'width' ),
-		'border-right-style'         => array( 'border', 'right', 'style' ),
-		'border-bottom-color'        => array( 'border', 'bottom', 'color' ),
-		'border-bottom-width'        => array( 'border', 'bottom', 'width' ),
-		'border-bottom-style'        => array( 'border', 'bottom', 'style' ),
-		'border-left-color'          => array( 'border', 'left', 'color' ),
-		'border-left-width'          => array( 'border', 'left', 'width' ),
-		'border-left-style'          => array( 'border', 'left', 'style' ),
-		'color'                      => array( 'color', 'text' ),
-		'font-family'                => array( 'typography', 'fontFamily' ),
-		'font-size'                  => array( 'typography', 'fontSize' ),
-		'font-style'                 => array( 'typography', 'fontStyle' ),
-		'font-weight'                => array( 'typography', 'fontWeight' ),
-		'letter-spacing'             => array( 'typography', 'letterSpacing' ),
-		'line-height'                => array( 'typography', 'lineHeight' ),
-		'margin'                     => array( 'spacing', 'margin' ),
-		'margin-top'                 => array( 'spacing', 'margin', 'top' ),
-		'margin-right'               => array( 'spacing', 'margin', 'right' ),
-		'margin-bottom'              => array( 'spacing', 'margin', 'bottom' ),
-		'margin-left'                => array( 'spacing', 'margin', 'left' ),
-		'padding'                    => array( 'spacing', 'padding' ),
-		'padding-top'                => array( 'spacing', 'padding', 'top' ),
-		'padding-right'              => array( 'spacing', 'padding', 'right' ),
-		'padding-bottom'             => array( 'spacing', 'padding', 'bottom' ),
-		'padding-left'               => array( 'spacing', 'padding', 'left' ),
-		'text-decoration'            => array( 'typography', 'textDecoration' ),
-		'text-transform'             => array( 'typography', 'textTransform' ),
-		'filter'                     => array( 'filter', 'duotone' ),
+		'background'                        => array( 'color', 'gradient' ),
+		'background-color'                  => array( 'color', 'background' ),
+		'border-radius'                     => array( 'border', 'radius' ),
+		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
+		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
+		'border-bottom-left-radius'         => array( 'border', 'radius', 'bottomLeft' ),
+		'border-bottom-right-radius'        => array( 'border', 'radius', 'bottomRight' ),
+		'border-color'                      => array( 'border', 'color' ),
+		'border-width'                      => array( 'border', 'width' ),
+		'border-style'                      => array( 'border', 'style' ),
+		'border-top-color'                  => array( 'border', 'top', 'color' ),
+		'border-top-width'                  => array( 'border', 'top', 'width' ),
+		'border-top-style'                  => array( 'border', 'top', 'style' ),
+		'border-right-color'                => array( 'border', 'right', 'color' ),
+		'border-right-width'                => array( 'border', 'right', 'width' ),
+		'border-right-style'                => array( 'border', 'right', 'style' ),
+		'border-bottom-color'               => array( 'border', 'bottom', 'color' ),
+		'border-bottom-width'               => array( 'border', 'bottom', 'width' ),
+		'border-bottom-style'               => array( 'border', 'bottom', 'style' ),
+		'border-left-color'                 => array( 'border', 'left', 'color' ),
+		'border-left-width'                 => array( 'border', 'left', 'width' ),
+		'border-left-style'                 => array( 'border', 'left', 'style' ),
+		'color'                             => array( 'color', 'text' ),
+		'font-family'                       => array( 'typography', 'fontFamily' ),
+		'font-size'                         => array( 'typography', 'fontSize' ),
+		'font-style'                        => array( 'typography', 'fontStyle' ),
+		'font-weight'                       => array( 'typography', 'fontWeight' ),
+		'letter-spacing'                    => array( 'typography', 'letterSpacing' ),
+		'line-height'                       => array( 'typography', 'lineHeight' ),
+		'margin'                            => array( 'spacing', 'margin' ),
+		'margin-top'                        => array( 'spacing', 'margin', 'top' ),
+		'margin-right'                      => array( 'spacing', 'margin', 'right' ),
+		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
+		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
+		'padding'                           => array( 'spacing', 'padding' ),
+		'padding-top'                       => array( 'spacing', 'padding', 'top' ),
+		'padding-right'                     => array( 'spacing', 'padding', 'right' ),
+		'padding-bottom'                    => array( 'spacing', 'padding', 'bottom' ),
+		'padding-left'                      => array( 'spacing', 'padding', 'left' ),
+		'--wp--style--root--padding'        => array( 'spacing', 'padding' ),
+		'--wp--style--root--padding-top'    => array( 'spacing', 'padding', 'top' ),
+		'--wp--style--root--padding-right'  => array( 'spacing', 'padding', 'right' ),
+		'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
+		'--wp--style--root--padding-left'   => array( 'spacing', 'padding', 'left' ),
+		'text-decoration'                   => array( 'typography', 'textDecoration' ),
+		'text-transform'                    => array( 'typography', 'textTransform' ),
+		'filter'                            => array( 'filter', 'duotone' ),
 	);
 
 	/**
@@ -617,10 +622,10 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 	 * @return string Styles for the block.
 	 */
 	public function get_styles_for_block( $block_metadata ) {
-		$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-
-		$selector = $block_metadata['selector'];
-		$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
+		$node          = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() );
+		$selector      = $block_metadata['selector'];
+		$settings      = _wp_array_get( $this->theme_json, array( 'settings' ) );
 
 		// Get a reference to element name from path.
 		// $block_metadata['path'] = array('styles','elements','link');
@@ -649,9 +654,9 @@ function( $pseudo_selector ) use ( $selector ) {
 		// element then compute the style properties for it.
 		// Otherwise just compute the styles for the default selector as normal.
 		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) && isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ) {
-			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json );
+			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_vars );
 		} else {
-			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json );
+			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_vars );
 		}
 
 		$block_rules = '';
@@ -698,6 +703,13 @@ function( $pseudo_selector ) use ( $selector ) {
 		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
 			$block_gap_value = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
 
+			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); }';
+				$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			}
+
 			$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
 			$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
 			$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
@@ -754,13 +766,15 @@ protected function get_block_classes( $style_nodes ) {
 	 * )
 	 * ```
 	 *
-	 * @param array $styles Styles to process.
-	 * @param array $settings Theme settings.
-	 * @param array $properties Properties metadata.
-	 * @param array $theme_json Theme JSON array.
-	 * @return array Returns the modified $declarations.
+	 * @param array   $styles Styles to process.
+	 * @param array   $settings Theme settings.
+	 * @param array   $properties Properties metadata.
+	 * @param array   $theme_json Theme JSON array.
+	 * @param string  $selector The style block selector.
+	 * @param boolean $use_root_vars Whether to add custom properties at root level.
+	 * @return array  Returns the modified $declarations.
 	 */
-	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null ) {
+	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_vars = null ) {
 		if ( null === $properties ) {
 			$properties = static::PROPERTIES_METADATA;
 		}
@@ -770,9 +784,23 @@ protected static function compute_style_properties( $styles, $settings = array()
 			return $declarations;
 		}
 
+		$root_variable_duplicates = array();
+
 		foreach ( $properties as $css_property => $value_path ) {
 			$value = static::get_property_value( $styles, $value_path, $theme_json );
 
+			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) {
+				continue;
+			}
+			// We don't support string values.
+			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
+				continue;
+			}
+
+			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && $use_root_vars ) {
+				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+			}
+
 			// Look up protected properties, keyed by value path.
 			// Skip protected properties that are explicitly set to `null`.
 			if ( is_array( $value_path ) ) {
@@ -797,6 +825,14 @@ protected static function compute_style_properties( $styles, $settings = array()
 			);
 		}
 
+		// If a variable value is added to the root, the corresponding property should be removed.
+		foreach ( $root_variable_duplicates as $duplicate ) {
+			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
+			if ( $discard ) {
+				array_splice( $declarations, $discard, 1 );
+			}
+		}
+
 		return $declarations;
 	}
 
@@ -985,6 +1021,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 	 */
 	const VALID_SETTINGS = array(
 		'appearanceTools' => null,
+		'useRootVariables' => null,
 		'border'          => array(
 			'color'  => null,
 			'radius' => null,
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
index 426adc6195085d..b1d7724b22abba 100644
--- a/lib/compat/wordpress-6.1/theme.json
+++ b/lib/compat/wordpress-6.1/theme.json
@@ -2,6 +2,7 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": false,
+		"useRootVariables": false,
 		"border": {
 			"color": false,
 			"radius": false,
@@ -349,6 +350,14 @@
 				}
 			}
 		},
-		"spacing": { "blockGap": "24px" }
+		"spacing": {
+			"blockGap": "24px",
+			"padding": {
+				"top": "0px",
+				"right": "0px",
+				"bottom": "0px",
+				"left": "0px"
+			}
+		}
 	}
 }
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 400ebd0a84263f..fd4c4fdc8b9fa7 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -68,6 +68,9 @@ export function getInlineStyles( styles = {} ) {
 	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
 	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
+		if ( STYLE_PROPERTY[ propKey ].rootOnly ) {
+			return;
+		}
 		const path = STYLE_PROPERTY[ propKey ].value;
 		const subPaths = STYLE_PROPERTY[ propKey ].properties;
 		// Ignore styles on elements because they are handled on the server.
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 1d8ea7d7a6aea2..d267fd609f2447 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -132,7 +132,7 @@ export default {
 				? `
 					${ appendSelectors(
 						selector,
-						'> :where(:not(.alignleft):not(.alignright))'
+						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
 					) } {
 						max-width: ${ contentSize ?? wideSize };
 						margin-left: auto !important;
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index fb8580ef30ef0a..b852fe3932fa05 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -199,6 +199,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		support: [ 'typography', '__experimentalLetterSpacing' ],
 		useEngine: true,
 	},
+	'--wp--style--root--padding': {
+		value: [ 'spacing', 'padding' ],
+		support: [ 'spacing', 'padding' ],
+		properties: {
+			'--wp--style--root--padding-top': 'top',
+			'--wp--style--root--padding-right': 'right',
+			'--wp--style--root--padding-bottom': 'bottom',
+			'--wp--style--root--padding-left': 'left',
+		},
+		rootOnly: true,
+	},
 };
 
 export const __EXPERIMENTAL_ELEMENTS = {
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index b165d5bb917420..a197d72787684e 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -445,7 +445,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
-					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
 					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 7654ebb7fed9cd..a0536f92a4ca7c 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -172,14 +172,22 @@ function flattenTree( input = {}, prefix, token ) {
 /**
  * Transform given style tree into a set of style declarations.
  *
- * @param {Object} blockStyles Block styles.
+ * @param {Object}  blockStyles Block styles.
+ *
+ * @param {string}  selector    The selector these declarations should attach to.
+ *
+ * @param {boolean} useRootVars Whether to use CSS custom properties in root selector.
  *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations( blockStyles = {} ) {
+function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
+	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
 		STYLE_PROPERTY,
-		( declarations, { value, properties, useEngine }, key ) => {
+		( declarations, { value, properties, useEngine, rootOnly }, key ) => {
+			if ( rootOnly && ! isRoot ) {
+				return declarations;
+			}
 			const pathToValue = value;
 			if ( first( pathToValue ) === 'elements' || useEngine ) {
 				return declarations;
@@ -197,7 +205,9 @@ function getStylesDeclarations( blockStyles = {} ) {
 						return;
 					}
 
-					const cssProperty = kebabCase( name );
+					const cssProperty = name.startsWith( '--' )
+						? name
+						: kebabCase( name );
 					declarations.push(
 						`${ cssProperty }: ${ compileStyleValue(
 							get( styleValue, [ prop ] )
@@ -220,6 +230,10 @@ function getStylesDeclarations( blockStyles = {} ) {
 		[]
 	);
 
+	if ( isRoot && useRootVars ) {
+		return output;
+	}
+
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
@@ -505,6 +519,7 @@ export const toStyles = (
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	const useRootVars = tree?.settings?.useRootVariables;
 
 	/*
 	 * Reset default browser margin on the root body element.
@@ -515,6 +530,12 @@ export const toStyles = (
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
 	let ruleset = 'body {margin: 0;}';
+
+	if ( useRootVars ) {
+		ruleset =
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+	}
+
 	nodesWithStyles.forEach(
 		( {
 			selector,
@@ -556,7 +577,11 @@ export const toStyles = (
 			}
 
 			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-			const declarations = getStylesDeclarations( styles );
+			const declarations = getStylesDeclarations(
+				styles,
+				selector,
+				useRootVars
+			);
 			if ( declarations?.length ) {
 				ruleset =
 					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;

From 056555391e0f12bb46e19f8bd56397d248dc261c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 30 Jun 2022 14:55:35 +1000
Subject: [PATCH 09/37] Don't accept string values

---
 .../global-styles/test/use-global-styles-output.js          | 2 +-
 .../components/global-styles/use-global-styles-output.js    | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index a197d72787684e..b165d5bb917420 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -445,7 +445,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
-					'body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
 					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index a0536f92a4ca7c..1a69ff7ae07ef8 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -214,6 +214,12 @@ function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
 						) }`
 					);
 				} );
+			} else if (
+				key === '--wp--style--root--padding' &&
+				isString( styleValue )
+			) {
+				// We don't support string values for root padding
+				return declarations;
 			} else if ( get( blockStyles, pathToValue, false ) ) {
 				const cssProperty = key.startsWith( '--' )
 					? key

From e1de6564fafe088ee35134e5c91ee961862bd79d Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 1 Jul 2022 15:43:12 +1000
Subject: [PATCH 10/37] Apply root padding only on blocks with content width

---
 lib/block-supports/layout.php                               | 5 +++++
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php        | 6 +++---
 .../components/global-styles/use-global-styles-output.js    | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 466c8a9cf159d1..b826f7e6756c31 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -174,6 +174,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
 
+	// Add a classname to blocks with flow layout set.
+	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
+		$class_names[] = 'has-content-size';
+	}
+
 	// The following section was added to reintroduce a small set of layout classnames that were
 	// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
 	// not intended to provide an extended set of classes to match all block layout attributes
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index cb59b2d632989c..b2badf5deaeeb4 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -705,9 +705,9 @@ function( $pseudo_selector ) use ( $selector ) {
 
 			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); }';
-				$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-content-size { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
+				$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			}
 
 			$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 1a69ff7ae07ef8..d19d2ddd019b63 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -539,7 +539,7 @@ export const toStyles = (
 
 	if ( useRootVars ) {
 		ruleset =
-			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-content-size { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 	}
 
 	nodesWithStyles.forEach(

From 138e01e949760ddc296bc277945e86b774c17f05 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 1 Jul 2022 16:32:43 +1000
Subject: [PATCH 11/37] Apply linting changes

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index b2badf5deaeeb4..b92a905cdfb853 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -1020,15 +1020,15 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
-		'appearanceTools' => null,
+		'appearanceTools'  => null,
 		'useRootVariables' => null,
-		'border'          => array(
+		'border'           => array(
 			'color'  => null,
 			'radius' => null,
 			'style'  => null,
 			'width'  => null,
 		),
-		'color'           => array(
+		'color'            => array(
 			'background'       => null,
 			'custom'           => null,
 			'customDuotone'    => null,
@@ -1042,13 +1042,13 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'palette'          => null,
 			'text'             => null,
 		),
-		'custom'          => null,
-		'layout'          => array(
+		'custom'           => null,
+		'layout'           => array(
 			'contentSize' => null,
 			'definitions' => null,
 			'wideSize'    => null,
 		),
-		'spacing'         => array(
+		'spacing'          => array(
 			'customSpacingSize' => null,
 			'spacingSizes'      => null,
 			'spacingScale'      => null,
@@ -1057,7 +1057,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'padding'           => null,
 			'units'             => null,
 		),
-		'typography'      => array(
+		'typography'       => array(
 			'customFontSize' => null,
 			'dropCap'        => null,
 			'fontFamilies'   => null,

From 62b20c3486cfc2d7d1be649e13a63945083d1d50 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 4 Jul 2022 11:17:47 +1000
Subject: [PATCH 12/37] Fix rebase error

---
 lib/load.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/load.php b/lib/load.php
index 426b46790b4eab..759dc7b97da9a3 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -76,9 +76,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.0/client-assets.php';
 
 // WordPress 6.1 compat.
-require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/blocks.php';
-require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';

From 2c53db4eda0a696c1df854e5b30cea9ffa48355a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 4 Jul 2022 15:52:46 +1000
Subject: [PATCH 13/37] Actually fix rebase

---
 lib/load.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/load.php b/lib/load.php
index 759dc7b97da9a3..9b692f05e15afc 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -77,6 +77,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.1 compat.
 require __DIR__ . '/compat/wordpress-6.1/blocks.php';
+require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';

From c0757b1d880d2e2f8eca2a6b5822bbb017117ad6 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 4 Jul 2022 16:56:15 +1000
Subject: [PATCH 14/37] Add global padding toggle to layout-less blocks

---
 lib/block-supports/layout.php                      |  3 +++
 .../wordpress-6.1/class-wp-theme-json-6-1.php      |  2 +-
 packages/block-editor/src/hooks/layout.js          |  6 ++++++
 packages/block-editor/src/layouts/flow.js          | 14 +++++++++++++-
 .../global-styles/use-global-styles-output.js      |  2 +-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index b826f7e6756c31..e271eebdb8a514 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -177,6 +177,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	// Add a classname to blocks with flow layout set.
 	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
 		$class_names[] = 'has-content-size';
+		// If no layout is set, check if the block uses root padding and set a classname accordingly.
+	} elseif ( isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'] ) {
+		$class_names[] = 'has-global-padding';
 	}
 
 	// The following section was added to reintroduce a small set of layout classnames that were
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index b92a905cdfb853..0f84c991a04bf1 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -705,7 +705,7 @@ function( $pseudo_selector ) use ( $selector ) {
 
 			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 .= '.has-content-size { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 				$block_rules .= '.has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
 				$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			}
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 65a44b6b8df546..03d9c4e15aa382 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -58,6 +58,12 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
+	if ( layout?.inherit || layout.contentSize ) {
+		layoutClassnames.push( 'has-content-size' );
+	} else if ( layout?.useGlobalPadding ) {
+		layoutClassnames.push( 'has-global-padding' );
+	}
+
 	if ( layout?.orientation ) {
 		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
 	}
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index d267fd609f2447..3180a8ab1a5220 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -5,6 +5,7 @@ import {
 	Button,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	ToggleControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
@@ -24,7 +25,7 @@ export default {
 		layout,
 		onChange,
 	} ) {
-		const { wideSize, contentSize } = layout;
+		const { wideSize, contentSize, useGlobalPadding = false } = layout;
 		const units = useCustomUnits( {
 			availableUnits: useSetting( 'spacing.units' ) || [
 				'%',
@@ -101,6 +102,17 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
+
+				<ToggleControl
+					label={ __( 'Use global padding' ) }
+					checked={ useGlobalPadding }
+					onChange={ () =>
+						onChange( {
+							...layout,
+							useGlobalPadding: ! useGlobalPadding,
+						} )
+					}
+				/>
 			</>
 		);
 	},
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index d19d2ddd019b63..a0f600f39ab9a8 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -539,7 +539,7 @@ export const toStyles = (
 
 	if ( useRootVars ) {
 		ruleset =
-			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-content-size { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 	}
 
 	nodesWithStyles.forEach(

From f7469439411afc0b4feeea7a7f212853b862c8ba Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 5 Jul 2022 14:35:43 +1000
Subject: [PATCH 15/37] Support custom block padding.

---
 lib/block-supports/layout.php                 | 24 +++++++++++++------
 .../wordpress-6.1/class-wp-theme-json-6-1.php |  6 ++---
 packages/block-editor/src/hooks/layout.js     | 16 +++++++++----
 packages/block-editor/src/layouts/flow.js     | 19 +++++++++++++++
 .../global-styles/use-global-styles-output.js |  2 +-
 5 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index e271eebdb8a514..77f32acce63225 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -34,10 +34,11 @@ function gutenberg_register_layout_support( $block_type ) {
  * @param string  $gap_value                     The block gap value to apply.
  * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
  * @param string  $fallback_gap_value            The block gap value to apply.
+ * @param array   $block_padding                 Custom padding set on the block.
  *
  * @return string                                CSS style.
  */
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_padding = null ) {
 	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
 	$style = '';
@@ -64,6 +65,17 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
+		// Handle negative margins for alignfull children of blocks with custom padding set.
+		// They're added separately because padding might only be set on one side.
+		if ( isset( $block_padding['right'] ) ) {
+			$padding_right = $block_padding['right'];
+			$style        .= "$selector > .alignfull { margin-right: -$padding_right; }";
+		}
+		if ( isset( $block_padding['left'] ) ) {
+			$padding_left = $block_padding['left'];
+			$style       .= "$selector > .alignfull { margin-left: -$padding_left; }";
+		}
+
 		if ( $has_block_gap_support ) {
 			if ( is_array( $gap_value ) ) {
 				$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
@@ -173,12 +185,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$block_classname    = wp_get_block_default_classname( $block['blockName'] );
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
+	$use_global_padding = isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] || isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'];
 
-	// Add a classname to blocks with flow layout set.
-	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
-		$class_names[] = 'has-content-size';
-		// If no layout is set, check if the block uses root padding and set a classname accordingly.
-	} elseif ( isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'] ) {
+	if ( $use_global_padding ) {
 		$class_names[] = 'has-global-padding';
 	}
 
@@ -222,11 +231,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	}
 
 	$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
+	$block_padding      = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null );
 
 	// 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( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
+	$style                         = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_padding );
 
 	// Only add container class and enqueue block support styles if unique styles were generated.
 	if ( ! empty( $style ) ) {
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 0f84c991a04bf1..af9daef24b55d1 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -705,9 +705,9 @@ function( $pseudo_selector ) use ( $selector ) {
 
 			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 .= '.has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-				$block_rules .= '.has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-				$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
+				$block_rules .= '.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			}
 
 			$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 03d9c4e15aa382..68d6508cc0a503 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -58,9 +58,7 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
-	if ( layout?.inherit || layout.contentSize ) {
-		layoutClassnames.push( 'has-content-size' );
-	} else if ( layout?.useGlobalPadding ) {
+	if ( layout?.inherit || layout?.contentSize || layout?.useGlobalPadding ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -115,7 +113,11 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const { inherit = false, type = 'default' } = usedLayout;
+	const {
+		inherit = false,
+		type = 'default',
+		useGlobalPadding = false,
+	} = usedLayout;
 	/**
 	 * `themeSupportsLayout` is only relevant to the `default/flow`
 	 * layout and it should not be taken into account when other
@@ -142,7 +144,11 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 								checked={ ! inherit }
 								onChange={ () =>
 									setAttributes( {
-										layout: { inherit: ! inherit },
+										layout: {
+											inherit: ! inherit,
+											useGlobalPadding:
+												! inherit || useGlobalPadding,
+										},
 									} )
 								}
 							/>
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 3180a8ab1a5220..c7f59a633fb79b 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -53,6 +53,7 @@ export default {
 								onChange( {
 									...layout,
 									contentSize: nextWidth,
+									useGlobalPadding: true,
 								} );
 							} }
 							units={ units }
@@ -73,6 +74,7 @@ export default {
 								onChange( {
 									...layout,
 									wideSize: nextWidth,
+									useGlobalPadding: true,
 								} );
 							} }
 							units={ units }
@@ -90,6 +92,7 @@ export default {
 								contentSize: undefined,
 								wideSize: undefined,
 								inherit: false,
+								useGlobalPadding: false,
 							} )
 						}
 					>
@@ -159,6 +162,22 @@ export default {
 				`
 				: '';
 
+		// If there is custom padding, add negative margins for alignfull blocks.
+		// They're added separately because padding might only be set on one side.
+		if ( style?.spacing?.padding?.right ) {
+			output += `
+			${ appendSelectors( selector, '> .alignfull' ) } {
+				margin-right: -${ style.spacing.padding.right };
+			}
+			`;
+		}
+		if ( style?.spacing?.padding?.left ) {
+			output += `
+			${ appendSelectors( selector, '> .alignfull' ) } {
+				margin-left: -${ style.spacing.padding.left };
+			}
+			`;
+		}
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
 			output += getBlockGapCSS(
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index a0f600f39ab9a8..f9dca4451cc320 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -539,7 +539,7 @@ export const toStyles = (
 
 	if ( useRootVars ) {
 		ruleset =
-			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 	}
 
 	nodesWithStyles.forEach(

From 691cf2bb1583e671b27e5f9be5f0b891a5025f44 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Jul 2022 14:01:58 +1000
Subject: [PATCH 16/37] Output alignfull styles only when needed.

---
 lib/block-supports/layout.php | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 77f32acce63225..262bb324054236 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -63,17 +63,17 @@ 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 { max-width: none; }";
-		}
 
-		// Handle negative margins for alignfull children of blocks with custom padding set.
-		// They're added separately because padding might only be set on one side.
-		if ( isset( $block_padding['right'] ) ) {
-			$padding_right = $block_padding['right'];
-			$style        .= "$selector > .alignfull { margin-right: -$padding_right; }";
-		}
-		if ( isset( $block_padding['left'] ) ) {
-			$padding_left = $block_padding['left'];
-			$style       .= "$selector > .alignfull { margin-left: -$padding_left; }";
+			// Handle negative margins for alignfull children of blocks with custom padding set.
+			// They're added separately because padding might only be set on one side.
+			if ( isset( $block_padding['right'] ) ) {
+				$padding_right = $block_padding['right'];
+				$style        .= "$selector > .alignfull { margin-right: -$padding_right; }";
+			}
+			if ( isset( $block_padding['left'] ) ) {
+				$padding_left = $block_padding['left'];
+				$style       .= "$selector > .alignfull { margin-left: -$padding_left; }";
+			}
 		}
 
 		if ( $has_block_gap_support ) {

From 2bca1b4495397e959805cd97ca82f65ca3383d2b Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Jul 2022 15:52:39 +1000
Subject: [PATCH 17/37] Toggle should only appear when needed.

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php |  2 +-
 packages/block-editor/src/layouts/flow.js     | 33 ++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index af9daef24b55d1..e3c18a0693e2fb 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -828,7 +828,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 		// If a variable value is added to the root, the corresponding property should be removed.
 		foreach ( $root_variable_duplicates as $duplicate ) {
 			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
-			if ( $discard ) {
+			if ( is_numeric( $discard ) ) {
 				array_splice( $declarations, $discard, 1 );
 			}
 		}
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index c7f59a633fb79b..5f6f8e1dae237c 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -9,6 +9,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,6 +18,7 @@ import useSetting from '../components/use-setting';
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
+import { store as blockEditorStore } from '../store';
 
 export default {
 	name: 'default',
@@ -36,6 +38,14 @@ export default {
 			],
 		} );
 
+		const { useRootVariables } = useSelect( ( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return {
+				useRootVariables:
+					getSettings().__experimentalFeatures?.useRootVariables,
+			};
+		} );
+
 		return (
 			<>
 				<div className="block-editor-hooks__layout-controls">
@@ -105,17 +115,18 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
-
-				<ToggleControl
-					label={ __( 'Use global padding' ) }
-					checked={ useGlobalPadding }
-					onChange={ () =>
-						onChange( {
-							...layout,
-							useGlobalPadding: ! useGlobalPadding,
-						} )
-					}
-				/>
+				{ useRootVariables && ! contentSize && (
+					<ToggleControl
+						label={ __( 'Use global padding' ) }
+						checked={ useGlobalPadding }
+						onChange={ () =>
+							onChange( {
+								...layout,
+								useGlobalPadding: ! useGlobalPadding,
+							} )
+						}
+					/>
+				) }
 			</>
 		);
 	},

From 753c53f6710d02e2aa591bd2901a05be267dfea9 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 8 Jul 2022 12:18:35 +1000
Subject: [PATCH 18/37] Add context to comments about string value support

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php           | 3 ++-
 .../src/components/global-styles/use-global-styles-output.js   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index e3c18a0693e2fb..17ef0824f58e0e 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -792,7 +792,8 @@ protected static function compute_style_properties( $styles, $settings = array()
 			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) {
 				continue;
 			}
-			// We don't support string values.
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
 			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
 				continue;
 			}
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index f9dca4451cc320..06115126dd7144 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -218,7 +218,8 @@ function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
 				key === '--wp--style--root--padding' &&
 				isString( styleValue )
 			) {
-				// We don't support string values for root padding
+				// Root-level padding styles don't currently support strings with CSS shorthand values.
+				// This may change: https://github.com/WordPress/gutenberg/issues/40132.
 				return declarations;
 			} else if ( get( blockStyles, pathToValue, false ) ) {
 				const cssProperty = key.startsWith( '--' )

From 2b89413eb633c4dbb0e02f327717bcfaa23dcd00 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Jul 2022 14:00:17 +1000
Subject: [PATCH 19/37] Interpret preset padding value for negative margin

---
 lib/block-supports/layout.php                 | 28 +++++++++++++------
 .../style-engine/class-wp-style-engine.php    | 15 +++++++---
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 262bb324054236..861a58894c5f59 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -64,15 +64,25 @@ 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 { max-width: none; }";
 
-			// Handle negative margins for alignfull children of blocks with custom padding set.
-			// They're added separately because padding might only be set on one side.
-			if ( isset( $block_padding['right'] ) ) {
-				$padding_right = $block_padding['right'];
-				$style        .= "$selector > .alignfull { margin-right: -$padding_right; }";
-			}
-			if ( isset( $block_padding['left'] ) ) {
-				$padding_left = $block_padding['left'];
-				$style       .= "$selector > .alignfull { margin-left: -$padding_left; }";
+			if ( isset( $block_padding ) ) {
+				$block_padding_values = gutenberg_style_engine_get_block_supports_styles(
+					array(
+						'spacing' => array( 'padding' => $block_padding ),
+
+					),
+					array( 'output_css_as_array' => true )
+				);
+
+				// Handle negative margins for alignfull children of blocks with custom padding set.
+				// They're added separately because padding might only be set on one side.
+				if ( isset( $block_padding_values['css']['padding-right'] ) ) {
+					$padding_right = $block_padding_values['css']['padding-right'];
+					$style        .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }";
+				}
+				if ( isset( $block_padding_values['css']['padding-left'] ) ) {
+					$padding_left = $block_padding_values['css']['padding-left'];
+					$style       .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }";
+				}
 			}
 		}
 
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index a140d9ba8c6b81..8ca13ee54a3be7 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -389,6 +389,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
 	 * @param array $options      array(
 	 *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
 	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
+	 *     'output_css_as_array'        => (boolean) Whether to skip converting CSS to a declaration string. Default is `false`.
 	 * );.
 	 *
 	 * @return array|null array(
@@ -401,9 +402,10 @@ public function get_block_supports_styles( $block_styles, $options ) {
 			return null;
 		}
 
-		$css_declarations     = array();
-		$classnames           = array();
-		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
+		$css_declarations               = array();
+		$classnames                     = array();
+		$should_skip_css_vars           = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
+		$should_skip_declaration_string = isset( $options['output_css_as_array'] ) && true === $options['output_css_as_array'];
 
 		// Collect CSS and classnames.
 		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
@@ -428,7 +430,12 @@ public function get_block_supports_styles( $block_styles, $options ) {
 
 		// The return object.
 		$styles_output = array();
-		$css           = $style_rules->get_declarations_string();
+
+		if ( $should_skip_declaration_string ) {
+			$css = $css_declarations;
+		} else {
+			$css = $style_rules->get_declarations_string();
+		}
 
 		// Return css, if any.
 		if ( ! empty( $css ) ) {

From f18cdfd3313657a8f46fa95cbd4501bc7a98b819 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Jul 2022 14:34:36 +1000
Subject: [PATCH 20/37] Don't show toggle on blocks without content size.

---
 packages/block-editor/src/layouts/flow.js | 25 +----------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 5f6f8e1dae237c..c0dbab4e21954f 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -5,11 +5,9 @@ import {
 	Button,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
-	ToggleControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,7 +16,6 @@ import useSetting from '../components/use-setting';
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
-import { store as blockEditorStore } from '../store';
 
 export default {
 	name: 'default',
@@ -27,7 +24,7 @@ export default {
 		layout,
 		onChange,
 	} ) {
-		const { wideSize, contentSize, useGlobalPadding = false } = layout;
+		const { wideSize, contentSize } = layout;
 		const units = useCustomUnits( {
 			availableUnits: useSetting( 'spacing.units' ) || [
 				'%',
@@ -38,14 +35,6 @@ export default {
 			],
 		} );
 
-		const { useRootVariables } = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return {
-				useRootVariables:
-					getSettings().__experimentalFeatures?.useRootVariables,
-			};
-		} );
-
 		return (
 			<>
 				<div className="block-editor-hooks__layout-controls">
@@ -115,18 +104,6 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
-				{ useRootVariables && ! contentSize && (
-					<ToggleControl
-						label={ __( 'Use global padding' ) }
-						checked={ useGlobalPadding }
-						onChange={ () =>
-							onChange( {
-								...layout,
-								useGlobalPadding: ! useGlobalPadding,
-							} )
-						}
-					/>
-				) }
 			</>
 		);
 	},

From 69e83864036529c832ca7bc411cf64259ccd77da Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Jul 2022 14:43:19 +1000
Subject: [PATCH 21/37] Change setting name.

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php | 18 ++++++++---------
 lib/compat/wordpress-6.1/theme.json           |  2 +-
 .../global-styles/use-global-styles-output.js | 20 +++++++++++--------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 17ef0824f58e0e..46fb506033b297 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -623,7 +623,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 	 */
 	public function get_styles_for_block( $block_metadata ) {
 		$node          = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() );
+		$use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootPaddingAwareAlignments' ), array() );
 		$selector      = $block_metadata['selector'];
 		$settings      = _wp_array_get( $this->theme_json, array( 'settings' ) );
 
@@ -1021,15 +1021,15 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
-		'appearanceTools'  => null,
-		'useRootVariables' => null,
-		'border'           => array(
+		'appearanceTools'               => null,
+		'useRootPaddingAwareAlignments' => null,
+		'border'                        => array(
 			'color'  => null,
 			'radius' => null,
 			'style'  => null,
 			'width'  => null,
 		),
-		'color'            => array(
+		'color'                         => array(
 			'background'       => null,
 			'custom'           => null,
 			'customDuotone'    => null,
@@ -1043,13 +1043,13 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'palette'          => null,
 			'text'             => null,
 		),
-		'custom'           => null,
-		'layout'           => array(
+		'custom'                        => null,
+		'layout'                        => array(
 			'contentSize' => null,
 			'definitions' => null,
 			'wideSize'    => null,
 		),
-		'spacing'          => array(
+		'spacing'                       => array(
 			'customSpacingSize' => null,
 			'spacingSizes'      => null,
 			'spacingScale'      => null,
@@ -1058,7 +1058,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'padding'           => null,
 			'units'             => null,
 		),
-		'typography'       => array(
+		'typography'                    => array(
 			'customFontSize' => null,
 			'dropCap'        => null,
 			'fontFamilies'   => null,
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
index b1d7724b22abba..b5358e56e24b91 100644
--- a/lib/compat/wordpress-6.1/theme.json
+++ b/lib/compat/wordpress-6.1/theme.json
@@ -2,7 +2,7 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": false,
-		"useRootVariables": false,
+		"useRootPaddingAwareAlignments": false,
 		"border": {
 			"color": false,
 			"radius": false,
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 06115126dd7144..88ed43f62e195c 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -172,15 +172,19 @@ function flattenTree( input = {}, prefix, token ) {
 /**
  * Transform given style tree into a set of style declarations.
  *
- * @param {Object}  blockStyles Block styles.
+ * @param {Object}  blockStyles         Block styles.
  *
- * @param {string}  selector    The selector these declarations should attach to.
+ * @param {string}  selector            The selector these declarations should attach to.
  *
- * @param {boolean} useRootVars Whether to use CSS custom properties in root selector.
+ * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
+function getStylesDeclarations(
+	blockStyles = {},
+	selector = '',
+	useRootPaddingAlign
+) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
 		STYLE_PROPERTY,
@@ -237,7 +241,7 @@ function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
 		[]
 	);
 
-	if ( isRoot && useRootVars ) {
+	if ( isRoot && useRootPaddingAlign ) {
 		return output;
 	}
 
@@ -526,7 +530,7 @@ export const toStyles = (
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
-	const useRootVars = tree?.settings?.useRootVariables;
+	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 
 	/*
 	 * Reset default browser margin on the root body element.
@@ -538,7 +542,7 @@ export const toStyles = (
 	 */
 	let ruleset = 'body {margin: 0;}';
 
-	if ( useRootVars ) {
+	if ( useRootPaddingAlign ) {
 		ruleset =
 			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 	}
@@ -587,7 +591,7 @@ export const toStyles = (
 			const declarations = getStylesDeclarations(
 				styles,
 				selector,
-				useRootVars
+				useRootPaddingAlign
 			);
 			if ( declarations?.length ) {
 				ruleset =

From 4447f2a141347b1e9a9240d2420f7223defc277c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Jul 2022 15:02:45 +1000
Subject: [PATCH 22/37] Improve preset processing logic

---
 lib/block-supports/layout.php                 | 11 +++++-----
 .../style-engine/class-wp-style-engine.php    | 20 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 861a58894c5f59..82d49c3c9fa208 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -69,18 +69,17 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					array(
 						'spacing' => array( 'padding' => $block_padding ),
 
-					),
-					array( 'output_css_as_array' => true )
+					)
 				);
 
 				// Handle negative margins for alignfull children of blocks with custom padding set.
 				// They're added separately because padding might only be set on one side.
-				if ( isset( $block_padding_values['css']['padding-right'] ) ) {
-					$padding_right = $block_padding_values['css']['padding-right'];
+				if ( isset( $block_padding_values['declarations']['padding-right'] ) ) {
+					$padding_right = $block_padding_values['declarations']['padding-right'];
 					$style        .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }";
 				}
-				if ( isset( $block_padding_values['css']['padding-left'] ) ) {
-					$padding_left = $block_padding_values['css']['padding-left'];
+				if ( isset( $block_padding_values['declarations']['padding-left'] ) ) {
+					$padding_left = $block_padding_values['declarations']['padding-left'];
 					$style       .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }";
 				}
 			}
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 8ca13ee54a3be7..e256f64628ff42 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -389,7 +389,6 @@ protected static function get_css_declarations( $style_value, $style_definition,
 	 * @param array $options      array(
 	 *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
 	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
-	 *     'output_css_as_array'        => (boolean) Whether to skip converting CSS to a declaration string. Default is `false`.
 	 * );.
 	 *
 	 * @return array|null array(
@@ -402,10 +401,9 @@ public function get_block_supports_styles( $block_styles, $options ) {
 			return null;
 		}
 
-		$css_declarations               = array();
-		$classnames                     = array();
-		$should_skip_css_vars           = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
-		$should_skip_declaration_string = isset( $options['output_css_as_array'] ) && true === $options['output_css_as_array'];
+		$css_declarations     = array();
+		$classnames           = array();
+		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
 
 		// Collect CSS and classnames.
 		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
@@ -430,12 +428,7 @@ public function get_block_supports_styles( $block_styles, $options ) {
 
 		// The return object.
 		$styles_output = array();
-
-		if ( $should_skip_declaration_string ) {
-			$css = $css_declarations;
-		} else {
-			$css = $style_rules->get_declarations_string();
-		}
+		$css           = $style_rules->get_declarations_string();
 
 		// Return css, if any.
 		if ( ! empty( $css ) ) {
@@ -452,6 +445,11 @@ public function get_block_supports_styles( $block_styles, $options ) {
 			$styles_output['classnames'] = implode( ' ', array_unique( $classnames ) );
 		}
 
+		// Return array of CSS values, if any.
+		if ( ! empty( $css_declarations ) ) {
+			$styles_output['declarations'] = $css_declarations;
+		}
+
 		return $styles_output;
 	}
 

From f9cb70948d20873b4d067f2ab54ee7e334ea2147 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Jul 2022 15:17:59 +1000
Subject: [PATCH 23/37] Reset padding when no content size applies.

---
 packages/block-editor/src/hooks/layout.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 68d6508cc0a503..ca31d0f509425b 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -113,11 +113,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const {
-		inherit = false,
-		type = 'default',
-		useGlobalPadding = false,
-	} = usedLayout;
+	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
@@ -146,8 +142,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 									setAttributes( {
 										layout: {
 											inherit: ! inherit,
-											useGlobalPadding:
-												! inherit || useGlobalPadding,
+											useGlobalPadding: ! inherit,
 										},
 									} )
 								}

From 924d1ed39d8c20cb34e0d50c7ae21e29c261f5b3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Jul 2022 11:05:15 +1000
Subject: [PATCH 24/37] Update style engine class to match trunk

---
 packages/style-engine/class-wp-style-engine.php | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index e256f64628ff42..a140d9ba8c6b81 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -445,11 +445,6 @@ public function get_block_supports_styles( $block_styles, $options ) {
 			$styles_output['classnames'] = implode( ' ', array_unique( $classnames ) );
 		}
 
-		// Return array of CSS values, if any.
-		if ( ! empty( $css_declarations ) ) {
-			$styles_output['declarations'] = $css_declarations;
-		}
-
 		return $styles_output;
 	}
 

From 3057e077cbca719c45f27b0f45ca7f7dff7253d3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Jul 2022 11:58:47 +1000
Subject: [PATCH 25/37] Fix string check

---
 .../src/components/global-styles/use-global-styles-output.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 88ed43f62e195c..97b5b3ac25d12c 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -220,7 +220,7 @@ function getStylesDeclarations(
 				} );
 			} else if (
 				key === '--wp--style--root--padding' &&
-				isString( styleValue )
+				typeof styleValue !== 'string'
 			) {
 				// Root-level padding styles don't currently support strings with CSS shorthand values.
 				// This may change: https://github.com/WordPress/gutenberg/issues/40132.

From 10a06d53a0bb9f2860e23abcd7005e113a5e8334 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Jul 2022 16:10:06 +1000
Subject: [PATCH 26/37] Fix preset values in the editor.

---
 packages/block-editor/src/layouts/flow.js | 34 +++++++++++++----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index c0dbab4e21954f..db3ed8e015c936 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -151,21 +152,26 @@ export default {
 				: '';
 
 		// If there is custom padding, add negative margins for alignfull blocks.
-		// They're added separately because padding might only be set on one side.
-		if ( style?.spacing?.padding?.right ) {
-			output += `
-			${ appendSelectors( selector, '> .alignfull' ) } {
-				margin-right: -${ style.spacing.padding.right };
-			}
-			`;
-		}
-		if ( style?.spacing?.padding?.left ) {
-			output += `
-			${ appendSelectors( selector, '> .alignfull' ) } {
-				margin-left: -${ style.spacing.padding.left };
-			}
-			`;
+		if ( style?.spacing?.padding ) {
+			// The style object might be storing a preset so we need to make sure we get a usable value.
+			const paddingValues = getCSSRules( style );
+			paddingValues.forEach( ( rule ) => {
+				if ( rule.key === 'paddingRight' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-right: calc(${ rule.value } * -1);
+					}
+					`;
+				} else if ( rule.key === 'paddingLeft' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-left: calc(${ rule.value } * -1);
+					}
+					`;
+				}
+			} );
 		}
+
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
 			output += getBlockGapCSS(

From 74f1ca9fc09ae2094f390bb3c3b4a200cff3c24c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Jul 2022 16:20:04 +1000
Subject: [PATCH 27/37] Fix string check

---
 .../src/components/global-styles/use-global-styles-output.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 97b5b3ac25d12c..3e2f0c2f3189f1 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -220,7 +220,7 @@ function getStylesDeclarations(
 				} );
 			} else if (
 				key === '--wp--style--root--padding' &&
-				typeof styleValue !== 'string'
+				typeof styleValue === 'string'
 			) {
 				// Root-level padding styles don't currently support strings with CSS shorthand values.
 				// This may change: https://github.com/WordPress/gutenberg/issues/40132.

From c496bb2162f0c55695f93cadd1efe9d8941ca11f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 13 Jul 2022 16:51:27 +1000
Subject: [PATCH 28/37] Remove useGlobalPadding attribute

---
 lib/block-supports/layout.php             | 2 +-
 packages/block-editor/src/hooks/layout.js | 3 +--
 packages/block-editor/src/layouts/flow.js | 3 ---
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 82d49c3c9fa208..ffbe381847a9c7 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -194,7 +194,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$block_classname    = wp_get_block_default_classname( $block['blockName'] );
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
-	$use_global_padding = isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] || isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'];
+	$use_global_padding = isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'];
 
 	if ( $use_global_padding ) {
 		$class_names[] = 'has-global-padding';
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index ca31d0f509425b..f504595f38f52f 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -58,7 +58,7 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
-	if ( layout?.inherit || layout?.contentSize || layout?.useGlobalPadding ) {
+	if ( layout?.inherit || layout?.contentSize ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -142,7 +142,6 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 									setAttributes( {
 										layout: {
 											inherit: ! inherit,
-											useGlobalPadding: ! inherit,
 										},
 									} )
 								}
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index db3ed8e015c936..f0e084d623b17b 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -53,7 +53,6 @@ export default {
 								onChange( {
 									...layout,
 									contentSize: nextWidth,
-									useGlobalPadding: true,
 								} );
 							} }
 							units={ units }
@@ -74,7 +73,6 @@ export default {
 								onChange( {
 									...layout,
 									wideSize: nextWidth,
-									useGlobalPadding: true,
 								} );
 							} }
 							units={ units }
@@ -92,7 +90,6 @@ export default {
 								contentSize: undefined,
 								wideSize: undefined,
 								inherit: false,
-								useGlobalPadding: false,
 							} )
 						}
 					>

From 5f724b3cc8fa5584fde4dda6286fe5ac2e435fa7 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 13 Jul 2022 17:09:18 +1000
Subject: [PATCH 29/37] Replace padding with spacing in function parameter

---
 lib/block-supports/layout.php | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index ffbe381847a9c7..eac732d383463a 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -34,11 +34,11 @@ function gutenberg_register_layout_support( $block_type ) {
  * @param string  $gap_value                     The block gap value to apply.
  * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
  * @param string  $fallback_gap_value            The block gap value to apply.
- * @param array   $block_padding                 Custom padding set on the block.
+ * @param array   $block_spacing                 Custom spacing set on the block.
  *
  * @return string                                CSS style.
  */
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_padding = null ) {
+function gutenberg_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 ) {
 	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
 	$style = '';
@@ -64,22 +64,22 @@ 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 { max-width: none; }";
 
-			if ( isset( $block_padding ) ) {
-				$block_padding_values = gutenberg_style_engine_get_block_supports_styles(
+			if ( isset( $block_spacing ) ) {
+				$block_spacing_values = gutenberg_style_engine_get_block_supports_styles(
 					array(
-						'spacing' => array( 'padding' => $block_padding ),
+						'spacing' => $block_spacing,
 
 					)
 				);
 
 				// Handle negative margins for alignfull children of blocks with custom padding set.
 				// They're added separately because padding might only be set on one side.
-				if ( isset( $block_padding_values['declarations']['padding-right'] ) ) {
-					$padding_right = $block_padding_values['declarations']['padding-right'];
+				if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
+					$padding_right = $block_spacing_values['declarations']['padding-right'];
 					$style        .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }";
 				}
-				if ( isset( $block_padding_values['declarations']['padding-left'] ) ) {
-					$padding_left = $block_padding_values['declarations']['padding-left'];
+				if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
+					$padding_left = $block_spacing_values['declarations']['padding-left'];
 					$style       .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }";
 				}
 			}
@@ -240,12 +240,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	}
 
 	$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
-	$block_padding      = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null );
+	$block_spacing      = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null );
 
 	// 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( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_padding );
+	$style                         = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing );
 
 	// Only add container class and enqueue block support styles if unique styles were generated.
 	if ( ! empty( $style ) ) {

From 494d1bfedf258f462d5e1e1359c749e4a5d4e6ae Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 13 Jul 2022 17:26:16 +1000
Subject: [PATCH 30/37] Default root padding setting to false.

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 46fb506033b297..bd69cda575ef37 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -622,10 +622,10 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 	 * @return string Styles for the block.
 	 */
 	public function get_styles_for_block( $block_metadata ) {
-		$node          = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootPaddingAwareAlignments' ), array() );
-		$selector      = $block_metadata['selector'];
-		$settings      = _wp_array_get( $this->theme_json, array( 'settings' ) );
+		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$use_root_padding = _wp_array_get( $this->theme_json, array( 'settings', 'useRootPaddingAwareAlignments' ), false );
+		$selector         = $block_metadata['selector'];
+		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
 
 		// Get a reference to element name from path.
 		// $block_metadata['path'] = array('styles','elements','link');
@@ -654,9 +654,9 @@ function( $pseudo_selector ) use ( $selector ) {
 		// element then compute the style properties for it.
 		// Otherwise just compute the styles for the default selector as normal.
 		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) && isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ) {
-			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_vars );
+			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
 		} else {
-			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_vars );
+			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
 		}
 
 		$block_rules = '';
@@ -703,7 +703,7 @@ function( $pseudo_selector ) use ( $selector ) {
 		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
 			$block_gap_value = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
 
-			if ( $use_root_vars ) {
+			if ( $use_root_padding ) {
 				$block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
 				$block_rules .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 				$block_rules .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
@@ -771,10 +771,10 @@ protected function get_block_classes( $style_nodes ) {
 	 * @param array   $properties Properties metadata.
 	 * @param array   $theme_json Theme JSON array.
 	 * @param string  $selector The style block selector.
-	 * @param boolean $use_root_vars Whether to add custom properties at root level.
+	 * @param boolean $use_root_padding Whether to add custom properties at root level.
 	 * @return array  Returns the modified $declarations.
 	 */
-	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_vars = null ) {
+	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
 		if ( null === $properties ) {
 			$properties = static::PROPERTIES_METADATA;
 		}
@@ -798,7 +798,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 				continue;
 			}
 
-			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && $use_root_vars ) {
+			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && $use_root_padding ) {
 				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
 			}
 

From f69add908df5a7578b5c765e89fe4d6f599d0226 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 13 Jul 2022 18:03:15 +1000
Subject: [PATCH 31/37] Dodgy fix for Cover block

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php            | 2 +-
 packages/block-library/src/cover/style.scss                     | 1 -
 .../src/components/global-styles/use-global-styles-output.js    | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index bd69cda575ef37..75198793c8f4b9 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -707,7 +707,7 @@ function( $pseudo_selector ) use ( $selector ) {
 				$block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
 				$block_rules .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 				$block_rules .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-				$block_rules .= '.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+				$block_rules .= '.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			}
 
 			$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 957cfc5d4e23a3..619cad46c1b5a3 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;
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 3e2f0c2f3189f1..74c66e652f2c26 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -544,7 +544,7 @@ export const toStyles = (
 
 	if ( useRootPaddingAlign ) {
 		ruleset =
-			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 	}
 
 	nodesWithStyles.forEach(

From ddf259e84ed3c224634442c27c1fb8b622accddb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 14 Jul 2022 14:24:50 +1000
Subject: [PATCH 32/37] Add test for get_styles_for_block function

---
 phpunit/class-wp-theme-json-test.php | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 0c830d8de9a9c9..9bea597def8061 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -913,4 +913,36 @@ function data_generate_spacing_scale_fixtures() {
 			),
 		);
 	}
+
+	function test_get_styles_for_block_at_root_level() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => 2,
+				'styles'   => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '10px',
+							'right'  => '12px',
+							'bottom' => '10px',
+							'left'   => '12px',
+						),
+					),
+				),
+				'settings' => array(
+					'useRootPaddingAwareAlignments' => true,
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array(
+				'0' => 'styles',
+			),
+			'selector' => 'body',
+		);
+
+		$expected = 'body { margin: 0; }body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		$this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) );
+
+	}
 }

From 9327a4bd810158985adc2caef54dba367a2412f3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 14 Jul 2022 15:56:24 +1000
Subject: [PATCH 33/37] Check for padding setting before adding classname.

---
 lib/block-supports/layout.php             |  2 +-
 packages/block-editor/src/hooks/layout.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index eac732d383463a..1d9c2c05cdf436 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -194,7 +194,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$block_classname    = wp_get_block_default_classname( $block['blockName'] );
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
-	$use_global_padding = isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'];
+	$use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] );
 
 	if ( $use_global_padding ) {
 		$class_names[] = 'has-global-padding';
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index f504595f38f52f..4db7ac3b6ef05f 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -49,7 +49,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
  *
  * @return { Array } Array of CSS classname strings.
  */
-function getLayoutClasses( layout, layoutDefinitions ) {
+function useLayoutClasses( layout, layoutDefinitions ) {
+	const rootPaddingAlignment = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalFeatures
+			?.useRootPaddingAwareAlignments;
+	}, [] );
 	const layoutClassnames = [];
 
 	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
@@ -58,7 +63,7 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
-	if ( layout?.inherit || layout?.contentSize ) {
+	if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -273,7 +278,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
 		const layoutClasses = shouldRenderLayoutStyles
-			? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
 			: null;
 		const selector = `.${ getBlockDefaultClassName(
 			name

From a092eb3590543cf7851d6abb1090a22a5f457550 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 15 Jul 2022 11:50:55 +1000
Subject: [PATCH 34/37] Don't output vars if setting is off

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 75198793c8f4b9..49e326d2fa25b2 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -789,7 +789,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 		foreach ( $properties as $css_property => $value_path ) {
 			$value = static::get_property_value( $styles, $value_path, $theme_json );
 
-			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) {
+			if ( strpos( $css_property, '--wp--style--root--' ) === 0 && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
 				continue;
 			}
 			// Root-level padding styles don't currently support strings with CSS shorthand values.

From c4e5fc1c0814f38e5ef640af7d650195a70e2388 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 15 Jul 2022 11:51:17 +1000
Subject: [PATCH 35/37] Test default output without setting enabled.

---
 phpunit/class-wp-theme-json-test.php | 29 +++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 9bea597def8061..88d2b9a2b58709 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -914,7 +914,7 @@ function data_generate_spacing_scale_fixtures() {
 		);
 	}
 
-	function test_get_styles_for_block_at_root_level() {
+	function test_get_styles_for_block_with_padding_aware_alignments() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => 2,
@@ -943,6 +943,33 @@ function test_get_styles_for_block_at_root_level() {
 
 		$expected = 'body { margin: 0; }body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 		$this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) );
+	}
 
+	function test_get_styles_for_block_without_padding_aware_alignments() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => 2,
+				'styles'  => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '10px',
+							'right'  => '12px',
+							'bottom' => '10px',
+							'left'   => '12px',
+						),
+					),
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array(
+				'0' => 'styles',
+			),
+			'selector' => 'body',
+		);
+
+		$expected = 'body { margin: 0; }body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		$this->assertEquals( $expected, $theme_json->get_styles_for_block( $metadata ) );
 	}
 }

From d1c79b8900b13e30a522b473a0f2244348e2d0c9 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Fri, 15 Jul 2022 06:52:33 +0100
Subject: [PATCH 36/37] Update
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

No humorous string values allowed

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 49e326d2fa25b2..3916cc8159a2b4 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -623,7 +623,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 	 */
 	public function get_styles_for_block( $block_metadata ) {
 		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$use_root_padding = _wp_array_get( $this->theme_json, array( 'settings', 'useRootPaddingAwareAlignments' ), false );
+		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
 		$selector         = $block_metadata['selector'];
 		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
 

From e6144038a1006c0b94a3e652a0950a936e4147a8 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 15 Jul 2022 15:57:40 +1000
Subject: [PATCH 37/37] Remove empty line.

---
 lib/block-supports/layout.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 1d9c2c05cdf436..b26ed9df659c28 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -68,7 +68,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				$block_spacing_values = gutenberg_style_engine_get_block_supports_styles(
 					array(
 						'spacing' => $block_spacing,
-
 					)
 				);