@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.12

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

@@ -259,7 +259,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		onInsertBlocksAfter( blocks ) {
 			const { clientId, rootClientId } = ownProps;
 			const { getBlockIndex } = select( blockEditorStore );
-			const index = getBlockIndex( clientId, rootClientId );
+			const index = getBlockIndex( clientId );
 			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onMerge( forward ) {

package/src/components/block-list/block.native.js

@@ -302,7 +302,7 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
+	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockIndex,
 			getSettings,
@@ -314,7 +314,7 @@ export default compose( [
 			hasSelectedInnerBlock,
 		} = select( blockEditorStore );
 
-		const order = getBlockIndex( clientId, rootClientId );
+		const order = getBlockIndex( clientId );
 		const isSelected = isBlockSelected( clientId );
 		const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
 		const block = getBlock( clientId );

package/src/components/block-list/use-block-props/index.js

@@ -75,7 +75,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockRootClientId,
 				getBlockIndex,
 				getBlockMode,
 				getBlockName,
@@ -91,11 +90,10 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isBlockMultiSelected( clientId ) ||
 				isAncestorMultiSelected( clientId );
 			const blockName = getBlockName( clientId );
-			const rootClientId = getBlockRootClientId( clientId );
 			const blockType = getBlockType( blockName );
 
 			return {
-				index: getBlockIndex( clientId, rootClientId ),
+				index: getBlockIndex( clientId ),
 				mode: getBlockMode( clientId ),
 				name: blockName,
 				blockApiVersion: blockType?.apiVersion || 1,

package/src/components/block-list/use-in-between-inserter.js

@@ -144,7 +144,7 @@ export function useInBetweenInserter() {
 					return;
 				}
 
-				const index = getBlockIndex( clientId, rootClientId );
+				const index = getBlockIndex( clientId );
 
 				// Don't show the in-between inserter before the first block in
 				// the list (preserves the original behaviour).

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { last } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -17,6 +18,7 @@ import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
 function BlockListAppender( {
+	blockClientIds,
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
@@ -34,18 +36,30 @@ function BlockListAppender( {
 		// Prefer custom render prop if provided.
 		appender = <CustomAppender />;
 	} else {
-		const isParentSelected =
-			selectedBlockClientId === rootClientId ||
-			( ! rootClientId && ! selectedBlockClientId );
+		const isDocumentAppender = ! rootClientId;
+		const isParentSelected = selectedBlockClientId === rootClientId;
+		const isAnotherDefaultAppenderAlreadyDisplayed =
+			selectedBlockClientId &&
+			! blockClientIds.includes( selectedBlockClientId );
 
-		if ( ! isParentSelected ) {
+		if (
+			! isDocumentAppender &&
+			! isParentSelected &&
+			( ! selectedBlockClientId ||
+				isAnotherDefaultAppenderAlreadyDisplayed )
+		) {
 			return null;
 		}
 
 		if ( canInsertDefaultBlock ) {
 			// Render the default block appender when renderAppender has not been
 			// provided and the context supports use of the default appender.
-			appender = <DefaultBlockAppender rootClientId={ rootClientId } />;
+			appender = (
+				<DefaultBlockAppender
+					rootClientId={ rootClientId }
+					lastBlockClientId={ last( blockClientIds ) }
+				/>
+			);
 		} else {
 			// Fallback in the case no renderAppender has been provided and the
 			// default block can't be inserted.
@@ -89,6 +103,7 @@ function BlockListAppender( {
 
 export default withSelect( ( select, { rootClientId } ) => {
 	const {
+		getBlockOrder,
 		canInsertBlockType,
 		getTemplateLock,
 		getSelectedBlockClientId,
@@ -96,6 +111,7 @@ export default withSelect( ( select, { rootClientId } ) => {
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),
+		blockClientIds: getBlockOrder( rootClientId ),
 		canInsertDefaultBlock: canInsertBlockType(
 			getDefaultBlockName(),
 			rootClientId

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -316,11 +316,8 @@ export default compose(
 		const rootClientId = getBlockRootClientId( firstClientId );
 		const blockOrder = getBlockOrder( rootClientId );
 
-		const firstIndex = getBlockIndex( firstClientId, rootClientId );
-		const lastIndex = getBlockIndex(
-			last( normalizedClientIds ),
-			rootClientId
-		);
+		const firstIndex = getBlockIndex( firstClientId );
+		const lastIndex = getBlockIndex( last( normalizedClientIds ) );
 
 		const innerBlocks = getBlocksByClientId( clientIds );
 

package/src/components/block-mover/button.js

@@ -84,13 +84,9 @@ const BlockMoverButton = forwardRef(
 				const normalizedClientIds = castArray( clientIds );
 				const firstClientId = first( normalizedClientIds );
 				const blockRootClientId = getBlockRootClientId( firstClientId );
-				const firstBlockIndex = getBlockIndex(
-					firstClientId,
-					blockRootClientId
-				);
+				const firstBlockIndex = getBlockIndex( firstClientId );
 				const lastBlockIndex = getBlockIndex(
-					last( normalizedClientIds ),
-					blockRootClientId
+					last( normalizedClientIds )
 				);
 				const blockOrder = getBlockOrder( blockRootClientId );
 				const block = getBlock( firstClientId );

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

@@ -108,11 +108,8 @@ export default withSelect( ( select, { clientIds } ) => {
 	const firstClientId = first( normalizedClientIds );
 	const block = getBlock( firstClientId );
 	const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
-	const firstIndex = getBlockIndex( firstClientId, rootClientId );
-	const lastIndex = getBlockIndex(
-		last( normalizedClientIds ),
-		rootClientId
-	);
+	const firstIndex = getBlockIndex( firstClientId );
+	const lastIndex = getBlockIndex( last( normalizedClientIds ) );
 	const blockOrder = getBlockOrder( rootClientId );
 	const isFirst = firstIndex === 0;
 	const isLast = lastIndex === blockOrder.length - 1;

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

@@ -138,11 +138,8 @@ export default compose(
 		const firstClientId = first( normalizedClientIds );
 		const rootClientId = getBlockRootClientId( firstClientId );
 		const blockOrder = getBlockOrder( rootClientId );
-		const firstIndex = getBlockIndex( firstClientId, rootClientId );
-		const lastIndex = getBlockIndex(
-			last( normalizedClientIds ),
-			rootClientId
-		);
+		const firstIndex = getBlockIndex( firstClientId );
+		const lastIndex = getBlockIndex( last( normalizedClientIds ) );
 
 		return {
 			firstIndex,

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

@@ -25,12 +25,8 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		contentResizeListener,
 		{ height: contentHeight },
 	] = useResizeObserver();
-	const { styles, assets } = useSelect( ( select ) => {
-		const settings = select( store ).getSettings();
-		return {
-			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
-		};
+	const styles = useSelect( ( select ) => {
+		return select( store ).getSettings().styles;
 	}, [] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
@@ -50,7 +46,6 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 			>
 				<Iframe
 					head={ <EditorStyles styles={ styles } /> }
-					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },

package/src/components/block-settings/container.native.js

@@ -43,7 +43,6 @@ function BottomSheetSettings( {
 			hideHeader
 			contentStyle={ styles.content }
 			hasNavigation
-			testID="block-settings-modal"
 			{ ...props }
 		>
 			<BottomSheet.NavigationContainer animate main>

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

@@ -1,162 +1,182 @@
 /**
  * External dependencies
  */
-import { noop, debounce } from 'lodash';
+import { find, noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useState, useLayoutEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { _x } from '@wordpress/i18n';
 import {
-	Button,
-	__experimentalText as Text,
-	Slot,
-	Fill,
-} from '@wordpress/components';
+	getBlockType,
+	cloneBlock,
+	getBlockFromExample,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import BlockStylesPreviewPanel from './preview-panel';
-import useStylesForBlocks from './use-styles-for-block';
+import { getActiveStyle, replaceActiveStyle } from './utils';
+import BlockPreview from '../block-preview';
+import { store as blockEditorStore } from '../../store';
 
-function BlockStylesPreviewPanelSlot( { scope } ) {
-	return <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;
-}
+const EMPTY_OBJECT = {};
 
-function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
-	return (
-		<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>
-			<div { ...props }>{ children }</div>
-		</Fill>
-	);
-}
+function useGenericPreviewBlock( block, type ) {
+	return useMemo( () => {
+		const example = type?.example;
+		const blockName = type?.name;
 
-// Top position (in px) of the Block Styles container
-// relative to the editor pane.
-// The value is the equivalent of the container's right position.
-const DEFAULT_POSITION_TOP = 16;
+		if ( example && blockName ) {
+			return getBlockFromExample( blockName, {
+				attributes: example.attributes,
+				innerBlocks: example.innerBlocks,
+			} );
+		}
+
+		if ( block ) {
+			return cloneBlock( block );
+		}
+	}, [ type?.example ? block?.name : block, type ] );
+}
 
-// Block Styles component for the Settings Sidebar.
 function BlockStyles( {
 	clientId,
 	onSwitch = noop,
 	onHoverClassName = noop,
-	scope,
+	itemRole,
 } ) {
-	const {
-		onSelect,
-		stylesToRender,
-		activeStyle,
-		genericPreviewBlock,
-		className: previewClassName,
-	} = useStylesForBlocks( {
-		clientId,
-		onSwitch,
-	} );
-	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const [ containerScrollTop, setContainerScrollTop ] = useState( 0 );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
-	useLayoutEffect( () => {
-		const scrollContainer = document.querySelector(
-			'.interface-interface-skeleton__content'
-		);
-		const scrollTop = scrollContainer?.scrollTop || 0;
-		setContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );
-	}, [ hoveredStyle ] );
-
-	if ( ! stylesToRender || stylesToRender.length === 0 ) {
-		return null;
-	}
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
 
-	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
+		if ( ! block ) {
+			return EMPTY_OBJECT;
+		}
 
-	const onSelectStylePreview = ( style ) => {
-		onSelect( style );
-		onHoverClassName( null );
-		setHoveredStyle( null );
-		debouncedSetHoveredStyle.cancel();
+		const blockType = getBlockType( block.name );
+		const { getBlockStyles } = select( blocksStore );
+		return {
+			block,
+			type: blockType,
+			styles: getBlockStyles( block.name ),
+			className: block.attributes.className || '',
+		};
 	};
 
-	const styleItemHandler = ( item ) => {
-		if ( hoveredStyle === item ) {
-			debouncedSetHoveredStyle.cancel();
-			return;
-		}
-		debouncedSetHoveredStyle( item );
-		onHoverClassName( item?.name ?? null );
-	};
+	const { styles, block, type, className } = useSelect( selector, [
+		clientId,
+	] );
 
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const genericPreviewBlock = useGenericPreviewBlock( block, type );
+
+	if ( ! styles || styles.length === 0 ) {
+		return null;
+	}
+
+	const renderedStyles = find( styles, 'isDefault' )
+		? styles
+		: [
+				{
+					name: 'default',
+					label: _x( 'Default', 'block style' ),
+					isDefault: true,
+				},
+				...styles,
+		  ];
+
+	const activeStyle = getActiveStyle( renderedStyles, className );
 	return (
 		<div className="block-editor-block-styles">
-			<div className="block-editor-block-styles__variants">
-				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
-
-					return (
-						<Button
-							className={ classnames(
-								'block-editor-block-styles__item',
-								{
-									'is-active':
-										activeStyle.name === style.name,
-								}
-							) }
-							key={ style.name }
-							variant="secondary"
-							label={ buttonText }
-							onMouseEnter={ () => styleItemHandler( style ) }
-							onFocus={ () => styleItemHandler( style ) }
-							onMouseLeave={ () => styleItemHandler( null ) }
-							onBlur={ () => styleItemHandler( null ) }
-							onKeyDown={ ( event ) => {
-								if (
-									ENTER === event.keyCode ||
-									SPACE === event.keyCode
-								) {
-									event.preventDefault();
-									onSelectStylePreview( style );
-								}
-							} }
-							onClick={ () => onSelectStylePreview( style ) }
-							role="button"
-							tabIndex="0"
-						>
-							<Text
-								as="span"
-								limit={ 12 }
-								ellipsizeMode="tail"
-								className="block-editor-block-styles__item-text"
-								truncate
-							>
-								{ buttonText }
-							</Text>
-						</Button>
-					);
-				} ) }
-			</div>
-			{ hoveredStyle && ! isMobileViewport && (
-				<BlockStylesPreviewPanelFill
-					scope={ scope }
-					className="block-editor-block-styles__preview-panel"
-					style={ { top: containerScrollTop } }
-					onMouseLeave={ () => styleItemHandler( null ) }
-				>
-					<BlockStylesPreviewPanel
-						activeStyle={ activeStyle }
-						className={ previewClassName }
+			{ renderedStyles.map( ( style ) => {
+				const styleClassName = replaceActiveStyle(
+					className,
+					activeStyle,
+					style
+				);
+				return (
+					<BlockStyleItem
 						genericPreviewBlock={ genericPreviewBlock }
-						style={ hoveredStyle }
+						viewportWidth={ type.example?.viewportWidth ?? 500 }
+						className={ className }
+						isActive={ activeStyle === style }
+						key={ style.name }
+						onSelect={ () => {
+							updateBlockAttributes( clientId, {
+								className: styleClassName,
+							} );
+							onHoverClassName( null );
+							onSwitch();
+						} }
+						onBlur={ () => onHoverClassName( null ) }
+						onHover={ () => onHoverClassName( styleClassName ) }
+						style={ style }
+						styleClassName={ styleClassName }
+						itemRole={ itemRole }
 					/>
-				</BlockStylesPreviewPanelFill>
-			) }
+				);
+			} ) }
+		</div>
+	);
+}
+
+function BlockStyleItem( {
+	genericPreviewBlock,
+	viewportWidth,
+	style,
+	isActive,
+	onBlur,
+	onHover,
+	onSelect,
+	styleClassName,
+	itemRole,
+} ) {
+	const previewBlocks = useMemo( () => {
+		return {
+			...genericPreviewBlock,
+			attributes: {
+				...genericPreviewBlock.attributes,
+				className: styleClassName,
+			},
+		};
+	}, [ genericPreviewBlock, styleClassName ] );
+
+	return (
+		<div
+			key={ style.name }
+			className={ classnames( 'block-editor-block-styles__item', {
+				'is-active': isActive,
+			} ) }
+			onClick={ () => onSelect() }
+			onKeyDown={ ( event ) => {
+				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+					event.preventDefault();
+					onSelect();
+				}
+			} }
+			onMouseEnter={ onHover }
+			onMouseLeave={ onBlur }
+			role={ itemRole || 'button' }
+			tabIndex="0"
+			aria-label={ style.label || style.name }
+		>
+			<div className="block-editor-block-styles__item-preview">
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					blocks={ previewBlocks }
+				/>
+			</div>
+			<div className="block-editor-block-styles__item-label">
+				{ style.label || style.name }
+			</div>
 		</div>
 	);
 }
 
-BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;

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

@@ -1,75 +1,67 @@
-.block-editor-block-styles + .default-style-picker__default-switcher {
-	margin-top: $grid-unit-20;
+.block-editor-block-styles {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
 }
 
-.block-editor-block-styles__preview-panel {
-	display: none;
-	position: absolute;
-	right: $grid-unit-20;
-	left: auto;
-	// Same layer as the sidebar from which it's triggered.
-	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
+.block-editor-block-styles__item {
+	width: calc(50% - #{ $grid-unit-05 });
+	margin: $grid-unit-05 0;
+	flex-shrink: 0;
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: $radius-block-ui;
+	padding: $grid-unit-05 * 1.5;
+	display: flex;
+	flex-direction: column;
 
-	// Only show in narrow widths.
-	@include break-medium() {
-		display: block;
-	}
+	&:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-	// Overrides for InserterPreviewPanel.
-	.block-editor-inserter__preview-container {
-		left: auto;
-		right: auto;
-		top: auto;
-		position: static;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
 	}
 
-	.block-editor-block-card__title.block-editor-block-card__title {
-		margin: 0;
-	}
-	.block-editor-block-icon {
-		display: none;
+	&:hover .block-editor-block-styles__item-preview {
+		border-color: var(--wp-admin-theme-color);
 	}
-}
-
-.block-editor-block-styles__variants {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: $grid-unit-10;
 
-	.block-editor-block-styles__item {
-		color: $gray-800;
-		box-shadow: inset 0 0 0 1px $gray-400;
-		display: inline-block;
-		width: calc(50% - #{$grid-unit-05});
-
-		&:focus,
-		&:hover {
-			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
-		}
-
-		&.is-active,
-		&.is-active:hover {
-			background-color: $gray-800;
-			box-shadow: none;
+	&.is-active {
+		.block-editor-block-styles__item-label {
+			font-weight: bold;
 		}
 
-		&.is-active .block-editor-block-styles__item-text,
-		&.is-active:hover .block-editor-block-styles__item-text {
-			color: $white;
+		.block-editor-block-styles__item-preview {
+			margin: 0;
+			border: 2px solid $gray-900;
 		}
+	}
 
-		&.is-active:focus {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
-		}
+	.block-editor-block-preview__container {
+		cursor: inherit;
 	}
 }
 
-// To prevent overflow in the preview container,
-// ensure that block contents' margin and padding
-// do not add to the block container's width.
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-	box-sizing: border-box !important;
+// Show a little preview thumbnail for style variations.
+.block-editor-block-styles__item-preview {
+	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
+	padding: 0;
+	margin: 2px;
+	border-radius: $radius-block-ui;
+	display: flex;
+	overflow: hidden;
+	background: $white;
+	align-items: center;
+	flex-grow: 1;
+	min-height: 80px;
+	max-height: 160px;
+}
+
+.block-editor-block-switcher__styles__menugroup {
+	position: relative;
+}
+
+.block-editor-block-styles__item-label {
+	text-align: center;
+	padding: 4px 0;
 }