@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/inserter/hooks/use-block-types-state.js

@@ -19,10 +19,9 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {?string}  syncStatus   Optional sync status to filter pattern blocks by.
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
+const useBlockTypesState = ( rootClientId, onInsert ) => {
 	const { categories, collections, items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
@@ -31,10 +30,10 @@ const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
 			return {
 				categories: getCategories(),
 				collections: getCollections(),
-				items: getInserterItems( rootClientId, syncStatus ),
+				items: getInserterItems( rootClientId ),
 			};
 		},
-		[ rootClientId, syncStatus ]
+		[ rootClientId ]
 	);
 
 	const onSelectItem = useCallback(

package/src/components/inserter/hooks/use-patterns-state.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { cloneBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,6 +12,12 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { store as blockEditorStore } from '../../../store';
 
+const CUSTOM_CATEGORY = {
+	name: 'custom',
+	label: __( 'My patterns' ),
+	description: __( 'Custom patterns add by site users' ),
+};
+
 /**
  * Retrieves the block patterns inserter state.
  *
@@ -25,6 +31,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
 				select( blockEditorStore );
+
 			return {
 				patterns: __experimentalGetAllowedPatterns( rootClientId ),
 				patternCategories:
@@ -33,25 +40,34 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 		},
 		[ rootClientId ]
 	);
+
+	const allCategories = useMemo(
+		() => [ ...patternCategories, CUSTOM_CATEGORY ],
+		[ patternCategories ]
+	);
+
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onClickPattern = useCallback( ( pattern, blocks ) => {
-		onInsert(
-			( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
-			pattern.name
-		);
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: block pattern title. */
-				__( 'Block pattern "%s" inserted.' ),
-				pattern.title
-			),
-			{
-				type: 'snackbar',
-			}
-		);
-	}, [] );
-
-	return [ patterns, patternCategories, onClickPattern ];
+	const onClickPattern = useCallback(
+		( pattern, blocks ) => {
+			onInsert(
+				( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				pattern.name
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: %s: block pattern title. */
+					__( 'Block pattern "%s" inserted.' ),
+					pattern.title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		},
+		[ createSuccessNotice, onInsert ]
+	);
+
+	return [ patterns, allCategories, onClickPattern ];
 };
 
 export default usePatternsState;

package/src/components/inserter/index.js

@@ -231,7 +231,7 @@ export const ComposedPrivateInserter = compose( [
 				getBlockRootClientId,
 				hasInserterItems,
 				getAllowedBlocks,
-				__experimentalGetDirectInsertBlock,
+				getDirectInsertBlock,
 				getSettings,
 			} = select( blockEditorStore );
 
@@ -243,8 +243,7 @@ export const ComposedPrivateInserter = compose( [
 			const allowedBlocks = getAllowedBlocks( rootClientId );
 
 			const directInsertBlock =
-				shouldDirectInsert &&
-				__experimentalGetDirectInsertBlock( rootClientId );
+				shouldDirectInsert && getDirectInsertBlock( rootClientId );
 
 			const settings = getSettings();
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform, Text } from 'react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -35,33 +35,17 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 const defaultRenderToggle = ( {
 	onToggle,
 	disabled,
-	style,
-	containerStyle,
+	iconStyle,
+	buttonStyle,
 	onLongPress,
-	useExpandedMode,
 } ) => {
-	// The "expanded mode" refers to the editor's appearance when no blocks
-	// are currently selected. The "add block" button has a separate style
-	// for the "expanded mode", which are added via the below "expandedModeViewProps"
-	// and "expandedModeViewText" variables.
-	const expandedModeViewProps = useExpandedMode && {
-		icon: <Icon icon={ plus } style={ style } />,
-		customContainerStyles: containerStyle,
-		fixedRatio: false,
-	};
-	const expandedModeViewText = (
-		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
-			{ __( 'Add blocks' ) }
-		</Text>
-	);
-
 	return (
 		<ToolbarButton
 			title={ _x(
 				'Add block',
 				'Generic label for block inserter button'
 			) }
-			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			icon={ <Icon icon={ plus } style={ iconStyle } /> }
 			onClick={ onToggle }
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
@@ -69,12 +53,12 @@ const defaultRenderToggle = ( {
 				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
+				hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
 			} }
 			isDisabled={ disabled }
-			{ ...expandedModeViewProps }
-		>
-			{ useExpandedMode && expandedModeViewText }
-		</ToolbarButton>
+			customContainerStyles={ buttonStyle }
+			fixedRatio={ false }
+		/>
 	);
 };
 
@@ -249,23 +233,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
-			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = useExpandedMode
-			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
-			: getStylesFromColorScheme(
-					styles[ 'inserter-menu__add-block-button-icon' ],
-					styles[ 'inserter-menu__add-block-button-icon--dark' ]
-			  );
-
-		const containerStyle = getStylesFromColorScheme(
+
+		const buttonStyle = getStylesFromColorScheme(
 			styles[ 'inserter-menu__add-block-button' ],
 			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
+		const iconStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button-icon' ],
+			styles[ 'inserter-menu__add-block-button-icon--dark' ]
+		);
+
 		const onPress = () => {
 			this.setState(
 				{
@@ -301,10 +283,9 @@ export class Inserter extends Component {
 					onToggle: onPress,
 					isOpen,
 					disabled,
-					style,
-					containerStyle,
+					iconStyle,
+					buttonStyle,
 					onLongPress,
-					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }

package/src/components/inserter/media-tab/hooks.js

@@ -9,28 +9,8 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../../store';
 
-/**
- * Interface for inserter media requests.
- *
- * @typedef {Object} InserterMediaRequest
- * @property {number} per_page How many items to fetch per page.
- * @property {string} search   The search term to use for filtering the results.
- */
-
-/**
- * Interface for inserter media responses. Any media resource should
- * map their response to this interface, in order to create the core
- * WordPress media blocks (image, video, audio).
- *
- * @typedef {Object} InserterMediaItem
- * @property {string}        title        The title of the media item.
- * @property {string}        url          The source url of the media item.
- * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
- * @property {number}        [id]         The WordPress id of the media item.
- * @property {number|string} [sourceId]   The id of the media item from external source.
- * @property {string}        [alt]        The alt text of the media item.
- * @property {string}        [caption]    The caption of the media item.
- */
+/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.

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

@@ -0,0 +1,69 @@
+/**
+ * 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';
+/*
+ * This hook was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
+export function useReusableBlocksRenameHint() {
+	return useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+}
+
+/*
+ * This component was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
+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 synced 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.native.scss

@@ -1,26 +1,21 @@
 /** @format */
-
-.inserter-menu__add-block-button-icon {
-	color: $blue-50;
+.inserter-menu__add-block-button {
+	border-radius: 2px;
+	background-color: $black;
+	margin: 9px $grid-unit-20 10px $grid-unit-20;
+	padding: 0;
 }
 
-.inserter-menu__add-block-button-icon--dark {
-	color: $blue-30;
+.inserter-menu__add-block-button--dark {
+	background-color: $white;
 }
 
-.inserter-menu__add-block-button-icon--expanded {
+.inserter-menu__add-block-button-icon {
 	color: $white;
 }
 
-.inserter-menu__add-block-button {
-	border-radius: 22px;
-	background-color: $blue-50;
-	margin: 8px;
-	padding: 6px 16px 6px 12px;
-}
-
-.inserter-menu__add-block-button--dark {
-	background-color: $blue-30;
+.inserter-menu__add-block-button-icon--dark {
+	color: $black;
 }
 
 .inserter-menu__add-block-button-text {

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
@@ -372,13 +374,16 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					onRemove={ onRemove }
+					onRemove={ () => {
+						onRemove();
+						setIsEditingLink( true );
+					} }
 				/>
 			) }
 
-			{ isEditing && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					{ showSettings && (
+					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
@@ -392,20 +397,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>
 	);
 };