@wordpress/block-library 8.33.0 → 8.35.0

package/src/comment-edit-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comment-reply-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ import {
  */
 function Edit( { setAttributes, attributes: { textAlign } } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comment-template/util.js

@@ -30,7 +30,9 @@
 export const convertToTree = ( data ) => {
 	const table = {};
 
-	if ( ! data ) return [];
+	if ( ! data ) {
+		return [];
+	}
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}
 	data.forEach( ( item ) => {

package/src/comments/edit/comments-legacy.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function CommentsLegacy( {
 	];
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/comments-title/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Edit( {
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/common.scss

@@ -165,8 +165,8 @@ 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 */
-	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); // 0px is set explicitly so that it can be used in a calc value.
+	/* 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 */
 }
 
@@ -175,8 +175,8 @@ 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 */
-		--wp-admin--admin-bar--position-offset: 0px; // 0px is set explicitly so that it can be used in a calc value.
+		/* 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 */
 	}
 }

package/src/cover/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -305,7 +305,7 @@ const v13 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -316,7 +316,7 @@ const v13 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -331,7 +331,7 @@ const v13 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -370,7 +370,7 @@ const v13 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -467,7 +467,7 @@ const v12 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -478,7 +478,7 @@ const v12 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -493,7 +493,7 @@ const v12 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -532,7 +532,7 @@ const v12 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -616,7 +616,7 @@ const v11 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -627,7 +627,7 @@ const v11 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -642,7 +642,7 @@ const v11 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -681,7 +681,7 @@ const v11 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -765,7 +765,7 @@ const v10 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -782,7 +782,7 @@ const v10 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -805,7 +805,7 @@ const v10 = {
 					isImgElement &&
 					url && (
 						<img
-							className={ classnames(
+							className={ clsx(
 								'wp-block-cover__image-background',
 								id ? `wp-image-${ id }` : null
 							) }
@@ -818,7 +818,7 @@ const v10 = {
 					) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -900,7 +900,7 @@ const v9 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -917,7 +917,7 @@ const v9 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -937,7 +937,7 @@ const v9 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -950,7 +950,7 @@ const v9 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1032,7 +1032,7 @@ const v8 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -1047,7 +1047,7 @@ const v8 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
 						'wp-block-cover__gradient-background',
@@ -1064,7 +1064,7 @@ const v8 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1077,7 +1077,7 @@ const v8 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1182,7 +1182,7 @@ const v7 = {
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 					: undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1202,7 +1202,7 @@ const v7 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1215,7 +1215,7 @@ const v7 = {
 				) }
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1228,7 +1228,7 @@ const v7 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1333,7 +1333,7 @@ const v6 = {
 			}
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1353,7 +1353,7 @@ const v6 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1436,7 +1436,7 @@ const v5 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1452,7 +1452,7 @@ const v5 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1533,7 +1533,7 @@ const v4 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1549,7 +1549,7 @@ const v4 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1623,7 +1623,7 @@ const v3 = {
 			}%`;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1716,7 +1716,7 @@ const v2 = {
 			style.backgroundColor = customOverlayColor;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
@@ -1785,7 +1785,7 @@ const v1 = {
 	save( { attributes } ) {
 		const { url, title, hasParallax, dimRatio, align } = attributes;
 		const style = backgroundImageStyles( url );
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			{

package/src/cover/edit/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -447,10 +447,7 @@ function CoverEdit( {
 				) }
 				<TagName
 					{ ...blockProps }
-					className={ classnames(
-						'is-placeholder',
-						blockProps.className
-					) }
+					className={ clsx( 'is-placeholder', blockProps.className ) }
 					style={ {
 						...blockProps.style,
 						minHeight: minHeightWithUnit || undefined,
@@ -476,7 +473,7 @@ function CoverEdit( {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
@@ -498,7 +495,7 @@ function CoverEdit( {
 			{ inspectorControls }
 			<TagName
 				{ ...blockProps }
-				className={ classnames( classes, blockProps.className ) }
+				className={ clsx( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
@@ -506,7 +503,7 @@ function CoverEdit( {
 				{ showOverlay && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__background',
 							dimRatioToClass( dimRatio ),
 							{
@@ -547,7 +544,7 @@ function CoverEdit( {
 							ref={ mediaElement }
 							role={ alt ? 'img' : undefined }
 							aria-label={ alt ? alt : undefined }
-							className={ classnames(
+							className={ clsx(
 								classes,
 								'wp-block-cover__image-background'
 							) }

package/src/cover/edit/resizable-cover-popover.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function ResizableCoverPopover( {
 	const [ isResizing, setIsResizing ] = useState( false );
 
 	const resizableBoxProps = {
-		className: classnames( className, { 'is-resizing': isResizing } ),
+		className: clsx( className, { 'is-resizing': isResizing } ),
 		enable: RESIZABLE_BOX_ENABLE_OPTION,
 		onResizeStart: ( _event, _direction, elt ) => {
 			onResizeStart( elt.clientHeight );

package/src/cover/edit.native.js

@@ -10,7 +10,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -298,7 +298,7 @@ const Cover = ( {
 
 		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
 		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
-			const className = classnames( attributes.className, {
+			const className = clsx( attributes.className, {
 				'is-light': false,
 			} );
 			setAttributes( {

package/src/cover/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function save( { attributes } ) {
 
 	const backgroundPosition = mediaPosition( focalPoint );
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
@@ -91,7 +91,7 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
-	const imgClasses = classnames(
+	const imgClasses = clsx(
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
@@ -106,7 +106,7 @@ export default function save( { attributes } ) {
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
-				className={ classnames(
+				className={ clsx(
 					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
@@ -146,7 +146,7 @@ export default function save( { attributes } ) {
 				) ) }
 			{ isVideoBackground && url && (
 				<video
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__video-background',
 						'intrinsic-ignore'
 					) }

package/src/cover/shared.js

@@ -103,7 +103,9 @@ export function getPositionClassName( contentPosition ) {
 	/*
 	 * Only render a className if the contentPosition is not center (the default).
 	 */
-	if ( isContentPositionCenter( contentPosition ) ) return '';
+	if ( isContentPositionCenter( contentPosition ) ) {
+		return '';
+	}
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }

package/src/embed/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -26,7 +26,7 @@ const v2 = {
 			return null;
 		}
 
-		const className = classnames( 'wp-block-embed', {
+		const className = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
@@ -52,7 +52,7 @@ const v1 = {
 			return null;
 		}
 
-		const embedClassName = classnames( 'wp-block-embed', {
+		const embedClassName = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		} );

package/src/embed/edit.js

@@ -18,7 +18,7 @@ import EmbedPreview from './embed-preview';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -249,7 +249,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	return (
 		<>

package/src/embed/edit.native.js

@@ -19,7 +19,7 @@ import EmbedLinkSettings from './embed-link-settings';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -246,7 +246,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	const isProviderPreviewable =
 		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||

package/src/embed/editor.scss

@@ -19,8 +19,6 @@
 }
 
 .wp-block-embed__learn-more {
-	margin-top: 1em;
-
 	@at-root .wp-block-post-content & {
 		a {
 			color: var(--wp-admin-theme-color);