Layout: Fix invalid css for nested fullwidth layouts with zero padding applied (#63436)

richtabor · andrewserong · fabiankaegy · andrewserong · commit 577dc63deb10 · 2024-07-16T14:53:45.000+10:00
* apply a default unit when set to zero (frontend)

* apply a default unit when set to zero (editor)

* use 0 as a string

* Fix linting issue

* Add backport changelog entry

---------

Co-authored-by: Andrew Serong &lt;14988353+andrewserong@users.noreply.github.com&gt;
Co-authored-by: richtabor &lt;richtabor@git.wordpress.org&gt;
Co-authored-by: andrewserong &lt;andrewserong@git.wordpress.org&gt;
Co-authored-by: fabiankaegy &lt;fabiankaegy@git.wordpress.org&gt;
diff --git a/backport-changelog/6.6/7036.md b/backport-changelog/6.6/7036.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7036
+
+* https://github.com/WordPress/gutenberg/pull/63436
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -306,14 +306,22 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			 * They're added separately because padding might only be set on one side.
 			 */
 			if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
-				$padding_right   = $block_spacing_values['declarations']['padding-right'];
+				$padding_right = $block_spacing_values['declarations']['padding-right'];
+				// Add unit if 0.
+				if ( '0' === $padding_right ) {
+					$padding_right = '0px';
+				}
 				$layout_styles[] = array(
 					'selector'     => "$selector > .alignfull",
 					'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
 				);
 			}
 			if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
-				$padding_left    = $block_spacing_values['declarations']['padding-left'];
+				$padding_left = $block_spacing_values['declarations']['padding-left'];
+				// Add unit if 0.
+				if ( '0' === $padding_left ) {
+					$padding_left = '0px';
+				}
 				$layout_styles[] = array(
 					'selector'     => "$selector > .alignfull",
 					'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -234,15 +234,23 @@ export default {
 			const paddingValues = getCSSRules( style );
 			paddingValues.forEach( ( rule ) => {
 				if ( rule.key === 'paddingRight' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingRightValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
+						margin-right: calc(${ paddingRightValue } * -1);
 					}
 					`;
 				} else if ( rule.key === 'paddingLeft' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingLeftValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
+						margin-left: calc(${ paddingLeftValue } * -1);
 					}
 					`;
 				}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+https://github.com/WordPress/wordpress-develop/pull/7036`
	`2`	`+`
	`3`	`+* https://github.com/WordPress/gutenberg/pull/63436`