@wordpress/block-library 10.1.0 → 10.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "10.1.0",
+	"version": "10.2.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -73,6 +73,7 @@
 					"wp_enqueue_block_support_styles",
 					"wp_get_typography_font_size_value",
 					"wp_style_engine_get_styles",
+					"wp_get_global_styles",
 					"wp_get_global_settings"
 				],
 				"suffixClasses": [
@@ -91,45 +92,46 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@arraypress/waveform-player": "^1.2.1",
-		"@wordpress/a11y": "^4.50.0",
-		"@wordpress/api-fetch": "^7.50.0",
-		"@wordpress/autop": "^4.50.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/blob": "^4.50.0",
-		"@wordpress/block-editor": "^15.23.0",
-		"@wordpress/blocks": "^15.23.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/core-data": "^7.50.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/date": "^5.50.0",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/dom": "^4.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/escape-html": "^3.50.0",
-		"@wordpress/hooks": "^4.50.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/interactivity": "^6.50.0",
-		"@wordpress/interactivity-router": "^2.50.0",
-		"@wordpress/keyboard-shortcuts": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/latex-to-mathml": "^1.18.0",
-		"@wordpress/notices": "^5.50.0",
-		"@wordpress/patterns": "^2.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/reusable-blocks": "^5.50.0",
-		"@wordpress/rich-text": "^7.50.0",
-		"@wordpress/server-side-render": "^6.26.0",
-		"@wordpress/shortcode": "^4.50.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/upload-media": "^0.35.0",
-		"@wordpress/url": "^4.50.0",
-		"@wordpress/viewport": "^6.50.0",
-		"@wordpress/wordcount": "^4.50.0",
+		"@arraypress/waveform-player": "^1.21.0",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/api-fetch": "^7.51.0",
+		"@wordpress/autop": "^4.51.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/blob": "^4.51.0",
+		"@wordpress/block-editor": "^16.0.0",
+		"@wordpress/blocks": "^15.24.0",
+		"@wordpress/components": "^37.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/core-data": "^7.51.0",
+		"@wordpress/data": "^10.51.0",
+		"@wordpress/date": "^5.51.0",
+		"@wordpress/deprecated": "^4.51.0",
+		"@wordpress/dom": "^4.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/escape-html": "^3.51.0",
+		"@wordpress/global-styles-engine": "^1.18.0",
+		"@wordpress/hooks": "^4.51.0",
+		"@wordpress/html-entities": "^4.51.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/interactivity": "^6.51.0",
+		"@wordpress/interactivity-router": "^2.51.0",
+		"@wordpress/keyboard-shortcuts": "^5.51.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/latex-to-mathml": "^1.19.0",
+		"@wordpress/notices": "^5.51.0",
+		"@wordpress/patterns": "^2.51.0",
+		"@wordpress/primitives": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/reusable-blocks": "^5.51.0",
+		"@wordpress/rich-text": "^7.51.0",
+		"@wordpress/server-side-render": "^6.27.0",
+		"@wordpress/shortcode": "^4.51.0",
+		"@wordpress/ui": "^0.18.0",
+		"@wordpress/upload-media": "^0.36.0",
+		"@wordpress/url": "^4.51.0",
+		"@wordpress/viewport": "^6.51.0",
+		"@wordpress/wordcount": "^4.51.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -142,15 +144,17 @@
 	},
 	"devDependencies": {
 		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
+		"@wordpress/integration-tests": "file:../../test/integration",
 		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -160,5 +164,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

package/src/accordion/README.md

@@ -35,6 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
@@ -72,7 +73,7 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 	<!-- wp:accordion-item -->
 	<div class="wp-block-accordion-item">
 		<!-- wp:accordion-heading -->
-		<h3 class="wp-block-accordion-heading">
+		<h3 class="wp-block-accordion-heading has-icon has-icon-right">
 			<button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Accordion Title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
 		</h3>
 		<!-- /wp:accordion-heading -->

package/src/accordion/block.json

@@ -13,6 +13,7 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
 				"backgroundImage": true
 			}

package/src/accordion/edit.js

@@ -184,7 +184,6 @@ export default function Edit( {
 							}
 						>
 							<ToggleGroupControl
-								__next40pxDefaultSize
 								isBlock
 								label={ __( 'Icon Position' ) }
 								value={ iconPosition }

package/src/accordion/view.js

@@ -18,6 +18,13 @@ const { actions } = store(
 				);
 				return accordionItem ? accordionItem.isOpen : false;
 			},
+			get isHidden() {
+				const { id, accordionItems } = getContext();
+				const accordionItem = accordionItems.find(
+					( item ) => item.id === id
+				);
+				return accordionItem?.isOpen ? null : 'until-found';
+			},
 		},
 		actions: {
 			toggle: () => {
@@ -84,6 +91,23 @@ const { actions } = store(
 					targetElement.scrollIntoView();
 				}, 0 );
 			},
+			handleBeforeMatch: () => {
+				const context = getContext();
+				const { id, autoclose, accordionItems } = context;
+				const accordionItem = accordionItems.find(
+					( item ) => item.id === id
+				);
+
+				if ( accordionItem ) {
+					if ( autoclose ) {
+						accordionItems.forEach( ( item ) => {
+							item.isOpen = item.id === id;
+						} );
+					} else {
+						accordionItem.isOpen = true;
+					}
+				}
+			},
 		},
 		callbacks: {
 			initAccordionItems: () => {

package/src/accordion-heading/README.md

@@ -67,7 +67,7 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 
 ```html
 <!-- wp:accordion-heading -->
-<h3 class="wp-block-accordion-heading">
+<h3 class="wp-block-accordion-heading has-icon has-icon-right">
 	<button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Accordion Title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
 </h3>
 <!-- /wp:accordion-heading -->

package/src/accordion-heading/deprecated.js

@@ -237,4 +237,125 @@ const v2 = {
 	},
 };
 
-export default [ v1, v2 ];
+const v3 = {
+	attributes: {
+		openByDefault: {
+			type: 'boolean',
+			default: false,
+		},
+		title: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: '.wp-block-accordion-heading__toggle-title',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+		},
+		iconPosition: {
+			type: 'string',
+			enum: [ 'left', 'right' ],
+			default: 'right',
+		},
+		showIcon: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+	supports: {
+		anchor: true,
+		color: {
+			background: true,
+			gradients: true,
+		},
+		align: false,
+		interactivity: true,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+			__experimentalSkipSerialization: true,
+			__experimentalSelector: '.wp-block-accordion-heading__toggle',
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		typography: {
+			__experimentalSkipSerialization: [
+				'textDecoration',
+				'letterSpacing',
+			],
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontFamily: true,
+			},
+		},
+		shadow: true,
+		visibility: false,
+		lock: false,
+	},
+	save( { attributes } ) {
+		const { level, title, iconPosition, showIcon } = attributes;
+		const TagName = 'h' + ( level || 3 );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+
+		const blockProps = useBlockProps.save();
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+
+		return (
+			<TagName { ...blockProps }>
+				<button
+					type="button"
+					className="wp-block-accordion-heading__toggle"
+					style={ spacingProps.style }
+				>
+					{ showIcon && iconPosition === 'left' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+					<RichText.Content
+						className="wp-block-accordion-heading__toggle-title"
+						tagName="span"
+						value={ title }
+						style={ {
+							letterSpacing: typographyProps.style.letterSpacing,
+							textDecoration:
+								typographyProps.style.textDecoration,
+						} }
+					/>
+					{ showIcon && iconPosition === 'right' && (
+						<span
+							className="wp-block-accordion-heading__toggle-icon"
+							aria-hidden="true"
+						>
+							+
+						</span>
+					) }
+				</button>
+			</TagName>
+		);
+	},
+};
+
+export default [ v3, v2, v1 ];

package/src/accordion-heading/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -53,7 +58,13 @@ export default function Edit( { attributes, setAttributes, context } ) {
 		},
 	} );
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'has-icon': showIcon,
+			'has-icon-left': showIcon && iconPosition === 'left',
+			'has-icon-right': showIcon && iconPosition === 'right',
+		} ),
+	} );
 	const spacingProps = useSpacingProps( attributes );
 
 	return (

package/src/accordion-heading/save.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -13,7 +18,13 @@ export default function save( { attributes } ) {
 	const TagName = 'h' + ( level || 3 );
 	const typographyProps = getTypographyClassesAndStyles( attributes );
 
-	const blockProps = useBlockProps.save();
+	const blockProps = useBlockProps.save( {
+		className: clsx( {
+			'has-icon': showIcon,
+			'has-icon-left': showIcon && iconPosition === 'left',
+			'has-icon-right': showIcon && iconPosition === 'right',
+		} ),
+	} );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 
 	return (

package/src/accordion-item/README.md

@@ -62,7 +62,7 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 <!-- wp:accordion-item -->
 <div class="wp-block-accordion-item">
 	<!-- wp:accordion-heading -->
-	<h3 class="wp-block-accordion-heading">
+	<h3 class="wp-block-accordion-heading has-icon has-icon-right">
 		<button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Accordion Title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button>
 	</h3>
 	<!-- /wp:accordion-heading -->

package/src/accordion-item/index.php

@@ -46,7 +46,8 @@ function block_core_accordion_item_render( array $attributes, string $content ):
 			if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-panel' ) ) ) {
 				$p->set_attribute( 'id', $unique_id . '-panel' );
 				$p->set_attribute( 'aria-labelledby', $unique_id );
-				$p->set_attribute( 'data-wp-bind--inert', '!state.isOpen' );
+				$p->set_attribute( 'data-wp-bind--hidden', 'state.isHidden' );
+				$p->set_attribute( 'data-wp-on--beforematch', 'actions.handleBeforeMatch' );
 
 				// Only modify content if all directives have been set.
 				$content = $p->get_updated_html();

package/src/accordion-panel/edit.js

@@ -32,7 +32,7 @@ export default function Edit( { attributes, context, clientId, isSelected } ) {
 		[ clientId, isSelected, openByDefault ]
 	);
 	const blockProps = useBlockProps( {
-		'aria-hidden': ! hasSelection,
+		hidden: ! hasSelection,
 		role: 'region',
 	} );
 

package/src/accordion-panel/style.scss

@@ -1,9 +1,6 @@
 .wp-block-accordion-panel {
-
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
-	&[inert],
-	&[aria-hidden="true"] {
-		display: none;
+	&[hidden] {
 		margin-block-start: 0;
 	}
 }

package/src/archives/edit.js

@@ -116,7 +116,6 @@ export default function ArchivesEdit( { attributes, setAttributes, name } ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Group by' ) }
 							options={ [
 								{ label: __( 'Year' ), value: 'yearly' },

package/src/audio/edit.js

@@ -223,7 +223,6 @@ function AudioEdit( {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ _x(
 								'Preload',
 								'noun; Audio block parameter'

package/src/avatar/edit.js

@@ -56,7 +56,6 @@ const AvatarInspectorControls = ( {
 					onDeselect={ () => setAttributes( { size: 96 } ) }
 				>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Image size' ) }
 						onChange={ ( newSize ) =>
 							setAttributes( {

package/src/avatar/user-control.js

@@ -47,7 +47,6 @@ export default function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label={ __( 'User' ) }
 			help={ __(
 				'Select the avatar user to display, if it is blank it will use the post/page author.'

package/src/button/edit.js

@@ -7,12 +7,7 @@ import {
 	useMemo,
 	createInterpolateElement,
 } from '@wordpress/element';
-import {
-	TextControl,
-	ToolbarButton,
-	Popover,
-	ExternalLink,
-} from '@wordpress/components';
+import { TextControl, ToolbarButton, Popover } from '@wordpress/components';
 import {
 	BlockControls,
 	InspectorControls,
@@ -45,6 +40,11 @@ import {
 	privateApis as composePrivateApis,
 } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { Link } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
@@ -63,19 +63,22 @@ const LINK_SETTINGS = [
 	},
 ];
 
-function useEnter( props ) {
+function useEnter( clientId ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
+	const {
+		getBlock,
+		getBlockAttributes,
+		getBlockRootClientId,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
+			const { text } = getBlockAttributes( clientId ) ?? {};
+			if ( text?.length ) {
 				return;
 			}
 			event.preventDefault();
@@ -266,7 +269,7 @@ function ButtonEdit( props ) {
 		[ url, opensInNewTab, nofollow ]
 	);
 
-	const useEnterRef = useEnter( { content: text, clientId } );
+	const useEnterRef = useEnter( clientId );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
 	const [ fluidTypographySettings, layout, dimensionSizes ] = useSettings(
@@ -456,7 +459,10 @@ function ButtonEdit( props ) {
 							),
 							{
 								a: (
-									<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+									<Link
+										openInNewTab
+										href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel"
+									/>
 								),
 							}
 						) }

package/src/categories/edit.js

@@ -236,7 +236,6 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Taxonomy' ) }
 								options={ taxonomies.map( ( t ) => ( {
 									label: t.name,

package/src/code/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockContent } from '@wordpress/blocks';
 import { create, toHTMLString } from '@wordpress/rich-text';
 
 /**
@@ -31,14 +31,16 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/html' ],
-			transform: ( attributes ) => {
-				const { content: text } = attributes;
+			__experimentalConvert( block ) {
+				const { attributes } = block;
 				return createBlock( 'core/code', {
 					...attributes,
 					...getTransformedAttributes( attributes, 'core/code' ),
 					// The HTML is plain text (with plain line breaks), so
 					// convert it to rich text.
-					content: toHTMLString( { value: create( { text } ) } ),
+					content: toHTMLString( {
+						value: create( { text: getBlockContent( block ) } ),
+					} ),
 				} );
 			},
 		},

package/src/column/edit.js

@@ -53,7 +53,6 @@ function ColumnInspectorControls( { width, setAttributes } ) {
 				<UnitControl
 					label={ __( 'Width' ) }
 					__unstableInputWidth="calc(50% - 8px)"
-					__next40pxDefaultSize
 					value={ width || '' }
 					onChange={ ( nextWidth ) => {
 						nextWidth =

package/src/columns/edit.js

@@ -162,7 +162,6 @@ function ColumnInspectorControls( {
 			{ canInsertColumnBlock && (
 				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ count }
 						onChange={ ( value ) =>

package/src/columns/transforms.js

@@ -68,10 +68,17 @@ const transforms = {
 			__experimentalConvert: ( blocks ) => {
 				const columnWidth = +( 100 / blocks.length ).toFixed( 2 );
 				const innerBlocksTemplate = blocks.map(
-					( { name, attributes, innerBlocks } ) => [
+					( { name, attributes, innerBlocks, innerContent } ) => [
 						'core/column',
 						{ width: `${ columnWidth }%` },
-						[ [ name, { ...attributes }, innerBlocks ] ],
+						[
+							[
+								name,
+								{ ...attributes },
+								innerBlocks,
+								innerContent,
+							],
+						],
 					]
 				);
 				return createBlock(

package/src/comment-author-avatar/edit.js

@@ -51,7 +51,6 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
-					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

package/src/comments-pagination/comments-pagination-arrow-controls.js

@@ -10,7 +10,6 @@ import {
 export function CommentsPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/common.scss

@@ -232,9 +232,7 @@ 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,
@@ -242,8 +240,6 @@ html :where(.is-position-sticky) {
 // 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 */
 	}
 }