@wordpress/block-editor 12.4.0 → 12.5.0

package/src/components/inserter/reusable-block-rename-hint.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+
+export default function ReusableBlocksRenameHint() {
+	const isReusableBlocksRenameHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const ref = useRef();
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isReusableBlocksRenameHint ) {
+		return null;
+	}
+
+	return (
+		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
+			<div className="reusable-blocks-menu-items__rename-hint-content">
+				{ __(
+					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
+				) }
+			</div>
+			<Button
+				className="reusable-blocks-menu-items__rename-hint-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss hint' ) }
+				onClick={ () => {
+					// Retain focus when dismissing the element.
+					const previousElement = focus.tabbable.findPrevious(
+						ref.current
+					);
+					previousElement?.focus();
+					setPreference( 'core', PREFERENCE_NAME, false );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}

package/src/components/inserter/reusable-blocks-tab.js

@@ -13,6 +13,7 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import InserterNoResults from './no-results';
 import useBlockTypesState from './hooks/use-block-types-state';
+import ReusableBlocksRenameHint from './reusable-block-rename-hint';
 
 function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	const [ items, , , onSelectItem ] = useBlockTypesState(
@@ -54,6 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 	return (
 		<>
+			<div className="block-editor-inserter__hint">
+				<ReusableBlocksRenameHint />
+			</div>
 			<ReusableBlocksList
 				onHover={ onHover }
 				onInsert={ onInsert }
@@ -67,7 +71,7 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 						post_type: 'wp_block',
 					} ) }
 				>
-					{ __( 'Manage custom patterns' ) }
+					{ __( 'Manage my patterns' ) }
 				</Button>
 			</div>
 		</>

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -28,11 +28,11 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 
 	return (
 		<BlockTypesList
-			name="ReusableBlocks"
+			name="SyncedPatterns"
 			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
-			label={ __( 'Reusable blocks' ) }
+			label={ __( 'Synced patterns' ) }
 		/>
 	);
 }

package/src/components/inserter/style.scss

@@ -711,3 +711,31 @@ $block-inserter-tabs-height: 44px;
 		margin: 0;
 	}
 }
+
+.block-editor-inserter__hint {
+	margin: $grid-unit-20 $grid-unit-20 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+	align-items: top;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+	// The dismiss button has a lot of empty space through its padding.
+	// Apply margin to visually align the icon with the top of the text to its left.
+	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+	margin: 0;
+}

package/src/components/inserter/tabs.native.js

@@ -142,7 +142,11 @@ InserterTabs.Control = TabsControl;
 
 InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
-	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
+	{
+		name: 'reusable',
+		title: __( 'Synced patterns' ),
+		component: ReusableBlocksTab,
+	},
 ];
 
 export default InserterTabs;

package/src/components/inserter-draggable-blocks/index.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { serialize } from '@wordpress/blocks';
+import { serialize, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -20,6 +21,16 @@ const InserterDraggableBlocks = ( {
 		blocks,
 	};
 
+	const blockTypeIcon = useSelect(
+		( select ) => {
+			const { getBlockType } = select( blocksStore );
+			return (
+				blocks.length === 1 && getBlockType( blocks[ 0 ].name )?.icon
+			);
+		},
+		[ blocks ]
+	);
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
@@ -30,7 +41,7 @@ const InserterDraggableBlocks = ( {
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon }
+					icon={ icon || ( ! isPattern && blockTypeIcon ) }
 					isPattern={ isPattern }
 				/>
 			}

package/src/components/link-control/constants.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 // order to handle it as a unique case.
 export const CREATE_TYPE = '__CREATE__';
 export const TEL_TYPE = 'tel';
-export const URL_TYPE = 'URL';
+export const URL_TYPE = 'link';
 export const MAILTO_TYPE = 'mailto';
 export const INTERNAL_TYPE = 'internal';
 

package/src/components/link-control/index.js

@@ -292,7 +292,8 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
+	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -322,6 +323,18 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
+						{ showTextControl && (
+							<TextControl
+								__nextHasNoMarginBottom
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+								size="__unstable-large"
+							/>
+						) }
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -339,19 +352,8 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
-							useLabel={ showTextControl }
+							hideLabelFromVision={ ! showTextControl }
 						/>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label={ __( 'Text' ) }
-								value={ internalControlValue?.title }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -376,9 +378,9 @@ function LinkControl( {
 				/>
 			) }
 
-			{ isEditing && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					{ showSettings && (
+					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
@@ -392,20 +394,22 @@ function LinkControl( {
 							/>
 						</LinkControlSettingsDrawer>
 					) }
+				</div>
+			) }
 
-					<div className="block-editor-link-control__search-actions">
-						<Button
-							variant="primary"
-							onClick={ isDisabled ? noop : handleSubmit }
-							className="block-editor-link-control__search-submit"
-							aria-disabled={ isDisabled }
-						>
-							{ __( 'Save' ) }
-						</Button>
-						<Button variant="tertiary" onClick={ handleCancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</div>
+			{ showActions && (
+				<div className="block-editor-link-control__search-actions">
+					<Button
+						variant="primary"
+						onClick={ isDisabled ? noop : handleSubmit }
+						className="block-editor-link-control__search-submit"
+						aria-disabled={ isDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 				</div>
 			) }
 

package/src/components/link-control/search-create-button.js

@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Icon, plus } from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 
 export const LinkControlSearchCreate = ( {
 	searchTerm,
 	onClick,
 	itemProps,
-	isSelected,
 	buttonText,
 } ) => {
 	if ( ! searchTerm ) {
@@ -40,27 +34,15 @@ export const LinkControlSearchCreate = ( {
 	}
 
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
-			className={ classnames(
-				'block-editor-link-control__search-create block-editor-link-control__search-item',
-				{
-					'is-selected': isSelected,
-				}
-			) }
+			iconPosition="left"
+			icon={ plus }
+			className="block-editor-link-control__search-item"
 			onClick={ onClick }
 		>
-			<Icon
-				className="block-editor-link-control__search-item-icon"
-				icon={ plus }
-			/>
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					{ text }
-				</span>
-			</span>
-		</Button>
+			{ text }
+		</MenuItem>
 	);
 };
 

package/src/components/link-control/search-input.js

@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
 		},
 		ref
 	) => {
@@ -120,7 +120,7 @@ const LinkControlSearchInput = forwardRef(
 		};
 
 		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
+			// 'has-no-label': ! hideLabelFromVision,
 		} );
 
 		return (
@@ -128,7 +128,8 @@ const LinkControlSearchInput = forwardRef(
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
-					label={ useLabel ? 'URL' : undefined }
+					label={ __( 'Link' ) }
+					hideLabelFromVision={ hideLabelFromVision }
 					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }

package/src/components/link-control/search-item.js

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-import { Button, TextHighlight } from '@wordpress/components';
+import { MenuItem, TextHighlight } from '@wordpress/components';
 import {
 	Icon,
 	globe,
@@ -19,6 +13,7 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 const ICONS_MAP = {
 	post: postList,
@@ -52,50 +47,33 @@ function SearchItemIcon( { isURL, suggestion } ) {
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
-	isSelected = false,
+	searchTerm,
 	onClick,
 	isURL = false,
-	searchTerm = '',
 	shouldShowType = false,
 } ) => {
+	const info = isURL
+		? __( 'Press ENTER to add this link' )
+		: filterURLForDisplay( safeDecodeURI( suggestion?.url ) );
+
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
+			info={ info }
+			iconPosition="left"
+			icon={
+				<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
+			}
 			onClick={ onClick }
-			className={ classnames( 'block-editor-link-control__search-item', {
-				'is-selected': isSelected,
-				'is-url': isURL,
-				'is-entity': ! isURL,
-			} ) }
+			shortcut={ shouldShowType && getVisualTypeName( suggestion ) }
+			className="block-editor-link-control__search-item"
 		>
-			<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					<TextHighlight
-						// The component expects a plain text string.
-						text={ stripHTML( suggestion.title ) }
-						highlight={ searchTerm }
-					/>
-				</span>
-				<span
-					aria-hidden={ ! isURL }
-					className="block-editor-link-control__search-item-info"
-				>
-					{ ! isURL &&
-						( filterURLForDisplay(
-							safeDecodeURI( suggestion.url )
-						) ||
-							'' ) }
-					{ isURL && __( 'Press ENTER to add this link' ) }
-				</span>
-			</span>
-			{ shouldShowType && suggestion.type && (
-				<span className="block-editor-link-control__search-item-type">
-					{ getVisualTypeName( suggestion ) }
-				</span>
-			) }
-		</Button>
+			<TextHighlight
+				// The component expects a plain text string.
+				text={ stripHTML( suggestion.title ) }
+				highlight={ searchTerm }
+			/>
+		</MenuItem>
 	);
 };
 

package/src/components/link-control/search-results.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
@@ -72,59 +72,61 @@ export default function LinkControlSearchResults( {
 				className={ resultsListClasses }
 				aria-labelledby={ searchResultsLabelId }
 			>
-				{ suggestions.map( ( suggestion, index ) => {
-					if (
-						shouldShowCreateSuggestion &&
-						CREATE_TYPE === suggestion.type
-					) {
+				<MenuGroup>
+					{ suggestions.map( ( suggestion, index ) => {
+						if (
+							shouldShowCreateSuggestion &&
+							CREATE_TYPE === suggestion.type
+						) {
+							return (
+								<LinkControlSearchCreate
+									searchTerm={ currentInputValue }
+									buttonText={ createSuggestionButtonText }
+									onClick={ () =>
+										handleSuggestionClick( suggestion )
+									}
+									// Intentionally only using `type` here as
+									// the constant is enough to uniquely
+									// identify the single "CREATE" suggestion.
+									key={ suggestion.type }
+									itemProps={ buildSuggestionItemProps(
+										suggestion,
+										index
+									) }
+									isSelected={ index === selectedSuggestion }
+								/>
+							);
+						}
+
+						// If we're not handling "Create" suggestions above then
+						// we don't want them in the main results so exit early.
+						if ( CREATE_TYPE === suggestion.type ) {
+							return null;
+						}
+
 						return (
-							<LinkControlSearchCreate
-								searchTerm={ currentInputValue }
-								buttonText={ createSuggestionButtonText }
-								onClick={ () =>
-									handleSuggestionClick( suggestion )
-								}
-								// Intentionally only using `type` here as
-								// the constant is enough to uniquely
-								// identify the single "CREATE" suggestion.
-								key={ suggestion.type }
+							<LinkControlSearchItem
+								key={ `${ suggestion.id }-${ suggestion.type }` }
 								itemProps={ buildSuggestionItemProps(
 									suggestion,
 									index
 								) }
+								suggestion={ suggestion }
+								index={ index }
+								onClick={ () => {
+									handleSuggestionClick( suggestion );
+								} }
 								isSelected={ index === selectedSuggestion }
+								isURL={ LINK_ENTRY_TYPES.includes(
+									suggestion.type
+								) }
+								searchTerm={ currentInputValue }
+								shouldShowType={ shouldShowSuggestionsTypes }
+								isFrontPage={ suggestion?.isFrontPage }
 							/>
 						);
-					}
-
-					// If we're not handling "Create" suggestions above then
-					// we don't want them in the main results so exit early.
-					if ( CREATE_TYPE === suggestion.type ) {
-						return null;
-					}
-
-					return (
-						<LinkControlSearchItem
-							key={ `${ suggestion.id }-${ suggestion.type }` }
-							itemProps={ buildSuggestionItemProps(
-								suggestion,
-								index
-							) }
-							suggestion={ suggestion }
-							index={ index }
-							onClick={ () => {
-								handleSuggestionClick( suggestion );
-							} }
-							isSelected={ index === selectedSuggestion }
-							isURL={ LINK_ENTRY_TYPES.includes(
-								suggestion.type
-							) }
-							searchTerm={ currentInputValue }
-							shouldShowType={ shouldShowSuggestionsTypes }
-							isFrontPage={ suggestion?.isFrontPage }
-						/>
-					);
-				} ) }
+					} ) }
+				</MenuGroup>
 			</div>
 		</div>
 	);

package/src/components/link-control/settings-drawer.js

@@ -6,9 +6,9 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { settings as settingsIcon } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { _x, isRTL } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
 function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
@@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
-				icon={ settingsIcon }
-				label={ __( 'Link Settings' ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 				aria-controls={ settingsDrawerId }
-			/>
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
 			<MaybeAnimatePresence>
 				{ settingsOpen && (
 					<MaybeMotionDiv