@wordpress/block-editor 12.18.2 → 12.19.0

package/src/components/inner-blocks/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { forwardRef, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	getBlockSupport,
@@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
-import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
 
 const EMPTY_OBJECT = {};
 
@@ -42,6 +42,8 @@ function BlockContext( { children, clientId } ) {
 	);
 }
 
+const BlockListItemsMemo = memo( BlockListItems );
+
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -71,8 +73,8 @@ function UncontrolledInnerBlocks( props ) {
 		layout,
 		name,
 		blockType,
-		innerBlocks,
 		parentLock,
+		defaultLayout,
 	} = props;
 
 	useNestedSettingsUpdate(
@@ -92,7 +94,6 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
-		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection
@@ -104,9 +105,6 @@ function UncontrolledInnerBlocks( props ) {
 		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
-
-	const [ defaultLayout ] = useSettings( 'layout' );
-
 	const usedLayout = layout || defaultLayoutBlockSupport;
 
 	const memoedLayout = useMemo(
@@ -121,8 +119,10 @@ function UncontrolledInnerBlocks( props ) {
 		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
+	// For controlled inner blocks, we don't want a change in blocks to
+	// re-render the blocks list.
 	const items = (
-		<BlockListItems
+		<BlockListItemsMemo
 			rootClientId={ clientId }
 			renderAppender={ renderAppender }
 			__experimentalAppenderTagName={ __experimentalAppenderTagName }
@@ -188,16 +188,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		layout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
 	} = useBlockEditContext();
-	const {
-		__experimentalCaptureToolbars,
-		hasOverlay,
-		name,
-		blockType,
-		innerBlocks,
-		parentLock,
-		parentClientId,
-		isDropZoneDisabled,
-	} = useSelect(
+	const selected = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
 				return {};
@@ -208,19 +199,19 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
-				getBlocks,
 				getTemplateLock,
 				getBlockRootClientId,
-				__unstableIsWithinBlockOverlay,
-				__unstableHasActiveBlockOverlayActive,
 				getBlockEditingMode,
-			} = select( blockEditorStore );
+				getBlockSettings,
+				isDragging,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const enableClickThrough =
 				__unstableGetEditorMode() === 'navigation';
 			const blockEditingMode = getBlockEditingMode( clientId );
-			const _parentClientId = getBlockRootClientId( clientId );
+			const parentClientId = getBlockRootClientId( clientId );
+			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 			return {
 				__experimentalCaptureToolbars: hasBlockSupport(
 					blockName,
@@ -231,20 +222,28 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					blockName !== 'core/template' &&
 					! isBlockSelected( clientId ) &&
 					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough,
+					enableClickThrough &&
+					! isDragging(),
 				name: blockName,
 				blockType: getBlockType( blockName ),
-				innerBlocks: getBlocks( clientId ),
-				parentLock: getTemplateLock( _parentClientId ),
-				parentClientId: _parentClientId,
-				isDropZoneDisabled:
-					blockEditingMode !== 'default' ||
-					__unstableHasActiveBlockOverlayActive( clientId ) ||
-					__unstableIsWithinBlockOverlay( clientId ),
+				parentLock: getTemplateLock( parentClientId ),
+				parentClientId,
+				isDropZoneDisabled: blockEditingMode === 'disabled',
+				defaultLayout,
 			};
 		},
 		[ clientId ]
 	);
+	const {
+		__experimentalCaptureToolbars,
+		hasOverlay,
+		name,
+		blockType,
+		parentLock,
+		parentClientId,
+		isDropZoneDisabled,
+		defaultLayout,
+	} = selected;
 
 	const blockDropZoneRef = useBlockDropZone( {
 		dropZoneElement,
@@ -263,8 +262,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		layout,
 		name,
 		blockType,
-		innerBlocks,
 		parentLock,
+		defaultLayout,
 		...options,
 	};
 	const InnerBlocks =

package/src/components/inner-blocks/index.native.js

@@ -105,17 +105,12 @@ function UncontrolledInnerBlocks( props ) {
 
 	const context = useBlockContext( clientId );
 
-	const { nestingLevel, innerBlocks, parentLock } = useSelect(
+	const { nestingLevel, parentLock } = useSelect(
 		( select ) => {
-			const {
-				getBlockParents,
-				getBlocks,
-				getTemplateLock,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
+			const { getBlockParents, getTemplateLock, getBlockRootClientId } =
+				select( blockEditorStore );
 			return {
 				nestingLevel: getBlockParents( clientId )?.length,
-				innerBlocks: getBlocks( clientId ),
 				parentLock: getTemplateLock( getBlockRootClientId( clientId ) ),
 			};
 		},
@@ -139,7 +134,6 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
-		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -23,7 +23,6 @@ import { store as blockEditorStore } from '../../store';
  * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
- * @param {Array}   innerBlocks
  * @param {Object}  template                       The template to match.
  * @param {string}  templateLock                   The template lock state for the inner blocks. For
  *                                                 example, if the template lock is set to "all",
@@ -37,7 +36,6 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function useInnerBlockTemplateSync(
 	clientId,
-	innerBlocks,
 	template,
 	templateLock,
 	templateInsertUpdatesSelection
@@ -112,5 +110,5 @@ export default function useInnerBlockTemplateSync(
 		return () => {
 			isCancelled = true;
 		};
-	}, [ innerBlocks, template, templateLock, clientId ] );
+	}, [ template, templateLock, clientId ] );
 }

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -59,22 +59,16 @@ export function PatternsFilter( {
 		() => [
 			{
 				value: 'all',
-				label: _x( 'All', 'Option that shows all patterns' ),
+				label: _x( 'All', 'patterns' ),
 			},
 			{
 				value: INSERTER_SYNC_TYPES.full,
-				label: _x(
-					'Synced',
-					'Option that shows all synchronized patterns'
-				),
+				label: _x( 'Synced', 'patterns' ),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: INSERTER_SYNC_TYPES.unsynced,
-				label: _x(
-					'Not synced',
-					'Option that shows all patterns that are not synchronized'
-				),
+				label: _x( 'Not synced', 'patterns' ),
 				disabled: shouldDisableSyncFilter,
 			},
 		],
@@ -85,7 +79,7 @@ export function PatternsFilter( {
 		() => [
 			{
 				value: 'all',
-				label: __( 'All' ),
+				label: _x( 'All', 'patterns' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{

package/src/components/inserter/block-patterns-tab/utils.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 export const INSERTER_PATTERN_TYPES = {
 	user: 'user',
@@ -17,7 +17,7 @@ export const INSERTER_SYNC_TYPES = {
 
 export const allPatternsCategory = {
 	name: 'allPatterns',
-	label: __( 'All' ),
+	label: _x( 'All', 'patterns' ),
 };
 
 export const myPatternsCategory = {

package/src/components/inserter/quick-inserter.js

@@ -32,6 +32,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	hasSearch = true,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -70,8 +71,9 @@ export default function QuickInserter( {
 	const showPatterns =
 		patterns.length && ( !! filterValue || prioritizePatterns );
 	const showSearch =
-		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-		blockTypes.length > SEARCH_THRESHOLD;
+		hasSearch &&
+		( ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+			blockTypes.length > SEARCH_THRESHOLD );
 
 	useEffect( () => {
 		if ( setInserterIsOpened ) {

package/src/components/inserter/style.scss

@@ -108,10 +108,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
-
-	.components-search-control__icon {
-		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
-	}
 }
 
 .block-editor-inserter__tabs {
@@ -615,15 +611,9 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		&.components-search-control {
-			input[type="search"].components-search-control__input {
-				background: $white;
-			}
-			button.components-button {
-				min-width: auto;
-				padding-left: $grid-unit-05 * 0.5;
-				padding-right: $grid-unit-05 * 0.5;
-			}
+		// TODO: Consider using the Theme component to automatically adapt to a gray background.
+		&:not(:focus-within) {
+			--wp-components-color-background: #{$white};
 		}
 	}
 }

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

@@ -7,12 +7,15 @@ import {
 	serialize,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
 import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
@@ -36,11 +39,16 @@ const InserterDraggableBlocks = ( {
 		[ blocks ]
 	);
 
+	const { startDragging, stopDragging } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
+				startDragging();
 				const parsedBlocks =
 					pattern?.type === INSERTER_PATTERN_TYPES.user &&
 					pattern?.syncStatus !== 'unsynced'
@@ -51,6 +59,9 @@ const InserterDraggableBlocks = ( {
 					serialize( parsedBlocks )
 				);
 			} }
+			onDragEnd={ () => {
+				stopDragging();
+			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -11,8 +11,11 @@ import { __ } from '@wordpress/i18n';
 import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
+import { getBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
+	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+
 	return (
 		<>
 			{ hasBlockStyles && (
@@ -45,8 +48,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot group="border" label={ __( 'Border' ) } />
-			<InspectorControls.Slot group="effects" label={ __( 'Effects' ) } />
+			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
 			<InspectorControls.Slot group="styles" />
 		</>
 	);

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

@@ -427,25 +427,6 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					additionalControls={ () => {
-						// Expose the "Opens in new tab" settings in the preview
-						// as it is the most common setting to change.
-						if (
-							settings?.find(
-								( setting ) => setting.id === 'opensInNewTab'
-							)
-						) {
-							return (
-								<LinkSettings
-									value={ internalControlValue }
-									settings={ settings?.filter(
-										( { id } ) => id === 'opensInNewTab'
-									) }
-									onChange={ onChange }
-								/>
-							);
-						}
-					} }
 					onRemove={ () => {
 						onRemove();
 						setIsEditingLink( true );
@@ -491,7 +472,7 @@ function LinkControl( {
 				</HStack>
 			) }
 
-			{ renderControlBottom && renderControlBottom() }
+			{ ! isCreatingPage && renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }

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

@@ -6,16 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 } from '@wordpress/components';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info, linkOff, edit, copy } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -33,7 +32,6 @@ export default function LinkPreview( {
 	hasRichPreviews = false,
 	hasUnlinkControl = false,
 	onRemove,
-	additionalControls,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -66,7 +64,7 @@ export default function LinkPreview( {
 
 	const { createNotice } = useDispatch( noticesStore );
 	const ref = useCopyToClipboard( value.url, () => {
-		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+		createNotice( 'info', __( 'Link copied to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
@@ -99,16 +97,14 @@ export default function LinkPreview( {
 					<span className="block-editor-link-control__search-item-details">
 						{ ! isEmptyURL ? (
 							<>
-								<Tooltip text={ value.url }>
-									<ExternalLink
-										className="block-editor-link-control__search-item-title"
-										href={ value.url }
-									>
-										<Truncate numberOfLines={ 1 }>
-											{ displayTitle }
-										</Truncate>
-									</ExternalLink>
-								</Tooltip>
+								<ExternalLink
+									className="block-editor-link-control__search-item-title"
+									href={ value.url }
+								>
+									<Truncate numberOfLines={ 1 }>
+										{ displayTitle }
+									</Truncate>
+								</ExternalLink>
 								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
@@ -124,34 +120,33 @@ export default function LinkPreview( {
 						) }
 					</span>
 				</span>
-
 				<Button
 					icon={ edit }
-					label={ __( 'Edit' ) }
-					className="block-editor-link-control__search-item-action"
+					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
 					size="compact"
 				/>
 				{ hasUnlinkControl && (
 					<Button
 						icon={ linkOff }
-						label={ __( 'Unlink' ) }
-						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
+						label={ __( 'Remove link' ) }
 						onClick={ onRemove }
 						size="compact"
 					/>
 				) }
 				<Button
-					icon={ copy }
-					label={ __( 'Copy URL' ) }
-					className="block-editor-link-control__search-item-action block-editor-link-control__copy"
+					icon={ copySmall }
+					label={ sprintf(
+						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
+						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
+						isEmptyURL ? '' : ': ' + value.url
+					) }
 					ref={ ref }
 					disabled={ isEmptyURL }
 					size="compact"
 				/>
 				<ViewerSlot fillProps={ value } />
 			</div>
-			{ additionalControls && additionalControls() }
 		</div>
 	);
 }

package/src/components/link-control/style.scss

@@ -177,7 +177,7 @@ $block-editor-link-control-number-of-actions: 1;
 	.block-editor-link-control__search-item-header {
 		display: block;
 		flex-direction: row;
-		align-items: flex-start;
+		align-items: center;
 		margin-right: $grid-unit-10;
 		gap: $grid-unit-10;
 
@@ -245,6 +245,10 @@ $block-editor-link-control-number-of-actions: 1;
 		border-radius: $radius-block-ui;
 		line-height: 1.1;
 
+		&:focus {
+			box-shadow: none;
+		}
+
 		&:focus-visible {
 			@include block-toolbar-button-style__focus();
 			text-decoration: none;
@@ -352,11 +356,6 @@ $block-editor-link-control-number-of-actions: 1;
 	position: relative;
 }
 
-.block-editor-link-control__unlink {
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}
-
 .block-editor-link-control__setting {
 	margin-bottom: 0;
 	flex: 1;
@@ -425,8 +424,3 @@ $block-editor-link-control-number-of-actions: 1;
 	top: calc(50% + #{$spinner-size} / 4); // Add top spacing because this input has a visual label.
 	right: $grid-unit-15;
 }
-
-.block-editor-link-control__search-item-action {
-	margin-left: auto; // push to far right hand side
-	flex-shrink: 0;
-}