@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

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

@@ -0,0 +1,82 @@
+.block-editor-block-manager__no-results {
+	font-style: italic;
+	padding: $grid-unit-30 0;
+	text-align: center;
+}
+
+.block-editor-block-manager__search {
+	margin: $grid-unit-20 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+	border: $border-width solid $gray-300;
+	border-width: $border-width 0;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: ($grid-unit-05 + 1) * -1;
+	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+		top: $grid-unit-40 - 1;
+	}
+	.is-link {
+		margin-left: 12px;
+	}
+}
+
+.block-editor-block-manager__category {
+	margin: 0 0 $grid-unit-30 0;
+}
+
+.block-editor-block-manager__category-title {
+	position: sticky;
+	top: - $grid-unit-05; // Offsets the top padding on the modal content container
+	padding: $grid-unit-20 0;
+	background-color: $white;
+	z-index: z-index(".block-editor-block-manager__category-title");
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+}
+
+.block-editor-block-manager__checklist {
+	margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+	border-bottom: 1px solid $gray-300;
+}
+
+.block-editor-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
+
+	.components-modal__content &.components-checkbox-control__input-container {
+		margin: 0 $grid-unit-10;
+	}
+
+	.block-editor-block-icon {
+		margin-right: 10px;
+		fill: $gray-900;
+	}
+}
+
+.block-editor-block-manager__results {
+	border-top: $border-width solid $gray-300;
+}
+
+// Remove the top border from results when adjacent to the disabled block count
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+	border-top-width: 0;
+}

package/src/components/block-mover/README.md

@@ -1,12 +1,10 @@
-# Block mover
+# BlockMover
 
-Block movers allow moving blocks inside the editor using up and down buttons.
+BlockMover component allows moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Development guidelines
-
-### Usage
+## Usage
 
 Shows the block mover buttons in the block toolbar.
 
@@ -15,13 +13,22 @@ import { BlockMover } from '@wordpress/block-editor';
 const MyMover = () => <BlockMover clientIds={ [ clientId ] } />;
 ```
 
-### Props
+## Props
 
-#### clientIds
+### clientIds
 
-Blocks IDs
+The IDs of the blocks to move.
 
 -   Type: `Array`
+-   Required: Yes
+
+### hideDragHandle
+
+If this property is true, the drag handle is hidden.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
 
 ## Related components
 

package/src/components/block-mover/stories/index.story.js

@@ -14,6 +14,7 @@ import BlockMover from '../';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import { store as blockEditorStore } from '../../../store';
 
+// For the purpose of this story, we need to register the core blocks samples.
 registerCoreBlocks();
 const blocks = [
 	// vertical
@@ -30,81 +31,82 @@ const blocks = [
 	] ),
 ];
 
-function Provider( { children } ) {
-	const wrapperStyle = { margin: '24px', position: 'relative' };
-
-	return (
-		<div style={ wrapperStyle }>
+/**
+ * BlockMover component allows moving blocks inside the editor using up and down buttons.
+ */
+const meta = {
+	title: 'BlockEditor/BlockMover',
+	component: BlockMover,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	decorators: [
+		( Story ) => (
 			<ExperimentalBlockEditorProvider value={ blocks }>
-				{ children }
+				<Toolbar label="Block Mover">
+					<Story />
+				</Toolbar>
 			</ExperimentalBlockEditorProvider>
-		</div>
-	);
-}
-
-function BlockMoverStory() {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		/**
-		 * This shouldn't be needed but unfortunatley
-		 * the layout orientation is not declarative, we need
-		 *  to render the blocks to update the block settings in the state.
-		 */
-		updateBlockListSettings( blocks[ 1 ].clientId, {
-			orientation: 'horizontal',
-		} );
-	}, [] );
-
-	return (
-		<div>
-			<p>The mover by default is vertical</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
-
-			<p style={ { marginTop: 36 } }>
-				But it can also accommodate horizontal blocks.
-			</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
+		),
+	],
+	argTypes: {
+		clientIds: {
+			control: {
+				type: 'none',
+			},
+			description: 'The client IDs of the blocks to move.',
+		},
+		hideDragHandle: {
+			control: {
+				type: 'boolean',
+			},
+			description: 'If this property is true, the drag handle is hidden.',
+		},
+	},
+};
+export default meta;
 
-			<p style={ { marginTop: 36 } }>We can also hide the drag handle.</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ]
-							: []
-					}
-					hideDragHandle
-				/>
-			</Toolbar>
-		</div>
-	);
-}
+export const Default = {
+	args: {
+		clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ],
+	},
+};
 
-export default {
-	title: 'BlockEditor/BlockMover',
+/**
+ * This story shows the block mover with horizontal orientation.
+ * It is necessary to render the blocks to update the block settings in the state.
+ */
+export const Horizontal = {
+	decorators: [
+		( Story ) => {
+			const { updateBlockListSettings } = useDispatch( blockEditorStore );
+			useEffect( () => {
+				/**
+				 * This shouldn't be needed but unfortunately
+				 * the layout orientation is not declarative, we need
+				 * to render the blocks to update the block settings in the state.
+				 */
+				updateBlockListSettings( blocks[ 1 ].clientId, {
+					orientation: 'horizontal',
+				} );
+			}, [] );
+			return <Story />;
+		},
+	],
+	args: {
+		clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ],
+	},
+	parameters: {
+		docs: { canvas: { sourceState: 'hidden' } },
+	},
 };
 
-export const _default = () => {
-	return (
-		<Provider>
-			<BlockMoverStory />
-		</Provider>
-	);
+/**
+ * You can hide the drag handle by `hideDragHandle` attribute.
+ */
+export const HideDragHandle = {
+	args: {
+		...Default.args,
+		hideDragHandle: true,
+	},
 };

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

@@ -71,6 +71,9 @@
 
 // Specificity is necessary to override block toolbar button styles.
 .components-button.block-editor-block-mover-button {
+	// Prevent the SVGs inside the button from overflowing the button.
+	overflow: hidden;
+
 	// Focus and toggle pseudo elements.
 	&::before {
 		content: "";

package/src/components/block-patterns-list/README.md

@@ -18,7 +18,6 @@ import { BlockPatternsList } from '@wordpress/block-editor';
 const MyBlockPatternsList = () => (
 	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
-		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }
 	/>
 );
@@ -33,13 +32,6 @@ An array of block patterns that can be shown in the block patterns list.
 -   Type: `Array`
 -   Required: Yes
 
-#### shownPatterns
-
-An array of shown block patterns objects.
-
--   Type: `Array`
--   Required: Yes
-
 #### onClickPattern
 
 The performed event after a click on a block pattern. In most cases, the pattern is inserted in the block editor.
@@ -69,6 +61,14 @@ The aria label for the block patterns list.
 -   Required: No
 -   Default: `Block Patterns`
 
+#### showTitlesAsTooltip
+
+Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/block-patterns-list/index.js

@@ -39,14 +39,14 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
-	showTitle = true,
-	showTooltip,
+	showTitlesAsTooltip,
 	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
+	const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
 
 	// When we have a selected category and the pattern is draggable, we need to update the
 	// pattern's categories in metadata to only contain the selected category, and pass this to
@@ -94,10 +94,7 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={
-							showTooltip &&
-							! pattern.type !== INSERTER_PATTERN_TYPES.user
-						}
+						showTooltip={ showTitlesAsTooltip && ! isUserPattern }
 						title={ pattern.title }
 					>
 						<Composite.Item
@@ -134,33 +131,30 @@ function BlockPattern( {
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
 						>
-							<BlockPreview
-								blocks={ blocks }
-								viewportWidth={ viewportWidth }
-							/>
-
-							{ showTitle && (
+							<BlockPreview.Async
+								placeholder={ <BlockPatternPlaceholder /> }
+							>
+								<BlockPreview
+									blocks={ blocks }
+									viewportWidth={ viewportWidth }
+								/>
+							</BlockPreview.Async>
+							{ ( ! showTitlesAsTooltip || isUserPattern ) && (
 								<HStack
 									className="block-editor-patterns__pattern-details"
 									spacing={ 2 }
 								>
-									{ pattern.type ===
-										INSERTER_PATTERN_TYPES.user &&
-										! pattern.syncStatus && (
-											<div className="block-editor-patterns__pattern-icon-wrapper">
-												<Icon
-													className="block-editor-patterns__pattern-icon"
-													icon={ symbol }
-												/>
-											</div>
-										) }
-									{ ( ! showTooltip ||
-										pattern.type ===
-											INSERTER_PATTERN_TYPES.user ) && (
-										<div className="block-editor-block-patterns-list__item-title">
-											{ pattern.title }
+									{ isUserPattern && ! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
 										</div>
 									) }
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
 								</HStack>
 							) }
 
@@ -187,13 +181,11 @@ function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
-		shownPatterns,
 		onHover,
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
 		category,
-		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -205,11 +197,9 @@ function BlockPatternsList(
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-			shownPatterns.includes( pattern )
-		)?.name;
+		const firstCompositeItemId = blockPatterns[ 0 ]?.name;
 		setActiveCompositeId( firstCompositeItemId );
-	}, [ shownPatterns, blockPatterns ] );
+	}, [ blockPatterns ] );
 
 	return (
 		<Composite
@@ -221,24 +211,18 @@ function BlockPatternsList(
 			aria-label={ label }
 			ref={ ref }
 		>
-			{ blockPatterns.map( ( pattern ) => {
-				const isShown = shownPatterns.includes( pattern );
-				return isShown ? (
-					<BlockPattern
-						key={ pattern.name }
-						id={ pattern.name }
-						pattern={ pattern }
-						onClick={ onClickPattern }
-						onHover={ onHover }
-						isDraggable={ isDraggable }
-						showTitle={ showTitle }
-						showTooltip={ showTitlesAsTooltip }
-						category={ category }
-					/>
-				) : (
-					<BlockPatternPlaceholder key={ pattern.name } />
-				);
-			} ) }
+			{ blockPatterns.map( ( pattern ) => (
+				<BlockPattern
+					key={ pattern.name }
+					id={ pattern.name }
+					pattern={ pattern }
+					onClick={ onClickPattern }
+					onHover={ onHover }
+					isDraggable={ isDraggable }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					category={ category }
+				/>
+			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);

package/src/components/block-patterns-list/stories/index.story.js

@@ -3,11 +3,6 @@
  */
 import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
 
-/**
- * WordPress dependencies
- */
-import { useAsyncList } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
@@ -26,13 +21,9 @@ export default {
 
 export const Default = {
 	render: function Template( props ) {
-		const shownPatterns = useAsyncList( props.blockPatterns );
 		return (
 			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
-				<BlockPatternsList
-					shownPatterns={ shownPatterns }
-					{ ...props }
-				/>
+				<BlockPatternsList { ...props } />
 			</ExperimentalBlockEditorProvider>
 		);
 	},
@@ -40,7 +31,6 @@ export const Default = {
 		blockPatterns: patterns,
 		isDraggable: false,
 		label: 'Block patterns story',
-		showTitle: true,
 		showTitlesAsTooltip: false,
 	},
 	argTypes: {
@@ -49,18 +39,11 @@ export const Default = {
 			description:
 				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
 		},
-		showTitle: {
-			description: 'Whether to render the title of each pattern.',
-			table: {
-				defaultValue: { summary: true },
-				type: { summary: 'boolean' },
-			},
-		},
 		onClickPattern: { type: 'function' },
 		onHover: { type: 'function' },
 		showTitlesAsTooltip: {
 			description:
-				'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.',
+				'Whether to render the title of each pattern as a tooltip. If enabled',
 		},
 		orientation: {
 			description: 'Orientation for the underlying composite widget.',

package/src/components/block-popover/index.js

@@ -20,7 +20,7 @@ import {
  */
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
-import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
+import { rectUnion, getElementBounds } from '../../utils/dom';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -90,10 +90,10 @@ function BlockPopover(
 			getBoundingClientRect() {
 				return lastSelectedElement
 					? rectUnion(
-							getVisibleElementBounds( selectedElement ),
-							getVisibleElementBounds( lastSelectedElement )
+							getElementBounds( selectedElement ),
+							getElementBounds( lastSelectedElement )
 					  )
-					: getVisibleElementBounds( selectedElement );
+					: getElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,
 		};

package/src/components/block-preview/async.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}

package/src/components/block-preview/index.js

@@ -19,6 +19,7 @@ import AutoHeightBlockPreview from './auto';
 import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
+import { Async } from './async';
 
 const EMPTY_ADDITIONAL_STYLES = [];
 
@@ -86,6 +87,10 @@ export function BlockPreview( {
 	);
 }
 
+const MemoizedBlockPreview = memo( BlockPreview );
+
+MemoizedBlockPreview.Async = Async;
+
 /**
  * BlockPreview renders a preview of a block or array of blocks.
  *
@@ -97,7 +102,7 @@ export function BlockPreview( {
  *
  * @return {Component} The component to be rendered.
  */
-export default memo( BlockPreview );
+export default MemoizedBlockPreview;
 
 /**
  * This hook is used to lightly mark an element as a block preview wrapper

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -19,7 +19,7 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import __unstableCommentIconFill from '../../components/collab/block-comment-icon-slot';
+import CommentIconSlotFill from '../../components/collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -295,7 +295,7 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									<__unstableCommentIconFill.Slot
+									<CommentIconSlotFill.Slot
 										fillProps={ { onClose } }
 									/>
 								</MenuGroup>

package/src/components/block-settings-menu/index.js

@@ -7,12 +7,12 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import __unstableCommentIconToolbarFill from '../../components/collab/block-comment-icon-toolbar-slot';
+import CommentIconToolbarSlotFill from '../../components/collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
-			<__unstableCommentIconToolbarFill.Slot />
+			<CommentIconToolbarSlotFill.Slot />
 
 			<ToolbarItem>
 				{ ( toggleProps ) => (