npm - @wordpress/block-editor - Versions diffs - 12.3.0 → 12.3.1 - Mend

@wordpress/block-editor 12.3.0 → 12.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (897) hide show

package/src/components/iframe/index.js CHANGED Viewed

@@ -226,7 +226,7 @@ function Iframe( {
 	// content.
 	const html =
 		'<!doctype html>' +
-		'<style>html{height:auto!important;}body{margin:0}</style>' +
+		'<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>' +
 		( assets?.styles ?? '' );
 	const [ src, cleanup ] = useMemo( () => {

package/src/components/image-editor/constants.js CHANGED Viewed

@@ -2,5 +2,4 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	placement: 'bottom-start',
-	variant: 'toolbar',
 };

package/src/components/index.js CHANGED Viewed

@@ -26,6 +26,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -110,7 +111,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
-export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
 export {
 	default as BlockPreview,

package/src/components/index.native.js CHANGED Viewed

@@ -28,6 +28,7 @@ export {
 	JustifyContentControl,
 } from './justify-content-control';
 export { default as LineHeightControl } from './line-height-control';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as PlainText } from './plain-text';
 export {
 	default as RichText,

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

@@ -88,7 +88,9 @@ function UncontrolledInnerBlocks( props ) {
 	);
 	const defaultLayoutBlockSupport =
-		getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT;
+		getBlockSupport( name, 'layout' ) ||
+		getBlockSupport( name, '__experimentalLayout' ) ||
+		EMPTY_OBJECT;
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
@@ -116,7 +118,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ memoedLayout }
+				layout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>

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

@@ -93,7 +93,7 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 		filterInnerBlocks,
 		blockWidth,
-		__experimentalLayout: layout = defaultLayout,
+		layout = defaultLayout,
 		gridProperties,
 	} = props;

package/src/components/inner-blocks/use-nested-settings-update.js CHANGED Viewed

@@ -3,7 +3,6 @@
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
@@ -52,13 +51,11 @@ export default function useNestedSettingsUpdate(
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
-	const { blockListSettings, parentLock } = useSelect(
+	const { parentLock } = useSelect(
 		( select ) => {
 			const rootClientId =
 				select( blockEditorStore ).getBlockRootClientId( clientId );
 			return {
-				blockListSettings:
-					select( blockEditorStore ).getBlockListSettings( clientId ),
 				parentLock:
 					select( blockEditorStore ).getTemplateLock( rootClientId ),
 			};
@@ -83,14 +80,16 @@ export default function useNestedSettingsUpdate(
 		prioritizedInserterBlocks
 	);
+	const _templateLock =
+		templateLock === undefined || parentLock === 'contentOnly'
+			? parentLock
+			: templateLock;
 	useLayoutEffect( () => {
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			prioritizedInserterBlocks: _prioritizedInserterBlocks,
-			templateLock:
-				templateLock === undefined || parentLock === 'contentOnly'
-					? parentLock
-					: templateLock,
+			templateLock: _templateLock,
 		};
 		// These values are not defined for RN, so only include them if they
@@ -116,41 +115,37 @@ export default function useNestedSettingsUpdate(
 			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
 		}
-		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			// Batch updates to block list settings to avoid triggering cascading renders
-			// for each container block included in a tree and optimize initial render.
-			// To avoid triggering updateBlockListSettings for each container block
-			// causing X re-renderings for X container blocks,
-			// we batch all the updatedBlockListSettings in a single "data" batch
-			// which results in a single re-render.
-			if ( ! pendingSettingsUpdates.get( registry ) ) {
-				pendingSettingsUpdates.set( registry, [] );
-			}
-			pendingSettingsUpdates
-				.get( registry )
-				.push( [ clientId, newSettings ] );
-			window.queueMicrotask( () => {
-				if ( pendingSettingsUpdates.get( registry )?.length ) {
-					registry.batch( () => {
-						pendingSettingsUpdates
-							.get( registry )
-							.forEach( ( args ) => {
-								updateBlockListSettings( ...args );
-							} );
-						pendingSettingsUpdates.set( registry, [] );
-					} );
-				}
-			} );
+		// Batch updates to block list settings to avoid triggering cascading renders
+		// for each container block included in a tree and optimize initial render.
+		// To avoid triggering updateBlockListSettings for each container block
+		// causing X re-renderings for X container blocks,
+		// we batch all the updatedBlockListSettings in a single "data" batch
+		// which results in a single re-render.
+		if ( ! pendingSettingsUpdates.get( registry ) ) {
+			pendingSettingsUpdates.set( registry, [] );
 		}
+		pendingSettingsUpdates
+			.get( registry )
+			.push( [ clientId, newSettings ] );
+		window.queueMicrotask( () => {
+			if ( pendingSettingsUpdates.get( registry )?.length ) {
+				registry.batch( () => {
+					pendingSettingsUpdates
+						.get( registry )
+						.forEach( ( args ) => {
+							updateBlockListSettings( ...args );
+						} );
+					pendingSettingsUpdates.set( registry, [] );
+				} );
+			}
+		} );
 	}, [
 		clientId,
-		blockListSettings,
 		_allowedBlocks,
 		_prioritizedInserterBlocks,
+		_templateLock,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
-		templateLock,
-		parentLock,
 		captureToolbars,
 		orientation,
 		updateBlockListSettings,

package/src/components/inserter/block-patterns-tab.js CHANGED Viewed

@@ -8,7 +8,7 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { _x, __ } from '@wordpress/i18n';
+import { _x, __, isRTL } from '@wordpress/i18n';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
@@ -17,7 +17,8 @@ import {
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { parse } from '@wordpress/blocks';
 import { focus } from '@wordpress/dom';
 /**
@@ -27,6 +28,7 @@ import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
+import useBlockTypesState from './hooks/use-block-types-state';
 const noop = () => {};
@@ -49,6 +51,18 @@ function usePatternsCategories( rootClientId ) {
 		rootClientId
 	);
+	const [ unsyncedPatterns ] = useBlockTypesState(
+		rootClientId,
+		undefined,
+		'unsynced'
+	);
+	const filteredUnsyncedPatterns = useMemo( () => {
+		return unsyncedPatterns.filter(
+			( { category: unsyncedPatternCategory } ) =>
+				unsyncedPatternCategory === 'reusable'
+		);
+	}, [ unsyncedPatterns ] );
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
 			if ( ! pattern.categories || ! pattern.categories.length ) {
@@ -93,9 +107,20 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if ( filteredUnsyncedPatterns.length > 0 ) {
+			categories.push( {
+				name: 'reusable',
+				label: _x( 'Custom patterns' ),
+			} );
+		}
 		return categories;
-	}, [ allPatterns, allCategories ] );
+	}, [
+		allCategories,
+		allPatterns,
+		filteredUnsyncedPatterns.length,
+		hasRegisteredCategory,
+	] );
 	return populatedCategories;
 }
@@ -144,6 +169,24 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
+	const [ unsyncedPatterns ] = useBlockTypesState(
+		rootClientId,
+		onInsert,
+		'unsynced'
+	);
+	const filteredUnsyncedPatterns = useMemo( () => {
+		return unsyncedPatterns
+			.filter(
+				( { category: unsyncedPatternCategory } ) =>
+					unsyncedPatternCategory === 'reusable'
+			)
+			.map( ( syncedPattern ) => ( {
+				...syncedPattern,
+				blocks: parse( syncedPattern.content, {
+					__unstableSkipMigrationLogs: true,
+				} ),
+			} ) );
+	}, [ unsyncedPatterns ] );
 	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
@@ -167,13 +210,19 @@ export function BlockPatternsCategoryPanel( {
 			} ),
 		[ allPatterns, category ]
 	);
-	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
+	const patterns =
+		category.name === 'reusable'
+			? filteredUnsyncedPatterns
+			: currentCategoryPatterns;
+	const currentShownPatterns = useAsyncList( patterns );
 	// Hide block pattern preview on unmount.
 	useEffect( () => () => onHover( null ), [] );
-	if ( ! currentCategoryPatterns.length ) {
+	if (
+		! currentCategoryPatterns.length &&
+		! filteredUnsyncedPatterns.length
+	) {
 		return null;
 	}
@@ -185,7 +234,7 @@ export function BlockPatternsCategoryPanel( {
 			<p>{ category.description }</p>
 			<BlockPatternList
 				shownPatterns={ currentShownPatterns }
-				blockPatterns={ currentCategoryPatterns }
+				blockPatterns={ patterns }
 				onClickPattern={ onClick }
 				onHover={ onHover }
 				label={ category.label }
@@ -240,7 +289,13 @@ function BlockPatternsTabs( {
 										<FlexBlock>
 											{ category.label }
 										</FlexBlock>
-										<Icon icon={ chevronRight } />
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</HStack>
 								</Item>
 							) ) }

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

@@ -19,9 +19,10 @@ 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 ) => {
+const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
 	const { categories, collections, items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
@@ -30,10 +31,10 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 			return {
 				categories: getCategories(),
 				collections: getCollections(),
-				items: getInserterItems( rootClientId ),
+				items: getInserterItems( rootClientId, syncStatus ),
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, syncStatus ]
 	);
 	const onSelectItem = useCallback(

package/src/components/inserter/hooks/use-insertion-point.js CHANGED Viewed

@@ -135,6 +135,7 @@ function useInsertionPoint( {
 			destinationIndex,
 			onSelect,
 			shouldFocusBlock,
+			selectBlockOnInsert,
 		]
 	);

package/src/components/inserter/library.js CHANGED Viewed

@@ -36,7 +36,8 @@ function InserterLibrary(
 			return {
 				destinationRootClientId: _rootClientId,
 				prioritizePatterns:
-					getSettings().__experimentalPreferPatternsOnRoot,
+					getSettings().__experimentalPreferPatternsOnRoot &&
+					! _rootClientId,
 			};
 		},
 		[ clientId, rootClientId ]

package/src/components/inserter/media-tab/media-tab.js CHANGED Viewed

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
@@ -16,7 +16,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
@@ -89,7 +89,13 @@ function MediaTab( {
 										<FlexBlock>
 											{ mediaCategory.labels.name }
 										</FlexBlock>
-										<Icon icon={ chevronRight } />
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</HStack>
 								</Item>
 							) ) }

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

@@ -29,12 +29,12 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	}
 	return (
-		<InserterPanel title={ __( 'Reusable blocks' ) }>
+		<InserterPanel title={ __( 'Synced patterns' ) }>
 			<BlockTypesList
 				items={ filteredItems }
 				onSelect={ onSelectItem }
 				onHover={ onHover }
-				label={ __( 'Reusable blocks' ) }
+				label={ __( 'Synced patterns' ) }
 			/>
 		</InserterPanel>
 	);
@@ -67,7 +67,7 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 						post_type: 'wp_block',
 					} ) }
 				>
-					{ __( 'Manage Reusable blocks' ) }
+					{ __( 'Manage custom patterns' ) }
 				</Button>
 			</div>
 		</>

package/src/components/inserter/tabs.js CHANGED Viewed

@@ -13,13 +13,13 @@ const blocksTab = {
 };
 const patternsTab = {
 	name: 'patterns',
-	/* translators: Patterns tab title in the block inserter. */
+	/* translators: Theme and Directory Patterns tab title in the block inserter. */
 	title: __( 'Patterns' ),
 };
 const reusableBlocksTab = {
 	name: 'reusable',
-	/* translators: Reusable blocks tab title in the block inserter. */
-	title: __( 'Reusable' ),
+	/* translators: Locally created Patterns tab title in the block inserter. */
+	title: __( 'Synced patterns' ),
 	icon: reusableBlockIcon,
 };
 const mediaTab = {

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

@@ -181,12 +181,6 @@ function LinkControl( {
 			isMounting.current = false;
 			return;
 		}
-		// Unless we are mounting, we always want to focus either:
-		// - the URL input
-		// - the first focusable element in the Link UI.
-		// But in editing mode if there is a text input present then
-		// the URL input is at index 1. If not then it is at index 0.
-		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 		// Scenario - when:
 		// - switching between editable and non editable LinkControl
@@ -194,9 +188,8 @@ function LinkControl( {
 		// ...then move focus to the *first* element to avoid focus loss
 		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[
-				whichFocusTargetIndex
-			] || wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[ 0 ] ||
+			wrapperNode.current;
 		nextFocusTarget.focus();

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

@@ -126,6 +126,7 @@ const LinkControlSearchInput = forwardRef(
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
 					label={ useLabel ? 'URL' : undefined }
 					className={ inputClasses }

package/src/components/link-control/test/index.js CHANGED Viewed

@@ -582,44 +582,6 @@ describe( 'Searching for a link', () => {
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
-	it.each( [
-		[ 'couldbeurlorentitysearchterm' ],
-		[ 'ThisCouldAlsoBeAValidURL' ],
-	] )(
-		'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.',
-		async ( searchTerm ) => {
-			const user = userEvent.setup();
-			render( <LinkControl /> );
-			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
-			// Simulate searching for a term.
-			await user.type( searchInput, searchTerm );
-			const searchResultElements = within(
-				await screen.findByRole( 'listbox', {
-					name: /Search results for.*/,
-				} )
-			).getAllByRole( 'option' );
-			const lastSearchResultItem =
-				searchResultElements[ searchResultElements.length - 1 ];
-			// We should see a search result for each of the expect search suggestions.
-			expect( searchResultElements ).toHaveLength(
-				fauxEntitySuggestions.length
-			);
-			// The URL search suggestion should not exist.
-			expect( lastSearchResultItem ).not.toHaveTextContent( searchTerm );
-			expect( lastSearchResultItem ).not.toHaveTextContent( 'URL' );
-			expect( lastSearchResultItem ).not.toHaveTextContent(
-				'Press ENTER to add this link'
-			);
-		}
-	);
 	it( 'should not display a URL suggestion as a default fallback when noURLSuggestion is passed.', async () => {
 		const user = userEvent.setup();
 		render( <LinkControl noURLSuggestion /> );
@@ -981,8 +943,6 @@ describe( 'Default search suggestions', () => {
 		const initialValue = fauxEntitySuggestions[ 0 ];
 		render( <LinkControl showInitialSuggestions value={ initialValue } /> );
-		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 		// Click the "Edit/Change" button and check initial suggestions are not
 		// shown.
 		const currentLinkUI = screen.getByLabelText( 'Currently selected' );
@@ -992,23 +952,18 @@ describe( 'Default search suggestions', () => {
 		await user.click( currentLinkBtn );
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 		// Search input is set to the URL value.
 		expect( searchInput ).toHaveValue( initialValue.url );
-		// Focus the search input to display suggestions
-		await user.click( searchInput );
-		const searchResultElements = within(
-			await screen.findByRole( 'listbox', {
+		// Ensure no initial suggestions are shown.
+		expect(
+			screen.queryByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
-		).getAllByRole( 'option' );
-		expect( searchResultElements ).toHaveLength( 4 );
-		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+		).not.toBeInTheDocument();
-		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
+		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
 	it( 'should display initial suggestions when input value is manually deleted', async () => {
@@ -1703,6 +1658,40 @@ describe( 'Selecting links', () => {
 			expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 		} );
+		it( 'should not show search results on URL input focus when the URL has not changed', async () => {
+			const selectedLink = fauxEntitySuggestions[ 0 ];
+			render( <LinkControl value={ selectedLink } forceIsEditingLink /> );
+			// focus the search input
+			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			fireEvent.focus( searchInput );
+			// check that the search results are not visible
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).not.toBeInTheDocument();
+			// check that the mock fetch function was not called
+			expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
+			// check that typing in the search input to make the value dirty
+			// does trigger search results
+			fireEvent.change( searchInput, { target: { value: 'changes' } } );
+			expect(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).toBeVisible();
+			// check the mock fetch function was called
+			expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
+		} );
 	} );
 } );

package/src/components/list-view/block-select-button.js CHANGED Viewed

@@ -10,12 +10,14 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -60,6 +62,15 @@ function ListViewBlockSelectButton(
 	} = useSelect( blockEditorStore );
 	const { removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
+	const isSticky = blockInformation?.positionType === 'sticky';
+	const positionLabel = blockInformation?.positionLabel
+		? sprintf(
+				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
+				__( 'Position: %1$s' ),
+				blockInformation.positionLabel
+		  )
+		: '';
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -166,6 +177,13 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ positionLabel && isSticky && (
+						<Tooltip text={ positionLabel }>
+							<span className="block-editor-list-view-block-select-button__sticky">
+								<Icon icon={ pinSmall } />
+							</span>
+						</Tooltip>
+					) }
 					{ isLocked && (
 						<span className="block-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />