@wordpress/block-editor 8.0.11 → 8.0.14

package/build-style/style-rtl.css

@@ -1188,6 +1188,20 @@
   display: none;
 }
 
+.block-editor-block-preview__live-content * {
+  pointer-events: none;
+}
+.block-editor-block-preview__live-content .block-list-appender {
+  display: none;
+}
+.block-editor-block-preview__live-content .components-button:disabled {
+  opacity: initial;
+}
+.block-editor-block-preview__live-content .components-placeholder,
+.block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
+  display: none;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }

package/build-style/style.css

@@ -1188,6 +1188,20 @@
   display: none;
 }
 
+.block-editor-block-preview__live-content * {
+  pointer-events: none;
+}
+.block-editor-block-preview__live-content .block-list-appender {
+  display: none;
+}
+.block-editor-block-preview__live-content .components-button:disabled {
+  opacity: initial;
+}
+.block-editor-block-preview__live-content .components-placeholder,
+.block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
+  display: none;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.0.11",
+	"version": "8.0.14",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,10 +37,10 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/blob": "^3.2.2",
 		"@wordpress/block-serialization-default-parser": "^4.2.3",
-		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.5",
-		"@wordpress/compose": "^5.0.6",
-		"@wordpress/data": "^6.1.4",
+		"@wordpress/blocks": "^11.1.5",
+		"@wordpress/components": "^19.2.1",
+		"@wordpress/compose": "^5.0.7",
+		"@wordpress/data": "^6.1.5",
 		"@wordpress/deprecated": "^3.2.3",
 		"@wordpress/dom": "^3.2.7",
 		"@wordpress/element": "^4.0.4",
@@ -49,10 +49,10 @@
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
 		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keyboard-shortcuts": "^3.0.6",
+		"@wordpress/keyboard-shortcuts": "^3.0.7",
 		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/notices": "^3.2.7",
-		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/notices": "^3.2.8",
+		"@wordpress/rich-text": "^5.0.8",
 		"@wordpress/shortcode": "^3.2.3",
 		"@wordpress/token-list": "^2.2.2",
 		"@wordpress/url": "^3.3.1",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
+	"gitHead": "04883dd8275ee52245a45c8899eb720b91055c50"
 }

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

@@ -69,7 +69,19 @@ const BlockInspector = ( {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="typography"
+					label={ __( 'Typography' ) }
+				/>
+				<InspectorControls.Slot
+					__experimentalGroup="dimensions"
+					label={ __( 'Dimensions' ) }
+				/>
+				<InspectorControls.Slot
+					__experimentalGroup="border"
+					label={ __( 'Border' ) }
+				/>
 			</div>
 		);
 	}
@@ -139,6 +151,10 @@ const BlockInspectorSingleBlock = ( {
 				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
+			<InspectorControls.Slot
+				__experimentalGroup="border"
+				label={ __( 'Border' ) }
+			/>
 			<div>
 				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
 			</div>

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-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/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-tools/block-selection-button.js

@@ -59,7 +59,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 			} = select( blockEditorStore );
-			const index = getBlockIndex( clientId, rootClientId );
+			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
@@ -169,14 +169,8 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		if ( ( isEnter || isSpace ) && startingBlockClientId ) {
 			const sourceRoot = getBlockRootClientId( startingBlockClientId );
 			const destRoot = getBlockRootClientId( selectedBlockClientId );
-			const sourceBlockIndex = getBlockIndex(
-				startingBlockClientId,
-				sourceRoot
-			);
-			let destinationBlockIndex = getBlockIndex(
-				selectedBlockClientId,
-				destRoot
-			);
+			const sourceBlockIndex = getBlockIndex( startingBlockClientId );
+			let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
 			if (
 				sourceBlockIndex < destinationBlockIndex &&
 				sourceRoot === destRoot

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

@@ -95,6 +95,17 @@ export default function BlockTools( {
 		} else if (
 			isMatch( 'core/block-editor/delete-multi-selection', event )
 		) {
+			/**
+			 * Check if the target element is a text area, input or
+			 * event.defaultPrevented and return early. In all these
+			 * cases backspace could be handled elsewhere.
+			 */
+			if (
+				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
+				event.defaultPrevented
+			) {
+				return;
+			}
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {
 				event.preventDefault();

package/src/components/gradients/use-gradient.js

@@ -59,22 +59,22 @@ export function getGradientSlugByValue( gradients, value ) {
 	return gradient && gradient.slug;
 }
 
-const EMPTY_OBJECT = {};
-
 export function __experimentalUseGradient( {
 	gradientAttribute = 'gradient',
 	customGradientAttribute = 'customGradient',
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
 	const allGradients = useMemo(
 		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
+			...( userGradientPalette || [] ),
+			...( themeGradientPalette || [] ),
+			...( defaultGradientPalette || [] ),
 		],
-		[ gradientsPerOrigin ]
+		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
 	);
 	const { gradient, customGradient } = useSelect(
 		( select ) => {

package/src/components/index.js

@@ -103,7 +103,10 @@ export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
 export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
-export { default as BlockPreview } from './block-preview';
+export {
+	default as BlockPreview,
+	useBlockPreview as __experimentalUseBlockPreview,
+} from './block-preview';
 export {
 	default as BlockSelectionClearer,
 	useBlockSelectionClearer as __unstableUseBlockSelectionClearer,

package/src/components/inserter/hooks/use-insertion-point.js

@@ -64,19 +64,12 @@ function useInsertionPoint( {
 				_destinationIndex = insertionIndex;
 			} else if ( clientId ) {
 				// Insert after a specific client ID.
-				_destinationIndex = getBlockIndex(
-					clientId,
-					_destinationRootClientId
-				);
+				_destinationIndex = getBlockIndex( clientId );
 			} else if ( ! isAppender && selectedBlockClientId ) {
 				_destinationRootClientId = getBlockRootClientId(
 					selectedBlockClientId
 				);
-				_destinationIndex =
-					getBlockIndex(
-						selectedBlockClientId,
-						_destinationRootClientId
-					) + 1;
+				_destinationIndex = getBlockIndex( selectedBlockClientId ) + 1;
 			} else {
 				// Insert at the end of the list.
 				_destinationIndex = getBlockOrder( _destinationRootClientId )

package/src/components/inserter/index.js

@@ -265,7 +265,7 @@ export default compose( [
 
 					// If the clientId is defined, we insert at the position of the block.
 					if ( clientId ) {
-						return getBlockIndex( clientId, rootClientId );
+						return getBlockIndex( clientId );
 					}
 
 					// If there a selected block, we insert after the selected block.
@@ -275,7 +275,7 @@ export default compose( [
 						end &&
 						getBlockRootClientId( end ) === rootClientId
 					) {
-						return getBlockIndex( end, rootClientId ) + 1;
+						return getBlockIndex( end ) + 1;
 					}
 
 					// Otherwise, we insert at the end of the current rootClientId

package/src/components/inserter/index.native.js

@@ -343,10 +343,7 @@ export default compose( [
 		const destinationRootClientId = isAnyBlockSelected
 			? getBlockRootClientId( end )
 			: rootClientId;
-		const selectedBlockIndex = getBlockIndex(
-			end,
-			destinationRootClientId
-		);
+		const selectedBlockIndex = getBlockIndex( end );
 		const endOfRootIndex = getBlockOrder( rootClientId ).length;
 		const isSelectedUnmodifiedDefaultBlock = isAnyBlockSelected
 			? isUnmodifiedDefaultBlock( getBlock( end ) )
@@ -364,7 +361,7 @@ export default compose( [
 
 			// If the clientId is defined, we insert at the position of the block.
 			if ( clientId ) {
-				return getBlockIndex( clientId, rootClientId );
+				return getBlockIndex( clientId );
 			}
 
 			// If there is a selected block,

package/src/components/inserter/quick-inserter.js

@@ -56,7 +56,7 @@ export default function QuickInserter( {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
 			);
-			const index = getBlockIndex( clientId, rootClientId );
+			const index = getBlockIndex( clientId );
 			return {
 				setInserterIsOpened: getSettings()
 					.__experimentalSetIsInserterOpened,