@wordpress/block-editor 12.3.3 → 12.3.5

package/src/components/block-tools/style.scss

@@ -131,11 +131,11 @@
 	@include break-medium() {
 		&.is-fixed {
 
-			// leave room for block inserter
-			margin-left: $grid-unit-80;
+			// leave room for block inserter, undo and redo, list view
+			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit;
+			top: $admin-bar-height + $grid-unit - $border-width;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -145,32 +145,63 @@
 
 			&.is-collapsed {
 				width: initial;
-				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				// leave room for block inserter
-				margin-left: $grid-unit-80 + $grid-unit-70;
-				top: $grid-unit;
+				// leave room for block inserter, undo and redo, list view
+				// and some margin left
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
-					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar.is-showing-movers {
+				flex-grow: initial;
+				width: initial;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					height: 3 * $grid-unit;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-right: 0;
+					background-color: $gray-300;
+					position: relative;
+					left: math.div(-$grid-unit-05, 2);
+					top: -1px;
 				}
 			}
 
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
-				&::after {
+				&::before {
 					content: "";
 					width: $border-width;
-					height: 24px;
+					height: 3 * $grid-unit;
 					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
+					margin-right: $grid-unit-10;
 					background-color: $gray-300;
-					position: absolute;
-					left: 44px;
+					position: relative;
+					left: 0;
 					top: -1px;
 				}
 			}
@@ -178,6 +209,21 @@
 			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
 				&::before {
 					content: "";
@@ -186,27 +232,20 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -12px; //the padding of buttons
-					height: 24px;
+					left: -8px;
+					height: 3 * $grid-unit;
+					top: -1px;
 				}
 			}
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 6;
-				}
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
 
 				.is-fullscreen-mode & {
-					margin-left: $grid-unit-80 + $grid-unit-80;
-					&.is-collapsed {
-						margin-left: $grid-unit-80 * 7;
-					}
+					margin-left: $grid-unit * 18; // site hub, inserter and margin
 				}
 
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -234,12 +273,14 @@
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
+
 			.block-editor-block-parent-selector__button {
 				position: relative;
 				top: -1px;
 				border: 0;
 				padding-right: 6px;
 				padding-left: 6px;
+
 				&::after {
 					content: "\00B7";
 					font-size: 16px;
@@ -281,7 +322,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 

package/src/components/default-block-appender/content.scss

@@ -26,6 +26,17 @@
 		opacity: 0.62;
 	}
 
+	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
+	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
+	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
+	:where(body .is-layout-constrained) & {
+		> :first-child:first-child {
+			margin-block-start: 0;
+		}
+
+		// Since this particular appender will only ever appear on an entirely empty document, we don't account for last-child.
+	}
+
 	// Dropzone.
 	.components-drop-zone__content-icon {
 		display: none;

package/src/components/global-styles/filters-panel.js

@@ -22,7 +22,7 @@ import {
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -77,7 +77,7 @@ function FiltersToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Filters' ) }
+			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
 		>

package/src/components/index.js

@@ -164,3 +164,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+
+/*
+ * The following rename hint component can be removed in 6.4.
+ */
+export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

package/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -52,6 +52,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		onInsertBlocks,
 		destinationRootClientId
 	);
+
 	const registeredPatternCategories = useMemo(
 		() =>
 			patternCategories.map(
@@ -75,7 +76,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			);
 		}
 		return searchItems( allPatterns, filterValue );
-	}, [ filterValue, selectedCategory, allPatterns ] );
+	}, [
+		filterValue,
+		allPatterns,
+		selectedCategory,
+		registeredPatternCategories,
+	] );
 
 	// Announce search results on change.
 	useEffect( () => {
@@ -89,7 +95,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
+	}, [ filterValue, debouncedSpeak, filteredBlockPatterns.length ] );
 
 	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
 		step: INITIAL_INSERTER_RESULTS,

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

@@ -18,7 +18,6 @@ import {
 	Button,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
-import { parse } from '@wordpress/blocks';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -28,13 +27,13 @@ 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 = () => {};
 
 // Preferred order of pattern categories. Any other categories should
 // be at the bottom without any re-ordering.
 const patternCategoriesOrder = [
+	'custom',
 	'featured',
 	'posts',
 	'text',
@@ -51,18 +50,6 @@ 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 ) {
@@ -107,20 +94,9 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-		if ( filteredUnsyncedPatterns.length > 0 ) {
-			categories.push( {
-				name: 'reusable',
-				label: _x( 'Custom patterns' ),
-			} );
-		}
 
 		return categories;
-	}, [
-		allCategories,
-		allPatterns,
-		filteredUnsyncedPatterns.length,
-		hasRegisteredCategory,
-	] );
+	}, [ allCategories, allPatterns, hasRegisteredCategory ] );
 
 	return populatedCategories;
 }
@@ -169,24 +145,6 @@ 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(
@@ -208,21 +166,15 @@ export function BlockPatternsCategoryPanel( {
 
 				return availablePatternCategories.length === 0;
 			} ),
-		[ allPatterns, category ]
+		[ allPatterns, availableCategories, category.name ]
 	);
-	const patterns =
-		category.name === 'reusable'
-			? filteredUnsyncedPatterns
-			: currentCategoryPatterns;
-	const currentShownPatterns = useAsyncList( patterns );
+
+	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
 
 	// Hide block pattern preview on unmount.
 	useEffect( () => () => onHover( null ), [] );
 
-	if (
-		! currentCategoryPatterns.length &&
-		! filteredUnsyncedPatterns.length
-	) {
+	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
 
@@ -233,8 +185,8 @@ export function BlockPatternsCategoryPanel( {
 			</div>
 			<p>{ category.description }</p>
 			<BlockPatternList
-				shownPatterns={ currentShownPatterns }
-				blockPatterns={ patterns }
+				shownPatterns={ categoryPatternsList }
+				blockPatterns={ currentCategoryPatterns }
 				onClickPattern={ onClick }
 				onHover={ onHover }
 				label={ category.label }

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/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/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/list-view/style.scss

@@ -408,8 +408,7 @@ $block-navigation-max-indent: 8;
 
 	.block-editor-list-view-drop-indicator__line {
 		background: var(--wp-admin-theme-color);
-		height: 6px;
-		border: 1px solid $white;
+		height: 4px;
 		border-radius: 4px;
 	}
 }

package/src/components/list-view/use-list-view-client-ids.js

@@ -16,14 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				getListViewClientIdsTree,
+				getEnabledClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
 				clientIdsTree:
-					blocks ?? getListViewClientIdsTree( rootClientId ),
+					blocks ?? getEnabledClientIdsTree( rootClientId ),
 			};
 		},
 		[ blocks, rootClientId ]

package/src/store/private-selectors.js

@@ -136,21 +136,18 @@ export const isBlockSubtreeDisabled = createSelector(
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getListViewClientIdsTree = createSelector(
+export const getEnabledClientIdsTree = createSelector(
 	( state, rootClientId = '' ) => {
 		return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => {
 			if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
 				return [
 					{
 						clientId,
-						innerBlocks: getListViewClientIdsTree(
-							state,
-							clientId
-						),
+						innerBlocks: getEnabledClientIdsTree( state, clientId ),
 					},
 				];
 			}
-			return getListViewClientIdsTree( state, clientId );
+			return getEnabledClientIdsTree( state, clientId );
 		} );
 	},
 	( state ) => [