@wordpress/block-library 9.2.0 → 9.3.0

package/src/image/edit.js

@@ -56,17 +56,6 @@ export const pickRelevantMediaFiles = ( image, size ) => {
 	return imageProps;
 };
 
-/**
- * Is the URL a temporary blob URL? A blob URL is one that is used temporarily
- * while the image is being uploaded and will not have an id yet allocated.
- *
- * @param {number=} id  The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the URL a Blob URL
- */
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
 /**
  * Is the url for the image hosted externally. An externally hosted image has no
  * id and is not a blob url.
@@ -118,9 +107,7 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState( () => {
-		return isTemporaryImage( id, url ) ? url : undefined;
-	} );
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -157,8 +144,8 @@ export function ImageEdit( {
 			src: undefined,
 			id: undefined,
 			url: undefined,
+			blob: undefined,
 		} );
-		setTemporaryURL( undefined );
 	}
 
 	function onSelectImage( media ) {
@@ -169,7 +156,9 @@ export function ImageEdit( {
 				id: undefined,
 				title: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
 
 			return;
 		}
@@ -179,8 +168,6 @@ export function ImageEdit( {
 			return;
 		}
 
-		setTemporaryURL();
-
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available
@@ -254,24 +241,28 @@ export function ImageEdit( {
 		mediaAttributes.href = href;
 
 		setAttributes( {
+			blob: undefined,
 			...mediaAttributes,
 			...additionalAttributes,
 			linkDestination,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newURL ) {
 		if ( newURL !== url ) {
 			setAttributes( {
+				blob: undefined,
 				url: newURL,
 				id: undefined,
 				sizeSlug: getSettings().imageDefaultSize,
 			} );
+			setTemporaryURL();
 		}
 	}
 
 	useUploadMediaFromBlobURL( {
-		url,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectImage,
 		onError: onUploadError,
@@ -292,7 +283,7 @@ export function ImageEdit( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = clsx( className, {
-		'is-transient': temporaryURL,
+		'is-transient': !! temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':

package/src/image/image.js

@@ -49,7 +49,7 @@ import { Caption } from '../utils/caption';
 /**
  * Module constants
  */
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
 
@@ -182,8 +182,7 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport &&
-		parentLayoutType !== 'grid';
+		isLargeViewport;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -373,6 +372,8 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const dimensionsControl = (
 		<DimensionsTool
 			value={ { width, height, scale, aspectRatio } }
@@ -403,6 +404,20 @@ export default function Image( {
 		/>
 	);
 
+	const aspectRatioControl = (
+		<DimensionsTool
+			value={ { aspectRatio } }
+			onChange={ ( { aspectRatio: newAspectRatio } ) => {
+				setAttributes( {
+					aspectRatio: newAspectRatio,
+					scale: 'cover',
+				} );
+			} }
+			defaultAspectRatio="auto"
+			tools={ [ 'aspectRatio' ] }
+		/>
+	);
+
 	const resetAll = () => {
 		setAttributes( {
 			alt: undefined,
@@ -419,9 +434,12 @@ export default function Image( {
 			<ToolsPanel
 				label={ __( 'Settings' ) }
 				resetAll={ resetAll }
-				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable && dimensionsControl }
+				{ isResizable &&
+					( parentLayoutType === 'grid'
+						? aspectRatioControl
+						: dimensionsControl ) }
 			</ToolsPanel>
 		</InspectorControls>
 	);
@@ -443,16 +461,12 @@ export default function Image( {
 				return {};
 			}
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const { getBlockParentsByBlockName } = unlock(
-				select( blockEditorStore )
-			);
 			const {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
-			const hasParentPattern =
-				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
+			const hasParentPattern = !! context[ 'pattern/overrides' ];
 			const urlBindingSource = getBlockBindingsSource(
 				urlBinding?.source
 			);
@@ -508,7 +522,12 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ clientId, isSingleSelected, metadata?.bindings ]
+		[
+			arePatternOverridesEnabled,
+			context,
+			isSingleSelected,
+			metadata?.bindings,
+		]
 	);
 
 	const showUrlInput =
@@ -691,7 +710,7 @@ export default function Image( {
 				<ToolsPanel
 					label={ __( 'Settings' ) }
 					resetAll={ resetAll }
-					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ isSingleSelected && (
 						<ToolsPanelItem
@@ -735,7 +754,10 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable && dimensionsControl }
+					{ isResizable &&
+						( parentLayoutType === 'grid'
+							? aspectRatioControl
+							: dimensionsControl ) }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -845,7 +867,7 @@ export default function Image( {
 				/>
 			</ImageWrapper>
 		);
-	} else if ( ! isResizable ) {
+	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
 		img = (
 			<div style={ { width, height, aspectRatio } }>
 				<ImageWrapper href={ href }>{ img }</ImageWrapper>

package/src/image/index.php

@@ -28,12 +28,33 @@ function render_block_core_image( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$has_id_binding = isset( $attributes['metadata']['bindings']['id'] ) && isset( $attributes['id'] );
+
+	// Ensure the `wp-image-id` classname on the image block supports block bindings.
+	if ( $has_id_binding ) {
+		// If there's a mismatch with the 'wp-image-' class and the actual id, the id was
+		// probably overridden by block bindings. Update it to the correct value.
+		// See https://github.com/WordPress/gutenberg/issues/62886 for why this is needed.
+		$id                       = $attributes['id'];
+		$image_classnames         = $p->get_attribute( 'class' );
+		$class_with_binding_value = "wp-image-$id";
+		if ( is_string( $image_classnames ) && ! str_contains( $image_classnames, $class_with_binding_value ) ) {
+			$image_classnames = preg_replace( '/wp-image-(\d+)/', $class_with_binding_value, $image_classnames );
+			$p->set_attribute( 'class', $image_classnames );
+		}
+	}
+
+	// For backwards compatibility, the data-id html attribute is only set for
+	// image blocks nested in a gallery. Detect if the image is in a gallery by
+	// checking the data-id attribute.
+	// See the `block_core_gallery_data_id_backcompatibility` function.
 	if ( isset( $attributes['data-id'] ) ) {
-		// Adds the data-id="$id" attribute to the img element to provide backwards
-		// compatibility for the Gallery Block, which now wraps Image Blocks within
-		// innerBlocks. The data-id attribute is added in a core/gallery
-		// `render_block_data` hook.
-		$p->set_attribute( 'data-id', $attributes['data-id'] );
+		// If there's a binding for the `id`, the `id` attribute is used for the
+		// value, since `data-id` does not support block bindings.
+		// Else the `data-id` is used for backwards compatibility, since
+		// third parties may be filtering its value.
+		$data_id = $has_id_binding ? $attributes['id'] : $attributes['data-id'];
+		$p->set_attribute( 'data-id', $data_id );
 	}
 
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';

package/src/image/transforms.js

@@ -159,7 +159,7 @@ const transforms = {
 			transform( files ) {
 				const blocks = files.map( ( file ) => {
 					return createBlock( 'core/image', {
-						url: createBlobURL( file ),
+						blob: createBlobURL( file ),
 					} );
 				} );
 				return blocks;

package/src/list-item/block.json

@@ -21,8 +21,15 @@
 	},
 	"supports": {
 		"className": false,
-		"__experimentalSelector": ".wp-block-list > li",
 		"splitting": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -47,5 +54,8 @@
 		"interactivity": {
 			"clientNavigation": true
 		}
+	},
+	"selectors": {
+		"root": ".wp-block-list > li"
 	}
 }

package/src/list-item/edit.js

@@ -61,7 +61,7 @@ export function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
-				isDisabled={ ! canIndent }
+				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }
 			/>
 		</>

package/src/list-item/hooks/use-merge.js

@@ -92,11 +92,25 @@ export default function useMerge( clientId, onMerge ) {
 				// list.
 				const [ nestedListClientId ] = getBlockOrder( clientIdB );
 				if ( nestedListClientId ) {
-					moveBlocksToPosition(
-						getBlockOrder( nestedListClientId ),
-						nestedListClientId,
-						getBlockRootClientId( clientIdA )
-					);
+					// If we are merging with the previous list item, and the
+					// previous list item does not have nested list, move the
+					// nested list to the previous list item.
+					if (
+						getPreviousBlockClientId( clientIdB ) === clientIdA &&
+						! getBlockOrder( clientIdA ).length
+					) {
+						moveBlocksToPosition(
+							[ nestedListClientId ],
+							clientIdB,
+							clientIdA
+						);
+					} else {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( clientIdA )
+						);
+					}
 				}
 				mergeBlocks( clientIdA, clientIdB );
 			} );

package/src/loginout/block.json

@@ -17,6 +17,9 @@
 			"default": true
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"className": true,
 		"spacing": {

package/src/media-text/edit.js

@@ -46,7 +46,7 @@ import {
 	TEMPLATE,
 } from './constants';
 import { unlock } from '../lock-unlock';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -276,6 +276,7 @@ function MediaTextEdit( {
 			mediaSizeSlug: newMediaSizeSlug,
 		} );
 	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
@@ -290,7 +291,7 @@ function MediaTextEdit( {
 					mediaSizeSlug: undefined,
 				} );
 			} }
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			<ToolsPanelItem
 				label={ __( 'Media width' ) }

package/src/navigation-submenu/edit.js

@@ -387,7 +387,7 @@ export default function NavigationSubmenuEdit( {
 						title={ __( 'Convert to Link' ) }
 						onClick={ transformToLink }
 						className="wp-block-navigation__submenu__revert"
-						isDisabled={ ! canConvertToLink }
+						disabled={ ! canConvertToLink }
 					/>
 				</ToolbarGroup>
 			</BlockControls>

package/src/page-list/convert-to-links-modal.js

@@ -36,7 +36,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				</Button>
 				<Button
 					variant="primary"
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled }
 					onClick={ onClick }
 				>

package/src/page-list/edit.js

@@ -338,7 +338,7 @@ export default function PageListEdit( {
 						<p>{ convertDescription }</p>
 						<Button
 							variant="primary"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! hasResolvedPages }
 							onClick={ convertToNavigationLinks }
 						>

package/src/post-comments-form/style.scss

@@ -1,3 +1,18 @@
+// Allow these default styles to be overridden by global styles.
+:where(.wp-block-post-comments-form) {
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:where(:not([type="submit"]):not([type="checkbox"])) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+}
+
 .wp-block-post-comments-form {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
@@ -31,18 +46,6 @@
 		overflow-wrap: break-word;
 	}
 
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
-
-	textarea,
-	input:not([type="submit"]):not([type="checkbox"]) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
-
 	.comment-form {
 		textarea,
 		// Make sure to not set display block on hidden input fields, to prevent

package/src/post-content/block.json

@@ -7,6 +7,9 @@
 	"description": "Displays the contents of a post or page.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/post-date/edit.js

@@ -28,7 +28,7 @@ import {
 	ToggleControl,
 	PanelBody,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
@@ -128,6 +128,10 @@ export default function PostDateEdit( {
 											siteTimeFormat
 										) }
 										onClose={ onClose }
+										dateOrder={
+											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+											_x( 'dmy', 'date order' )
+										}
 									/>
 								) }
 								renderToggle={ ( { isOpen, onToggle } ) => {

package/src/post-date/index.php

@@ -23,8 +23,14 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID = $block->context['postId'];
 
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
-		// translators: %s: human-readable time difference.
-		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID ) ) );
+		$post_timestamp = get_post_timestamp( $post_ID );
+		if ( $post_timestamp > time() ) {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s from now', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+		} else {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+		}
 	} else {
 		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
 	}

package/src/post-excerpt/block.json

@@ -23,6 +23,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

package/src/post-title/block.json

@@ -29,6 +29,9 @@
 			"default": "_self"
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/query/edit/inspector-controls/index.js

@@ -34,7 +34,7 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
@@ -128,6 +128,7 @@ export default function QueryInspectorControls( props ) {
 		showAuthorControl ||
 		showSearchControl ||
 		showParentControl;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
@@ -223,7 +224,7 @@ export default function QueryInspectorControls( props ) {
 						} );
 						setQuerySearch( '' );
 					} }
-					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ showTaxControl && (
 						<ToolsPanelItem