@wordpress/block-editor 8.5.0 → 8.6.0

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

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { useDispatch } from '@wordpress/data';
+import { Toolbar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockMover from '../';
+import BlockEditorProvider from '../../provider';
+import { store as blockEditorStore } from '../../../store';
+
+registerCoreBlocks();
+const blocks = [
+	// vertical
+	createBlock( 'core/group', { layout: { type: 'flex' } }, [
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+	] ),
+	// horizontal
+	createBlock( 'core/buttons', {}, [
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+	] ),
+];
+
+function Provider( { children } ) {
+	const wrapperStyle = { margin: '24px', position: 'relative' };
+
+	return (
+		<div style={ wrapperStyle }>
+			<BlockEditorProvider value={ blocks }>
+				{ children }
+			</BlockEditorProvider>
+		</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 accomodate horizontal blocks.
+			</p>
+			<Toolbar label="Block Mover">
+				<BlockMover
+					clientIds={
+						blocks.length
+							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
+							: []
+					}
+				/>
+			</Toolbar>
+
+			<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 default {
+	title: 'BlockEditor/BlockMover',
+};
+
+export const _default = () => {
+	return (
+		<Provider>
+			<BlockMoverStory />
+		</Provider>
+	);
+};

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

@@ -1,159 +1,69 @@
-.block-editor-block-mover-button__description {
-	display: none;
-}
-
-.block-editor-block-mover-button.has-icon {
+.block-editor-block-mover__move-button-container {
+	display: flex;
 	padding: 0;
-}
-
-// Show the mover in a single button under the contextual toolbar.
-.block-editor-block-mover {
-	display: inline-flex;
-	flex-direction: row;
-
-	.block-editor-block-mover__move-button-container,
-	.components-toolbar {
-		flex: 1;
+	border: none;
 
-		// Increase touch targets on mobile.
-		flex-direction: row;
-		border-right: none !important;
-
-		@include break-small() {
+	@include break-small() {
+		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
-		}
-
-		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
-		// This is best fixed by making the mover control area a proper single toolbar group.
-		padding: 0;
-	}
-
-	&.is-horizontal .block-editor-block-mover__move-button-container,
-	&.is-horizontal .components-toolbar {
-		flex-direction: row;
-	}
-
-	.block-editor-block-mover-button {
-		&.block-editor-block-mover-button {
-			padding-right: 0;
-			padding-left: 0;
-			min-width: $button-size;
-		}
-
-		@include break-small() {
-			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-			height: $block-toolbar-height*0.5;
-			width: $block-toolbar-height - $grid-unit-15 * 0.5;
-			padding-right: $grid-unit-15 - $border-width !important;
-			padding-left: $grid-unit-15 * 0.5 !important;
-
-			// Extra specificity to override standard toolbar button styles.
-			&.block-editor-block-mover-button {
-				min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
+			width: $block-toolbar-height - $grid-unit-15;
+
+			> * {
+				height: $block-toolbar-height * 0.5;
+				width: 100%;
+				min-width: 0 !important; // overrides default button width.
+
+				// Focus style.
+				&::before {
+					height: 100%;
+					width: 100%;
+				}
 			}
-		}
 
-		// Focus style.
-		// Overrides .components-toolbar-group styles
-		&::before {
-			@include break-small() {
-				left: $grid-unit-10 !important;
-				right: $grid-unit-10 !important;
+			.block-editor-block-mover-button.is-up-button svg {
+				top: 5px;
+				flex-shrink: 0;
 			}
-		}
-	}
 
-	.block-editor-block-mover__drag-handle {
-		width: $button-size-small;
-		cursor: grab;
-
-		// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-		min-width: $button-size-small !important;
-		padding: 0 !important;
-
-		&:focus::before {
-			left: 0 !important;
-			right: 0 !important;
-		}
-	}
-
-	// Position the icons correctly.
-	@include break-small() {
-		.components-toolbar-group .block-editor-block-mover-button,
-		.components-toolbar .block-editor-block-mover-button {
-			margin: 0 auto 0 0;
-		}
-
-		// Up button.
-		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
-		.components-toolbar .block-editor-block-mover-button.is-up-button {
-			// Focus style.
-			&::before {
-				bottom: 0;
-				height: calc(100% - #{ $border-width });
+			.block-editor-block-mover-button.is-down-button svg {
+				bottom: 5px;
+				flex-shrink: 0;
 			}
 		}
 
-		// Down button.
-		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
-		.components-toolbar .block-editor-block-mover-button.is-down-button {
-			// Focus style.
-			&::before {
-				top: 0;
-				height: calc(100% - #{ $border-width });
-			}
-		}
-	}
+		.block-editor-block-mover.is-horizontal & {
+			width: $block-toolbar-height;
 
-	// Mover is horizontal.
-	&.is-horizontal {
-		.block-editor-block-mover-button.has-icon {
-			height: $block-toolbar-height;
-			// Overrides .components-toolbar-group styles
-			width: $block-toolbar-height * 0.5;
-			padding-left: 0;
-			padding-right: 0;
+			> * {
+				width: $block-toolbar-height * 0.5;
+				min-width: 0 !important; // overrides default button width.
+				padding-left: 0 !important;
+				padding-right: 0 !important;
+				overflow: hidden;
 
-			// Focus style.
-			&::before {
-				top: $border-width;
-				bottom: $border-width;
-				min-width: 0;
-				width: auto;
-				height: auto;
+				// Focus style.
+				&::before {
+					height: 100%;
+				}
 			}
-		}
 
-		// Position the icons correctly.
-		.block-editor-block-mover-button.is-up-button.has-icon {
-			svg {
-				margin-left: 0;
-				margin-right: -$grid-unit-10;
-				margin-bottom: 0;
+			.block-editor-block-mover-button.is-up-button svg {
+				left: 5px;
 			}
 
-			// Focus style.
-			// Overrides .components-toolbar-group styles
-			&::before {
-				left: 0 !important;
-				right: 0 !important;
+			.block-editor-block-mover-button.is-down-button svg {
+				right: 5px;
 			}
 		}
+	}
+}
 
-		.block-editor-block-mover-button.is-down-button.has-icon {
-			svg {
-				margin-left: -$grid-unit-10;
-				margin-right: 0;
-				margin-top: 0;
-			}
-
-			// Focus style.
-			// Overrides .components-toolbar-group styles
-			&::before {
-				left: 0 !important;
-				right: 0 !important;
-				width: calc(100% + #{ $border-width });
-			}
-		}
+.block-editor-block-mover__drag-handle {
+	@include break-small() {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+		overflow: hidden;
 	}
 }

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-popover/README.md

@@ -0,0 +1,41 @@
+# BlockPopover and BlockPopoverInbetween
+
+These two components allow rendering editor UI by the block (in a popover) but outside the canvas. This is important to avoid messing with the style and layout of the block list.
+
+For example, it's used to render the contextual block toolbar and the in-between block inserter.
+
+## BlockPopover
+
+### Props
+
+#### clientId
+
+The client ID of the block representing the top position of the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### bottomClientId
+
+The client ID of the block representing the bottom position of the popover.
+
+-   Type: `String`
+-   Required: No
+
+## BlockPopoverInbetween
+
+### Props
+
+#### previousClientId
+
+The client ID of the block before the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### nextClientId
+
+The client ID of the block after the popover.
+
+-   Type: `String`
+-   Required: Yes