@wordpress/block-library 9.30.1-next.836ecdcae.0 → 9.31.0

package/src/navigation-link/page-creator.js

@@ -9,13 +9,16 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
-import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
-import { useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
 
 /**
  * Component for creating new pages within the Navigation Link UI.
@@ -35,9 +38,6 @@ export function LinkUIPageCreator( {
 	const [ title, setTitle ] = useState( initialTitle );
 	const [ shouldPublish, setShouldPublish ] = useState( false );
 
-	// Focus the first element when the component mounts
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-
 	// Check if the title is valid for submission
 	const isTitleValid = title.trim().length > 0;
 
@@ -95,19 +95,12 @@ export function LinkUIPageCreator( {
 	const isSubmitDisabled = isSaving || ! isTitleValid;
 
 	return (
-		<div className="link-ui-page-creator" ref={ focusOnMountRef }>
-			<Button
-				className="link-ui-page-creator__back"
-				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				onClick={ ( e ) => {
-					e.preventDefault();
-					onBack();
-				} }
-				size="small"
-			>
-				{ __( 'Back' ) }
-			</Button>
-
+		<DialogWrapper
+			className="link-ui-page-creator"
+			title={ __( 'Create page' ) }
+			description={ __( 'Create a new page to add to your Navigation.' ) }
+			onBack={ onBack }
+		>
 			<VStack className="link-ui-page-creator__inner" spacing={ 4 }>
 				<form onSubmit={ createPage }>
 					<VStack spacing={ 4 }>
@@ -159,6 +152,6 @@ export function LinkUIPageCreator( {
 					</VStack>
 				</form>
 			</VStack>
-		</div>
+		</DialogWrapper>
 	);
 }

package/src/post-date/edit.js

@@ -19,6 +19,7 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 	useBlockProps,
+	useBlockEditingMode,
 	__experimentalDateFormatPicker as DateFormatPicker,
 	__experimentalPublishDateTimePicker as PublishDateTimePicker,
 } from '@wordpress/block-editor';
@@ -99,6 +100,8 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	let postDate = (
 		<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>
 			{ format === 'human-diff'
@@ -120,61 +123,69 @@ export default function PostDateEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-				{ displayType !== 'modified' && ! isDescendentOfQueryLoop && (
-					<ToolbarGroup>
-						<Dropdown
-							popoverProps={ popoverProps }
-							renderContent={ ( { onClose } ) => (
-								<PublishDateTimePicker
-									title={
-										displayType === 'date'
-											? __( 'Publish Date' )
-											: __( 'Date' )
-									}
-									currentDate={ datetime }
-									onChange={ ( newDatetime ) =>
-										setAttributes( {
-											datetime: newDatetime,
-										} )
-									}
-									is12Hour={ is12HourFormat(
-										siteTimeFormat
+			{ ( blockEditingMode === 'default' ||
+				! isDescendentOfQueryLoop ) && (
+				<BlockControls group="block">
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+
+					{ displayType !== 'modified' &&
+						! isDescendentOfQueryLoop && (
+							<ToolbarGroup>
+								<Dropdown
+									popoverProps={ popoverProps }
+									renderContent={ ( { onClose } ) => (
+										<PublishDateTimePicker
+											title={
+												displayType === 'date'
+													? __( 'Publish Date' )
+													: __( 'Date' )
+											}
+											currentDate={ datetime }
+											onChange={ ( newDatetime ) =>
+												setAttributes( {
+													datetime: newDatetime,
+												} )
+											}
+											is12Hour={ is12HourFormat(
+												siteTimeFormat
+											) }
+											onClose={ onClose }
+											dateOrder={
+												/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+												_x( 'dmy', 'date order' )
+											}
+										/>
 									) }
-									onClose={ onClose }
-									dateOrder={
-										/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
-										_x( 'dmy', 'date order' )
-									}
+									renderToggle={ ( { isOpen, onToggle } ) => {
+										const openOnArrowDown = ( event ) => {
+											if (
+												! isOpen &&
+												event.keyCode === DOWN
+											) {
+												event.preventDefault();
+												onToggle();
+											}
+										};
+										return (
+											<ToolbarButton
+												aria-expanded={ isOpen }
+												icon={ edit }
+												title={ __( 'Change Date' ) }
+												onClick={ onToggle }
+												onKeyDown={ openOnArrowDown }
+											/>
+										);
+									} }
 								/>
-							) }
-							renderToggle={ ( { isOpen, onToggle } ) => {
-								const openOnArrowDown = ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								};
-								return (
-									<ToolbarButton
-										aria-expanded={ isOpen }
-										icon={ edit }
-										title={ __( 'Change Date' ) }
-										onClick={ onToggle }
-										onKeyDown={ openOnArrowDown }
-									/>
-								);
-							} }
-						/>
-					</ToolbarGroup>
-				) }
-			</BlockControls>
+							</ToolbarGroup>
+						) }
+				</BlockControls>
+			) }
 
 			<InspectorControls>
 				<ToolsPanel

package/src/post-date/index.php

@@ -20,19 +20,11 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$classes = array();
 
 	if (
-		isset( $attributes['metadata']['bindings']['datetime']['source'] ) &&
-		isset( $attributes['metadata']['bindings']['datetime']['args'] )
+		! isset( $attributes['datetime'] ) && ! (
+			isset( $attributes['metadata']['bindings']['datetime']['source'] ) &&
+			isset( $attributes['metadata']['bindings']['datetime']['args'] )
+		)
 	) {
-		/*
-		 * We might be running on a version of WordPress that doesn't support binding the block's `datetime` attribute
-		 * to a Block Bindings source. In this case, we need to manually set the `datetime` attribute to its correct value.
-		 * This branch can be removed once the minimum required WordPress version is 6.9 or newer.
-		 */
-		$source      = get_block_bindings_source( $attributes['metadata']['bindings']['datetime']['source'] );
-		$source_args = $attributes['metadata']['bindings']['datetime']['args'];
-
-		$attributes['datetime'] = $source->get_value( $source_args, $block, 'datetime' );
-	} elseif ( ! isset( $attributes['datetime'] ) ) {
 		/*
 		 * This is the legacy version of the block that didn't have the `datetime` attribute.
 		 * This branch needs to be kept for backward compatibility.
@@ -61,7 +53,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		// (See https://github.com/WordPress/gutenberg/pull/46839 where this logic was originally
 		// implemented.)
 		// In this case, we have to respect and return the empty value.
-		return $attributes['datetime'];
+		return '';
 	}
 
 	$unformatted_date = $attributes['datetime'];

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

@@ -15,6 +15,7 @@ import {
 	Button,
 	Spinner,
 	TextControl,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -30,7 +31,12 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useMemo, useEffect, useState } from '@wordpress/element';
+import {
+	useMemo,
+	useEffect,
+	useState,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -316,7 +322,7 @@ export default function PostFeaturedImageEdit( {
 						) }
 						{ isLink && (
 							<ToolsPanelItem
-								label={ __( 'Link rel' ) }
+								label={ __( 'Link relation' ) }
 								isShownByDefault
 								hasValue={ () => !! rel }
 								onDeselect={ () =>
@@ -328,7 +334,17 @@ export default function PostFeaturedImageEdit( {
 								<TextControl
 									__next40pxDefaultSize
 									__nextHasNoMarginBottom
-									label={ __( 'Link rel' ) }
+									label={ __( 'Link relation' ) }
+									help={ createInterpolateElement(
+										__(
+											'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+										),
+										{
+											a: (
+												<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+											),
+										}
+									) }
 									value={ rel }
 									onChange={ ( newRel ) =>
 										setAttributes( { rel: newRel } )

package/src/post-title/edit.js

@@ -18,6 +18,7 @@ import {
 import {
 	ToggleControl,
 	TextControl,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -25,6 +26,7 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -205,7 +207,7 @@ export default function PostTitleEdit( {
 										/>
 									</ToolsPanelItem>
 									<ToolsPanelItem
-										label={ __( 'Link rel' ) }
+										label={ __( 'Link relation' ) }
 										isShownByDefault
 										hasValue={ () => !! rel }
 										onDeselect={ () =>
@@ -215,7 +217,17 @@ export default function PostTitleEdit( {
 										<TextControl
 											__next40pxDefaultSize
 											__nextHasNoMarginBottom
-											label={ __( 'Link rel' ) }
+											label={ __( 'Link relation' ) }
+											help={ createInterpolateElement(
+												__(
+													'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+												),
+												{
+													a: (
+														<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+													),
+												}
+											) }
 											value={ rel }
 											onChange={ ( newRel ) =>
 												setAttributes( { rel: newRel } )

package/src/query/block.json

@@ -53,7 +53,8 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"layout": true,
-		"interactivity": true
+		"interactivity": true,
+		"contentRole": true
 	},
 	"editorStyle": "wp-block-query-editor"
 }

package/src/query/edit/pattern-selection.js

@@ -43,7 +43,16 @@ export function useBlockPatterns( clientId, attributes ) {
 		clientId,
 		attributes
 	);
-	return usePatterns( clientId, blockNameForPatterns );
+	const allPatterns = usePatterns( clientId, blockNameForPatterns );
+	// Filter out any patterns that don't have Query as their root block
+	// so that a Query block is always replaced by another Query block.
+	const rootBlockPatterns = useMemo( () => {
+		return allPatterns.filter( ( pattern ) => {
+			return pattern.blocks?.[ 0 ]?.name === blockNameForPatterns;
+		} );
+	}, [ allPatterns, blockNameForPatterns ] );
+
+	return rootBlockPatterns;
 }
 
 export default function PatternSelection( {

package/src/rss/edit.js

@@ -14,11 +14,12 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 	TextControl,
+	ExternalLink,
 	__experimentalInputControl as InputControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
@@ -301,7 +302,17 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<TextControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
+					label={ __( 'Link relation' ) }
+					help={ createInterpolateElement(
+						__(
+							'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+						),
+						{
+							a: (
+								<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+							),
+						}
+					) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>

package/src/site-tagline/block.json

@@ -36,6 +36,7 @@
 				"text": true
 			}
 		},
+		"contentRole": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/social-link/edit.js

@@ -17,13 +17,14 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, createInterpolateElement } from '@wordpress/element';
 import {
 	Icon,
 	Button,
 	Dropdown,
 	TextControl,
 	ToolbarButton,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
@@ -243,7 +244,17 @@ const SocialLinkEdit = ( {
 				<TextControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
+					label={ __( 'Link relation' ) }
+					help={ createInterpolateElement(
+						__(
+							'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+						),
+						{
+							a: (
+								<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+							),
+						}
+					) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>

package/src/social-links/block.json

@@ -94,7 +94,8 @@
 				"width": true,
 				"style": true
 			}
-		}
+		},
+		"contentRole": true
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/spacer/edit.js

@@ -12,6 +12,7 @@ import {
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
@@ -346,6 +347,8 @@ const SpacerEdit = ( {
 		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<>
 			<View
@@ -356,7 +359,8 @@ const SpacerEdit = ( {
 					} ),
 				} ) }
 			>
-				{ resizableBoxWithOrientation( inheritedOrientation ) }
+				{ blockEditingMode === 'default' &&
+					resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
 			{ ! isFlexLayout && (
 				<SpacerControls

package/src/style.scss

@@ -68,6 +68,8 @@
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
+@import "./term-template/style.scss";
+@import "./terms-query/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";

package/src/table-of-contents/block.json

@@ -22,6 +22,10 @@
 		},
 		"maxLevel": {
 			"type": "number"
+		},
+		"ordered": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/table-of-contents/edit.js

@@ -20,10 +20,16 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { store as noticeStore } from '@wordpress/notices';
-import { tableOfContents as icon } from '@wordpress/icons';
+import {
+	tableOfContents as icon,
+	formatListBullets,
+	formatListBulletsRTL,
+	formatListNumbered,
+	formatListNumberedRTL,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,13 +49,19 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * @param {HeadingData[]}                props.attributes.headings               The list of data for each heading in the post.
  * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).
  * @param {number|undefined}             props.attributes.maxLevel               The maximum heading level to include, or null to include all levels.
+ * @param {boolean}                      props.attributes.ordered                Whether to display as an ordered list (true) or unordered list (false).
  * @param {string}                       props.clientId                          The client id.
  * @param {(attributes: Object) => void} props.setAttributes                     The set attributes function.
  *
  * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
-	attributes: { headings = [], onlyIncludeCurrentPage, maxLevel },
+	attributes: {
+		headings = [],
+		onlyIncludeCurrentPage,
+		maxLevel,
+		ordered = true,
+	},
 	clientId,
 	setAttributes,
 } ) {
@@ -86,27 +98,48 @@ export default function TableOfContentsEdit( {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const headingTree = linearToNestedHeadingList( headings );
 
-	const toolbarControls = canInsertList && (
+	const toolbarControls = (
 		<BlockControls>
 			<ToolbarGroup>
 				<ToolbarButton
-					onClick={ () =>
-						replaceBlocks(
-							clientId,
-							createBlock( 'core/list', {
-								ordered: true,
-								values: renderToString(
-									<TableOfContentsList
-										nestedHeadingList={ headingTree }
-									/>
-								),
-							} )
-						)
+					icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+					title={ __( 'Unordered' ) }
+					description={ __( 'Convert to unordered list' ) }
+					onClick={ () => setAttributes( { ordered: false } ) }
+					isActive={ ordered === false }
+				/>
+				<ToolbarButton
+					icon={
+						isRTL() ? formatListNumberedRTL : formatListNumbered
 					}
-				>
-					{ __( 'Convert to static list' ) }
-				</ToolbarButton>
+					title={ __( 'Ordered' ) }
+					description={ __( 'Convert to ordered list' ) }
+					onClick={ () => setAttributes( { ordered: true } ) }
+					isActive={ ordered === true }
+				/>
 			</ToolbarGroup>
+			{ canInsertList && (
+				<ToolbarGroup>
+					<ToolbarButton
+						onClick={ () =>
+							replaceBlocks(
+								clientId,
+								createBlock( 'core/list', {
+									ordered,
+									values: renderToString(
+										<TableOfContentsList
+											nestedHeadingList={ headingTree }
+											ordered={ ordered }
+										/>
+									),
+								} )
+							)
+						}
+					>
+						{ __( 'Convert to static list' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 		</BlockControls>
 	);
 
@@ -118,6 +151,7 @@ export default function TableOfContentsEdit( {
 					setAttributes( {
 						onlyIncludeCurrentPage: false,
 						maxLevel: undefined,
+						ordered: true,
 					} );
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
@@ -210,16 +244,19 @@ export default function TableOfContentsEdit( {
 		);
 	}
 
+	const ListTag = ordered ? 'ol' : 'ul';
+
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol>
+				<ListTag>
 					<TableOfContentsList
 						nestedHeadingList={ headingTree }
 						disableLinkActivation
 						onClick={ showRedirectionPreventedNotice }
+						ordered={ ordered }
 					/>
-				</ol>
+				</ListTag>
 			</nav>
 			{ toolbarControls }
 			{ inspectorControls }

package/src/table-of-contents/list.tsx

@@ -14,10 +14,12 @@ export default function TableOfContentsList( {
 	nestedHeadingList,
 	disableLinkActivation,
 	onClick,
+	ordered = true,
 }: {
 	nestedHeadingList: NestedHeadingData[];
 	disableLinkActivation?: boolean;
 	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+	ordered?: boolean;
 } ): ReactElement {
 	return (
 		<>
@@ -42,11 +44,13 @@ export default function TableOfContentsList( {
 					<span className={ ENTRY_CLASS_NAME }>{ content }</span>
 				);
 
+				const NestedListTag = ordered ? 'ol' : 'ul';
+
 				return (
 					<li key={ index }>
 						{ entry }
 						{ node.children ? (
-							<ol>
+							<NestedListTag>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
 									disableLinkActivation={
@@ -58,8 +62,9 @@ export default function TableOfContentsList( {
 											? onClick
 											: undefined
 									}
+									ordered={ ordered }
 								/>
-							</ol>
+							</NestedListTag>
 						) : null }
 					</li>
 				);