@wordpress/block-editor 12.4.0 → 12.6.0

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

@@ -3,29 +3,11 @@
 }
 
 .solidBorderColor {
-	border-color: $blue-wordpress;
+	border-color: $blue-40;
 }
 
 .solidBorderColorDark {
-	border-color: $blue-30;
-}
-
-.dashedBorderColor {
-	border-color: $gray;
-}
-
-.dashedBorderColorDark {
-	border-color: $gray-70;
-}
-
-.borderFullWidth {
-	left: 0;
-	right: 0;
-}
-
-.containerBorderFullWidth {
-	left: -$solid-border-space * 0.5;
-	right: -$solid-border-space * 0.5;
+	border-color: $blue-50;
 }
 
 .dimmed {
@@ -51,32 +33,28 @@
 	min-height: 50px;
 }
 
-.neutralToolbar {
-	margin-left: -$block-edge-to-content;
-	margin-right: -$block-edge-to-content;
-}
-
 .solidBorder {
 	position: absolute;
-	top: -$solid-border-space;
-	bottom: 0;
-	left: -$solid-border-space;
-	right: -$solid-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 4px;
+	top: -6px;
+	bottom: -6px;
+	left: -6px;
+	right: -6px;
+	border-width: 2px;
+	border-radius: 2px;
 	border-style: solid;
 	z-index: 1;
 }
 
-.dashedBorder {
-	position: absolute;
-	top: -$dashed-border-space;
-	bottom: -$dashed-border-space;
-	left: -$dashed-border-space;
-	right: -$dashed-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 2px;
-	border-style: dashed;
+.solidBorderCompact {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.solidBorderTextContent {
+	left: 0;
+	right: 0;
 }
 
 .fullWidthPadding {

package/src/components/block-list/style.native.scss

@@ -66,12 +66,12 @@
 }
 
 .defaultBlock {
-	margin: $block-edge-to-content;
+	margin: $block-edge-to-content * 0.5 $block-edge-to-content;
 }
 
 .defaultAppender {
-	margin-top: $block-edge-to-content;
-	margin-bottom: $block-edge-to-content;
+	margin-top: $grid-unit;
+	margin-bottom: $grid-unit;
 	width: 100%;
 }
 

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

@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
 
 /**
@@ -12,7 +13,7 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId } ) {
+export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
@@ -20,11 +21,37 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLock ) {
-		return null;
-	}
+	const lockButtonRef = useRef( null );
+	const isFirstRender = useRef( true );
+
+	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
+	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();
+		}
+		// wrapperRef is a reference object and should be stable
+	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( shouldHideBlockLockUI ) {
 		return null;
 	}
 
@@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
+					ref={ lockButtonRef }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

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

@@ -7,7 +7,7 @@ import { Platform } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Picker, ToolbarButton } from '@wordpress/components';
+import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
@@ -107,7 +107,7 @@ export const BlockMover = ( {
 	}
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
@@ -136,7 +136,7 @@ export const BlockMover = ( {
 				leftAlign={ true }
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };
 

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -43,7 +43,19 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 `;
 
 exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
-[
+<View
+  style={
+    [
+      {
+        "height": 44,
+      },
+      {
+        "borderLeftWidth": 0.5,
+      },
+      undefined,
+    ]
+  }
+>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
@@ -99,7 +111,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -111,7 +122,7 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the right"
@@ -167,7 +178,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -179,6 +189,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</View>
 `;

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

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

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

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -16,38 +16,26 @@ import { __, _n } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-// In certain editing contexts, we'd like to prevent accidental removal of
-// important blocks. For example, in the site editor, the Query Loop block is
-// deemed important. In such cases, we'll ask the user for confirmation that
-// they intended to remove such block(s).
-//
-// @see https://github.com/WordPress/gutenberg/pull/51145
-export const blockTypePromptMessages = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-};
-
-export function BlockRemovalWarningModal() {
+export function BlockRemovalWarningModal( { rules } ) {
 	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
 		( select ) =>
 			unlock( select( blockEditorStore ) ).getRemovalPromptData()
 	);
 
 	const {
-		clearRemovalPrompt,
-		toggleRemovalPromptSupport,
+		clearBlockRemovalPrompt,
+		setBlockRemovalRules,
 		privateRemoveBlocks,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	// Signalling the removal prompt is in place.
+	// Load block removal rules, simultaneously signalling that the block
+	// removal prompt is in place.
 	useEffect( () => {
-		toggleRemovalPromptSupport( true );
+		setBlockRemovalRules( rules );
 		return () => {
-			toggleRemovalPromptSupport( false );
+			setBlockRemovalRules();
 		};
-	}, [ toggleRemovalPromptSupport ] );
+	}, [ rules, setBlockRemovalRules ] );
 
 	if ( ! blockNamesForPrompt ) {
 		return;
@@ -55,34 +43,30 @@ export function BlockRemovalWarningModal() {
 
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
-		clearRemovalPrompt();
+		clearBlockRemovalPrompt();
 	};
 
 	return (
 		<Modal
 			title={ __( 'Are you sure?' ) }
-			onRequestClose={ clearRemovalPrompt }
+			onRequestClose={ clearBlockRemovalPrompt }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
 			) : (
 				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
 					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>
-							{ blockTypePromptMessages[ name ] }
-						</li>
+						<li key={ name }>{ rules[ name ] }</li>
 					) ) }
 				</ul>
 			) }
 			<p>
-				{ _n(
-					'Removing this block is not advised.',
-					'Removing these blocks is not advised.',
-					blockNamesForPrompt.length
-				) }
+				{ blockNamesForPrompt.length > 1
+					? __( 'Removing these blocks is not advised.' )
+					: __( 'Removing this block is not advised.' ) }
 			</p>
 			<HStack justify="right">
-				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button variant="primary" onClick={ onConfirmRemoval }>

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, ToolbarButton } from '@wordpress/components';
+import {
+	createSlotFill,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
@@ -9,11 +13,13 @@ import { cog } from '@wordpress/icons';
 const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
 const SettingsButton = ( { openGeneralSidebar } ) => (
-	<ToolbarButton
-		title={ __( 'Open Settings' ) }
-		icon={ cog }
-		onClick={ openGeneralSidebar }
-	/>
+	<ToolbarGroup>
+		<ToolbarButton
+			title={ __( 'Open Settings' ) }
+			icon={ cog }
+			onClick={ openGeneralSidebar }
+		/>
+	</ToolbarGroup>
 );
 
 const SettingsButtonFill = ( props ) => (

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

@@ -9,6 +9,7 @@ import { Platform, findNodeHandle } from 'react-native';
 import {
 	getClipboard,
 	setClipboard,
+	ToolbarGroup,
 	ToolbarButton,
 	Picker,
 } from '@wordpress/components';
@@ -99,9 +100,11 @@ const BlockActionsMenu = ( {
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
 	// Check if selected block is Groupable and/or Ungroupable.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
-		selectedBlockClientId,
-	] );
+	const convertToGroupButtonProps = useConvertToGroupButtonProps(
+		// `selectedBlockClientId` can be undefined in some cases where this
+		// component gets re-rendered right after the block is removed.
+		selectedBlockClientId ? [ selectedBlockClientId ] : []
+	);
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;
@@ -213,16 +216,12 @@ const BlockActionsMenu = ( {
 			id: 'convertToRegularBlocksOption',
 			label:
 				innerBlockCount > 1
-					? __( 'Convert to regular blocks' )
-					: __( 'Convert to regular block' ),
+					? __( 'Detach patterns' )
+					: __( 'Detach pattern' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
-				const successNotice =
-					innerBlockCount > 1
-						? /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular blocks' )
-						: /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular block' );
+				/* translators: %s: name of the synced block */
+				const successNotice = __( '%s detached' );
 				createSuccessNotice(
 					sprintf(
 						successNotice,
@@ -258,11 +257,13 @@ const BlockActionsMenu = ( {
 	// End early if there are no options to show.
 	if ( ! options.length ) {
 		return (
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				icon={ moreHorizontalMobile }
-				disabled={ true }
-			/>
+			<ToolbarGroup>
+				<ToolbarButton
+					title={ __( 'Open Block Actions Menu' ) }
+					icon={ moreHorizontalMobile }
+					disabled={ true }
+				/>
+			</ToolbarGroup>
 		);
 	}
 
@@ -298,7 +299,7 @@ const BlockActionsMenu = ( {
 		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Open Block Actions Menu' ) }
 				onClick={ onPickerPresent }
@@ -328,7 +329,7 @@ const BlockActionsMenu = ( {
 				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
 				selectedBlockClientId={ selectedBlockClientId }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };
 

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

@@ -35,9 +35,9 @@ import __unstableBlockNameContext from './block-name-context';
 import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
 	const {
 		blockClientIds,
-		blockClientId,
 		blockType,
 		hasFixedToolbar,
 		isDistractionFree,
@@ -61,7 +61,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 		return {
 			blockClientIds: selectedBlockClientIds,
-			blockClientId: selectedBlockClientId,
 			blockType:
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
@@ -78,6 +77,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -89,7 +90,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				if ( isFocused && isDistractionFree ) {
 					return;
 				}
-				toggleBlockHighlight( blockClientId, isFocused );
+				toggleBlockHighlight( getSelectedBlockClientId(), isFocused );
 			},
 		}
 	);
@@ -123,18 +124,19 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	} );
 
 	return (
-		<div className={ classes }>
+		<div className={ classes } ref={ toolbarWrapperRef }>
 			{ ! isMultiToolbar &&
 				isLargeViewport &&
 				blockEditingMode === 'default' && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					blockEditingMode === 'default' && (
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+				blockEditingMode === 'default' && (
+					<div ref={ nodeRef } { ...showMoversGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
 								<BlockLockToolbar
 									clientId={ blockClientIds[ 0 ] }
+									wrapperRef={ toolbarWrapperRef }
 								/>
 							) }
 							<BlockMover
@@ -142,8 +144,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
-					) }
-			</div>
+					</div>
+				) }
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
 			) }