@wordpress/block-library 8.34.0 → 8.35.0

package/src/button/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -257,7 +257,7 @@ function ButtonEdit( props ) {
 		<>
 			<div
 				{ ...blockProps }
-				className={ classnames( blockProps.className, {
+				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
@@ -274,7 +274,7 @@ function ButtonEdit( props ) {
 						} )
 					}
 					withoutInteractiveFormatting
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wp-block-button__link',
 						colorProps.className,
@@ -293,12 +293,6 @@ function ButtonEdit( props ) {
 						...spacingProps.style,
 						...shadowProps.style,
 					} }
-					onSplit={ ( value ) =>
-						createBlock( 'core/button', {
-							...attributes,
-							text: value,
-						} )
-					}
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }
 					identifier="text"

package/src/button/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function save( { attributes, className } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
-	const buttonClasses = classnames(
+	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
@@ -65,7 +65,7 @@ export default function save( { attributes, className } ) {
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
 
-	const wrapperClasses = classnames( className, {
+	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );

package/src/buttons/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -63,7 +63,7 @@ const deprecated = [
 			return (
 				<div
 					{ ...useBlockProps.save( {
-						className: classnames( {
+						className: clsx( {
 							[ `is-content-justification-${ contentJustification }` ]:
 								contentJustification,
 							'is-vertical': orientation === 'vertical',

package/src/buttons/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ const DEFAULT_BLOCK = {
 function ButtonsEdit( { attributes, className } ) {
 	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );

package/src/buttons/editor.scss

@@ -33,9 +33,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,

package/src/buttons/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save( { attributes, className } ) {
 	const { fontSize, style } = attributes;
 	const blockProps = useBlockProps.save( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );

package/src/buttons/style.scss

@@ -55,9 +55,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,

package/src/categories/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,7 +127,7 @@ export default function CategoriesEdit( {
 			? 'ul'
 			: 'div';
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'wp-block-categories-list':
 			!! categories?.length && ! displayAsDropdown && ! isResolving,
 		'wp-block-categories-dropdown':

package/src/code/theme.native.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable font-family-no-missing-generic-family-keyword -- iOS will use the Menlo typeface and Android will use monospace, no need for a generic family keyword. */
 
 .blockCode {
 	font-family: $default-monospace-font;

package/src/column/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { verticalAlignment, width } = attributes;
 
-			const wrapperClasses = classnames( {
+			const wrapperClasses = clsx( {
 				[ `is-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );

package/src/column/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ function ColumnEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const classes = classnames( 'block-core-columns', {
+	const classes = clsx( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(

package/src/column/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
 
-	const wrapperClasses = classnames( {
+	const wrapperClasses = clsx( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 

package/src/columns/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export default [
 
 			const textClass = getColorClassName( 'color', textColor );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-text-color': textColor || customTextColor,
 				[ backgroundClass ]: backgroundClass,
@@ -210,7 +210,7 @@ export default [
 		save( { attributes } ) {
 			const { verticalAlignment, columns } = attributes;
 
-			const wrapperClasses = classnames( `has-${ columns }-columns`, {
+			const wrapperClasses = clsx( `has-${ columns }-columns`, {
 				[ `are-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );

package/src/columns/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -192,7 +192,7 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );

package/src/columns/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );

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

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

package/src/comment-content/edit.js

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

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/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 */
 	}
 }