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

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

@@ -8,7 +8,7 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	LinkControl,
 	store as blockEditorStore,
@@ -16,19 +16,14 @@ import {
 	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 { useResourcePermissions } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
 
@@ -36,6 +31,7 @@ import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import { LinkUIPageCreator } from './page-creator';
 
 const { PrivateQuickInserter: QuickInserter } = unlock(
 	blockEditorPrivateApis
@@ -79,7 +75,7 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-function LinkUIBlockInserter( { clientId, onBack } ) {
+function LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {
 	const { rootBlockClientId } = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -139,7 +135,8 @@ function LinkUIBlockInserter( { clientId, onBack } ) {
 				clientId={ clientId }
 				isAppender={ false }
 				prioritizePatterns={ false }
-				selectBlockOnInsert
+				selectBlockOnInsert={ ! onBlockInsert }
+				onSelect={ onBlockInsert ? onBlockInsert : undefined }
 				hasSearch={ false }
 			/>
 		</div>
@@ -151,42 +148,14 @@ function UnforwardedLinkUI( props, ref ) {
 	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,6 +167,13 @@ 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`
@@ -207,6 +183,8 @@ function UnforwardedLinkUI( props, ref ) {
 		`link-ui-link-control__description`
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<Popover
 			ref={ ref }
@@ -215,7 +193,7 @@ function UnforwardedLinkUI( props, ref ) {
 			anchor={ props.anchor }
 			shift
 		>
-			{ ! addingBlock && (
+			{ ! addingBlock && ! addingPage && (
 				<div
 					role="dialog"
 					aria-labelledby={ dialogTitleId }
@@ -235,30 +213,7 @@ 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 ) }
@@ -266,14 +221,20 @@ function UnforwardedLinkUI( props, ref ) {
 						onRemove={ props.onRemove }
 						onCancel={ props.onCancel }
 						renderControlBottom={ () =>
-							! link?.url?.length &&
-							isDefaultBlockEditingMode && (
+							! link?.url?.length && (
 								<LinkUITools
 									focusAddBlockButton={ focusAddBlockButton }
+									focusAddPageButton={ focusAddPageButton }
 									setAddingBlock={ () => {
 										setAddingBlock( true );
 										setFocusAddBlockButton( false );
 									} }
+									setAddingPage={ () => {
+										setAddingPage( true );
+										setFocusAddPageButton( false );
+									} }
+									canCreatePage={ permissions.canCreate }
+									blockEditingMode={ blockEditingMode }
 								/>
 							)
 						}
@@ -287,7 +248,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 +272,17 @@ function UnforwardedLinkUI( props, ref ) {
 
 export const LinkUI = forwardRef( UnforwardedLinkUI );
 
-const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
+const LinkUITools = ( {
+	setAddingBlock,
+	setAddingPage,
+	focusAddBlockButton,
+	focusAddPageButton,
+	canCreatePage,
+	blockEditingMode,
+} ) => {
 	const blockInserterAriaRole = 'listbox';
 	const addBlockButtonRef = useRef();
+	const addPageButtonRef = useRef();
 
 	// Focus the add block button when the popover is opened.
 	useEffect( () => {
@@ -307,20 +291,43 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 		}
 	}, [ focusAddBlockButton ] );
 
+	// Focus the add page button when the popover is opened.
+	useEffect( () => {
+		if ( focusAddPageButton ) {
+			addPageButtonRef.current?.focus();
+		}
+	}, [ focusAddPageButton ] );
+
 	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">
+			{ canCreatePage && (
+				<Button
+					__next40pxDefaultSize
+					ref={ addPageButtonRef }
+					icon={ plus }
+					onClick={ ( e ) => {
+						e.preventDefault();
+						setAddingPage( true );
+					} }
+					aria-haspopup={ blockInserterAriaRole }
+				>
+					{ __( 'Create page' ) }
+				</Button>
+			) }
+			{ blockEditingMode === 'default' && (
+				<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,164 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	TextControl,
+	Notice,
+	CheckboxControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, isRTL } 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';
+
+/**
+ * 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 );
+
+	// 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;
+
+	// 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 (
+		<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>
+
+			<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>
+		</div>
+	);
+}

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/search/edit.js

@@ -228,7 +228,17 @@ export default function SearchEdit( {
 		);
 		const textFieldStyles = {
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 			...typographyProps.style,
 			textDecoration: undefined,
@@ -269,7 +279,17 @@ export default function SearchEdit( {
 			...colorProps.style,
 			...typographyProps.style,
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 		};
 		const handleButtonClick = () => {
@@ -495,8 +515,13 @@ export default function SearchEdit( {
 		</>
 	);
 
+	const isNonZeroBorderRadius = ( radius ) =>
+		radius !== undefined && parseInt( radius, 10 ) !== 0;
+
 	const padBorderRadius = ( radius ) =>
-		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
+		isNonZeroBorderRadius( radius )
+			? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`
+			: undefined;
 
 	const getWrapperStyles = () => {
 		const styles = isButtonPositionInside
@@ -512,10 +537,7 @@ export default function SearchEdit( {
 						borderProps.style?.borderBottomRightRadius,
 			  };
 
-		const isNonZeroBorderRadius =
-			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
-
-		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
+		if ( isButtonPositionInside ) {
 			// We have button inside wrapper and a border radius value to apply.
 			// Add default padding so we don't get "fat" corners.
 			//
@@ -524,15 +546,24 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const { topLeft, topRight, bottomLeft, bottomRight } =
-					borderRadius;
+				const {
+					borderTopLeftRadius,
+					borderTopRightRadius,
+					borderBottomLeftRadius,
+					borderBottomRightRadius,
+				} = borderProps.style;
 
 				return {
 					...styles,
-					borderTopLeftRadius: padBorderRadius( topLeft ),
-					borderTopRightRadius: padBorderRadius( topRight ),
-					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
-					borderBottomRightRadius: padBorderRadius( bottomRight ),
+					borderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),
+					borderTopRightRadius:
+						padBorderRadius( borderTopRightRadius ),
+					borderBottomLeftRadius: padBorderRadius(
+						borderBottomLeftRadius
+					),
+					borderBottomRightRadius: padBorderRadius(
+						borderBottomRightRadius
+					),
 				};
 			}
 

package/src/search/index.php

@@ -372,6 +372,13 @@ function styles_for_block_core_search( $attributes ) {
 		if ( is_array( $border_radius ) ) {
 			// Apply styles for individual corner border radii.
 			foreach ( $border_radius as $key => $value ) {
+				// Get border-radius CSS variable from preset value if provided.
+				if ( is_string( $value ) && str_contains( $value, 'var:preset|border-radius|' ) ) {
+					$index_to_splice = strrpos( $value, '|' ) + 1;
+					$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
+					$value           = "var(--wp--preset--border-radius--$slug)";
+				}
+
 				if ( null !== $value ) {
 					// Convert camelCase key to kebab-case.
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
@@ -387,7 +394,7 @@ function styles_for_block_core_search( $attributes ) {
 
 					// Add adjusted border radius styles for the wrapper element
 					// if button is positioned inside.
-					if ( $is_button_inside && intval( $value ) !== 0 ) {
+					if ( $is_button_inside && ( intval( $value ) !== 0 || str_contains( $value, 'var(--wp--preset--border-radius--' ) ) ) {
 						$wrapper_styles[] = sprintf(
 							'border-%s-radius: calc(%s + %s);',
 							esc_attr( $name ),
@@ -399,7 +406,14 @@ function styles_for_block_core_search( $attributes ) {
 			}
 		} else {
 			// Numeric check is for backwards compatibility purposes.
-			$border_radius   = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
+			$border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
+			// Get border-radius CSS variable from preset value if provided.
+			if ( is_string( $border_radius ) && str_contains( $border_radius, 'var:preset|border-radius|' ) ) {
+				$index_to_splice = strrpos( $border_radius, '|' ) + 1;
+				$slug            = _wp_to_kebab_case( substr( $border_radius, $index_to_splice ) );
+				$border_radius   = "var(--wp--preset--border-radius--$slug)";
+			}
+
 			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
 			$input_styles[]  = $border_style;
 			$button_styles[] = $border_style;

package/src/search/style.scss

@@ -37,21 +37,6 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	width: 100%;
 }
 
-.wp-block-search__input {
-	padding: $grid-unit-10;
-	flex-grow: 1;
-	margin-left: 0;
-	margin-right: 0;
-	min-width: 3rem;
-	border: 1px solid $gray-600;
-	// !important used to forcibly prevent undesired application of
-	// text-decoration styles on the input field.
-	text-decoration: unset !important;
-
-	// Hides a redundant extra search icon on Mobile Safari.
-	appearance: initial;
-}
-
 .wp-block-search.wp-block-search__button-only {
 	.wp-block-search__button {
 		margin-left: 0;
@@ -104,12 +89,26 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	letter-spacing: inherit;
 	text-transform: inherit;
 	font-style: inherit;
+	padding: $grid-unit-10;
+	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
+	// !important used to forcibly prevent undesired application of
+	// text-decoration styles on the input field.
+	text-decoration: unset !important;
+
+	// Hides a redundant extra search icon on Mobile Safari.
+	appearance: initial;
 }
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
-	border: 1px solid $gray-600;
+	border-width: 1px;
+	border-style: solid;
+	border-color: $gray-600;
 	background-color: $white;
 	box-sizing: border-box;