@wordpress/block-editor 8.5.4 → 9.0.0

package/src/components/block-alignment-control/ui.js

@@ -6,60 +6,23 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import {
-	alignNone,
-	positionCenter,
-	positionLeft,
-	positionRight,
-	stretchFullWidth,
-	stretchWide,
-} from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useAvailableAlignments from './use-available-alignments';
-
-const BLOCK_ALIGNMENTS_CONTROLS = {
-	none: {
-		icon: alignNone,
-		title: _x( 'None', 'Alignment option' ),
-	},
-	left: {
-		icon: positionLeft,
-		title: __( 'Align left' ),
-	},
-	center: {
-		icon: positionCenter,
-		title: __( 'Align center' ),
-	},
-	right: {
-		icon: positionRight,
-		title: __( 'Align right' ),
-	},
-	wide: {
-		icon: stretchWide,
-		title: __( 'Wide width' ),
-	},
-	full: {
-		icon: stretchFullWidth,
-		title: __( 'Full width' ),
-	},
-};
-
-const DEFAULT_CONTROL = 'none';
-
-const POPOVER_PROPS = {
-	isAlternate: true,
-};
+import {
+	BLOCK_ALIGNMENTS_CONTROLS,
+	DEFAULT_CONTROL,
+	POPOVER_PROPS,
+} from './constants';
 
 function BlockAlignmentUI( {
 	value,
@@ -92,72 +55,69 @@ function BlockAlignmentUI( {
 		label: __( 'Align' ),
 		toggleProps: { describedBy: __( 'Change alignment' ) },
 	};
-	const extraProps =
-		isToolbar || Platform.isNative
-			? {
-					isCollapsed: isToolbar ? isCollapsed : undefined,
-					controls: enabledControls.map(
-						( { name: controlName } ) => {
-							return {
-								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
-								isActive:
-									value === controlName ||
-									( ! value && controlName === 'none' ),
-								role: isCollapsed ? 'menuitemradio' : undefined,
-								onClick: () => onChangeAlignment( controlName ),
-							};
-						}
-					),
-			  }
-			: {
-					children: ( { onClose } ) => {
-						return (
-							<>
-								<MenuGroup className="block-editor-block-alignment-control__menu-group">
-									{ enabledControls.map(
-										( { name: controlName, info } ) => {
-											const {
-												icon,
-												title,
-											} = BLOCK_ALIGNMENTS_CONTROLS[
-												controlName
-											];
-											// If no value is provided, mark as selected the `none` option.
-											const isSelected =
-												controlName === value ||
-												( ! value &&
-													controlName === 'none' );
-											return (
-												<MenuItem
-													key={ controlName }
-													icon={ icon }
-													iconPosition="left"
-													className={ classNames(
-														'components-dropdown-menu__menu-item',
-														{
-															'is-active': isSelected,
-														}
-													) }
-													isSelected={ isSelected }
-													onClick={ () => {
-														onChangeAlignment(
-															controlName
-														);
-														onClose();
-													} }
-													role="menuitemradio"
-													info={ info }
-												>
-													{ title }
-												</MenuItem>
-											);
-										}
-									) }
-								</MenuGroup>
-							</>
-						);
-					},
-			  };
+	const extraProps = isToolbar
+		? {
+				isCollapsed,
+				controls: enabledControls.map( ( { name: controlName } ) => {
+					return {
+						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+						isActive:
+							value === controlName ||
+							( ! value && controlName === 'none' ),
+						role: isCollapsed ? 'menuitemradio' : undefined,
+						onClick: () => onChangeAlignment( controlName ),
+					};
+				} ),
+		  }
+		: {
+				children: ( { onClose } ) => {
+					return (
+						<>
+							<MenuGroup className="block-editor-block-alignment-control__menu-group">
+								{ enabledControls.map(
+									( { name: controlName, info } ) => {
+										const {
+											icon,
+											title,
+										} = BLOCK_ALIGNMENTS_CONTROLS[
+											controlName
+										];
+										// If no value is provided, mark as selected the `none` option.
+										const isSelected =
+											controlName === value ||
+											( ! value &&
+												controlName === 'none' );
+										return (
+											<MenuItem
+												key={ controlName }
+												icon={ icon }
+												iconPosition="left"
+												className={ classNames(
+													'components-dropdown-menu__menu-item',
+													{
+														'is-active': isSelected,
+													}
+												) }
+												isSelected={ isSelected }
+												onClick={ () => {
+													onChangeAlignment(
+														controlName
+													);
+													onClose();
+												} }
+												role="menuitemradio"
+												info={ info }
+											>
+												{ title }
+											</MenuItem>
+										);
+									}
+								) }
+							</MenuGroup>
+						</>
+					);
+				},
+		  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;
 }

package/src/components/block-alignment-control/ui.native.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	BottomSheetSelectControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useAvailableAlignments from './use-available-alignments';
+import {
+	BLOCK_ALIGNMENTS_CONTROLS,
+	DEFAULT_CONTROL,
+	POPOVER_PROPS,
+} from './constants';
+
+function BlockAlignmentUI( {
+	value,
+	onChange,
+	controls,
+	isToolbar,
+	isCollapsed = true,
+	isBottomSheetControl = false,
+} ) {
+	const enabledControls = useAvailableAlignments( controls );
+	const hasEnabledControls = !! enabledControls.length;
+
+	if ( ! hasEnabledControls ) {
+		return null;
+	}
+
+	function onChangeAlignment( align ) {
+		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
+	}
+
+	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const defaultAlignmentControl =
+		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+
+	const toolbarUIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
+	const UIComponent = isBottomSheetControl
+		? BottomSheetSelectControl
+		: toolbarUIComponent;
+
+	const commonProps = {
+		label: __( 'Align' ),
+	};
+	const extraProps = isBottomSheetControl
+		? {
+				options: enabledControls.map( ( { name: controlName } ) => {
+					const control = BLOCK_ALIGNMENTS_CONTROLS[ controlName ];
+					return {
+						value: controlName,
+						label: control.title,
+						icon: control.icon,
+					};
+				} ),
+				value: activeAlignmentControl ? value : 'none',
+				onChange: ( align ) => onChangeAlignment( align ),
+		  }
+		: {
+				icon: activeAlignmentControl
+					? activeAlignmentControl.icon
+					: defaultAlignmentControl.icon,
+				isCollapsed: isToolbar ? isCollapsed : undefined,
+				controls: enabledControls.map( ( { name: controlName } ) => {
+					return {
+						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+						isActive:
+							value === controlName ||
+							( ! value && controlName === 'none' ),
+						onClick: () => onChangeAlignment( controlName ),
+					};
+				} ),
+				popoverProps: POPOVER_PROPS,
+				toggleProps: { describedBy: __( 'Change alignment' ) },
+		  };
+
+	return <UIComponent { ...commonProps } { ...extraProps } />;
+}
+
+export default BlockAlignmentUI;

package/src/components/block-content-overlay/index.js

@@ -25,6 +25,7 @@ export default function BlockContentOverlay( {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
+		canEdit,
 		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
@@ -36,8 +37,10 @@ export default function BlockContentOverlay( {
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
 				isBlockHighlighted,
+				canEditBlock,
 			} = select( blockEditorStore );
 			return {
+				canEdit: canEditBlock( clientId ),
 				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
@@ -59,6 +62,12 @@ export default function BlockContentOverlay( {
 	);
 
 	useEffect( () => {
+		// The overlay is always active when editing is locked.
+		if ( ! canEdit ) {
+			setIsOverlayActive( true );
+			return;
+		}
+
 		// Reenable when blocks are not in use.
 		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
@@ -75,7 +84,13 @@ export default function BlockContentOverlay( {
 		if ( hasChildSelected && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
+	}, [
+		isParentSelected,
+		hasChildSelected,
+		isOverlayActive,
+		isHovered,
+		canEdit,
+	] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the a11y is concerned. We're just catching the first click so that
@@ -88,7 +103,9 @@ export default function BlockContentOverlay( {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 			onMouseUp={
-				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
+				isOverlayActive && canEdit
+					? () => setIsOverlayActive( false )
+					: undefined
 			}
 		>
 			{ wrapperProps?.children }

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

@@ -47,6 +47,7 @@ function BlockForType( {
 	onDeleteBlock,
 	onReplace,
 	parentWidth,
+	parentBlockAlignment,
 	wrapperProps,
 	blockWidth,
 	baseGlobalStyles,
@@ -95,6 +96,7 @@ function BlockForType( {
 				contentStyle={ contentStyle }
 				onDeleteBlock={ onDeleteBlock }
 				blockWidth={ blockWidth }
+				parentBlockAlignment={ parentBlockAlignment }
 			/>
 			<View onLayout={ getBlockWidth } />
 		</GlobalStylesContext.Provider>

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

@@ -262,12 +262,17 @@
 			right: $border-width;
 			bottom: $border-width;
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			// Border is outset, so subtract the width to achieve correct radius.
+			border-radius: $radius-block-ui - $border-width;
 		}
 	}
 
 	&.is-selected {
-		cursor: unset;
+		cursor: default;
+
+		&.rich-text {
+			cursor: unset;
+		}
 
 		&::after {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
@@ -303,22 +308,6 @@
 	}
 }
 
-// Active entity spotlight.
-// Disable if focus mode is active.
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-	opacity: 0.5;
-	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
-
-	&.is-active-entity,
-	&.has-child-selected,
-	&:not(.has-child-selected) .block-editor-block-list__block,
-	&.is-active-entity .block-editor-block-list__block,
-	.is-active-entity .block-editor-block-list__block {
-		opacity: 1;
-	}
-}
-
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,

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

@@ -33,12 +33,8 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
-				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
-			const {
-				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
-				outlineMode,
-			} = getSettings();
+			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
@@ -48,9 +44,6 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
-			const activeEntityBlockId = getActiveBlockIdByBlockNames(
-				spotlightEntityBlocks
-			);
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
@@ -58,9 +51,6 @@ export function useBlockClassNames( clientId ) {
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,
-				'has-active-entity': activeEntityBlockId,
-				// Determine if there is an active entity area to spotlight.
-				'is-active-entity': activeEntityBlockId === clientId,
 				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},

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

@@ -13,7 +13,8 @@ import {
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { isReusableBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,7 +25,18 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canMove, canRemove } = useBlockLock( clientId );
+	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
+	const { isReusable } = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
+
+			return {
+				isReusable: isReusableBlock( getBlockType( blockName ) ),
+			};
+		},
+		[ clientId ]
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -36,8 +48,9 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
+			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canMove, canRemove ] );
+	}, [ canEdit, canMove, canRemove, isReusable ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
@@ -81,10 +94,36 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							setLock( {
 								move: newValue,
 								remove: newValue,
+								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
+						{ isReusable && (
+							<li className="block-editor-block-lock-modal__checklist-item">
+								<CheckboxControl
+									label={
+										<>
+											{ __( 'Restrict editing' ) }
+											<Icon
+												icon={
+													lock.edit
+														? lockIcon
+														: unlockIcon
+												}
+											/>
+										</>
+									}
+									checked={ !! lock.edit }
+									onChange={ ( edit ) =>
+										setLock( ( prevLock ) => ( {
+											...prevLock,
+											edit,
+										} ) )
+									}
+								/>
+							</li>
+						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

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

@@ -15,7 +15,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLock } = useBlockLock( clientId );
+	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -26,7 +26,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		return null;
 	}
 
-	if ( canMove && canRemove ) {
+	if ( canEdit && canMove && canRemove ) {
 		return null;
 	}
 

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

@@ -19,6 +19,7 @@ export default function useBlockLock( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
+				canEditBlock,
 				canMoveBlock,
 				canRemoveBlock,
 				canLockBlockType,
@@ -27,14 +28,16 @@ export default function useBlockLock( clientId ) {
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
+			const canEdit = canEditBlock( clientId );
 			const canMove = canMoveBlock( clientId, rootClientId );
 			const canRemove = canRemoveBlock( clientId, rootClientId );
 
 			return {
+				canEdit,
 				canMove,
 				canRemove,
 				canLock: canLockBlockType( getBlockName( clientId ) ),
-				isLocked: ! canMove || ! canRemove,
+				isLocked: ! canEdit || ! canMove || ! canRemove,
 			};
 		},
 		[ clientId ]

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

@@ -8,7 +8,7 @@ import { castArray, first, last } from 'lodash';
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
@@ -139,12 +139,10 @@ const BlockMoverButton = forwardRef(
 					aria-describedby={ descriptionId }
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }
-					aria-disabled={ isDisabled }
+					disabled={ isDisabled }
+					__experimentalIsFocusable
 				/>
-				<span
-					id={ descriptionId }
-					className="block-editor-block-mover-button__description"
-				>
+				<VisuallyHidden id={ descriptionId }>
 					{ getBlockMoverDescription(
 						blocksCount,
 						blockType && blockType.title,
@@ -154,7 +152,7 @@ const BlockMoverButton = forwardRef(
 						direction === 'up' ? -1 : 1,
 						orientation
 					) }
-				</span>
+				</VisuallyHidden>
 			</>
 		);
 	}