@wordpress/block-library 9.15.1 → 9.16.0

package/src/gallery/use-get-new-images.js

@@ -56,7 +56,7 @@ export default function useGetNewImages( images, imageData ) {
 						currentImage.clientId === image.clientId
 				) &&
 				imageData?.find( ( img ) => img.id === image.id ) &&
-				! image.fromSavedConent
+				! image.fromSavedContent
 		);
 
 		if ( imagesUpdated || newImages?.length > 0 ) {

package/src/image/block.json

@@ -4,7 +4,14 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"postId",
+		"postType",
+		"queryId"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

package/src/image/editor.scss

@@ -32,7 +32,7 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-// Shown while image is being uploded but cannot be previewed.
+// Shown while image is being uploaded but cannot be previewed.
 .wp-block-image__placeholder {
 	aspect-ratio: 4 / 3;
 

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/list/test/edit.native.js

@@ -157,7 +157,7 @@ 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/
 		);

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,

package/src/media-text/test/transforms.native.js

@@ -23,16 +23,16 @@ const initialHtmlWithVideo = `
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
 const blockTransformsWithImage = [
 	'Image',
 	'Cover',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 const blockTransformsWithVideo = [
 	'Video',
 	'Cover',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 
 setupCoreBlocks();
@@ -52,7 +52,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();
@@ -88,7 +90,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();

package/src/navigation/edit/index.js

@@ -142,24 +142,28 @@ function ColorTools( {
 						label: __( 'Text' ),
 						onColorChange: setTextColor,
 						resetAllFilter: () => setTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: backgroundColor.color,
 						label: __( 'Background' ),
 						onColorChange: setBackgroundColor,
 						resetAllFilter: () => setBackgroundColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayTextColor.color,
 						label: __( 'Submenu & overlay text' ),
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
 						label: __( 'Submenu & overlay background' ),
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

package/src/navigation/index.js

@@ -3,6 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import { navigation as icon } from '@wordpress/icons';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -52,6 +55,23 @@ export const settings = {
 	},
 	edit,
 	save,
+	__experimentalLabel: ( { ref } ) => {
+		if ( ! ref ) {
+			return;
+		}
+
+		const navigation = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_navigation',
+			ref
+		);
+
+		if ( ! navigation?.title ) {
+			return;
+		}
+
+		return decodeEntities( navigation.title );
+	},
 	deprecated,
 };
 

package/src/navigation/style.scss

@@ -166,7 +166,9 @@ $navigation-icon-size: 24px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
-		transition: opacity 0.1s linear;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 		visibility: hidden;
 
 		// Don't take up space when the menu is collapsed.
@@ -502,9 +504,10 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Animation.
-		animation: overlay-menu__fade-in-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not (prefers-reduced-motion) {
+			animation: overlay-menu__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+		}
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);

package/src/navigation-link/edit.js

@@ -157,7 +157,7 @@ function getMissingText( type ) {
 /*
  * Warning, this duplicated in
  * packages/block-library/src/navigation-submenu/edit.js
- * Consider reuseing this components for both blocks.
+ * Consider reusing this components for both blocks.
  */
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 	const { label, url, description, title, rel } = attributes;

package/src/navigation-link/link-ui.js

@@ -78,7 +78,7 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
+function LinkUIBlockInserter( { clientId, onBack } ) {
 	const { rootBlockClientId } = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -96,7 +96,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 		LinkControl,
 		`link-ui-block-inserter__title`
 	);
-	const dialogDescritionId = useInstanceId(
+	const dialogDescriptionId = useInstanceId(
 		LinkControl,
 		`link-ui-block-inserter__description`
 	);
@@ -110,13 +110,13 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 			className="link-ui-block-inserter"
 			role="dialog"
 			aria-labelledby={ dialogTitleId }
-			aria-describedby={ dialogDescritionId }
+			aria-describedby={ dialogDescriptionId }
 			ref={ focusOnMountRef }
 		>
 			<VisuallyHidden>
 				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
 
-				<p id={ dialogDescritionId }>
+				<p id={ dialogDescriptionId }>
 					{ __( 'Choose a block to add to your Navigation.' ) }
 				</p>
 			</VisuallyHidden>
@@ -140,7 +140,6 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 				prioritizePatterns={ false }
 				selectBlockOnInsert
 				hasSearch={ false }
-				onSelect={ onSelectBlock }
 			/>
 		</div>
 	);
@@ -198,15 +197,11 @@ function UnforwardedLinkUI( props, ref ) {
 		LinkUI,
 		`link-ui-link-control__title`
 	);
-	const dialogDescritionId = useInstanceId(
+	const dialogDescriptionId = useInstanceId(
 		LinkUI,
 		`link-ui-link-control__description`
 	);
 
-	// Selecting a block should close the popover and also remove the (previously) automatically inserted
-	// link block so that the newly selected block can be inserted in its place.
-	const { onClose: onSelectBlock } = props;
-
 	return (
 		<Popover
 			ref={ ref }
@@ -219,12 +214,12 @@ function UnforwardedLinkUI( props, ref ) {
 				<div
 					role="dialog"
 					aria-labelledby={ dialogTitleId }
-					aria-describedby={ dialogDescritionId }
+					aria-describedby={ dialogDescriptionId }
 				>
 					<VisuallyHidden>
 						<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
 
-						<p id={ dialogDescritionId }>
+						<p id={ dialogDescriptionId }>
 							{ __(
 								'Search for and add a link to your Navigation.'
 							) }
@@ -287,7 +282,6 @@ function UnforwardedLinkUI( props, ref ) {
 						setAddingBlock( false );
 						setFocusAddBlockButton( true );
 					} }
-					onSelectBlock={ onSelectBlock }
 				/>
 			) }
 		</Popover>

package/src/navigation-submenu/edit.js

@@ -276,7 +276,7 @@ export default function NavigationSubmenuEdit( {
 			// as it shares the CMD+K shortcut.
 			// See https://github.com/WordPress/gutenberg/pull/59845.
 			event.preventDefault();
-			// If we don't stop propogation, this event bubbles up to the parent submenu item
+			// If we don't stop propagation, this event bubbles up to the parent submenu item
 			event.stopPropagation();
 			setIsLinkOpen( true );
 			setOpenedBy( ref.current );

package/src/page-list/block.json

@@ -52,6 +52,17 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"color": {
+			"text": true,
+			"background": true,
+			"link": true,
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,

package/src/paragraph/style.scss

@@ -44,7 +44,7 @@ p.has-drop-cap.has-background {
 }
 
 // Use :where to contain the specificity of this rule
-// so it's easily overrideable by any theme that targets
+// so it's easily overridable by any theme that targets
 // links using the a element.
 // For example, this is what global styles does.
 :where(p.has-text-color:not(.has-link-color)) a {

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

@@ -15,7 +15,16 @@ import {
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 function PostAuthorNameEdit( {
 	context: { postType, postId },
@@ -61,6 +70,8 @@ function PostAuthorNameEdit( {
 		displayName
 	);
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -72,26 +83,53 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: false,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Link to author archive' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					{ isLink && (
+						isShownByDefault
+						hasValue={ () => isLink }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link to author archive' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
+							checked={ isLink }
 						/>
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Open in new tab' ) }
+							isShownByDefault
+							hasValue={ () => linkTarget !== '_self' }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ supportsAuthor

package/src/post-comments-link/block.json

@@ -47,7 +47,13 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-comments-link"

package/src/post-content/block.json

@@ -69,4 +69,4 @@
 	},
 	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
-}
+}

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

@@ -47,6 +47,7 @@ const Overlay = ( {
 							gradient: undefined,
 							customGradient: undefined,
 						} ),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

package/src/query/edit/inspector-controls/author-control.js

@@ -30,7 +30,7 @@ function AuthorControl( { value, onChange } ) {
 	const authorsInfo = getEntitiesInfo( authorsList );
 	/**
 	 * We need to normalize the value because the block operates on a
-	 * comma(`,`) separated string value and `FormTokenFiels` needs an
+	 * comma(`,`) separated string value and `FormTokenField` needs an
 	 * array.
 	 */
 	const normalizedValue = ! value ? [] : value.toString().split( ',' );