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

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

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

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

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

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

@@ -2,10 +2,15 @@
  * External dependencies
  */
 import { castArray } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
+import {
+	__experimentalUseDisabled as useDisabled,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
 
@@ -16,6 +21,7 @@ import BlockEditorProvider from '../provider';
 import LiveBlockPreview from './live';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
+import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
@@ -63,3 +69,57 @@ export function BlockPreview( {
  * @return {WPComponent} The component to be rendered.
  */
 export default memo( BlockPreview );
+
+/**
+ * This hook is used to lightly mark an element as a block preview wrapper
+ * element. Call this hook and pass the returned props to the element to mark as
+ * a block preview wrapper, automatically rendering inner blocks as children. If
+ * you define a ref for the element, it is important to pass the ref to this
+ * hook, which the hook in turn will pass to the component through the props it
+ * returns. Optionally, you can also pass any other props through this hook, and
+ * they will be merged and returned.
+ *
+ * @param {Object}    options                      Preview options.
+ * @param {WPBlock[]} options.blocks               Block objects.
+ * @param {Object}    options.props                Optional. Props to pass to the element. Must contain
+ *                                                 the ref if one is defined.
+ * @param {Object}    options.__experimentalLayout Layout settings to be used in the preview.
+ *
+ */
+export function useBlockPreview( {
+	blocks,
+	props = {},
+	__experimentalLayout,
+} ) {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const disabledRef = useDisabled();
+	const ref = useMergeRefs( [ props.ref, disabledRef ] );
+	const settings = useMemo(
+		() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),
+		[ originalSettings ]
+	);
+	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+
+	const children = (
+		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+			<BlockListItems
+				renderAppender={ false }
+				__experimentalLayout={ __experimentalLayout }
+			/>
+		</BlockEditorProvider>
+	);
+
+	return {
+		...props,
+		ref,
+		className: classnames(
+			props.className,
+			'block-editor-block-preview__live-content',
+			'components-disabled'
+		),
+		children: blocks?.length ? children : null,
+	};
+}

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

@@ -41,3 +41,26 @@
 .block-editor-block-preview__content-iframe .block-list-appender {
 	display: none;
 }
+
+.block-editor-block-preview__live-content {
+	* {
+		pointer-events: none;
+	}
+
+	// Hide the block appender, as the block is not editable in this context.
+	.block-list-appender {
+		display: none;
+	}
+
+	// Revert button disable styles to ensure that button styles render as they will on the
+	// front end of the site. For example, this ensures that Social Links icons display correctly.
+	.components-button:disabled {
+		opacity: initial;
+	}
+
+	// Hide placeholders.
+	.components-placeholder,
+	.block-editor-block-list__block[data-empty="true"] {
+		display: none;
+	}
+}

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

@@ -0,0 +1,114 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	unregisterBlockType,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockPreview } from '../';
+
+jest.mock( '@wordpress/dom', () => {
+	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
+
+	return {
+		focus: {
+			...focus,
+			focusable: {
+				...focus.focusable,
+				find( context ) {
+					// In JSDOM, all elements have zero'd widths and height.
+					// This is a metric for focusable's `isVisible`, so find
+					// and apply an arbitrary non-zero width.
+					Array.from( context.querySelectorAll( '*' ) ).forEach(
+						( element ) => {
+							Object.defineProperties( element, {
+								offsetWidth: {
+									get: () => 1,
+									configurable: true,
+								},
+							} );
+						}
+					);
+
+					return focus.focusable.find( ...arguments );
+				},
+			},
+		},
+	};
+} );
+
+describe( 'useBlockPreview', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/test-block', {
+			save: () => (
+				<div>
+					Test block save view
+					<button>Button</button>
+				</div>
+			),
+			edit: () => (
+				<div>
+					Test block edit view
+					<button>Button</button>
+				</div>
+			),
+			category: 'text',
+			title: 'test block',
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/test-block' );
+	} );
+
+	function BlockPreviewComponent( { blocks, className } ) {
+		const blockPreviewProps = useBlockPreview( {
+			blocks,
+			props: { className },
+		} );
+		return <div { ...blockPreviewProps } />;
+	}
+
+	it( 'will render a block preview with minimal nesting', async () => {
+		const blocks = [];
+		blocks.push( createBlock( 'core/test-block' ) );
+
+		const { container } = render(
+			<BlockPreviewComponent
+				className="test-container-classname"
+				blocks={ blocks }
+			/>
+		);
+
+		// Test block and block contents are rendered.
+		const previewedBlock = screen.getByLabelText( 'Block: test block' );
+		const previewedBlockContents = screen.getByText(
+			'Test block edit view'
+		);
+		expect( previewedBlockContents ).toBeInTheDocument();
+
+		// Test elements within block contents are disabled.
+		await waitFor( () => {
+			const button = screen.getByText( 'Button' );
+			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
+		} );
+
+		// Ensure the block preview class names are merged with the component's class name.
+		expect( container.firstChild.className ).toBe(
+			'test-container-classname block-editor-block-preview__live-content components-disabled'
+		);
+
+		// Ensure there is no nesting between the parent component and rendered blocks.
+		expect( container.firstChild.firstChild ).toBe( previewedBlock );
+	} );
+} );

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

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

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

@@ -1,182 +1,162 @@
 /**
  * External dependencies
  */
-import { find, noop } from 'lodash';
+import { noop, debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useLayoutEffect } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { _x } from '@wordpress/i18n';
 import {
-	getBlockType,
-	cloneBlock,
-	getBlockFromExample,
-	store as blocksStore,
-} from '@wordpress/blocks';
+	Button,
+	__experimentalText as Text,
+	Slot,
+	Fill,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from './utils';
-import BlockPreview from '../block-preview';
-import { store as blockEditorStore } from '../../store';
+import BlockStylesPreviewPanel from './preview-panel';
+import useStylesForBlocks from './use-styles-for-block';
 
-const EMPTY_OBJECT = {};
-
-function useGenericPreviewBlock( block, type ) {
-	return useMemo( () => {
-		const example = type?.example;
-		const blockName = type?.name;
-
-		if ( example && blockName ) {
-			return getBlockFromExample( blockName, {
-				attributes: example.attributes,
-				innerBlocks: example.innerBlocks,
-			} );
-		}
+function BlockStylesPreviewPanelSlot( { scope } ) {
+	return <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;
+}
 
-		if ( block ) {
-			return cloneBlock( block );
-		}
-	}, [ type?.example ? block?.name : block, type ] );
+function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
+	return (
+		<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>
+			<div { ...props }>{ children }</div>
+		</Fill>
+	);
 }
 
+// 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;
+
+// Block Styles component for the Settings Sidebar.
 function BlockStyles( {
 	clientId,
 	onSwitch = noop,
 	onHoverClassName = noop,
-	itemRole,
+	scope,
 } ) {
-	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
-		const block = getBlock( clientId );
-
-		if ( ! block ) {
-			return EMPTY_OBJECT;
-		}
-
-		const blockType = getBlockType( block.name );
-		const { getBlockStyles } = select( blocksStore );
-		return {
-			block,
-			type: blockType,
-			styles: getBlockStyles( block.name ),
-			className: block.attributes.className || '',
-		};
-	};
-
-	const { styles, block, type, className } = useSelect( selector, [
+	const {
+		onSelect,
+		stylesToRender,
+		activeStyle,
+		genericPreviewBlock,
+		className: previewClassName,
+	} = useStylesForBlocks( {
 		clientId,
-	] );
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const genericPreviewBlock = useGenericPreviewBlock( block, type );
-
-	if ( ! styles || styles.length === 0 ) {
+		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 renderedStyles = find( styles, 'isDefault' )
-		? styles
-		: [
-				{
-					name: 'default',
-					label: _x( 'Default', 'block style' ),
-					isDefault: true,
-				},
-				...styles,
-		  ];
+	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
 
-	const activeStyle = getActiveStyle( renderedStyles, className );
-	return (
-		<div className="block-editor-block-styles">
-			{ renderedStyles.map( ( style ) => {
-				const styleClassName = replaceActiveStyle(
-					className,
-					activeStyle,
-					style
-				);
-				return (
-					<BlockStyleItem
-						genericPreviewBlock={ genericPreviewBlock }
-						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 }
-					/>
-				);
-			} ) }
-		</div>
-	);
-}
+	const onSelectStylePreview = ( style ) => {
+		onSelect( style );
+		onHoverClassName( null );
+		setHoveredStyle( null );
+		debouncedSetHoveredStyle.cancel();
+	};
 
-function BlockStyleItem( {
-	genericPreviewBlock,
-	viewportWidth,
-	style,
-	isActive,
-	onBlur,
-	onHover,
-	onSelect,
-	styleClassName,
-	itemRole,
-} ) {
-	const previewBlocks = useMemo( () => {
-		return {
-			...genericPreviewBlock,
-			attributes: {
-				...genericPreviewBlock.attributes,
-				className: styleClassName,
-			},
-		};
-	}, [ genericPreviewBlock, styleClassName ] );
+	const styleItemHandler = ( item ) => {
+		if ( hoveredStyle === item ) {
+			debouncedSetHoveredStyle.cancel();
+			return;
+		}
+		debouncedSetHoveredStyle( item );
+		onHoverClassName( item?.name ?? null );
+	};
 
 	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 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 }
+						genericPreviewBlock={ genericPreviewBlock }
+						style={ hoveredStyle }
+					/>
+				</BlockStylesPreviewPanelFill>
+			) }
 		</div>
 	);
 }
 
+BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;

package/src/components/block-styles/menu-items.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { MenuItem, __experimentalText as Text } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from './use-styles-for-block';
+
+export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
+	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
+		clientId,
+		onSwitch,
+	} );
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+	return (
+		<>
+			{ stylesToRender.map( ( style ) => {
+				const menuItemText = style.label || style.name;
+				return (
+					<MenuItem
+						key={ style.name }
+						icon={ activeStyle.name === style.name ? check : null }
+						onClick={ () => onSelect( style ) }
+					>
+						<Text
+							as="span"
+							limit={ 18 }
+							ellipsizeMode="tail"
+							truncate
+						>
+							{ menuItemText }
+						</Text>
+					</MenuItem>
+				);
+			} ) }
+		</>
+	);
+}