From 577dc63deb10e38807d31ad2ed4081b96087f660 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Jul 2024 23:06:24 -0400 Subject: [PATCH] Layout: Fix invalid css for nested fullwidth layouts with zero padding 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 <14988353+andrewserong@users.noreply.github.com> Co-authored-by: richtabor Co-authored-by: andrewserong Co-authored-by: fabiankaegy --- backport-changelog/6.6/7036.md | 3 +++ lib/block-supports/layout.php | 12 ++++++++++-- packages/block-editor/src/layouts/constrained.js | 12 ++++++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 backport-changelog/6.6/7036.md diff --git a/backport-changelog/6.6/7036.md b/backport-changelog/6.6/7036.md new file mode 100644 index 00000000000000..afc4d16bf011b7 --- /dev/null +++ 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 index a8cc85dd304e7c..ac5ba1657ea541 100644 --- 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 index 03d2c642d02bda..2e671e8e53975a 100644 --- 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); } `; }