Skip to content

Block Supports: Allow CSS custom properties in block gap sanitization #82817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
noruzzamans wants to merge 3 commits into
base: trunk
Choose a base branch
from
+43 −10
Open

Block Supports: Allow CSS custom properties in block gap sanitization #82817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
214b8ad
Block Supports: Allow CSS custom properties in block gap sanitization
noruzzamans Sep 12, 2026
37ff60a
Merge branch 'trunk' into fix/grid-themejson-blockgap-preset-82747
noruzzamans Sep 15, 2026
dd7183f
Merge branch 'trunk' into fix/grid-themejson-blockgap-preset-82747
noruzzamans Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,11 @@ function gutenberg_sanitize_block_gap_value( $gap_value ) {
return null;
}

// Allow valid CSS custom property references, e.g. var(--wp--preset--spacing--32).
if ( preg_match( '/^var\(--[a-zA-Z0-9_-]+\)$/', $gap_value ) ) {
return $gap_value;
}

return $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}

Expand Down
48 changes: 38 additions & 10 deletions phpunit/block-supports/layout-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,22 +88,37 @@ public function test_sanitize_block_gap_value_normalizes_zero_and_rejects_other_
*/
public function data_sanitize_block_gap_value() {
return array(
'string value' => array( '1rem', '1rem' ),
'empty string' => array( '', null ),
'whitespace-only string' => array( " \t\n", null ),
'integer zero' => array( 0, '0' ),
'floating-point zero' => array( 0.0, '0' ),
'non-zero integer' => array( 1, null ),
'boolean value' => array( true, null ),
'object value' => array( new stdClass(), null ),
'nested array value' => array(
'string value' => array( '1rem', '1rem' ),
'empty string' => array( '', null ),
'whitespace-only string' => array( " \t\n", null ),
'integer zero' => array( 0, '0' ),
'floating-point zero' => array( 0.0, '0' ),
'non-zero integer' => array( 1, null ),
'boolean value' => array( true, null ),
'object value' => array( new stdClass(), null ),
'nested array value' => array(
array(
'top' => array( '1rem' ),
'left' => '2rem',
),
array( 'left' => '2rem' ),
),
'empty sanitized array' => array( array( array( '1rem' ) ), null ),
'empty sanitized array' => array( array( array( '1rem' ) ), null ),
'valid CSS variable preset' => array( 'var(--wp--preset--spacing--32)', 'var(--wp--preset--spacing--32)' ),
'valid CSS variable with hyphens' => array( 'var(--wp--preset--spacing--sm-32)', 'var(--wp--preset--spacing--sm-32)' ),
'valid CSS custom property' => array( 'var(--custom-gap)', 'var(--custom-gap)' ),
'malformed CSS variable injection' => array( 'var(--wp--preset--spacing--32); background: red;', null ),
'malformed CSS variable with function' => array( 'var(--wp--preset--spacing--32, url(evil))', null ),
'nested array with CSS variable' => array(
array(
'top' => 'var(--wp--preset--spacing--32)',
'left' => '2rem',
),
array(
'top' => 'var(--wp--preset--spacing--32)',
'left' => '2rem',
),
),
);
}

Expand Down Expand Up @@ -555,6 +570,19 @@ public function data_gutenberg_get_layout_style() {
),
'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(max(min(12rem, 100%), (100% - (1.2rem * (3 - 1))) /3), 1fr));container-type:inline-size;gap:2rem 1.2rem;}',
),
'grid layout uses preset CSS variable fallback when horizontal gap is missing' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'grid',
'columnCount' => 2,
'minimumColumnWidth' => '20rem',
),
'has_block_gap_support' => true,
'fallback_gap_value' => 'var(--wp--preset--spacing--32)',
),
'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(max(min(20rem, 100%), (100% - (var(--wp--preset--spacing--32) * (2 - 1))) /2), 1fr));container-type:inline-size;}',
),
'grid layout preserves zero horizontal gap' => array(
'args' => array(
'selector' => '.wp-layout',
Expand Down
Loading