@wordpress/block-editor 11.1.0 → 11.3.0

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

@@ -23,9 +23,8 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalPadding,
-	__experimentalMinHeight,
-	__experimentalStyles,
+	minHeight,
+	additionalStyles = [],
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
@@ -33,11 +32,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets, duotone } = useSelect( ( select ) => {
+	const { styles, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
 			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
@@ -47,16 +45,16 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
-				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;}',
+					css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
 					__unstableType: 'presets',
 				},
+				...additionalStyles,
 			];
 		}
 
 		return styles;
-	}, [ styles, __experimentalStyles ] );
+	}, [ styles, additionalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
@@ -74,12 +72,11 @@ function ScaledBlockPreview( {
 				height: contentHeight * scale,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
-				minHeight: __experimentalMinHeight,
+				minHeight,
 			} }
 		>
 			<Iframe
 				head={ <EditorStyles styles={ editorStyles } /> }
-				assets={ assets }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
@@ -89,7 +86,6 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
@@ -107,9 +103,9 @@ function ScaledBlockPreview( {
 					// See: https://github.com/WordPress/gutenberg/pull/38175.
 					maxHeight: MAX_HEIGHT,
 					minHeight:
-						scale !== 0 && scale < 1 && __experimentalMinHeight
-							? __experimentalMinHeight / scale
-							: __experimentalMinHeight,
+						scale !== 0 && scale < 1 && minHeight
+							? minHeight / scale
+							: minHeight,
 				} }
 			>
 				{ contentResizeListener }

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

@@ -2,3 +2,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/index.js

@@ -9,22 +9,45 @@ import classnames from 'classnames';
 import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BlockEditorProvider from '../provider';
+import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	minHeight,
+	additionalStyles = [],
+	// Deprecated props:
 	__experimentalMinHeight,
-	__experimentalStyles = [],
+	__experimentalPadding,
 } ) {
+	if ( __experimentalMinHeight ) {
+		minHeight = __experimentalMinHeight;
+		deprecated( 'The __experimentalMinHeight prop', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'minHeight',
+		} );
+	}
+	if ( __experimentalPadding ) {
+		additionalStyles = [
+			...additionalStyles,
+			{ css: `body { padding: ${ __experimentalPadding }px; }` },
+		];
+		deprecated( 'The __experimentalPadding prop of BlockPreview', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'additionalStyles',
+		} );
+	}
+
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -37,18 +60,22 @@ export function BlockPreview( {
 		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
 		[ blocks ]
 	);
+
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
+
 	return (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ __experimentalPadding }
-				__experimentalMinHeight={ __experimentalMinHeight }
-				__experimentalStyles={ __experimentalStyles }
+				minHeight={ minHeight }
+				additionalStyles={ additionalStyles }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
 
@@ -102,12 +129,15 @@ export function useBlockPreview( {
 	);
 
 	const children = (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<BlockListItems
 				renderAppender={ false }
 				__experimentalLayout={ __experimentalLayout }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 
 	return {

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

@@ -35,29 +35,6 @@
 	}
 }
 
-.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;
-	}
-}
-
 // The goal of this pseudo-element is to cover the iframe
 // otherwise it won't be able to drag elements containing
 // the preview iframe in Safari.

package/src/components/block-selection-clearer/index.js

@@ -20,7 +20,7 @@ export function useBlockSelectionClearer() {
 	const { getSettings, hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { __experimentalClearBlockSelection: isEnabled } = getSettings();
+	const { clearBlockSelection: isEnabled } = getSettings();
 
 	return useRefEffect(
 		( node ) => {

package/src/components/block-selection-clearer/test/index.js

@@ -17,7 +17,7 @@ const defaultUseSelectValues = {
 	hasSelectedBlock: jest.fn().mockReturnValue( false ),
 	hasMultiSelection: jest.fn().mockReturnValue( false ),
 	getSettings: jest.fn().mockReturnValue( {
-		__experimentalClearBlockSelection: true,
+		clearBlockSelection: true,
 	} ),
 };
 
@@ -50,7 +50,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the selected block when multiple blocks are selected', () => {
@@ -71,7 +71,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when no blocks are selected', () => {
@@ -89,7 +89,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when the feature is disabled', () => {
@@ -98,7 +98,7 @@ describe( 'BlockSelectionClearer component', () => {
 			...defaultUseSelectValues,
 			hasSelectedBlock: jest.fn().mockReturnValue( true ),
 			getSettings: jest.fn().mockReturnValue( {
-				__experimentalClearBlockSelection: false,
+				clearBlockSelection: false,
 			} ),
 		} ) );
 		useDispatch.mockImplementation( () => ( {
@@ -113,6 +113,6 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 } );

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

@@ -12,13 +12,12 @@ import {
 	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
-import { store as blockEditorStore } from '../../store';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -28,12 +27,12 @@ export const blockSettingsScreens = {
 	imageLinkDestinations: 'imageLinkDestinations',
 };
 
-function BottomSheetSettings( {
-	editorSidebarOpened,
-	closeGeneralSidebar,
-	...props
-} ) {
+export default function BottomSheetSettings( props ) {
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
+	const editorSidebarOpened = useSelect( ( select ) =>
+		select( 'core/edit-post' ).isEditorSidebarOpened()
+	);
 
 	return (
 		<BottomSheet
@@ -86,21 +85,3 @@ function BottomSheetSettings( {
 		</BottomSheet>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		const { getSettings } = select( blockEditorStore );
-		return {
-			settings: getSettings(),
-			editorSidebarOpened: isEditorSidebarOpened(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { closeGeneralSidebar } = dispatch( 'core/edit-post' );
-
-		return {
-			closeGeneralSidebar,
-		};
-	} ),
-] )( BottomSheetSettings );

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -39,10 +39,11 @@ const POPOVER_PROPS = {
 	variant: 'toolbar',
 };
 
-function CopyMenuItem( { blocks, onCopy } ) {
+function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemLabel =
+	const copyMenuItemBlocksLabel =
 		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
@@ -209,6 +210,7 @@ export function BlockSettingsDropdown( {
 				onInsertBefore,
 				onRemove,
 				onCopy,
+				onPasteStyles,
 				onMoveTo,
 				blocks,
 			} ) => (
@@ -310,6 +312,16 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 							</MenuGroup>
+							<MenuGroup>
+								<CopyMenuItem
+									blocks={ blocks }
+									onCopy={ onCopy }
+									label={ __( 'Copy styles' ) }
+								/>
+								<MenuItem onClick={ onPasteStyles }>
+									{ __( 'Paste styles' ) }
+								</MenuItem>
+							</MenuGroup>
 							<BlockSettingsMenuControls.Slot
 								fillProps={ { onClose } }
 								clientIds={ clientIds }

package/src/components/block-settings-menu-controls/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -33,17 +28,14 @@ const BlockSettingsMenuControlsSlot = ( {
 	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
 		( select ) => {
 			const {
-				getBlocksByClientId,
+				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
-				selectedBlocks: map(
-					getBlocksByClientId( ids ).filter( Boolean ),
-					( block ) => block.name
-				),
+				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
 				canRemove: canRemoveBlocks( ids ),
 			};

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

@@ -14,6 +14,7 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,7 +65,9 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
+					const buttonText = style.isDefault
+						? __( 'Default' )
+						: style.label || style.name;
 
 					return (
 						<Button

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -16,8 +16,6 @@ import { copy } from '@wordpress/icons';
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
-jest.useFakeTimers();
-
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
 	jest.fn().mockReturnValue( 'Block Name' )
@@ -185,9 +183,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		} );
 
 		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -212,26 +208,27 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				} ),
 				'[ArrowDown]'
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Block Name',
+						expanded: true,
+					} )
+				).toBeVisible()
+			);
 
-			const menu = screen.getByRole( 'menu', {
-				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).toBeVisible()
+			);
 		} );
 
 		test( 'should simulate a click event, which should call onToggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -255,26 +252,27 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Block Name',
+						expanded: true,
+					} )
+				).toBeVisible()
+			);
 
-			const menu = screen.getByRole( 'menu', {
-				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).toBeVisible()
+			);
 		} );
 
 		test( 'should create the transform items for the chosen block.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -286,15 +284,16 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				within(
-					screen.getByRole( 'menu', {
-						name: 'Block Name',
-					} )
-				).getByRole( 'menuitem' )
-			).toBeInTheDocument();
+			await waitFor( () =>
+				expect(
+					within(
+						screen.getByRole( 'menu', {
+							name: 'Block Name',
+						} )
+					).getByRole( 'menuitem' )
+				).toBeInTheDocument()
+			);
 		} );
 	} );
 } );

package/src/components/block-switcher/utils.js

@@ -13,7 +13,7 @@ import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesB
  * @param {string}  selectedBlockName The block's name to use for matching condition.
  * @param {Set}     consumedBlocks    A set holding the previously matched/consumed blocks.
  *
- * @return {WPBlock?} The matched block if found or nothing(`undefined`).
+ * @return {WPBlock | undefined} The matched block if found or nothing(`undefined`).
  */
 export const getMatchingBlockByName = (
 	block,