Layout: Fix invalid css for nested fullwidth layouts with zero paddin…

…g applied (#63436)

* 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 <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

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

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)" ),

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);
 					}
 					`;
 				}