@wordpress/block-library 9.30.0 → 9.30.1-next.6f42e1382.0

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

@@ -8,38 +8,24 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
+import { LinkControl, useBlockEditingMode } from '@wordpress/block-editor';
 import {
-	LinkControl,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-	useBlockEditingMode,
-} from '@wordpress/block-editor';
-import {
-	createInterpolateElement,
 	useMemo,
 	useState,
 	useRef,
 	useEffect,
 	forwardRef,
 } from '@wordpress/element';
-import {
-	store as coreStore,
-	useResourcePermissions,
-} from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
-import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+import { useResourcePermissions } from '@wordpress/core-data';
+import { plus } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
-
-const { PrivateQuickInserter: QuickInserter } = unlock(
-	blockEditorPrivateApis
-);
+import { LinkUIPageCreator } from './page-creator';
+import LinkUIBlockInserter from './block-inserter';
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -79,114 +65,19 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-function LinkUIBlockInserter( { clientId, onBack } ) {
-	const { rootBlockClientId } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-
-			return {
-				rootBlockClientId: getBlockRootClientId( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-
-	const dialogTitleId = useInstanceId(
-		LinkControl,
-		`link-ui-block-inserter__title`
-	);
-	const dialogDescriptionId = useInstanceId(
-		LinkControl,
-		`link-ui-block-inserter__description`
-	);
-
-	if ( ! clientId ) {
-		return null;
-	}
-
-	return (
-		<div
-			className="link-ui-block-inserter"
-			role="dialog"
-			aria-labelledby={ dialogTitleId }
-			aria-describedby={ dialogDescriptionId }
-			ref={ focusOnMountRef }
-		>
-			<VisuallyHidden>
-				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
-
-				<p id={ dialogDescriptionId }>
-					{ __( 'Choose a block to add to your Navigation.' ) }
-				</p>
-			</VisuallyHidden>
-
-			<Button
-				className="link-ui-block-inserter__back"
-				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				onClick={ ( e ) => {
-					e.preventDefault();
-					onBack();
-				} }
-				size="small"
-			>
-				{ __( 'Back' ) }
-			</Button>
-
-			<QuickInserter
-				rootClientId={ rootBlockClientId }
-				clientId={ clientId }
-				isAppender={ false }
-				prioritizePatterns={ false }
-				selectBlockOnInsert
-				hasSearch={ false }
-			/>
-		</div>
-	);
-}
-
 function UnforwardedLinkUI( props, ref ) {
 	const { label, url, opensInNewTab, type, kind } = props.link;
 	const postType = type || 'page';
 
 	const [ addingBlock, setAddingBlock ] = useState( false );
+	const [ addingPage, setAddingPage ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
-	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ focusAddPageButton, setFocusAddPageButton ] = useState( false );
 	const permissions = useResourcePermissions( {
 		kind: 'postType',
 		name: postType,
 	} );
 
-	// Check if we're in contentOnly mode
-	const blockEditingMode = useBlockEditingMode();
-	const isDefaultBlockEditingMode = blockEditingMode === 'default';
-
-	async function handleCreate( pageTitle ) {
-		const page = await saveEntityRecord( 'postType', postType, {
-			title: pageTitle,
-			status: 'draft',
-		} );
-
-		return {
-			id: page.id,
-			type: postType,
-			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
-			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
-			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
-			// e.g.
-			// - title.raw = "Yes & No"
-			// - title.rendered = "Yes &#038; No"
-			// - decodeEntities( title.rendered ) = "Yes & No"
-			// See:
-			// - https://github.com/WordPress/gutenberg/pull/41063
-			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
-			title: decodeEntities( page.title.rendered ),
-			url: page.link,
-			kind: 'post-type',
-		};
-	}
-
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
 	const link = useMemo(
@@ -198,15 +89,24 @@ function UnforwardedLinkUI( props, ref ) {
 		[ label, opensInNewTab, url ]
 	);
 
+	const handlePageCreated = ( pageLink ) => {
+		// Set the new page as the current link
+		props.onChange( pageLink );
+		// Return to main Link UI
+		setAddingPage( false );
+	};
+
 	const dialogTitleId = useInstanceId(
 		LinkUI,
-		`link-ui-link-control__title`
+		'link-ui-link-control__title'
 	);
 	const dialogDescriptionId = useInstanceId(
 		LinkUI,
-		`link-ui-link-control__description`
+		'link-ui-link-control__description'
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<Popover
 			ref={ ref }
@@ -215,7 +115,7 @@ function UnforwardedLinkUI( props, ref ) {
 			anchor={ props.anchor }
 			shift
 		>
-			{ ! addingBlock && (
+			{ ! addingBlock && ! addingPage && (
 				<div
 					role="dialog"
 					aria-labelledby={ dialogTitleId }
@@ -235,48 +135,41 @@ function UnforwardedLinkUI( props, ref ) {
 						hasRichPreviews
 						value={ link }
 						showInitialSuggestions
-						withCreateSuggestion={ permissions.canCreate }
-						createSuggestion={ handleCreate }
-						createSuggestionButtonText={ ( searchTerm ) => {
-							let format;
-
-							if ( type === 'post' ) {
-								/* translators: %s: search term. */
-								format = __(
-									'Create draft post: <mark>%s</mark>'
-								);
-							} else {
-								/* translators: %s: search term. */
-								format = __(
-									'Create draft page: <mark>%s</mark>'
-								);
-							}
-
-							return createInterpolateElement(
-								sprintf( format, searchTerm ),
-								{
-									mark: <mark />,
-								}
-							);
-						} }
+						withCreateSuggestion={ false }
 						noDirectEntry={ !! type }
 						noURLSuggestion={ !! type }
 						suggestionsQuery={ getSuggestionsQuery( type, kind ) }
 						onChange={ props.onChange }
 						onRemove={ props.onRemove }
 						onCancel={ props.onCancel }
-						renderControlBottom={ () =>
-							! link?.url?.length &&
-							isDefaultBlockEditingMode && (
+						renderControlBottom={ () => {
+							// Don't show the tools when there is submitted link (preview state).
+							if ( link?.url?.length ) {
+								return null;
+							}
+
+							return (
 								<LinkUITools
 									focusAddBlockButton={ focusAddBlockButton }
+									focusAddPageButton={ focusAddPageButton }
 									setAddingBlock={ () => {
 										setAddingBlock( true );
 										setFocusAddBlockButton( false );
 									} }
+									setAddingPage={ () => {
+										setAddingPage( true );
+										setFocusAddPageButton( false );
+									} }
+									canAddPage={
+										permissions?.canCreate &&
+										type === 'page'
+									}
+									canAddBlock={
+										blockEditingMode === 'default'
+									}
 								/>
-							)
-						}
+							);
+						} }
 					/>
 				</div>
 			) }
@@ -287,7 +180,22 @@ function UnforwardedLinkUI( props, ref ) {
 					onBack={ () => {
 						setAddingBlock( false );
 						setFocusAddBlockButton( true );
+						setFocusAddPageButton( false );
+					} }
+					onBlockInsert={ props?.onBlockInsert }
+				/>
+			) }
+
+			{ addingPage && (
+				<LinkUIPageCreator
+					postType={ postType }
+					onBack={ () => {
+						setAddingPage( false );
+						setFocusAddPageButton( true );
+						setFocusAddBlockButton( false );
 					} }
+					onPageCreated={ handlePageCreated }
+					initialTitle={ link?.url || '' }
 				/>
 			) }
 		</Popover>
@@ -296,9 +204,17 @@ function UnforwardedLinkUI( props, ref ) {
 
 export const LinkUI = forwardRef( UnforwardedLinkUI );
 
-const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
+const LinkUITools = ( {
+	setAddingBlock,
+	setAddingPage,
+	focusAddBlockButton,
+	focusAddPageButton,
+	canAddPage,
+	canAddBlock,
+} ) => {
 	const blockInserterAriaRole = 'listbox';
 	const addBlockButtonRef = useRef();
+	const addPageButtonRef = useRef();
 
 	// Focus the add block button when the popover is opened.
 	useEffect( () => {
@@ -307,20 +223,48 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 		}
 	}, [ focusAddBlockButton ] );
 
+	// Focus the add page button when the popover is opened.
+	useEffect( () => {
+		if ( focusAddPageButton ) {
+			addPageButtonRef.current?.focus();
+		}
+	}, [ focusAddPageButton ] );
+
+	// Don't render anything if neither button should be shown
+	if ( ! canAddPage && ! canAddBlock ) {
+		return null;
+	}
+
 	return (
-		<VStack className="link-ui-tools">
-			<Button
-				__next40pxDefaultSize
-				ref={ addBlockButtonRef }
-				icon={ plus }
-				onClick={ ( e ) => {
-					e.preventDefault();
-					setAddingBlock( true );
-				} }
-				aria-haspopup={ blockInserterAriaRole }
-			>
-				{ __( 'Add block' ) }
-			</Button>
+		<VStack spacing={ 0 } className="link-ui-tools">
+			{ canAddPage && (
+				<Button
+					__next40pxDefaultSize
+					ref={ addPageButtonRef }
+					icon={ plus }
+					onClick={ ( e ) => {
+						e.preventDefault();
+						setAddingPage( true );
+					} }
+					aria-haspopup={ blockInserterAriaRole }
+				>
+					{ __( 'Create page' ) }
+				</Button>
+			) }
+			{ canAddBlock && (
+				<Button
+					__next40pxDefaultSize
+					ref={ addBlockButtonRef }
+					icon={ plus }
+					onClick={ ( e ) => {
+						e.preventDefault();
+						setAddingBlock( true );
+					} }
+					aria-haspopup={ blockInserterAriaRole }
+				>
+					{ __( 'Add block' ) }
+				</Button>
+			) }
 		</VStack>
 	);
 };

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

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	TextControl,
+	Notice,
+	CheckboxControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+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';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
+
+/**
+ * Component for creating new pages within the Navigation Link UI.
+ *
+ * @param {Object}   props                Component props.
+ * @param {string}   props.postType       The post type to create.
+ * @param {Function} props.onBack         Callback when user wants to go back.
+ * @param {Function} props.onPageCreated  Callback when page is successfully created.
+ * @param {string}   [props.initialTitle] Initial title to pre-fill the form.
+ */
+export function LinkUIPageCreator( {
+	postType,
+	onBack,
+	onPageCreated,
+	initialTitle = '',
+} ) {
+	const [ title, setTitle ] = useState( initialTitle );
+	const [ shouldPublish, setShouldPublish ] = useState( false );
+
+	// Check if the title is valid for submission
+	const isTitleValid = title.trim().length > 0;
+
+	// Get the last created entity record (without ID) to track creation state
+	const { lastError, isSaving } = useSelect(
+		( select ) => ( {
+			lastError: select( coreStore ).getLastEntitySaveError(
+				'postType',
+				postType
+			),
+			isSaving: select( coreStore ).isSavingEntityRecord(
+				'postType',
+				postType
+			),
+		} ),
+		[ postType ]
+	);
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function createPage( event ) {
+		event.preventDefault();
+		if ( isSaving || ! isTitleValid ) {
+			return;
+		}
+
+		try {
+			const savedRecord = await saveEntityRecord(
+				'postType',
+				postType,
+				{
+					title,
+					status: shouldPublish ? 'publish' : 'draft',
+				},
+				{ throwOnError: true }
+			);
+
+			if ( savedRecord ) {
+				// Create the page link object from the saved record
+				const pageLink = {
+					id: savedRecord.id,
+					type: postType,
+					title: decodeEntities( savedRecord.title.rendered ),
+					url: savedRecord.link,
+					kind: 'post-type',
+				};
+
+				onPageCreated( pageLink );
+			}
+		} catch ( error ) {
+			// Error handling is done via the data store selectors
+		}
+	}
+
+	const isSubmitDisabled = isSaving || ! isTitleValid;
+
+	return (
+		<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 }>
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Title' ) }
+							onChange={ setTitle }
+							placeholder={ __( 'No title' ) }
+							value={ title }
+						/>
+
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Publish immediately' ) }
+							help={ __(
+								'If unchecked, the page will be created as a draft.'
+							) }
+							checked={ shouldPublish }
+							onChange={ setShouldPublish }
+						/>
+
+						{ lastError && (
+							<Notice status="error" isDismissible={ false }>
+								{ lastError.message }
+							</Notice>
+						) }
+
+						<HStack spacing={ 2 } justify="flex-end">
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ onBack }
+								disabled={ isSaving }
+								accessibleWhenDisabled
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+								isBusy={ isSaving }
+								aria-disabled={ isSubmitDisabled }
+							>
+								{ __( 'Create page' ) }
+							</Button>
+						</HStack>
+					</VStack>
+				</form>
+			</VStack>
+		</DialogWrapper>
+	);
+}

package/src/navigation-link/style.scss

@@ -16,7 +16,7 @@
 }
 
 .link-ui-tools {
-	border-top: 1px solid $gray-100;
+	outline: 1px solid $gray-100;
 	padding: $grid-unit-10;
 }
 

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

@@ -1,16 +1,16 @@
 // 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;
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:not([type="submit"])) {
+	border-width: 1px;
+	border-style: solid;
+	border-color: $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.
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form 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 {

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'];
@@ -113,5 +105,18 @@ function register_block_core_post_date() {
 			'render_callback' => 'render_block_core_post_date',
 		)
 	);
+
+	// The following filter can be removed once the minimum required WordPress version is 6.9 or newer.
+	add_filter(
+		'block_bindings_supported_attributes_core/post-date',
+		function ( $attributes ) {
+			if ( ! in_array( 'datetime', $attributes, true ) ) {
+				$attributes[] = 'datetime';
+			}
+			return $attributes;
+		},
+		10,
+		3
+	);
 }
 add_action( 'init', 'register_block_core_post_date' );