@wordpress/block-editor 8.5.0 → 8.5.1

package/src/components/block-pattern-setup/index.js

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useResizeObserver } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -38,41 +39,52 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div className={ containerClass }>
-				<ul className="carousel-container">
-					{ patterns.map( ( pattern, index ) => (
-						<BlockPatternSlide
-							className={ slideClass.get( index ) || '' }
-							key={ pattern.name }
-							pattern={ pattern }
-						/>
-					) ) }
-				</ul>
+			<div
+				className="block-editor-block-pattern-setup__carousel"
+				style={ { height } }
+			>
+				<div className={ containerClass }>
+					<ul className="carousel-container">
+						{ patterns.map( ( pattern, index ) => (
+							<BlockPatternSlide
+								className={ slideClass.get( index ) || '' }
+								key={ pattern.name }
+								pattern={ pattern }
+								minHeight={ height }
+							/>
+						) ) }
+					</ul>
+				</div>
 			</div>
 		);
 	}
 	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className={ containerClass }
-			aria-label={ __( 'Patterns list' ) }
+		<div
+			style={ { height } }
+			className="block-editor-block-pattern-setup__grid"
 		>
-			{ patterns.map( ( pattern ) => (
-				<BlockPattern
-					key={ pattern.name }
-					pattern={ pattern }
-					onSelect={ onBlockPatternSelect }
-					composite={ composite }
-				/>
-			) ) }
-		</Composite>
+			<Composite
+				{ ...composite }
+				role="listbox"
+				className={ containerClass }
+				aria-label={ __( 'Patterns list' ) }
+			>
+				{ patterns.map( ( pattern ) => (
+					<BlockPattern
+						key={ pattern.name }
+						pattern={ pattern }
+						onSelect={ onBlockPatternSelect }
+						composite={ composite }
+					/>
+				) ) }
+			</Composite>
+		</div>
 	);
 };
 
 function BlockPattern( { pattern, onSelect, composite } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
-	const { blocks, title, description, viewportWidth = 700 } = pattern;
+	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPattern,
 		`${ baseClassName }__item-description`
@@ -94,9 +106,6 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
-				<div className={ `${ baseClassName }__item-title` }>
-					{ title }
-				</div>
 			</CompositeItem>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
@@ -107,7 +116,7 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern } ) {
+function BlockPatternSlide( { className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
@@ -119,7 +128,10 @@ function BlockPatternSlide( { className, pattern } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview blocks={ blocks } __experimentalLive />
+			<BlockPreview
+				blocks={ blocks }
+				__experimentalMinHeight={ minHeight }
+			/>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }
@@ -141,6 +153,10 @@ const BlockPatternSetup = ( {
 	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
+	const [
+		contentResizeListener,
+		{ height: contentHeight },
+	] = useResizeObserver();
 
 	if ( ! patterns?.length || showBlank ) {
 		return startBlankComponent;
@@ -152,35 +168,44 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
+	const onStartBlank = startBlankComponent
+		? () => {
+				setShowBlank( true );
+		  }
+		: undefined;
 	return (
-		<div
-			className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
-		>
-			<SetupToolbar
-				viewMode={ viewMode }
-				setViewMode={ setViewMode }
-				activeSlide={ activeSlide }
-				totalSlides={ patterns.length }
-				handleNext={ () => {
-					setActiveSlide( ( active ) => active + 1 );
-				} }
-				handlePrevious={ () => {
-					setActiveSlide( ( active ) => active - 1 );
-				} }
-				onBlockPatternSelect={ () => {
-					onPatternSelectCallback( patterns[ activeSlide ].blocks );
-				} }
-				onStartBlank={ () => {
-					setShowBlank( true );
-				} }
-			/>
-			<SetupContent
-				viewMode={ viewMode }
-				activeSlide={ activeSlide }
-				patterns={ patterns }
-				onBlockPatternSelect={ onPatternSelectCallback }
-			/>
-		</div>
+		<>
+			{ contentResizeListener }
+			<div
+				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
+			>
+				<SetupContent
+					viewMode={ viewMode }
+					activeSlide={ activeSlide }
+					patterns={ patterns }
+					onBlockPatternSelect={ onPatternSelectCallback }
+					height={ contentHeight - 2 * 60 }
+				/>
+				<SetupToolbar
+					viewMode={ viewMode }
+					setViewMode={ setViewMode }
+					activeSlide={ activeSlide }
+					totalSlides={ patterns.length }
+					handleNext={ () => {
+						setActiveSlide( ( active ) => active + 1 );
+					} }
+					handlePrevious={ () => {
+						setActiveSlide( ( active ) => active - 1 );
+					} }
+					onBlockPatternSelect={ () => {
+						onPatternSelectCallback(
+							patterns[ activeSlide ].blocks
+						);
+					} }
+					onStartBlank={ onStartBlank }
+				/>
+			</div>
+		</>
 	);
 };
 

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -17,7 +17,9 @@ import { VIEWMODES } from './constants';
 
 const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		{ onStartBlank && (
+			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>

package/src/components/block-pattern-setup/style.scss

@@ -5,8 +5,6 @@
 	align-items: flex-start;
 	width: 100%;
 	border-radius: $radius-block-ui;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
-	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 
 	// TODO change to check parent.
 	&.view-mode-grid {
@@ -15,37 +13,41 @@
 		}
 
 		.block-editor-block-pattern-setup__container {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			grid-gap: $grid-unit-20;
-			padding: $grid-unit-20;
-			max-height: 550px;
-			overflow: auto;
-			margin: 0 $border-width $border-width $border-width;
-			width: calc(100% - #{ $border-width * 2 });
-			background: $white;
+			column-gap: $grid-unit-30;
+			display: block;
+			width: 100%;
+			padding: $grid-unit-40;
+			column-count: 2;
+
+			@include break-huge() {
+				column-count: 3;
+			}
 
 			.block-editor-block-preview__container,
 			div[role="button"] {
 				cursor: pointer;
 			}
 
-			.block-editor-block-pattern-setup-list__item-title {
-				padding: $grid-unit-05;
-				font-size: $helptext-font-size;
-				text-align: center;
-			}
+			.block-editor-block-pattern-setup-list__list-item {
+				break-inside: avoid-column;
+				margin-bottom: $grid-unit-30;
+
+				.block-editor-block-preview__container {
+					min-height: 100px;
+					border-radius: $radius-block-ui;
+					border: $border-width solid $gray-300;
+				}
 
-			.block-editor-block-preview__container {
-				border-radius: $radius-block-ui;
-				border: $border-width solid $gray-300;
+				.block-editor-block-preview__content {
+					width: 100%;
+				}
 			}
 		}
 	}
 
 	.block-editor-block-pattern-setup__toolbar {
+		height: $header-height;
 		box-sizing: border-box;
-		position: relative;
 		padding: $grid-unit-20;
 		width: 100%;
 		text-align: left;
@@ -54,13 +56,12 @@
 		// Block UI appearance.
 		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		border-top: 1px solid $gray-300;
+		align-self: flex-end;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;
@@ -93,13 +94,12 @@
 				box-sizing: border-box;
 			}
 			.pattern-slide {
-				opacity: 0;
 				position: absolute;
 				top: 0;
 				width: 100%;
 				margin: auto;
-				padding: $grid-unit-20;
-				transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+				padding: 0;
+				transition: transform 0.5s, z-index 0.5s;
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {
@@ -125,3 +125,9 @@
 		}
 	}
 }
+
+.block-editor-block-pattern-setup__carousel,
+.block-editor-block-pattern-setup__grid {
+	width: 100%;
+	overflow-y: auto;
+}

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

@@ -19,7 +19,11 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
+function AutoBlockPreview( {
+	viewportWidth,
+	__experimentalPadding,
+	__experimentalMinHeight,
+} ) {
 	const [
 		containerResizeListener,
 		{ width: containerWidth },
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						contentHeight > MAX_HEIGHT
 							? MAX_HEIGHT * scale
 							: undefined,
+					minHeight: __experimentalMinHeight,
 				} }
 			>
 				<Iframe
@@ -98,6 +103,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						// This is a catch-all max-height for patterns.
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
+						minHeight:
+							scale < 1 && __experimentalMinHeight
+								? __experimentalMinHeight / scale
+								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }

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

@@ -29,6 +29,7 @@ export function BlockPreview( {
 	viewportWidth = 1200,
 	__experimentalLive = false,
 	__experimentalOnClick,
+	__experimentalMinHeight,
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -51,6 +52,7 @@ export function BlockPreview( {
 				<AutoHeightBlockPreview
 					viewportWidth={ viewportWidth }
 					__experimentalPadding={ __experimentalPadding }
+					__experimentalMinHeight={ __experimentalMinHeight }
 				/>
 			) }
 		</BlockEditorProvider>

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

@@ -108,7 +108,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockTitle }
-					icon={ <BlockIcon icon={ icon } showColors /> }
+					icon={
+						<>
+							<BlockIcon icon={ icon } showColors />
+							{ ( isReusable || isTemplate ) && (
+								<span className="block-editor-block-switcher__toggle-text">
+									<BlockTitle
+										clientId={ clientIds }
+										maximumLength={ 35 }
+									/>
+								</span>
+							) }
+						</>
+					}
 				/>
 			</ToolbarGroup>
 		);

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

@@ -46,11 +46,15 @@
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
-	width: $block-toolbar-height;
+	display: flex;
+	// The `!important` is used to vastly simplify the overriding of an inherited selector.
+	// Can be removed if we refactor .block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon
+	padding: ($grid-unit-15 * 0.5) $grid-unit-15 !important;
 
-	.block-editor-blocks-icon {
+	.block-editor-block-icon {
 		margin-right: auto;
 		margin-left: auto;
+		min-width: $icon-size !important;
 	}
 }
 
@@ -172,7 +176,7 @@
 // The block switcher in the contextual toolbar should be bigger.
 .block-editor-block-contextual-toolbar {
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		width: $grid-unit-60;
+		min-width: $button-size;
 	}
 
 	.components-button.block-editor-block-switcher__no-switcher-icon,

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -6,19 +6,21 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <Memo(BlockIcon)
-        icon={
-          <SVG
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <Path
-              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-            />
-          </SVG>
-        }
-        showColors={true}
-      />
+      <React.Fragment>
+        <Memo(BlockIcon)
+          icon={
+            <SVG
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <Path
+                d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+              />
+            </SVG>
+          }
+          showColors={true}
+        />
+      </React.Fragment>
     }
   />
 </ToolbarGroup>

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

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { Button } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
@@ -19,7 +18,7 @@ import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
-import { store as blockEditorStore } from '../../store';
+import { useBlockLock } from '../block-lock';
 
 function ListViewBlockSelectButton(
 	{
@@ -36,14 +35,7 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const isLocked = useSelect(
-		( select ) => {
-			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
-
-			return ! canMoveBlock( clientId ) || ! canRemoveBlock( clientId );
-		},
-		[ clientId ]
-	);
+	const { isLocked } = useBlockLock( clientId );
 
 	// 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.

package/src/store/selectors.js

@@ -1504,7 +1504,7 @@ export function canRemoveBlock( state, clientId, rootClientId = null ) {
 
 	const { lock } = attributes;
 	const parentIsLocked = !! getTemplateLock( state, rootClientId );
-	// If we don't have a lock on the blockType level, we differ to the parent templateLock.
+	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
 	if ( lock === undefined || lock?.remove === undefined ) {
 		return ! parentIsLocked;
 	}
@@ -1545,7 +1545,7 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 
 	const { lock } = attributes;
 	const parentIsLocked = getTemplateLock( state, rootClientId ) === 'all';
-	// If we don't have a lock on the blockType level, we differ to the parent templateLock.
+	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
 	if ( lock === undefined || lock?.move === undefined ) {
 		return ! parentIsLocked;
 	}
@@ -1569,6 +1569,26 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) {
 	);
 }
 
+/**
+ * Determines if the given block is allowed to be edited.
+ *
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block client Id.
+ *
+ * @return {boolean} Whether the given block is allowed to be edited.
+ */
+export function canEditBlock( state, clientId ) {
+	const attributes = getBlockAttributes( state, clientId );
+	if ( attributes === null ) {
+		return true;
+	}
+
+	const { lock } = attributes;
+
+	// When the edit is true, we cannot edit the block.
+	return ! lock?.edit;
+}
+
 /**
  * Determines if the given block type can be locked/unlocked by a user.
  *