@wordpress/block-library 9.15.1 → 9.17.0

package/src/image/index.php

@@ -149,18 +149,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$alt              = $p->get_attribute( 'alt' );
-	$img_uploaded_src = $p->get_attribute( 'src' );
-	$img_class_names  = $p->get_attribute( 'class' );
-	$img_styles       = $p->get_attribute( 'style' );
-	$img_width        = 'none';
-	$img_height       = 'none';
-	$aria_label       = __( 'Enlarge image' );
-
-	if ( $alt ) {
-		/* translators: %s: Image alt text. */
-		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
-	}
+	$alt               = $p->get_attribute( 'alt' );
+	$img_uploaded_src  = $p->get_attribute( 'src' );
+	$img_class_names   = $p->get_attribute( 'class' );
+	$img_styles        = $p->get_attribute( 'style' );
+	$img_width         = 'none';
+	$img_height        = 'none';
+	$aria_label        = __( 'Enlarge' );
+	$dialog_aria_label = __( 'Enlarged image' );
 
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
@@ -190,7 +186,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 					'targetWidth'      => $img_width,
 					'targetHeight'     => $img_height,
 					'scaleAttr'        => $block['attrs']['scale'] ?? false,
-					'ariaLabel'        => $aria_label,
+					'ariaLabel'        => $dialog_aria_label,
 					'alt'              => $alt,
 				),
 			),

package/src/image/style.scss

@@ -11,7 +11,7 @@
 		vertical-align: bottom;
 		box-sizing: border-box;
 
-		@media (prefers-reduced-motion: no-preference) {
+		@media not (prefers-reduced-motion) {
 			&.hide {
 				visibility: hidden;
 			}
@@ -167,7 +167,9 @@
 		text-align: center;
 		padding: 0;
 		border-radius: 4px;
-		transition: opacity 0.2s ease;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.2s ease;
+		}
 
 		&:focus-visible {
 			outline: 3px auto rgb(90 90 90 / 25%);
@@ -280,21 +282,29 @@
 	// or faster than the scrim to give a sense of depth.
 	&.active {
 		visibility: visible;
-		animation: both turn-on-visibility 0.25s;
+		@media not (prefers-reduced-motion) {
+			animation: both turn-on-visibility 0.25s;
+		}
 		img {
-			animation: both turn-on-visibility 0.35s;
+			@media not (prefers-reduced-motion) {
+				animation: both turn-on-visibility 0.35s;
+			}
 		}
 	}
 	&.show-closing-animation {
 		&:not(.active) {
-			animation: both turn-off-visibility 0.35s;
+			@media not (prefers-reduced-motion) {
+				animation: both turn-off-visibility 0.35s;
+			}
 			img {
-				animation: both turn-off-visibility 0.25s;
+				@media not (prefers-reduced-motion) {
+					animation: both turn-off-visibility 0.25s;
+				}
 			}
 		}
 	}
 
-	@media (prefers-reduced-motion: no-preference) {
+	@media not (prefers-reduced-motion) {
 		&.zoom {
 			&.active {
 				opacity: 1;

package/src/image/test/edit.native.js

@@ -62,7 +62,7 @@ Clipboard.getString.mockImplementation( () => clipboardPromise );
 beforeAll( () => {
 	registerCoreBlocks();
 
-	// Mock Image.getSize to avoid failed attempt to size non-existant image
+	// Mock Image.getSize to avoid failed attempt to size non-existent image
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 } );

package/src/image/test/transforms.native.js

@@ -15,12 +15,12 @@ const initialHtml = `
 <figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 
-const tranformsWithInnerBlocks = [ 'Gallery', 'Columns', 'Group' ];
+const transformsWithInnerBlocks = [ 'Gallery', 'Columns', 'Group' ];
 const nonMediaTransforms = [ 'File' ];
 const blockTransforms = [
 	'Cover',
 	'Media & Text',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 	...nonMediaTransforms,
 ];
 
@@ -31,7 +31,8 @@ describe( `${ block } block transformations`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const newBlock = await transformBlock( screen, block, blockTransform, {
 			isMediaBlock: ! nonMediaTransforms.includes( blockTransform ),
-			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
 		} );
 		expect( newBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/latest-comments/edit.js

@@ -4,13 +4,19 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	Disabled,
-	PanelBody,
 	RangeControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import ServerSideRender from '@wordpress/server-side-render';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Minimum number of comments a user can show using this block.
  *
@@ -36,49 +42,103 @@ export default function LatestComments( { attributes, setAttributes } ) {
 		},
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							commentsToShow: 5,
+							displayAvatar: true,
+							displayDate: true,
+							displayExcerpt: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => ! displayAvatar }
 						label={ __( 'Display avatar' ) }
-						checked={ displayAvatar }
-						onChange={ () =>
-							setAttributes( { displayAvatar: ! displayAvatar } )
+						onDeselect={ () =>
+							setAttributes( { displayAvatar: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display avatar' ) }
+							checked={ displayAvatar }
+							onChange={ () =>
+								setAttributes( {
+									displayAvatar: ! displayAvatar,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayDate }
 						label={ __( 'Display date' ) }
-						checked={ displayDate }
-						onChange={ () =>
-							setAttributes( { displayDate: ! displayDate } )
+						onDeselect={ () =>
+							setAttributes( { displayDate: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display date' ) }
+							checked={ displayDate }
+							onChange={ () =>
+								setAttributes( { displayDate: ! displayDate } )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayExcerpt }
 						label={ __( 'Display excerpt' ) }
-						checked={ displayExcerpt }
-						onChange={ () =>
-							setAttributes( {
-								displayExcerpt: ! displayExcerpt,
-							} )
+						onDeselect={ () =>
+							setAttributes( { displayExcerpt: true } )
 						}
-					/>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display excerpt' ) }
+							checked={ displayExcerpt }
+							onChange={ () =>
+								setAttributes( {
+									displayExcerpt: ! displayExcerpt,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => commentsToShow !== 5 }
 						label={ __( 'Number of comments' ) }
-						value={ commentsToShow }
-						onChange={ ( value ) =>
-							setAttributes( { commentsToShow: value } )
+						onDeselect={ () =>
+							setAttributes( { commentsToShow: 5 } )
 						}
-						min={ MIN_COMMENTS }
-						max={ MAX_COMMENTS }
-						required
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Number of comments' ) }
+							value={ commentsToShow }
+							onChange={ ( value ) =>
+								setAttributes( { commentsToShow: value } )
+							}
+							min={ MIN_COMMENTS }
+							max={ MAX_COMMENTS }
+							required
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<Disabled>
 				<ServerSideRender

package/src/latest-posts/constants.js

@@ -1,3 +1,4 @@
 export const MIN_EXCERPT_LENGTH = 10;
 export const MAX_EXCERPT_LENGTH = 100;
 export const MAX_POSTS_COLUMNS = 6;
+export const DEFAULT_EXCERPT_LENGTH = 55;

package/src/latest-posts/edit.js

@@ -17,6 +17,8 @@ import {
 	ToolbarGroup,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
@@ -49,7 +51,9 @@ import {
 	MIN_EXCERPT_LENGTH,
 	MAX_EXCERPT_LENGTH,
 	MAX_POSTS_COLUMNS,
+	DEFAULT_EXCERPT_LENGTH,
 } from './constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /**
  * Module Constants
@@ -77,6 +81,8 @@ function getFeaturedImageDetails( post, size ) {
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const instanceId = useInstanceId( LatestPostsEdit );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const {
 		postsToShow,
 		order,
@@ -227,68 +233,137 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Post content' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Post content' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayPostContent: false,
+						displayPostContentRadio: 'excerpt',
+						excerptLength: DEFAULT_EXCERPT_LENGTH,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayPostContent }
 					label={ __( 'Post content' ) }
-					checked={ displayPostContent }
-					onChange={ ( value ) =>
-						setAttributes( { displayPostContent: value } )
+					onDeselect={ () =>
+						setAttributes( { displayPostContent: false } )
 					}
-				/>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Post content' ) }
+						checked={ displayPostContent }
+						onChange={ ( value ) =>
+							setAttributes( { displayPostContent: value } )
+						}
+					/>
+				</ToolsPanelItem>
 				{ displayPostContent && (
-					<RadioControl
+					<ToolsPanelItem
+						hasValue={ () => displayPostContentRadio !== 'excerpt' }
 						label={ __( 'Show' ) }
-						selected={ displayPostContentRadio }
-						options={ [
-							{ label: __( 'Excerpt' ), value: 'excerpt' },
-							{
-								label: __( 'Full post' ),
-								value: 'full_post',
-							},
-						] }
-						onChange={ ( value ) =>
+						onDeselect={ () =>
 							setAttributes( {
-								displayPostContentRadio: value,
+								displayPostContentRadio: 'excerpt',
 							} )
 						}
-					/>
+						isShownByDefault
+					>
+						<RadioControl
+							label={ __( 'Show' ) }
+							selected={ displayPostContentRadio }
+							options={ [
+								{ label: __( 'Excerpt' ), value: 'excerpt' },
+								{
+									label: __( 'Full post' ),
+									value: 'full_post',
+								},
+							] }
+							onChange={ ( value ) =>
+								setAttributes( {
+									displayPostContentRadio: value,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 				) }
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+						<ToolsPanelItem
+							hasValue={ () =>
+								excerptLength !== DEFAULT_EXCERPT_LENGTH
+							}
 							label={ __( 'Max number of words' ) }
-							value={ excerptLength }
-							onChange={ ( value ) =>
-								setAttributes( { excerptLength: value } )
+							onDeselect={ () =>
+								setAttributes( {
+									excerptLength: DEFAULT_EXCERPT_LENGTH,
+								} )
 							}
-							min={ MIN_EXCERPT_LENGTH }
-							max={ MAX_EXCERPT_LENGTH }
-						/>
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Max number of words' ) }
+								value={ excerptLength }
+								onChange={ ( value ) =>
+									setAttributes( { excerptLength: value } )
+								}
+								min={ MIN_EXCERPT_LENGTH }
+								max={ MAX_EXCERPT_LENGTH }
+							/>
+						</ToolsPanelItem>
 					) }
-			</PanelBody>
+			</ToolsPanel>
 
-			<PanelBody title={ __( 'Post meta' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Post meta' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayAuthor: false,
+						displayPostDate: false,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayAuthor }
 					label={ __( 'Display author name' ) }
-					checked={ displayAuthor }
-					onChange={ ( value ) =>
-						setAttributes( { displayAuthor: value } )
+					onDeselect={ () =>
+						setAttributes( { displayAuthor: false } )
 					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display author name' ) }
+						checked={ displayAuthor }
+						onChange={ ( value ) =>
+							setAttributes( { displayAuthor: value } )
+						}
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => !! displayPostDate }
 					label={ __( 'Display post date' ) }
-					checked={ displayPostDate }
-					onChange={ ( value ) =>
-						setAttributes( { displayPostDate: value } )
+					onDeselect={ () =>
+						setAttributes( { displayPostDate: false } )
 					}
-				/>
-			</PanelBody>
-
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display post date' ) }
+						checked={ displayPostDate }
+						onChange={ ( value ) =>
+							setAttributes( { displayPostDate: value } )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 			<PanelBody title={ __( 'Featured image' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom

package/src/list/test/edit.native.js

@@ -50,7 +50,7 @@ describe( 'List block', () => {
 		await triggerBlockListLayout( listBlock );
 
 		// Get List item
-		const listItemBlock = await getBlock( screen, 'List item' );
+		const listItemBlock = await getBlock( screen, 'List Item' );
 		fireEvent.press( listItemBlock );
 
 		expect( listItemBlock ).toBeVisible();
@@ -75,7 +75,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -124,7 +124,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -157,9 +157,9 @@ describe( 'List block', () => {
 		fireEvent.press( listBlock );
 		await triggerBlockListLayout( listBlock );
 
-		// Select Secont List Item block
+		// Select Second List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -169,7 +169,7 @@ describe( 'List block', () => {
 
 		// Await recently indented list item layout
 		const [ listItemBlock1 ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		await triggerBlockListLayout( listItemBlock1 );
 
@@ -203,7 +203,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -217,7 +217,7 @@ describe( 'List block', () => {
 
 		// Select nested List Item block
 		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -500,7 +500,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -560,7 +560,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 

package/src/list-item/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/list-item",
-	"title": "List item",
+	"title": "List Item",
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],

package/src/list-item/edit.native.js

@@ -54,7 +54,7 @@ export default function ListItemEdit( {
 				getBlockParentsByBlockName,
 				getBlockRootClientId,
 			} = select( blockEditorStore );
-			const currentIdentationLevel = getBlockParentsByBlockName(
+			const currentIndentationLevel = getBlockParentsByBlockName(
 				clientId,
 				'core/list-item',
 				true
@@ -73,7 +73,7 @@ export default function ListItemEdit( {
 			return {
 				blockIndex: currentBlockIndex,
 				hasInnerBlocks: blockWithInnerBlocks,
-				indentationLevel: currentIdentationLevel,
+				indentationLevel: currentIndentationLevel,
 				numberOfListItems: totalListItems,
 				ordered: isOrdered,
 				reversed: isReversed,

package/src/media-text/edit.native.js

@@ -218,7 +218,7 @@ class MediaTextEdit extends Component {
 				? ( containerWidth * mediaWidth ) / 100 -
 				  styles.mediaAreaPadding.width
 				: containerWidth;
-		const aligmentStyles =
+		const alignmentStyles =
 			styles[
 				`is-vertically-aligned-${ verticalAlignment || 'center' }`
 			];
@@ -244,7 +244,7 @@ class MediaTextEdit extends Component {
 					imageFill,
 					focalPoint,
 					isSelected,
-					aligmentStyles,
+					alignmentStyles,
 					shouldStack,
 				} }
 			/>

package/src/media-text/media-container.native.js

@@ -171,7 +171,7 @@ class MediaContainer extends Component {
 	renderImage( params, openMediaOptions ) {
 		const { isUploadInProgress } = this.state;
 		const {
-			aligmentStyles,
+			alignmentStyles,
 			focalPoint,
 			imageFill,
 			isMediaSelected,
@@ -205,7 +205,7 @@ class MediaContainer extends Component {
 						style={ [
 							imageFill && styles.imageCropped,
 							styles.mediaImageContainer,
-							! isUploadInProgress && aligmentStyles,
+							! isUploadInProgress && alignmentStyles,
 						] }
 					>
 						<Image
@@ -232,7 +232,7 @@ class MediaContainer extends Component {
 
 	renderVideo( params ) {
 		const {
-			aligmentStyles,
+			alignmentStyles,
 			mediaUrl,
 			isSelected,
 			getStylesFromColorScheme,
@@ -261,7 +261,7 @@ class MediaContainer extends Component {
 					onPress={ this.onMediaPressed }
 					disabled={ ! isSelected }
 				>
-					<View style={ [ styles.videoContainer, aligmentStyles ] }>
+					<View style={ [ styles.videoContainer, alignmentStyles ] }>
 						<View
 							style={ [
 								styles.videoContent,