@wordpress/block-library 8.33.0 → 8.35.0

package/src/group/editor.scss

@@ -48,55 +48,9 @@
 
 	// 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;
 	}
 }
 
-.wp-block-group__placeholder {
-	.wp-block-group-placeholder__variations {
-		list-style: none;
-		display: flex;
-		justify-content: center;
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-	}
-	.components-placeholder__instructions {
-		margin-bottom: 18px;
-	}
-	.wp-block-group-placeholder__variations svg {
-		fill: $gray-400 !important;
-	}
-	.wp-block-group-placeholder__variations svg:hover {
-		fill: var(--wp-admin-theme-color) !important;
-	}
-	.wp-block-group-placeholder__variations > li {
-		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
-		width: auto;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-		width: 44px;
-		height: 32px;
-		padding: 0;
-		&:hover {
-			box-shadow: none;
-		}
-	}
-	.components-placeholder {
-		min-height: auto;
-		padding: $grid-unit-30;
-		align-items: center;
-	}
-	.is-small,
-	.is-medium {
-		.wp-block-group-placeholder__variations > li {
-			margin: $grid-unit-15;
-		}
-	}
-}

package/src/group/index.js

@@ -22,14 +22,6 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		attributes: {
-			style: {
-				color: {
-					text: '#000000',
-					background: '#ffffff',
-				},
-			},
-		},
 		innerBlocks: [
 			{
 				name: 'core/paragraph',

package/src/group/placeholder.js

@@ -20,42 +20,41 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 		group: (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-row': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-stack': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 		'group-grid': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
-				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 	};
@@ -159,11 +158,12 @@ function GroupPlaceHolder( { name, onSelect } ) {
 					{ variations.map( ( variation ) => (
 						<li key={ variation.name }>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								icon={ getGroupPlaceholderIcons(
 									variation.name
 								) }
-								iconSize={ 44 }
+								iconSize={ 48 }
 								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }

package/src/group/style.scss

@@ -2,3 +2,8 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+// We need this so groups with negative margins overlap as expected.
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+	position: relative;
+}

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

package/src/image/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const v3 = {
 		const { url, alt, caption, align, href, width, height, id } =
 			attributes;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			'is-resized': width || height,
 		} );
@@ -329,7 +329,7 @@ const v4 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -499,7 +499,7 @@ const v5 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -681,7 +681,7 @@ const v6 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -691,7 +691,7 @@ const v6 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -883,7 +883,7 @@ const v7 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -893,7 +893,7 @@ const v7 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -1102,7 +1102,7 @@ const v8 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -1112,7 +1112,7 @@ const v8 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 

package/src/image/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -103,6 +103,7 @@ export function ImageEdit( {
 	onReplace,
 	context,
 	clientId,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const {
 		url = '',
@@ -290,7 +291,7 @@ export function ImageEdit( {
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
@@ -332,7 +333,7 @@ export function ImageEdit( {
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames( 'block-editor-media-placeholder', {
+				className={ clsx( 'block-editor-media-placeholder', {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
@@ -385,6 +386,7 @@ export function ImageEdit( {
 				context={ context }
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
+				parentLayoutType={ parentLayout?.type }
 			/>
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }

package/src/image/editor.scss

@@ -141,13 +141,19 @@ figure.wp-block-image:not(.wp-block) {
 	width: 100%;
 	overflow: hidden;
 
-	// This removes the border from the img within the image cropper so it
-	// can be applied to the cropper itself. This then allows the image to be
-	// cropped within the visual border providing more accurate editing and
-	// smoother UX.
-	.reactEasyCrop_Container .reactEasyCrop_Image {
-		border: none;
-		border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
 	}
 }
 

package/src/image/image.js

@@ -82,7 +82,8 @@ const ImageWrapper = ( { href, children } ) => {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
 				// Restore cursor style so it doesn't appear 'clickable'
-				// Safari needs the display property.
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
 				cursor: 'default',
 				display: 'inline',
 			} }
@@ -105,6 +106,7 @@ export default function Image( {
 	context,
 	clientId,
 	blockEditingMode,
+	parentLayoutType,
 } ) {
 	const {
 		url = '',
@@ -180,7 +182,8 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport;
+		isLargeViewport &&
+		parentLayoutType !== 'grid';
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -200,7 +203,9 @@ export default function Image( {
 			return;
 		}
 
-		if ( externalBlob ) return;
+		if ( externalBlob ) {
+			return;
+		}
 
 		window
 			// Avoid cache, which seems to help avoid CORS problems.

package/src/image/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		// All other align classes are handled by block supports.
 		// `{ align: 'none' }` is unique to transforms for the image block.
 		alignnone: 'none' === align,
@@ -49,7 +49,7 @@ export default function save( { attributes } ) {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const imageClasses = classnames( borderProps.className, {
+	const imageClasses = clsx( borderProps.className, {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 

package/src/image/style.scss

@@ -98,11 +98,9 @@
 		border-radius: 9999px;
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
-		// The stylelint override is necessary to use the SVG inline here.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			/* stylelint-disable */
+			/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-			/* stylelint-enable */
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;

package/src/image/view.js

@@ -174,7 +174,9 @@ const { state, actions, callbacks } = store(
 		},
 		callbacks: {
 			setOverlayStyles() {
-				if ( ! imageRef ) return;
+				if ( ! imageRef ) {
+					return;
+				}
 
 				let {
 					naturalWidth,

package/src/index.js

@@ -330,3 +330,5 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				.forEach( ( { init } ) => init() );
 	  }
 	: undefined;
+
+export { privateApis } from './private-apis';

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
@@ -383,7 +383,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'wp-block-latest-posts__list': true,
 			'is-grid': postLayout === 'grid',
 			'has-dates': displayPostDate,
@@ -416,13 +416,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const layoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'list' } ),
 			isActive: postLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'grid' } ),
 			isActive: postLayout === 'grid',
 		},
@@ -454,7 +454,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 					const { url: imageSourceUrl, alt: featuredImageAlt } =
 						getFeaturedImageDetails( post, featuredImageSizeSlug );
-					const imageClasses = classnames( {
+					const imageClasses = clsx( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]:
 							!! featuredImageAlign,

package/src/latest-posts/index.php

@@ -152,6 +152,7 @@ function render_block_core_latest_posts( $attributes ) {
 			 * […] is the default excerpt ending from wp_trim_excerpt() in Core.
 			 */
 			if ( str_ends_with( $trimmed_excerpt, ' […]' ) ) {
+				/** This filter is documented in wp-includes/formatting.php */
 				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
 				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );