@wordpress/block-library 8.1.0 → 8.2.0

package/src/navigation/edit/index.js

@@ -727,6 +727,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
@@ -768,6 +769,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				<Warning>
 					{ __(
@@ -842,6 +844,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (

package/src/navigation/edit/menu-inspector-controls.js

@@ -10,6 +10,7 @@ import {
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
+	Spinner,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -19,26 +20,17 @@ import { __ } from '@wordpress/i18n';
  */
 import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
+import { LeafMoreMenu } from '../leaf-more-menu';
 
-const MenuInspectorControls = ( {
+/* translators: %s: The name of a menu. */
+const actionLabel = __( "Switch to '%s'" );
+
+const ExperimentMainContent = ( {
 	clientId,
-	createNavigationMenuIsSuccess,
-	createNavigationMenuIsError,
-	currentMenuId = null,
+	currentMenuId,
+	isLoading,
 	isNavigationMenuMissing,
-	isManageMenusButtonDisabled,
-	onCreateNew,
-	onSelectClassicMenu,
-	onSelectNavigationMenu,
 } ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
-		? 'list'
-		: undefined;
-	/* translators: %s: The name of a menu. */
-	const actionLabel = __( "Switch to '%s'" );
-
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
@@ -49,6 +41,94 @@ const MenuInspectorControls = ( {
 		[ clientId ]
 	);
 
+	if ( currentMenuId && isNavigationMenuMissing ) {
+		return <p>{ __( 'Select or create a menu' ) }</p>;
+	}
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	return (
+		<OffCanvasEditor
+			blocks={ clientIdsTree }
+			isExpanded={ true }
+			selectBlockInCanvas={ false }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
+};
+
+const ExperimentControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
+
+	return (
+		<>
+			<HStack className="wp-block-navigation-off-canvas-editor__header">
+				<Heading
+					className="wp-block-navigation-off-canvas-editor__title"
+					level={ 2 }
+				>
+					{ __( 'Menu' ) }
+				</Heading>
+				<NavigationMenuSelector
+					currentMenuId={ currentMenuId }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					onCreateNew={ onCreateNew }
+					createNavigationMenuIsSuccess={
+						createNavigationMenuIsSuccess
+					}
+					createNavigationMenuIsError={ createNavigationMenuIsError }
+					actionLabel={ actionLabel }
+				/>
+			</HStack>
+			<ExperimentMainContent { ...props } />
+		</>
+	);
+};
+
+const DefaultControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		isManageMenusButtonDisabled,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
+
+	return (
+		<>
+			<NavigationMenuSelector
+				currentMenuId={ currentMenuId }
+				onSelectClassicMenu={ onSelectClassicMenu }
+				onSelectNavigationMenu={ onSelectNavigationMenu }
+				onCreateNew={ onCreateNew }
+				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+				createNavigationMenuIsError={ createNavigationMenuIsError }
+				actionLabel={ actionLabel }
+			/>
+			<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
+		</>
+	);
+};
+
+const MenuInspectorControls = ( props ) => {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const menuControlsSlot = isOffCanvasNavigationEditorEnabled
+		? 'list'
+		: undefined;
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -57,59 +137,9 @@ const MenuInspectorControls = ( {
 				}
 			>
 				{ isOffCanvasNavigationEditorEnabled ? (
-					<>
-						<HStack className="wp-block-navigation-off-canvas-editor__header">
-							<Heading
-								className="wp-block-navigation-off-canvas-editor__title"
-								level={ 2 }
-							>
-								{ __( 'Menu' ) }
-							</Heading>
-							<NavigationMenuSelector
-								currentMenuId={ currentMenuId }
-								onSelectClassicMenu={ onSelectClassicMenu }
-								onSelectNavigationMenu={
-									onSelectNavigationMenu
-								}
-								onCreateNew={ onCreateNew }
-								createNavigationMenuIsSuccess={
-									createNavigationMenuIsSuccess
-								}
-								createNavigationMenuIsError={
-									createNavigationMenuIsError
-								}
-								actionLabel={ actionLabel }
-							/>
-						</HStack>
-						{ currentMenuId && isNavigationMenuMissing ? (
-							<p>{ __( 'Select or create a menu' ) }</p>
-						) : (
-							<OffCanvasEditor
-								blocks={ clientIdsTree }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-					</>
+					<ExperimentControls { ...props } />
 				) : (
-					<>
-						<NavigationMenuSelector
-							currentMenuId={ currentMenuId }
-							onSelectClassicMenu={ onSelectClassicMenu }
-							onSelectNavigationMenu={ onSelectNavigationMenu }
-							onCreateNew={ onCreateNew }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							actionLabel={ actionLabel }
-						/>
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-						/>
-					</>
+					<DefaultControls { ...props } />
 				) }
 			</PanelBody>
 		</InspectorControls>

package/src/navigation/edit/navigation-menu-selector.js

@@ -69,7 +69,10 @@ function NavigationMenuSelector( {
 			navigationMenus?.map( ( { id, title } ) => {
 				const label = decodeEntities( title.rendered );
 				if ( id === currentMenuId && ! isCreatingMenu ) {
-					setSelectorLabel( currentTitle );
+					setSelectorLabel(
+						/* translators: %s is the name of a navigation menu. */
+						sprintf( __( 'You are currently editing %s' ), label )
+					);
 					setEnableOptions( shouldEnableMenuSelector );
 				}
 				return {
@@ -102,7 +105,7 @@ function NavigationMenuSelector( {
 		if ( ! hasResolvedNavigationMenus ) {
 			setSelectorLabel( __( 'Loading …' ) );
 		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
-			setSelectorLabel( __( 'Select menu' ) );
+			setSelectorLabel( __( 'Choose a Navigation menu' ) );
 			setEnableOptions( shouldEnableMenuSelector );
 		}
 

package/src/navigation/leaf-more-menu.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { addSubmenu, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore, BlockTitle } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+export const LeafMoreMenu = ( props ) => {
+	const { clientId, block } = props;
+
+	const { insertBlock, replaceBlock, removeBlocks, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						icon={ addSubmenu }
+						onClick={ () => {
+							const updateSelectionOnInsert = false;
+							const newLink = createBlock(
+								'core/navigation-link'
+							);
+							if ( block.name === 'core/navigation-submenu' ) {
+								insertBlock(
+									newLink,
+									block.innerBlocks.length,
+									clientId,
+									updateSelectionOnInsert
+								);
+							} else {
+								// Convert to a submenu if the block currently isn't one.
+								const newSubmenu = createBlock(
+									'core/navigation-submenu',
+									block.attributes,
+									block.innerBlocks
+								);
+
+								// The following must happen as two independent actions.
+								// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+								// selector to determine which block is "active". As the UX needs the newLink to be
+								// the "active" block it must be the last block to be inserted.
+								// Therefore the Submenu is first created and **then** the newLink is inserted
+								// thus ensuring it is the last inserted block.
+								replaceBlock( clientId, newSubmenu );
+
+								replaceInnerBlocks(
+									newSubmenu.clientId,
+									[ newLink ],
+									updateSelectionOnInsert
+								);
+							}
+							onClose();
+						} }
+					>
+						{ __( 'Add submenu item' ) }
+					</MenuItem>
+					<MenuItem
+						onClick={ () => {
+							removeBlocks( [ clientId ], false );
+							onClose();
+						} }
+					>
+						{ label }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+};

package/src/navigation-link/edit.js

@@ -375,12 +375,19 @@ export default function NavigationLinkEdit( {
 	const DEFAULT_BLOCK = {
 		name: 'core/navigation-link',
 	};
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
-		renderAppender: false,
-	} );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			...blockProps,
+			className: 'remove-outline', // Remove the outline from the inner blocks container.
+		},
+		{
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: true,
+			renderAppender: false,
+		}
+	);
 
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
@@ -435,7 +442,11 @@ export default function NavigationLinkEdit( {
 					<TextControl
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
-							setAttributes( { url: urlValue } );
+							updateAttributes(
+								{ url: urlValue },
+								setAttributes,
+								attributes
+							);
 						} }
 						label={ __( 'URL' ) }
 						autoComplete="off"

package/src/navigation-link/index.php

@@ -120,6 +120,33 @@ function block_core_navigation_link_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+/**
+ * Decodes a url if it's encoded, returning the same url if not.
+ *
+ * @param string $url The url to decode.
+ *
+ * @return string $url Returns the decoded url.
+ */
+function block_core_navigation_link_maybe_urldecode( $url ) {
+	$is_url_encoded = false;
+	$query          = parse_url( $url, PHP_URL_QUERY );
+	$query_params   = wp_parse_args( $query );
+
+	foreach ( $query_params as $query_param ) {
+		if ( rawurldecode( $query_param ) !== $query_param ) {
+			$is_url_encoded = true;
+			break;
+		}
+	}
+
+	if ( $is_url_encoded ) {
+		return rawurldecode( $url );
+	}
+
+	return $url;
+}
+
+
 /**
  * Renders the `core/navigation-link` block.
  *
@@ -171,7 +198,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
 	}
 
 	if ( $is_active ) {
@@ -363,11 +390,11 @@ add_action( 'init', 'register_block_core_navigation_link' );
 function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-link' => false )
 	);

package/src/navigation-link/update-attributes.js

@@ -89,7 +89,7 @@ export const updateAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...{ url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl },
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),

package/src/navigation-submenu/index.php

@@ -308,11 +308,11 @@ add_action( 'init', 'register_block_core_navigation_submenu' );
 function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-submenu' => false )
 	);

package/src/page-list/index.php

@@ -308,6 +308,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
 	if ( 0 !== $parent_page_id ) {
+		// If the parent page has no child pages, there is nothing to show.
+		if ( ! array_key_exists( $parent_page_id, $pages_with_children ) ) {
+			return;
+		}
+
 		$nested_pages = block_core_page_list_nest_pages(
 			$pages_with_children[ $parent_page_id ],
 			$pages_with_children

package/src/page-list-item/block.json

@@ -44,7 +44,8 @@
 		"reusable": false,
 		"html": false,
 		"lock": false,
-		"inserter": false
+		"inserter": false,
+		"__experimentalToolbar": false
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

package/src/post-author/edit.js

@@ -112,6 +112,7 @@ function PostAuthorEdit( {
 							/>
 						) ) || (
 							<SelectControl
+								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								value={ authorId }
 								options={ authorOptions }
@@ -127,6 +128,7 @@ function PostAuthorEdit( {
 					/>
 					{ showAvatar && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Avatar size' ) }
 							value={ attributes.avatarSize }
 							options={ avatarSizes }

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

@@ -160,6 +160,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Image size' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }

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

@@ -144,6 +144,7 @@ export default function QueryInspectorControls( {
 						) }
 						{ showPostTypeControl && (
 							<SelectControl
+								__nextHasNoMarginBottom
 								options={ postTypesSelectOptions }
 								value={ postType }
 								label={ __( 'Post type' ) }

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

@@ -27,6 +27,7 @@ const orderOptions = [
 function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }

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

@@ -13,6 +13,7 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }

package/src/query/edit/query-content.js

@@ -94,6 +94,17 @@ export default function QueryContent( {
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
+	const htmlElementMessages = {
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
 	return (
 		<>
 			<QueryInspectorControls
@@ -113,6 +124,7 @@ export default function QueryContent( {
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
@@ -124,6 +136,7 @@ export default function QueryContent( {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ TagName ] }
 				/>
 			</InspectorControls>
 			<TagName { ...innerBlocksProps } />

package/src/rss/index.php

@@ -48,7 +48,7 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( 'c', $date ) ),
 					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}

package/src/social-link/edit.js

@@ -43,6 +43,7 @@ const SocialLinkURLPopover = ( {
 		>
 			<div className="block-editor-url-input">
 				<URLInput
+					__nextHasNoMarginBottom
 					value={ url }
 					onChange={ ( nextURL ) =>
 						setAttributes( { url: nextURL } )
@@ -105,7 +106,7 @@ const SocialLinkEdit = ( {
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
 							) }
-							value={ label }
+							value={ label || '' }
 							onChange={ ( value ) =>
 								setAttributes( { label: value } )
 							}

package/src/table/edit.js

@@ -510,6 +510,7 @@ function TableEdit( {
 			) }
 			{ ! isEmpty && (
 				<RichText
+					identifier="caption"
 					tagName="figcaption"
 					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }

package/src/tag-cloud/edit.js

@@ -109,6 +109,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }
 					value={ taxonomy }

package/src/template-part/edit/advanced-controls.js

@@ -49,6 +49,27 @@ export function TemplatePartAdvancedControls( {
 		};
 	}, [] );
 
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+
 	return (
 		<InspectorControls __experimentalGroup="advanced">
 			{ isEntityAvailable && (
@@ -63,6 +84,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }
@@ -72,6 +94,7 @@ export function TemplatePartAdvancedControls( {
 				</>
 			) }
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{
@@ -92,6 +115,7 @@ export function TemplatePartAdvancedControls( {
 				] }
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				help={ htmlElementMessages[ tagName ] }
 			/>
 			{ ! hasInnerBlocks && (
 				<TemplatePartImportControls