@wordpress/block-library 8.34.0 → 9.0.0

package/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Paragraph block should render without crashing and match snapshot 1`] = `
 <View
   style={

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

@@ -32,7 +32,7 @@ exports[`Paragraph block transforms to Heading block 1`] = `
 
 exports[`Paragraph 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/paragraph/test/edit.native.js

@@ -64,6 +64,32 @@ describe( 'Paragraph block', () => {
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
+	it( 'should prevent deleting the first Paragraph block when pressing backspace at the start', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

package/src/pattern/edit.js

@@ -43,7 +43,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const [ hasRecursionError, setHasRecursionError ] = useState( false );
 	const parsePatternDependencies = useParsePatternDependencies();
 
-	// Duplicated in packages/edit-site/src/components/start-template-options/index.js.
+	// Duplicated in packages/editor/src/components/start-template-options/index.js.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
 			block.innerBlocks.find(

package/src/post-author/edit.js

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

package/src/post-author-biography/edit.js

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

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

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

package/src/post-comments-count/edit.js

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

package/src/post-comments-form/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 PostCommentsFormEdit( {
 	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		'aria-describedby': instanceIdDesc,

package/src/post-comments-form/form.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,7 @@ const CommentsFormPlaceholder = () => {
 					<input
 						name="submit"
 						type="submit"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-button__link',
 							__experimentalGetElementClassName( 'button' )
 						) }

package/src/post-comments-link/edit.js

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

package/src/post-date/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ export default function PostDateEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),

package/src/post-excerpt/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -71,7 +71,7 @@ export default function PostExcerptEditor( {
 		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -141,7 +141,7 @@ export default function PostExcerptEditor( {
 			withoutInteractiveFormatting
 		/>
 	);
-	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
+	const excerptClassName = clsx( 'wp-block-post-excerpt__excerpt', {
 		'is-inline': ! showMoreOnNewLine,
 	} );
 

package/src/post-featured-image/dimension-controls.js

@@ -57,7 +57,13 @@ const DimensionControls = ( {
 	setAttributes,
 	media,
 } ) => {
-	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
+		useSettings(
+			'spacing.units',
+			'dimensions.aspectRatios.default',
+			'dimensions.aspectRatios.theme',
+			'dimensions.defaultAspectRatios'
+		);
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
@@ -93,6 +99,28 @@ const DimensionControls = ( {
 	const showScaleControl =
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+	];
+
 	return (
 		<>
 			<ToolsPanelItem
@@ -109,41 +137,7 @@ const DimensionControls = ( {
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
-					options={ [
-						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
-						{
-							label: __( 'Original' ),
-							value: 'auto',
-						},
-						{
-							label: __( 'Square' ),
-							value: '1',
-						},
-						{
-							label: __( '16:9' ),
-							value: '16/9',
-						},
-						{
-							label: __( '4:3' ),
-							value: '4/3',
-						},
-						{
-							label: __( '3:2' ),
-							value: '3/2',
-						},
-						{
-							label: __( '9:16' ),
-							value: '9/16',
-						},
-						{
-							label: __( '3:4' ),
-							value: '3/4',
-						},
-						{
-							label: __( '2:3' ),
-							value: '2/3',
-						},
-					] }
+					options={ aspectRatioOptions }
 					onChange={ ( nextAspectRatio ) =>
 						setAttributes( { aspectRatio: nextAspectRatio } )
 					}

package/src/post-featured-image/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function PostFeaturedImageEdit( {
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
-		className: classnames( {
+		className: clsx( {
 			'is-transient': temporaryURL,
 		} ),
 	} );
@@ -144,7 +144,7 @@ export default function PostFeaturedImageEdit( {
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames(
+				className={ clsx(
 					'block-editor-media-placeholder',
 					borderProps.className
 				) }

package/src/post-featured-image/overlay.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ const Overlay = ( { attributes, overlayColor } ) => {
 	return (
 		<span
 			aria-hidden="true"
-			className={ classnames(
+			className={ clsx(
 				'wp-block-post-featured-image__overlay',
 				dimRatioToClass( dimRatio ),
 				{

package/src/post-navigation-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ export default function PostNavigationLinkEdit( {
 
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/post-template/edit.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	BlockControls,
 	BlockContextProvider,
@@ -29,7 +29,7 @@ const TEMPLATE = [
 
 function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: classnames( 'wp-block-post', classList ) },
+		{ className: clsx( 'wp-block-post', classList ) },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -45,7 +45,7 @@ function PostTemplateBlockPreview( {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: classnames( 'wp-block-post', classList ),
+			className: clsx( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -220,7 +220,7 @@ export default function PostTemplateEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( __unstableLayoutClassNames, {
+		className: clsx( __unstableLayoutClassNames, {
 			[ `columns-${ columnCount }` ]:
 				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
 		} ),
@@ -246,13 +246,13 @@ export default function PostTemplateEdit( {
 	const displayLayoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Post template block display setting' ),
 			onClick: () => setDisplayLayout( { type: 'default' } ),
 			isActive: layoutType === 'default' || layoutType === 'constrained',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Post template block display setting' ),
 			onClick: () =>
 				setDisplayLayout( {
 					type: 'grid',

package/src/post-template/style.scss

@@ -5,10 +5,6 @@
 	list-style: none;
 	padding: 0;
 
-	// Unset background colors that can be inherited from Global Styles with extra specificity.
-	&.wp-block-post-template {
-		background: none;
-	}
 	// These rules no longer apply but should be kept for backwards compatibility.
 	&.is-flex-container {
 		flex-direction: row;

package/src/post-terms/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -65,7 +65,7 @@ export default function PostTermsEdit( {
 	const hasPost = postId && postType;
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			[ `taxonomy-${ term }` ]: term,
 		} ),

package/src/post-time-to-read/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 		const minutesToRead = Math.max(
 			1,
 			Math.round(
-				wordCount( content, wordCountType ) / AVERAGE_READING_RATE
+				wordCount( content || '', wordCountType ) / AVERAGE_READING_RATE
 			)
 		);
 
@@ -78,7 +78,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 	}, [ contentStructure, blocks ] );
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/post-title/edit.js

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

package/src/pullquote/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ const v5 = {
 		return (
 			<figure
 				{ ...useBlockProps.save( {
-					className: classnames( {
+					className: clsx( {
 						[ `has-text-align-${ textAlign }` ]: textAlign,
 					} ),
 				} ) }
@@ -145,7 +145,7 @@ const v4 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -164,7 +164,7 @@ const v4 = {
 			'color',
 			textColor
 		);
-		const blockquoteClasses = classnames( {
+		const blockquoteClasses = clsx( {
 			'has-text-color': textColor || customTextColor,
 			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 		} );
@@ -275,7 +275,7 @@ const v3 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -308,7 +308,7 @@ const v3 = {
 		);
 		const blockquoteClasses =
 			( textColor || customTextColor ) &&
-			classnames( 'has-text-color', {
+			clsx( 'has-text-color', {
 				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 			} );
 
@@ -446,7 +446,7 @@ const v2 = {
 		);
 		const blockquoteClasses =
 			textColor || customTextColor
-				? classnames( 'has-text-color', {
+				? clsx( 'has-text-color', {
 						[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 				  } )
 				: undefined;

package/src/pullquote/edit.js

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

package/src/pullquote/editor.scss

@@ -1,4 +1,6 @@
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {
 		font-size: 32px;

package/src/pullquote/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ export default function save( { attributes } ) {
 	return (
 		<figure
 			{ ...useBlockProps.save( {
-				className: classnames( {
+				className: clsx( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ),
 			} ) }

package/src/pullquote/style.scss

@@ -2,6 +2,8 @@
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
+	margin: 0 0 1em 0;
+	padding: 4em 0;
 
 	p,
 	blockquote,
@@ -35,12 +37,6 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout and global styles.
-:where(.wp-block-pullquote) {
-	margin: 0 0 1em 0;
-	padding: 4em 0;
-}
-
 // Ensure that we are reasonably specific to override theme defaults.
 .wp-block-pullquote.has-text-align-left blockquote {
 	text-align: left;
@@ -52,6 +48,8 @@
 }
 
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {

package/src/pullquote/theme.scss

@@ -1,11 +1,9 @@
-:where(.wp-block-pullquote) {
+.wp-block-pullquote {
 	border-top: 4px solid currentColor;
 	border-bottom: 4px solid currentColor;
 	margin-bottom: 1.75em;
 	color: currentColor;
-}
 
-.wp-block-pullquote {
 	cite,
 	footer,
 	&__citation {