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

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

@@ -30,10 +30,7 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
-const BlockInspector = ( {
-	showNoBlockSelectedMessage = true,
-	bubblesVirtually = true,
-} ) => {
+const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
 		hasBlockStyles,
@@ -69,7 +66,7 @@ const BlockInspector = ( {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+				<InspectorControls.Slot />
 			</div>
 		);
 	}
@@ -100,7 +97,6 @@ const BlockInspector = ( {
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
 			hasBlockStyles={ hasBlockStyles }
-			bubblesVirtually={ bubblesVirtually }
 		/>
 	);
 };
@@ -109,7 +105,6 @@ const BlockInspectorSingleBlock = ( {
 	clientId,
 	blockName,
 	hasBlockStyles,
-	bubblesVirtually,
 } ) => {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	return (
@@ -119,7 +114,10 @@ const BlockInspectorSingleBlock = ( {
 			{ hasBlockStyles && (
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
+						<BlockStyles
+							scope="core/block-inspector"
+							clientId={ clientId }
+						/>
 						{ hasBlockSupport(
 							blockName,
 							'defaultStylePicker',
@@ -128,26 +126,28 @@ const BlockInspectorSingleBlock = ( {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot />
 			<InspectorControls.Slot
 				__experimentalGroup="typography"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Typography' ) }
 			/>
+			<InspectorControls.Slot
+				__experimentalGroup="border"
+				label={ __( 'Border' ) }
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
 			<div>
-				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
+				<AdvancedControls />
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { bubblesVirtually } ) => {
+const AdvancedControls = () => {
 	const slot = useSlot( InspectorAdvancedControls.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
@@ -161,10 +161,7 @@ const AdvancedControls = ( { bubblesVirtually } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot
-				__experimentalGroup="advanced"
-				bubblesVirtually={ bubblesVirtually }
-			/>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
 		</PanelBody>
 	);
 };

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>