@wordpress/block-editor 9.2.0 → 9.5.0

package/src/components/block-list/use-block-props/use-block-custom-class-name.js

@@ -22,9 +22,8 @@ export function useBlockCustomClassName( clientId ) {
 	// as much.
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const attributes = getBlockAttributes( clientId );
 
 			if ( ! attributes?.className ) {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -24,9 +24,8 @@ export function useEventHandlers( clientId ) {
 		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { getBlockRootClientId, getBlockIndex } = useSelect(
-		blockEditorStore
-	);
+	const { getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(

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

@@ -27,9 +27,8 @@ export function useInBetweenInserter() {
 		getSelectedBlockClientIds,
 		getTemplateLock,
 	} = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {

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

@@ -93,11 +93,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const {
-		canInsertBlockType,
-		getTemplateLock,
-		getSelectedBlockClientId,
-	} = select( blockEditorStore );
+	const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

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

@@ -48,9 +48,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } = select(
-		blockEditorStore
-	);
+	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

package/src/components/block-lock/modal.js

@@ -10,6 +10,7 @@ import {
 	FlexItem,
 	Icon,
 	Modal,
+	ToggleControl,
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
@@ -23,20 +24,41 @@ import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
+function getTemplateLockValue( lock ) {
+	// Prevents all operations.
+	if ( lock.remove && lock.move ) {
+		return 'all';
+	}
+
+	// Prevents inserting or removing blocks, but allows moving existing blocks.
+	if ( lock.remove && ! lock.move ) {
+		return 'insert';
+	}
+
+	return false;
+}
+
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
 	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { isReusable } = useSelect(
+	const { isReusable, templateLock, hasTemplateLock } = useSelect(
 		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const blockName = getBlockName( clientId );
+			const blockType = getBlockType( blockName );
 
 			return {
-				isReusable: isReusableBlock( getBlockType( blockName ) ),
+				isReusable: isReusableBlock( blockType ),
+				templateLock: getBlockAttributes( clientId )?.templateLock,
+				hasTemplateLock: !! blockType?.attributes?.templateLock,
 			};
 		},
 		[ clientId ]
 	);
+	const [ applyTemplateLock, setApplyTemplateLock ] = useState(
+		!! templateLock
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -69,7 +91,12 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
-					updateBlockAttributes( [ clientId ], { lock } );
+					updateBlockAttributes( [ clientId ], {
+						lock,
+						templateLock: applyTemplateLock
+							? getTemplateLockValue( lock )
+							: undefined,
+					} );
 					onClose();
 				} }
 			>
@@ -171,6 +198,17 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							/>
 						</li>
 					</ul>
+					{ hasTemplateLock && (
+						<ToggleControl
+							className="block-editor-block-lock-modal__template-lock"
+							label={ __( 'Apply to all blocks inside' ) }
+							checked={ applyTemplateLock }
+							disabled={ lock.move && ! lock.remove }
+							onChange={ () =>
+								setApplyTemplateLock( ! applyTemplateLock )
+							}
+						/>
+					) }
 				</div>
 				<Flex
 					className="block-editor-block-lock-modal__actions"

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

@@ -53,6 +53,16 @@
 	}
 }
 
+.block-editor-block-lock-modal__template-lock {
+	border-top: $border-width solid $gray-300;
+	margin-top: $grid-unit-20;
+	padding: $grid-unit-15 0;
+
+	.components-base-control__field {
+		margin: 0;
+	}
+}
+
 .block-editor-block-lock-modal__actions {
 	margin-top: $grid-unit-30;
 }

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

@@ -386,14 +386,12 @@ export default compose(
 				clearSelectedBlock,
 			} = dispatch( blockEditorStore );
 			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-			const { getBlockSelectionEnd, getBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockSelectionEnd, getBlock } =
+				select( blockEditorStore );
 			const { createSuccessNotice } = dispatch( noticesStore );
 
-			const {
-				__experimentalConvertBlockToStatic: convertBlockToStatic,
-			} = dispatch( reusableBlocksStore );
+			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+				dispatch( reusableBlocksStore );
 
 			return {
 				createSuccessNotice,

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

@@ -108,9 +108,8 @@ const BlockMoverButton = forwardRef(
 			[ clientIds, direction ]
 		);
 
-		const { moveBlocksDown, moveBlocksUp } = useDispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp } =
+			useDispatch( blockEditorStore );
 		const moverFunction =
 			direction === 'up' ? moveBlocksUp : moveBlocksDown;
 

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

@@ -37,9 +37,8 @@ export const BlockMover = ( {
 } ) => {
 	const pickerRef = useRef();
 	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
-	const [ blockPageMoverState, setBlockPageMoverState ] = useState(
-		undefined
-	);
+	const [ blockPageMoverState, setBlockPageMoverState ] =
+		useState( undefined );
 	const showBlockPageMover = ( direction ) => () => {
 		if ( ! pickerRef.current ) {
 			setBlockPageMoverState( undefined );
@@ -167,9 +166,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
-		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } = dispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
+			dispatch( blockEditorStore );
 		return {
 			onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
 			onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),

package/src/components/block-parent-selector/index.js

@@ -22,9 +22,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {WPComponent} Parent block selector.
  */
 export default function BlockParentSelector() {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const { firstParentClientId, shouldHide, hasReducedUI } = useSelect(
 		( select ) => {
 			const {

package/src/components/block-pattern-setup/index.js

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId, useResizeObserver } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,7 +28,6 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
-	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -39,10 +38,7 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div
-				className="block-editor-block-pattern-setup__carousel"
-				style={ { height } }
-			>
+			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
 					<ul className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
@@ -50,7 +46,6 @@ const SetupContent = ( {
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
-								minHeight={ height }
 							/>
 						) ) }
 					</ul>
@@ -59,10 +54,7 @@ const SetupContent = ( {
 		);
 	}
 	return (
-		<div
-			style={ { height } }
-			className="block-editor-block-pattern-setup__grid"
-		>
+		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
 				{ ...composite }
 				role="listbox"
@@ -145,21 +137,15 @@ const BlockPatternSetup = ( {
 	clientId,
 	blockName,
 	filterPatternsFn,
-	startBlankComponent,
 	onBlockPatternSelect,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
-	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
 
-	if ( ! patterns?.length || showBlank ) {
-		return startBlankComponent;
+	if ( ! patterns?.length ) {
+		return null;
 	}
 
 	const onBlockPatternSelectDefault = ( blocks ) => {
@@ -168,14 +154,8 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
-	const onStartBlank = startBlankComponent
-		? () => {
-				setShowBlank( true );
-		  }
-		: undefined;
 	return (
 		<>
-			{ contentResizeListener }
 			<div
 				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
 			>
@@ -184,7 +164,6 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
-					height={ contentHeight - 2 * 60 }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }
@@ -202,7 +181,6 @@ const BlockPatternSetup = ( {
 							patterns[ activeSlide ].blocks
 						);
 					} }
-					onStartBlank={ onStartBlank }
 				/>
 			</div>
 		</>

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -15,11 +15,8 @@ import {
  */
 import { VIEWMODES } from './constants';
 
-const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
+const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		{ onStartBlank && (
-			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
-		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
@@ -56,7 +53,6 @@ const SetupToolbar = ( {
 	activeSlide,
 	totalSlides,
 	onBlockPatternSelect,
-	onStartBlank,
 } ) => {
 	const isCarouselView = viewMode === VIEWMODES.carousel;
 	const displayControls = (
@@ -87,10 +83,7 @@ const SetupToolbar = ( {
 			) }
 			{ displayControls }
 			{ isCarouselView && (
-				<Actions
-					onBlockPatternSelect={ onBlockPatternSelect }
-					onStartBlank={ onStartBlank }
-				/>
+				<Actions onBlockPatternSelect={ onBlockPatternSelect } />
 			) }
 		</div>
 	);

package/src/components/block-pattern-setup/style.scss

@@ -17,6 +17,8 @@
 			display: block;
 			width: 100%;
 			padding: $grid-unit-40;
+			padding-bottom: 0;
+			padding-top: 0;
 			column-count: 2;
 
 			@include break-huge() {
@@ -53,8 +55,9 @@
 		text-align: left;
 		margin: 0;
 		color: $gray-900;
+		position: absolute;
+		bottom: 0;
 		// Block UI appearance.
-		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
 		display: flex;
 		flex-direction: row;
@@ -129,5 +132,4 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
 	width: 100%;
-	overflow-y: auto;
 }

package/src/components/block-popover/inbetween.js

@@ -172,7 +172,7 @@ function BlockPopoverInbetween( {
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.

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

@@ -57,7 +57,7 @@ export default function BlockPopover( {
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }

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

@@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -24,19 +25,16 @@ function AutoBlockPreview( {
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
-	const [
-		containerResizeListener,
-		{ width: containerWidth },
-	] = useResizeObserver();
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
-	const { styles, assets } = useSelect( ( select ) => {
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
+	const { styles, assets, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
 			assets: settings.__unstableResolvedAssets,
+			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -55,11 +53,14 @@ function AutoBlockPreview( {
 		return styles;
 	}, [ styles ] );
 
+	const svgFilters = useMemo( () => {
+		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
+	}, [ duotone ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
-
 	return (
 		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
@@ -104,12 +105,21 @@ function AutoBlockPreview( {
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
 						minHeight:
-							scale < 1 && __experimentalMinHeight
+							scale !== 0 && scale < 1 && __experimentalMinHeight
 								? __experimentalMinHeight / scale
 								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }
+					{
+						/* Filters need to be rendered before children to avoid Safari rendering issues. */
+						svgFilters.map( ( preset ) => (
+							<PresetDuotoneFilter
+								preset={ preset }
+								key={ preset.slug }
+							/>
+						) )
+					}
 					<MemoizedBlockList renderAppender={ false } />
 				</Iframe>
 			</Disabled>

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

@@ -17,9 +17,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {import('react').RefCallback} Ref callback.
  */
 export function useBlockSelectionClearer() {
-	const { hasSelectedBlock, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { hasSelectedBlock, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(

package/src/components/block-settings-menu/block-edit-visually-button.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds, ...props } ) {
+	const { block, shouldRender } = useSelect(
+		( select ) => {
+			const firstBlockClientId = clientIds[ 0 ];
+			const { isBlockMultiSelected, getBlockMode, getBlock } =
+				select( blockEditorStore );
+			const isSingleSelected =
+				! isBlockMultiSelected( firstBlockClientId );
+			const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';
+
+			return {
+				block: getBlock( firstBlockClientId ),
+				shouldRender: isSingleSelected && isHtmlMode,
+			};
+		},
+		[ clientIds[ 0 ] ]
+	);
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const onClick = useCallback( () => {
+		replaceBlocks(
+			block.clientId,
+			rawHandler( { HTML: getBlockContent( block ) } )
+		);
+	}, [ block ] );
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton onClick={ onClick } { ...props }>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,8 @@ import { compose } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function BlockModeToggle( {
 	blockType,
 	mode,
@@ -25,6 +22,7 @@ export function BlockModeToggle( {
 	isCodeEditingEnabled = true,
 } ) {
 	if (
+		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
 		! isCodeEditingEnabled
 	) {
@@ -39,9 +37,8 @@ export function BlockModeToggle( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } = select(
-			blockEditorStore
-		);
+		const { getBlock, getBlockMode, getSettings } =
+			select( blockEditorStore );
 		const block = getBlock( clientId );
 		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, flow, noop } from 'lodash';
+import { castArray, flow } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -33,6 +33,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
+const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
@@ -41,7 +42,9 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	return <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;
+	const copyMenuItemLabel =
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
 export function BlockSettingsDropdown( {
@@ -82,9 +85,8 @@ export function BlockSettingsDropdown( {
 				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
 				parentBlockType: getBlockType( parentBlockName ),
-				previousBlockClientId: getPreviousBlockClientId(
-					firstBlockClientId
-				),
+				previousBlockClientId:
+					getPreviousBlockClientId( firstBlockClientId ),
 				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
@@ -108,9 +110,8 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 
 	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock
@@ -124,7 +125,10 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: firstBlockClientId,
+		maximumLength: 25,
+	} );
 
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock