@wordpress/block-library 8.34.0 → 8.35.0

package/src/file/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,7 +127,7 @@ const v3 = {
 					{ showDownloadButton && (
 						<a
 							href={ href }
-							className={ classnames(
+							className={ clsx(
 								'wp-block-file__button',
 								__experimentalGetElementClassName( 'button' )
 							) }

package/src/file/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -165,7 +165,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const attachmentPage = media && media.link;
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
 			{
 				'is-transient': isBlobURL( href ),
@@ -283,7 +283,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 								identifier="downloadButtonText"
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ classnames(
+								className={ clsx(
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'

package/src/file/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className={ classnames(
+						className={ clsx(
 							'wp-block-file__button',
 							__experimentalGetElementClassName( 'button' )
 						) }

package/src/form-input/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import removeAccents from 'remove-accents';
 
 /**
@@ -101,7 +101,7 @@ const v1 = {
 			...colorProps.style,
 		};
 
-		const inputClasses = classNames(
+		const inputClasses = clsx(
 			'wp-block-form-input__input',
 			colorProps.className,
 			borderProps.className
@@ -115,7 +115,7 @@ const v1 = {
 		/* eslint-disable jsx-a11y/label-has-associated-control */
 		return (
 			<label
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>

package/src/form-input/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -83,7 +83,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 				{ controls }
 				<input
 					type="hidden"
-					className={ classNames(
+					className={ clsx(
 						className,
 						'wp-block-form-input__input',
 						colorProps.className,
@@ -103,7 +103,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<div { ...blockProps }>
 			{ controls }
 			<span
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
@@ -120,7 +120,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 				/>
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
-					className={ classNames(
+					className={ clsx(
 						className,
 						'wp-block-form-input__input',
 						colorProps.className,

package/src/form-input/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import removeAccents from 'remove-accents';
 
 /**
@@ -46,7 +46,7 @@ export default function save( { attributes } ) {
 		...colorProps.style,
 	};
 
-	const inputClasses = classNames(
+	const inputClasses = clsx(
 		'wp-block-form-input__input',
 		colorProps.className,
 		borderProps.className
@@ -63,7 +63,7 @@ export default function save( { attributes } ) {
 		<div { ...blockProps }>
 			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
 			<label
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>

package/src/form-submission-notification/edit.js

@@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TEMPLATE = [
 	[
@@ -29,7 +29,7 @@ const TEMPLATE = [
 const Edit = ( { attributes, clientId } ) => {
 	const { type } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-form-submission-notification', {
+		className: clsx( 'wp-block-form-submission-notification', {
 			[ `form-notification-type-${ type }` ]: type,
 		} ),
 	} );

package/src/form-submission-notification/save.js

@@ -6,7 +6,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const { type } = attributes;
@@ -15,12 +15,9 @@ export default function save( { attributes } ) {
 		<div
 			{ ...useInnerBlocksProps.save(
 				useBlockProps.save( {
-					className: classnames(
-						'wp-block-form-submission-notification',
-						{
-							[ `form-notification-type-${ type }` ]: type,
-						}
-					),
+					className: clsx( 'wp-block-form-submission-notification', {
+						[ `form-notification-type-${ type }` ]: type,
+					} ),
 				} )
 			) }
 		/>

package/src/gallery/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -228,7 +228,7 @@ const v7 = {
 	save( { attributes } ) {
 		const { caption, columns, imageCrop } = attributes;
 
-		const className = classnames( 'has-nested-images', {
+		const className = clsx( 'has-nested-images', {
 			[ `columns-${ columns }` ]: columns !== undefined,
 			[ `columns-default` ]: columns === undefined,
 			'is-cropped': imageCrop,
@@ -1061,7 +1061,7 @@ const v1 = {
 			imageCrop,
 			linkTo,
 		} = attributes;
-		const className = classnames( `columns-${ columns }`, {
+		const className = clsx( `columns-${ columns }`, {
 			alignnone: align === 'none',
 			'is-cropped': imageCrop,
 		} );

package/src/gallery/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -488,7 +488,7 @@ function GalleryEdit( props ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( className, 'has-nested-images' ),
+		className: clsx( className, 'has-nested-images' ),
 	} );
 
 	const nativeInnerBlockProps = Platform.isNative && {

package/src/gallery/gallery.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Gallery( props ) {
 	return (
 		<figure
 			{ ...blockProps }
-			className={ classnames(
+			className={ clsx(
 				blockProps.className,
 				layoutClassNames,
 				'blocks-gallery-grid',

package/src/gallery/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 
 	const { caption, columns, imageCrop } = attributes;
 
-	const className = classnames( 'has-nested-images', {
+	const className = clsx( 'has-nested-images', {
 		[ `columns-${ columns }` ]: columns !== undefined,
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
@@ -40,7 +40,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className={ classnames(
+					className={ clsx(
 						'blocks-gallery-caption',
 						__experimentalGetElementClassName( 'caption' )
 					) }

package/src/gallery/test/helpers.native.js

@@ -65,9 +65,9 @@ export const initializeWithGalleryBlock = async ( {
 /**
  * Gets a gallery item within a Gallery block.
  *
- * @param {HTMLElement} galleryBlock Gallery block instance.
- * @param {number}      rowIndex     Row position within the Gallery block.
- * @return {HTMLElement} Gallery item.
+ * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
+ * @param {number}                                          rowIndex     Row position within the Gallery block.
+ * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
  */
 export const getGalleryItem = ( galleryBlock, rowIndex ) =>
 	getInnerBlock( galleryBlock, 'Image', { rowIndex } );

package/src/gallery/v1/gallery-image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -192,7 +192,7 @@ class GalleryImage extends Component {
 			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 		);
 
-		const className = classnames( {
+		const className = clsx( {
 			'is-selected': isSelected,
 			'is-transient': isBlobURL( url ),
 		} );

package/src/gallery/v1/gallery.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export const Gallery = ( props ) => {
 	return (
 		<figure
 			{ ...blockProps }
-			className={ classnames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				[ `align${ align }` ]: align,
 				[ `columns-${ columns }` ]: columns,
 				'is-cropped': imageCrop,
@@ -97,7 +97,7 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className={ classnames(
+				className={ clsx(
 					'blocks-gallery-caption',
 					__experimentalGetElementClassName( 'caption' )
 				) }

package/src/gallery/v1/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className={ classnames(
+										className={ clsx(
 											'blocks-gallery-item__caption',
 											__experimentalGetElementClassName(
 												'caption'
@@ -86,7 +86,7 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className={ classnames(
+					className={ clsx(
 						'blocks-gallery-caption',
 						__experimentalGetElementClassName( 'caption' )
 					) }

package/src/group/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -201,7 +201,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, textClass, {
+			const className = clsx( backgroundClass, textClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -257,7 +257,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -301,7 +301,7 @@ const deprecated = [
 				'background-color',
 				backgroundColor
 			);
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
 

package/src/group/editor.scss

@@ -48,7 +48,8 @@
 
 	// Let the parent be selectable in the placeholder area.
 	pointer-events: none;
-	.block-editor-inserter {
+	.block-editor-inserter,
+	.block-editor-button-block-appender {
 		pointer-events: all;
 	}
 }

package/src/heading/block.json

@@ -29,6 +29,7 @@
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"className": true,
+		"splitting": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/heading/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -83,7 +83,7 @@ const v1 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 		} );
 
@@ -119,7 +119,7 @@ const v2 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 			[ `has-text-align-${ align }` ]: align,
 		} );
@@ -157,7 +157,7 @@ const v3 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 			'has-text-color': textColor || customTextColor,
 			[ `has-text-align-${ align }` ]: align,
@@ -200,7 +200,7 @@ const v4 = {
 		const { align, content, level } = attributes;
 		const TagName = 'h' + level;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 
@@ -273,7 +273,7 @@ const v5 = {
 		const { textAlign, content, level } = attributes;
 		const TagName = 'h' + level;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} );
 

package/src/heading/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -36,7 +35,7 @@ function HeadingEdit( {
 	const { textAlign, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
@@ -114,26 +113,6 @@ function HeadingEdit( {
 				value={ content }
 				onChange={ onContentChange }
 				onMerge={ mergeBlocks }
-				onSplit={ ( value, isOriginal ) => {
-					let block;
-
-					if ( isOriginal || value ) {
-						block = createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} else {
-						block = createBlock(
-							getDefaultBlockName() ?? 'core/heading'
-						);
-					}
-
-					if ( isOriginal ) {
-						block.clientId = clientId;
-					}
-
-					return block;
-				} }
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				placeholder={ placeholder || __( 'Heading' ) }

package/src/heading/edit.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function HeadingEdit( {
 	const { textAlign, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,

package/src/heading/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ export default function save( { attributes } ) {
 	const { textAlign, content, level } = attributes;
 	const TagName = 'h' + level;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 

package/src/heading/test/__snapshots__/transforms.native.js.snap

@@ -20,7 +20,7 @@ exports[`Heading block transforms to Group block 1`] = `
 
 exports[`Heading block transforms to List block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Example text</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"

package/src/home-link/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 HomeEdit( { attributes, setAttributes, context } ) {
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
 			'has-background': !! backgroundColor || !! style?.color?.background,

package/src/html/edit.js

@@ -45,14 +45,12 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
-						className="components-tab-button"
 						isPressed={ ! isPreview }
 						onClick={ switchToHTML }
 					>
 						HTML
 					</ToolbarButton>
 					<ToolbarButton
-						className="components-tab-button"
 						isPressed={ isPreview }
 						onClick={ switchToPreview }
 					>