@wordpress/block-library 8.33.0 → 8.35.0

package/src/embed/embed-placeholder.js

@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Button, Placeholder, ExternalLink } from '@wordpress/components';
+import {
+	Button,
+	Placeholder,
+	ExternalLink,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( {
@@ -47,17 +53,23 @@ const EmbedPlaceholder = ( {
 				</ExternalLink>
 			</div>
 			{ cannotEmbed && (
-				<div className="components-placeholder__error">
+				<VStack spacing={ 3 } className="components-placeholder__error">
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<Button variant="secondary" onClick={ tryAgain }>
-						{ _x( 'Try again', 'button label' ) }
-					</Button>{ ' ' }
-					<Button variant="secondary" onClick={ fallback }>
-						{ _x( 'Convert to link', 'button label' ) }
-					</Button>
-				</div>
+					<HStack
+						expanded={ false }
+						spacing={ 3 }
+						justify="flex-start"
+					>
+						<Button variant="secondary" onClick={ tryAgain }>
+							{ _x( 'Try again', 'button label' ) }
+						</Button>{ ' ' }
+						<Button variant="secondary" onClick={ fallback }>
+							{ _x( 'Convert to link', 'button label' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			) }
 		</Placeholder>
 	);

package/src/embed/embed-preview.js

@@ -6,7 +6,7 @@ import { getPhotoHtml } from './util';
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -82,7 +82,7 @@ class EmbedPreview extends Component {
 			__( 'Embedded content from %s' ),
 			parsedHostBaseUrl
 		);
-		const sandboxClassnames = classnames(
+		const sandboxClassnames = clsx(
 			type,
 			className,
 			'wp-block-embed__wrapper'
@@ -116,7 +116,7 @@ class EmbedPreview extends Component {
 
 		return (
 			<figure
-				className={ classnames( className, 'wp-block-embed', {
+				className={ clsx( className, 'wp-block-embed', {
 					'is-type-video': 'video' === type,
 				} ) }
 			>

package/src/embed/embed-preview.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback } from 'react-native';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -86,7 +86,7 @@ const EmbedPreview = ( {
 		__( 'Embedded content from %s' ),
 		parsedHostBaseUrl
 	);
-	const sandboxClassnames = classnames(
+	const sandboxClassnames = clsx(
 		type,
 		className,
 		'wp-block-embed__wrapper'

package/src/embed/icons.js

@@ -178,3 +178,12 @@ export const embedPocketCastsIcon = {
 		</SVG>
 	),
 };
+
+export const embedBlueskyIcon = (
+	<SVG viewBox="0 0 24 24">
+		<Path
+			fill="#0a7aff"
+			d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"
+		/>
+	</SVG>
+);

package/src/embed/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function save( { attributes } ) {
 		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,

package/src/embed/util.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 import memoize from 'memize';
 
 /**
@@ -97,7 +97,9 @@ export const createUpgradedEmbedBlock = (
 	const { preview, attributes = {} } = props;
 	const { url, providerNameSlug, type, ...restAttributes } = attributes;
 
-	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return;
+	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) {
+		return;
+	}
 
 	const matchedBlock = findMoreSuitableBlock( url );
 
@@ -175,17 +177,21 @@ export const removeAspectRatioClasses = ( existingClassNames ) => {
 	if ( ! existingClassNames ) {
 		// Avoids extraneous work and also, by returning the same value as
 		// received, ensures the post is not dirtied by a change of the block
-		// attribute from `undefined` to an emtpy string.
+		// attribute from `undefined` to an empty string.
 		return existingClassNames;
 	}
 	const aspectRatioClassNames = ASPECT_RATIOS.reduce(
 		( accumulator, { className } ) => {
-			accumulator[ className ] = false;
+			accumulator.push( className );
 			return accumulator;
 		},
-		{ 'wp-has-aspect-ratio': false }
+		[ 'wp-has-aspect-ratio' ]
 	);
-	return classnames( existingClassNames, aspectRatioClassNames );
+	let outputClassNames = existingClassNames;
+	for ( const className of aspectRatioClassNames ) {
+		outputClassNames = outputClassNames.replace( className, '' );
+	}
+	return outputClassNames.trim();
 };
 
 /**
@@ -228,7 +234,7 @@ export function getClassNames(
 					return removeAspectRatioClasses( existingClassNames );
 				}
 				// Close aspect ratio match found.
-				return classnames(
+				return clsx(
 					removeAspectRatioClasses( existingClassNames ),
 					potentialRatio.className,
 					'wp-has-aspect-ratio'

package/src/embed/variations.js

@@ -27,6 +27,7 @@ import {
 	embedPinterestIcon,
 	embedWolframIcon,
 	embedPocketCastsIcon,
+	embedBlueskyIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -360,6 +361,14 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
 		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
 	},
+	{
+		name: 'bluesky',
+		title: 'Bluesky',
+		icon: embedBlueskyIcon,
+		description: __( 'Embed a Bluesky post.' ),
+		patterns: [ /^https?:\/\/bsky\.app\/profile\/.+\/post\/.+/i ],
+		attributes: { providerNameSlug: 'bluesky' },
+	},
 ];
 
 /**
@@ -368,7 +377,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.providerNameSlug ===
 		variationAttributes.providerNameSlug;

package/src/embed/wp-embed-preview.js

@@ -20,10 +20,14 @@ export default function WpEmbedPreview( { html } ) {
 		const iframe = doc.querySelector( 'iframe' );
 		const iframeProps = {};
 
-		if ( ! iframe ) return iframeProps;
+		if ( ! iframe ) {
+			return iframeProps;
+		}
 
 		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
-			if ( name === 'style' ) return;
+			if ( name === 'style' ) {
+				return;
+			}
 			iframeProps[ attributeMap[ name ] || name ] = value;
 		} );
 

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/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,
 			} );