@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -17,6 +17,20 @@
 	}
 }
 
+
+// Hide selections on this element, otherwise Safari will include it stacked
+// under your actual selection.
+// This uses a CSS hack to show the rules to Safari only. Failing here is okay,
+// it just makes the selection indication slightly less precise. That makes this
+// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
+/* stylelint-disable */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+	background-color: transparent; 
+}
+/* stylelint-enable */
+
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
 // Also be sure to test partial selections in Safari, as it draws the
@@ -24,16 +38,6 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Hide selections on this element, otherwise Safari will include it stacked
-	// under your actual selection.
-	&::selection {
-		background: transparent;
-	}
-
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
 	// Block multi selection
 	// Apply a rounded radius to the entire block when multi selected, but with low specificity
 	// so explicit radii set by tools are preserved.

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

@@ -139,7 +139,7 @@ export default function BlockList( {
 		insertBlock( newBlock, blockCount );
 	};
 
-	const scrollViewRef = useRef( null );
+	const scrollRef = useRef( null );
 
 	const shouldFlatListPreventAutomaticScroll = () =>
 		blockInsertionPointIsVisible;
@@ -239,7 +239,7 @@ export default function BlockList( {
 				<BlockListProvider
 					value={ {
 						...DEFAULT_BLOCK_LIST_CONTEXT,
-						scrollRef: scrollViewRef.current,
+						scrollRef: scrollRef.current,
 					} }
 				>
 					<BlockDraggableWrapper isRTL={ isRTL }>
@@ -249,9 +249,7 @@ export default function BlockList( {
 									? { removeClippedSubviews: false }
 									: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 								accessibilityLabel="block-list"
-								innerRef={ ( ref ) => {
-									scrollViewRef.current = ref;
-								} }
+								ref={ scrollRef }
 								extraScrollHeight={ extraScrollHeight }
 								keyboardShouldPersistTaps="always"
 								scrollViewStyle={ { flex: 1 } }

package/src/components/block-list/{block-list-block-context.js → private-block-context.js}

@@ -3,4 +3,4 @@
  */
 import { createContext } from '@wordpress/element';
 
-export const BlockListBlockContext = createContext( null );
+export const PrivateBlockContext = createContext( null );

package/src/components/block-list/use-block-props/index.js

@@ -8,41 +8,23 @@ import classnames from 'classnames';
  */
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__unstableGetBlockProps as getBlockProps,
-	getBlockType,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { BlockListBlockContext } from '../block-list-block-context';
+import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';
-import { useBlockClassNames } from './use-block-class-names';
-import { useBlockDefaultClassName } from './use-block-default-class-name';
-import { useBlockCustomClassName } from './use-block-custom-class-name';
-import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
-import { store as blockEditorStore } from '../../../store';
-import useBlockOverlayActive from '../../block-content-overlay';
-import { unlock } from '../../../lock-unlock';
-
-/**
- * If the block count exceeds the threshold, we disable the reordering animation
- * to avoid laginess.
- */
-const BLOCK_ANIMATION_THRESHOLD = 200;
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -92,80 +74,44 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		className,
 		wrapperProps = {},
 		isAligned,
-	} = useContext( BlockListBlockContext );
-	const {
 		index,
 		mode,
 		name,
 		blockApiVersion,
 		blockTitle,
-		isPartOfSelection,
-		adjustScrolling,
-		enableAnimation,
+		isSelected,
 		isSubtreeDisabled,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockIndex,
-				getBlockMode,
-				getBlockName,
-				isTyping,
-				getGlobalBlockCount,
-				isBlockSelected,
-				isBlockMultiSelected,
-				isAncestorMultiSelected,
-				isFirstMultiSelectedBlock,
-				isBlockSubtreeDisabled,
-			} = unlock( select( blockEditorStore ) );
-			const { getActiveBlockVariation } = select( blocksStore );
-			const isSelected = isBlockSelected( clientId );
-			const isPartOfMultiSelection =
-				isBlockMultiSelected( clientId ) ||
-				isAncestorMultiSelected( clientId );
-			const blockName = getBlockName( clientId );
-			const blockType = getBlockType( blockName );
-			const attributes = getBlockAttributes( clientId );
-			const match = getActiveBlockVariation( blockName, attributes );
-
-			return {
-				index: getBlockIndex( clientId ),
-				mode: getBlockMode( clientId ),
-				name: blockName,
-				blockApiVersion: blockType?.apiVersion || 1,
-				blockTitle: match?.title || blockType?.title,
-				isPartOfSelection: isSelected || isPartOfMultiSelection,
-				adjustScrolling:
-					isSelected || isFirstMultiSelectedBlock( clientId ),
-				enableAnimation:
-					! isTyping() &&
-					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
-				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	const hasOverlay = useBlockOverlayActive( clientId );
+		isOutlineEnabled,
+		hasOverlay,
+		initialPosition,
+		blockEditingMode,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		removeOutline,
+		isBlockMovingMode,
+		canInsertMovingBlock,
+		isEditingDisabled,
+		isTemporarilyEditingAsBlocks,
+		defaultClassName,
+	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 	const mergedRefs = useMergeRefs( [
 		props.ref,
-		useFocusFirstElement( clientId ),
+		useFocusFirstElement( { clientId, initialPosition } ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useEventHandlers( clientId ),
+		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered(),
+		useIsHovered( { isEnabled: isOutlineEnabled } ),
 		useIntersectionObserver(),
-		useMovingAnimation( {
-			isSelected: isPartOfSelection,
-			adjustScrolling,
-			enableAnimation,
-			triggerAnimationOnChange: index,
-		} ),
+		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
 	] );
 
@@ -178,7 +124,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	}
 
 	return {
-		tabIndex: 0,
+		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,
@@ -190,18 +136,29 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
-			// The wp-block className is important for editor styles.
-			classnames( 'block-editor-block-list__block', {
+			'block-editor-block-list__block',
+			{
+				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
-			} ),
+				'is-selected': isSelected,
+				'is-highlighted': isHighlighted,
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected': isPartiallySelected,
+				'is-reusable': isReusable,
+				'is-dragging': isDragging,
+				'has-child-selected': hasChildSelected,
+				'remove-outline': removeOutline,
+				'is-block-moving-mode': isBlockMovingMode,
+				'can-insert-moving-block': canInsertMovingBlock,
+				'is-editing-disabled': isEditingDisabled,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
+			},
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			defaultClassName
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -18,38 +18,6 @@ import { store as blockEditorStore } from '../../../store';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
-/**
- * Returns the initial position if the block needs to be focussed, `undefined`
- * otherwise. The initial position is either 0 (start) or -1 (end).
- *
- * @param {string} clientId Block client ID.
- *
- * @return {number} The initial position, either 0 (start) or -1 (end).
- */
-function useInitialPosition( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlocksInitialCaretPosition,
-				__unstableGetEditorMode,
-				isBlockSelected,
-			} = select( blockEditorStore );
-
-			if ( ! isBlockSelected( clientId ) ) {
-				return;
-			}
-
-			if ( __unstableGetEditorMode() !== 'edit' ) {
-				return;
-			}
-
-			// If there's no initial position, return 0 to focus the start.
-			return getSelectedBlocksInitialCaretPosition();
-		},
-		[ clientId ]
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -58,9 +26,8 @@ function useInitialPosition( clientId ) {
  *
  * @return {RefObject} React ref with the block element.
  */
-export function useFocusFirstElement( clientId ) {
+export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const initialPosition = useInitialPosition( clientId );
 	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
 function listener( event ) {
 	if ( event.defaultPrevented ) {
 		return;
@@ -20,16 +14,11 @@ function listener( event ) {
 	event.currentTarget.classList[ action ]( 'is-hovered' );
 }
 
-/**
+/*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered() {
-	const isEnabled = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().outlineMode;
-	}, [] );
-
+export function useIsHovered( { isEnabled } ) {
 	return useRefEffect(
 		( node ) => {
 			if ( isEnabled ) {

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

@@ -19,11 +19,7 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string} clientId Block client ID.
  */
-export function useEventHandlers( clientId ) {
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
+export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );

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

@@ -28,6 +28,7 @@ export function useInBetweenInserter() {
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
+		getBlockName,
 	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
@@ -75,7 +76,9 @@ export function useInBetweenInserter() {
 
 				if (
 					getTemplateLock( rootClientId ) ||
-					getBlockEditingMode( rootClientId ) === 'disabled'
+					getBlockEditingMode( rootClientId ) === 'disabled' ||
+					( getBlockName( rootClientId ) === 'core/block' &&
+						window.__experimentalPatternPartialSyncing )
 				) {
 					return;
 				}

package/src/components/block-list/use-scroll-upon-insertion.native.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
+
+const useScrollUponInsertion = ( {
+	clientId,
+	isSelected,
+	isLayoutCalculated,
+	elementRef,
+} ) => {
+	const { scrollRef } = useBlockListContext();
+	const wasBlockJustInserted = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).wasBlockJustInserted(
+				clientId,
+				'inserter_menu'
+			),
+		[ clientId ]
+	);
+	useEffect( () => {
+		const lastScrollTo = scrollRef?.lastScrollTo.current;
+		const alreadyScrolledTo = lastScrollTo?.clientId === clientId;
+		if (
+			alreadyScrolledTo ||
+			! isSelected ||
+			! scrollRef ||
+			! wasBlockJustInserted ||
+			! isLayoutCalculated
+		) {
+			return;
+		}
+		scrollRef.scrollToElement( elementRef );
+		lastScrollTo.clientId = clientId;
+	}, [
+		isSelected,
+		scrollRef,
+		wasBlockJustInserted,
+		elementRef,
+		isLayoutCalculated,
+		clientId,
+	] );
+};
+
+export default useScrollUponInsertion;

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

@@ -3,9 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { focus } from '@wordpress/dom';
 import { useReducer, useRef, useEffect } from '@wordpress/element';
-import { lock } from '@wordpress/icons';
+import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,55 +12,45 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId, wrapperRef } ) {
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+export default function BlockLockToolbar( { clientId } ) {
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	const lockButtonRef = useRef( null );
-	const isFirstRender = useRef( true );
+	const hasLockButtonShown = useRef( false );
 
-	const shouldHideBlockLockUI =
-		! canLock || ( canEdit && canMove && canRemove );
-
-	// Restore focus manually on the first focusable element in the toolbar
-	// when the block lock modal is closed and the block is not locked anymore.
-	// See https://github.com/WordPress/gutenberg/issues/51447
+	// If the block lock button has been shown, we don't want to remove it
+	// from the toolbar until the toolbar is rendered again without it.
+	// Removing it beforehand can cause focus loss issues, such as when
+	// unlocking the block from the modal. It needs to return focus from
+	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
-		if ( isFirstRender.current ) {
-			isFirstRender.current = false;
-			return;
-		}
-
-		if ( ! isModalOpen && shouldHideBlockLockUI ) {
-			focus.focusable
-				.find( wrapperRef.current, {
-					sequential: false,
-				} )
-				.find(
-					( element ) =>
-						element.tagName === 'BUTTON' &&
-						element !== lockButtonRef.current
-				)
-				?.focus();
+		if ( isLocked ) {
+			hasLockButtonShown.current = true;
 		}
-		// wrapperRef is a reference object and should be stable
-	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
+	}, [ isLocked ] );
 
-	if ( shouldHideBlockLockUI ) {
+	if ( ! isLocked && ! hasLockButtonShown.current ) {
 		return null;
 	}
 
+	let label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	if ( ! canLock && isLocked ) {
+		label = __( 'Locked' );
+	}
+
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					ref={ lockButtonRef }
-					icon={ lock }
-					label={ __( 'Unlock' ) }
+					accessibleWhenDisabled
+					disabled={ ! canLock }
+					icon={ isLocked ? lock : unlock }
+					label={ label }
 					onClick={ toggleModal }
 					aria-expanded={ isModalOpen }
 					aria-haspopup="dialog"

package/src/components/block-mover/README.md

@@ -4,11 +4,6 @@ Block movers allow moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -64,7 +64,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 			} ) }
 		>
 			{ ! hideDragHandle && (
-				<BlockDraggable clientIds={ clientIds }>
+				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
 							icon={ dragHandle }

package/src/components/block-parent-selector/README.md

@@ -8,11 +8,6 @@ In practice the BlockParentSelector component renders a <ToolbarButton /> compon
 
 ![Block parent selector test](https://make.wordpress.org/core/files/2020/09/block-parent-selector-test.gif)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-patterns-list/README.md

@@ -6,11 +6,6 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
 
 ![Block patterns sidebar in WordPress 5.5](https://make.wordpress.org/core/files/2020/09/blocks-patterns-sidebar-in-wordpress-5-5.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -24,7 +24,7 @@ import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
-import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const {
 	CompositeV2: Composite,
@@ -56,7 +56,7 @@ function BlockPattern( {
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
 			blocks={ blocks }
-			isPattern={ !! pattern }
+			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
@@ -78,7 +78,8 @@ function BlockPattern( {
 				>
 					<WithToolTip
 						showTooltip={
-							showTooltip && ! pattern.type !== PATTERN_TYPES.user
+							showTooltip &&
+							! pattern.type !== INSERTER_PATTERN_TYPES.user
 						}
 						title={ pattern.title }
 					>
@@ -97,7 +98,7 @@ function BlockPattern( {
 										{
 											'block-editor-block-patterns-list__list-item-synced':
 												pattern.type ===
-													PATTERN_TYPES.user &&
+													INSERTER_PATTERN_TYPES.user &&
 												! pattern.syncStatus,
 										}
 									) }
@@ -122,7 +123,8 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.type === PATTERN_TYPES.user &&
+								{ pattern.type ===
+									INSERTER_PATTERN_TYPES.user &&
 									! pattern.syncStatus && (
 										<div className="block-editor-patterns__pattern-icon-wrapper">
 											<Icon
@@ -132,7 +134,8 @@ function BlockPattern( {
 										</div>
 									) }
 								{ ( ! showTooltip ||
-									pattern.type === PATTERN_TYPES.user ) && (
+									pattern.type ===
+										INSERTER_PATTERN_TYPES.user ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>

package/src/components/block-removal-warning-modal/index.js

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -48,22 +48,15 @@ export function BlockRemovalWarningModal( { rules } ) {
 
 	return (
 		<Modal
-			title={ __( 'Are you sure?' ) }
+			title={ __( 'Be careful!' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
 		>
-			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
-			) : (
-				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
-					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>{ rules[ name ] }</li>
-					) ) }
-				</ul>
-			) }
 			<p>
-				{ blockNamesForPrompt.length > 1
-					? __( 'Removing these blocks is not advised.' )
-					: __( 'Removing this block is not advised.' ) }
+				{ _n(
+					'Post or page content will not be displayed if you delete this block.',
+					'Post or page content will not be displayed if you delete these blocks.',
+					blockNamesForPrompt.length
+				) }
 			</p>
 			<HStack justify="right">
 				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>