Fix and permit unitless zeros used in CSS calc functions

packages/block-editor/src/components/iframe/content.scss

@@ -18,8 +18,8 @@
 	}
 
 	&.zoom-out-animation {
-		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
-		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0px);
+		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0px);
 		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
@@ -34,7 +34,7 @@
 
 	&.is-zoomed-out {
 		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
-		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0px);
 		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
 		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);

packages/block-library/src/common.scss

@@ -232,18 +232,14 @@ html :where(img[class*="wp-image-"]) {
 // Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
 // This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
 html :where(.is-position-sticky) {
-	/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
 	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
-	/* stylelint-enable length-zero-no-unit */
 }
 
 // To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
 // within the scope of the position classname. This is required because the admin bar
 // is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
 @media screen and (max-width: 600px) {
 	html :where(.is-position-sticky) {
-		/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
 		--wp-admin--admin-bar--position-offset: 0px;
-		/* stylelint-enable length-zero-no-unit */
 	}
 }

packages/boot/src/components/root/style.scss

@@ -230,7 +230,7 @@
 	.boot-layout__inspector,
 	.boot-layout__canvas:not(.has-mobile-drawer) {
 		top: var(--wp-admin--admin-bar--height, 0);
-		height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 	}
 
 	.boot-layout__mobile-sidebar-drawer {

packages/edit-post/src/style.scss

@@ -12,7 +12,7 @@ body.js.block-editor-page {
 	&.is-fullscreen-mode {
 		@include break-medium {
 			&:has(.editor-editor-interface.is-distraction-free) {
-				--wp-admin--admin-bar--height: 0;
+				--wp-admin--admin-bar--height: 0px;
 
 				#wpadminbar {
 					display: none;
@@ -48,7 +48,7 @@ body.js.block-editor-page {
 
 	// The WP header height changes at this breakpoint.
 	@include break-medium {
-		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 	}
 
 	img {

packages/edit-site/src/components/layout/style.scss

@@ -34,7 +34,7 @@
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
 		position: fixed !important;
-		height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 		left: 0;
 		top: var(--wp-admin--admin-bar--height, 0);
 	}

packages/edit-site/src/style.scss

@@ -59,7 +59,7 @@ body.js.site-editor-php {
 
 	@include break-medium {
 		&:has(.editor-editor-interface.is-distraction-free) {
-			--wp-admin--admin-bar--height: 0;
+			--wp-admin--admin-bar--height: 0px;
 
 			#wpadminbar {
 				display: none;
@@ -78,7 +78,7 @@ body.js.site-editor-php {
 	@include break-small {
 		bottom: 0;
 		left: 0;
-		height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 		padding-top: 0;
 		position: fixed;
 		right: 0;

packages/stylelint-config/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   `length-zero-no-unit` rule now ignores custom properties and `var` functions, for better compatibility with usage inside `calc` functions. `calc` functions are already [exempt from the rule by default](https://stylelint.io/user-guide/rules/length-zero-no-unit/), and this change extends the same exemption to variables that may be used within `calc` functions, as [unitless zeros are not valid in CSS math functions](https://www.w3.org/TR/css-values-4/#calc-type-checking) ([#79786](https://github.com/WordPress/gutenberg/pull/79786)).
 -   Update `@stylistic/stylelint-plugin` to `^3.1.3` ([#79648](https://github.com/WordPress/gutenberg/pull/79648)).
 
 ## 23.41.0 (2026-06-24)

packages/stylelint-config/index.js

@@ -47,7 +47,10 @@ module.exports = {
 			},
 		],
 		'function-url-quotes': 'never',
-		'length-zero-no-unit': true,
+		'length-zero-no-unit': [
+			true,
+			{ ignore: [ 'custom-properties' ], ignoreFunctions: [ 'var' ] },
+		],
 		'rule-empty-line-before': [
 			'always',
 			{

packages/stylelint-config/test/values-valid.css

@@ -13,3 +13,8 @@
 		0 -1px 0 rgba(0, 0, 0, 0.5),
 		0 1px 0 #fff;
 }
+
+.zero-length-vars {
+	--custom-offset: 0px;
+	margin-block-start: var(--custom-offset, 0px);
+}

packages/ui/CHANGELOG.md

@@ -13,6 +13,7 @@
 -   Add an explicit return type to an internal overlay focus helper so the published type definitions stay self-contained ([#79684](https://github.com/WordPress/gutenberg/pull/79684)).
 -   Enforce CSS Module class selector naming for component-library packages ([#79504](https://github.com/WordPress/gutenberg/pull/79504)).
 -   Update `@base-ui/react` from `1.5.0` to [`1.6.0`](https://github.com/mui/base-ui/releases/tag/v1.6.0) ([#79408](https://github.com/WordPress/gutenberg/pull/79408)).
+-   Update `--wp-ui-button-padding-block` CSS property to avoid using unitless values, which are incompatible when used in `calc` math functions ([#79786](https://github.com/WordPress/gutenberg/pull/79786)).
 
 ## 0.16.1 (2026-06-30)
 

packages/ui/src/button/style.module.css

@@ -146,7 +146,7 @@
 		}
 
 		.is-small {
-			--wp-ui-button-padding-block: 0;
+			--wp-ui-button-padding-block: 0px;
 			--wp-ui-button-padding-inline: var(--wpds-dimension-padding-sm);
 			--wp-ui-button-height: var(--wpds-dimension-size-sm);
 		}

packages/ui/src/form/primitives/input/style.module.css

@@ -4,8 +4,8 @@
 	@layer components {
 		.input {
 			--_gcd-input-padding:
-				var(--wp-ui-input-padding-block, 0)
-				var(--wp-ui-input-layout-padding-inline, 0);
+				var(--wp-ui-input-padding-block, 0px)
+				var(--wp-ui-input-layout-padding-inline, 0px);
 
 			padding-block: var(--wp-ui-input-padding-block, 0);
 			padding-inline: var(--wp-ui-input-layout-padding-inline, 0);

packages/ui/src/icon-button/style.module.css

@@ -4,7 +4,6 @@
 	@layer compositions {
 		.icon-button {
 			--wp-ui-button-aspect-ratio: 1;
-			/* stylelint-disable-next-line length-zero-no-unit -- This custom property is reused in Button's min-width calc(), where a unitless zero is invalid. */
 			--wp-ui-button-padding-inline: 0px;
 			--wp-ui-button-min-width: unset;
 		}