@wordpress/block-editor 15.22.1 → 16.0.0

package/src/autocompleters/block.js

@@ -125,8 +125,14 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const { name, initialAttributes, innerBlocks, syncStatus, blocks } =
-				inserterItem;
+			const {
+				name,
+				initialAttributes,
+				innerBlocks,
+				innerContent,
+				syncStatus,
+				blocks,
+			} = inserterItem;
 
 			return {
 				action: 'replace',
@@ -140,7 +146,8 @@ function createBlockCompleter() {
 								initialAttributes,
 								createBlocksFromInnerBlocksTemplate(
 									innerBlocks
-								)
+								),
+								innerContent
 						  ),
 			};
 		},

package/src/autocompleters/test/block.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import blockCompleter from '../block';
+
+describe( 'block autocompleter', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/html', {
+			apiVersion: 3,
+			save: () => null,
+			category: 'text',
+			title: 'Custom HTML',
+		} );
+		registerBlockType( 'core/paragraph', {
+			apiVersion: 3,
+			save: ( { attributes } ) => attributes.content || null,
+			category: 'text',
+			title: 'Paragraph',
+			attributes: { content: { type: 'string', source: 'html' } },
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/html' );
+		unregisterBlockType( 'core/paragraph' );
+	} );
+
+	describe( 'getOptionCompletion', () => {
+		it( "carries a variation's innerContent onto the inserted block", () => {
+			const { action, value } = blockCompleter.getOptionCompletion( {
+				name: 'core/html',
+				initialAttributes: {},
+				innerBlocks: [ [ 'core/paragraph', { content: 'Editable' } ] ],
+				innerContent: [ '<div class="card">', null, '</div>' ],
+			} );
+
+			expect( action ).toBe( 'replace' );
+			expect( value.name ).toBe( 'core/html' );
+			expect( value.innerContent ).toEqual( [
+				'<div class="card">',
+				null,
+				'</div>',
+			] );
+			expect( value.innerBlocks ).toHaveLength( 1 );
+			expect( value.innerBlocks[ 0 ].name ).toBe( 'core/paragraph' );
+		} );
+	} );
+} );

package/src/components/background-image-control/index.js

@@ -579,7 +579,6 @@ function BackgroundSizeControls( {
 				onChange={ toggleScrollWithPage }
 			/>
 			<ToggleGroupControl
-				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
@@ -618,7 +617,6 @@ function BackgroundSizeControls( {
 					aria-label={ __( 'Background image width' ) }
 					onChange={ updateBackgroundSize }
 					value={ sizeValue }
-					size="__unstable-large"
 					__unstableInputWidth="100px"
 					min={ 0 }
 					placeholder={ __( 'Auto' ) }

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

@@ -14,7 +14,7 @@ import BlockTools from '../block-tools';
 import EditorStyles from '../editor-styles';
 import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
-import { useMouseMoveTypingReset } from '../observe-typing';
+import { useMouseMoveTypingReset, useTypingObserver } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
 import { store as blockEditorStore } from '../../store';
@@ -60,7 +60,14 @@ export function ExperimentalBlockCanvas( {
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
-	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	// Attached to the same node as the writing flow ref: the iframe body,
+	// or the WritingFlow element when the canvas is not iframed.
+	const contentRef = useMergeRefs( [
+		contentRefProp,
+		clearerRef,
+		localRef,
+		useTypingObserver(),
+	] );
 	const zoomLevel = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
 		[]

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

@@ -22,7 +22,7 @@
 }
 
 .block-editor-block-card__title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;

package/src/components/block-controls/groups.js

@@ -8,6 +8,7 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
+const BlockControlsStyleState = createSlotFill( 'BlockControlsStyleState' );
 
 const groups = {
 	default: BlockControlsDefault,
@@ -15,6 +16,7 @@ const groups = {
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
+	'style-state': BlockControlsStyleState,
 };
 
 export default groups;

package/src/components/block-edit/edit.js

@@ -22,22 +22,13 @@ import { useCallback, useContext, useMemo } from '@wordpress/element';
 import BlockContext from '../block-context';
 import isURLLike from '../link-control/is-url-like';
 import {
+	getBlockBindingsContext,
 	hasPatternOverridesDefaultBinding,
 	replacePatternOverridesDefaultBinding,
 } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
 import { PrivateBlockContext } from '../block-list/private-block-context';
 
-/**
- * Default value used for blocks which do not define their own context needs,
- * used to guarantee that a block's `context` prop will always be an object. It
- * is assigned as a constant since it is always expected to be an empty object,
- * and in order to avoid unnecessary React reconciliations of a changing object.
- *
- * @type {{}}
- */
-const DEFAULT_BLOCK_CONTEXT = {};
-
 const Edit = ( props ) => {
 	const { name } = props;
 	const blockType = getBlockType( name );
@@ -69,32 +60,23 @@ const EditWithGeneratedProps = ( props ) => {
 	const { bindableAttributes } = useContext( PrivateBlockContext );
 
 	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
-		// Assign context values using the block type's declared context needs.
-		const computedContext = blockType?.usesContext
-			? Object.fromEntries(
-					Object.entries( blockContext ).filter( ( [ key ] ) =>
-						blockType.usesContext.includes( key )
-					)
-			  )
-			: DEFAULT_BLOCK_CONTEXT;
-		// Add context requested by Block Bindings sources.
-		if ( attributes?.metadata?.bindings ) {
-			Object.values( attributes?.metadata?.bindings || {} ).forEach(
-				( binding ) => {
-					registeredSources[ binding?.source ]?.usesContext?.forEach(
-						( key ) => {
-							computedContext[ key ] = blockContext[ key ];
-						}
-					);
-				}
-			);
-		}
 		return {
 			blockBindings: replacePatternOverridesDefaultBinding(
 				attributes?.metadata?.bindings,
 				bindableAttributes
 			),
-			context: computedContext,
+			// Assign context values using the block type's declared context
+			// needs, plus the context requested by the block's bindings
+			// sources.
+			context: getBlockBindingsContext(
+				blockContext,
+				blockType?.usesContext,
+				attributes?.metadata?.bindings
+					? Object.values( attributes.metadata.bindings ).map(
+							( binding ) => registeredSources[ binding?.source ]
+					  )
+					: undefined
+			),
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(
 				attributes?.metadata?.bindings
 			),

package/src/components/block-inspector/edit-contents.js

@@ -3,7 +3,7 @@
  */
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { isReusableBlock, isTemplatePart } from '@wordpress/blocks';
 
 /**
@@ -59,11 +59,15 @@ function InlineEditButton( {
 	editContentOnlySection,
 	stopEditingContentOnlySection,
 } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const handleClick = () => {
 		if ( ! editedContentOnlySection ) {
 			editContentOnlySection( clientId );
+			selectBlock( clientId );
 		} else {
 			stopEditingContentOnlySection();
+			// Keep the selected section pattern or content block selected after exiting.
+			selectBlock( clientId );
 		}
 	};
 

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

@@ -45,7 +45,6 @@ import {
 	hasViewportBlockStyleState,
 	isDefaultBlockStyleState,
 } from '../../hooks/block-style-state';
-import { onViewportStateChangeKey } from '../../store/private-keys';
 
 function StyleInspectorSlots( {
 	blockName,
@@ -150,7 +149,7 @@ function BlockInspector() {
 		blockEditingMode,
 		selectedBlockStyleState,
 		showStateOnCanvas,
-		onViewportStateChange,
+		isResponsiveEditing,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -164,8 +163,8 @@ function BlockInspector() {
 			getBlockEditingMode,
 			getSelectedBlockStyleState,
 			isSelectedBlockStyleStateShownOnCanvas,
+			isResponsiveEditing: _isResponsiveEditing,
 		} = unlock( select( blockEditorStore ) );
-		const blockEditorSettings = select( blockEditorStore ).getSettings();
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const isWithinEditedSection = isWithinEditedContentOnlySection(
@@ -203,8 +202,7 @@ function BlockInspector() {
 			showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
 				_renderedBlockClientId
 			),
-			onViewportStateChange:
-				blockEditorSettings?.[ onViewportStateChangeKey ],
+			isResponsiveEditing: _isResponsiveEditing(),
 		};
 	}, [] );
 
@@ -339,7 +337,7 @@ function BlockInspector() {
 				blockEditingMode={ blockEditingMode }
 				selectedBlockStyleState={ selectedBlockStyleState }
 				showStateOnCanvas={ showStateOnCanvas }
-				onViewportStateChange={ onViewportStateChange }
+				isResponsiveEditing={ isResponsiveEditing }
 				isBlockStyleStateSelected={ isBlockStyleStateSelected }
 			/>
 		</BlockInspectorSingleBlockWrapper>
@@ -395,11 +393,15 @@ const BlockInspectorSingleBlock = ( {
 	blockEditingMode,
 	selectedBlockStyleState,
 	showStateOnCanvas,
-	onViewportStateChange,
-	isBlockStyleStateSelected,
+	isResponsiveEditing,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
+	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
+	const isEditingStyleState =
+		( hasViewportBlockStyleState( selectedBlockStyleState ) &&
+			isResponsiveEditing ) ||
+		hasPseudoBlockStyleState( selectedBlockStyleState );
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
@@ -415,32 +417,10 @@ const BlockInspectorSingleBlock = ( {
 		setSelectedBlockStyleStateCanvasPreview,
 	} = unlock( useDispatch( blockEditorStore ) );
 	const onBlockStyleStateChange = ( value ) => {
-		const nextSelectedBlockStyleState = {
-			...selectedBlockStyleState,
-			...value,
-		};
-
-		setSelectedBlockStyleState(
-			renderedBlockClientId,
-			nextSelectedBlockStyleState
-		);
-
-		if ( value.viewport ) {
-			onViewportStateChange?.( {
-				viewport: nextSelectedBlockStyleState.viewport,
-				showStateOnCanvas,
-			} );
-		}
+		setSelectedBlockStyleState( renderedBlockClientId, value );
 	};
 	const onShowStateOnCanvasChange = ( value ) => {
 		setSelectedBlockStyleStateCanvasPreview( renderedBlockClientId, value );
-
-		if ( value ) {
-			onViewportStateChange?.( {
-				viewport: selectedBlockStyleState.viewport,
-				showStateOnCanvas: value,
-			} );
-		}
 	};
 
 	return (
@@ -470,34 +450,37 @@ const BlockInspectorSingleBlock = ( {
 					)
 				}
 			/>
-			{ blockEditingMode === 'default' && isBlockStyleStateSelected && (
+			{ blockEditingMode === 'default' && isEditingStyleState && (
 				<Spacer paddingX={ 4 } paddingY={ 2 }>
-					<ToggleControl
-						label={ __( 'Show state on canvas' ) }
-						checked={ showStateOnCanvas }
-						onChange={ onShowStateOnCanvasChange }
-					/>
+					{ hasPseudoState && (
+						<ToggleControl
+							label={ __( 'Show state on canvas' ) }
+							checked={ showStateOnCanvas }
+							onChange={ onShowStateOnCanvasChange }
+						/>
+					) }
 					<BlockStateBadges
 						name={ blockName }
 						value={ selectedBlockStyleState }
+						isResponsiveEditing={ isResponsiveEditing }
 					/>
 				</Spacer>
 			) }
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			<EditContents clientId={ renderedBlockClientId } />
-			{ ! isBlockStyleStateSelected && (
+			{ ! isEditingStyleState && (
 				<BlockVariationTransforms
 					blockClientId={ renderedBlockClientId }
 				/>
 			) }
 			<BlockInspectorPreTabsSlot />
-			{ isBlockStyleStateSelected && ! isSectionBlock && (
+			{ isEditingStyleState && ! isSectionBlock && (
 				<StyleStateInspectorSlots
 					blockName={ blockName }
 					selectedBlockStyleState={ selectedBlockStyleState }
 				/>
 			) }
-			{ ! isBlockStyleStateSelected && hasMultipleTabs && (
+			{ ! isEditingStyleState && hasMultipleTabs && (
 				<>
 					<InspectorControlsTabs
 						hasBlockStyles={ hasBlockStyles }
@@ -509,7 +492,7 @@ const BlockInspectorSingleBlock = ( {
 					/>
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && ! hasMultipleTabs && (
+			{ ! isEditingStyleState && ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -523,9 +506,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && (
-				<InspectorControlsLastItem.Slot />
-			) }
+			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

package/src/components/block-list/block-invalid-warning.js

@@ -20,7 +20,7 @@ const blockToBlocks = ( block ) =>
 	} );
 
 export default function BlockInvalidWarning( { clientId } ) {
-	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+	const { block, canInsertHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlock, getBlockRootClientId } =
 				select( blockEditorStore );
@@ -33,10 +33,6 @@ export default function BlockInvalidWarning( { clientId } ) {
 					'core/html',
 					rootClientId
 				),
-				canInsertClassicBlock: canInsertBlockType(
-					'core/freeform',
-					rootClientId
-				),
 			};
 		},
 		[ clientId ]
@@ -48,16 +44,13 @@ export default function BlockInvalidWarning( { clientId } ) {
 
 	const convert = useMemo(
 		() => ( {
-			toClassic() {
-				const classicBlock = createBlock( 'core/freeform', {
-					content: block.originalContent,
-				} );
-				return replaceBlock( block.clientId, classicBlock );
-			},
 			toHTML() {
-				const htmlBlock = createBlock( 'core/html', {
-					content: block.originalContent,
-				} );
+				const htmlBlock = createBlock(
+					'core/html',
+					{},
+					[],
+					[ block.originalContent ]
+				);
 				return replaceBlock( block.clientId, htmlBlock );
 			},
 			toBlocks() {
@@ -88,12 +81,8 @@ export default function BlockInvalidWarning( { clientId } ) {
 					title: __( 'Convert to HTML' ),
 					onClick: convert.toHTML,
 				},
-				canInsertClassicBlock && {
-					title: __( 'Convert to Classic Block' ),
-					onClick: convert.toClassic,
-				},
 			].filter( Boolean ),
-		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
+		[ canInsertHTMLBlock, convert ]
 	);
 
 	return (

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

@@ -622,6 +622,7 @@ function BlockListBlockProvider( props ) {
 			const blockVisibility = attributes?.metadata?.blockVisibility;
 			const deviceType =
 				settings?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
+			const viewportSettings = settings?.__experimentalFeatures?.viewport;
 
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const isMultiSelected = isBlockMultiSelected( clientId );
@@ -645,6 +646,7 @@ function BlockListBlockProvider( props ) {
 				bindableAttributes,
 				blockVisibility,
 				deviceType,
+				viewportSettings,
 				isMultiSelected,
 				blockEditingMode,
 				isEditingDisabled: blockEditingMode === 'disabled',
@@ -736,6 +738,7 @@ function BlockListBlockProvider( props ) {
 					: false,
 				blockVisibility,
 				deviceType,
+				viewportSettings,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -753,6 +756,7 @@ function BlockListBlockProvider( props ) {
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility: selectedProps?.blockVisibility,
 		deviceType: selectedProps?.deviceType,
+		viewportSettings: selectedProps?.viewportSettings,
 		view: defaultViewRef.current,
 	} );
 
@@ -817,6 +821,7 @@ function BlockListBlockProvider( props ) {
 		bindableAttributes,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 	} = selectedProps;
 
 	const privateContext = {
@@ -856,6 +861,7 @@ function BlockListBlockProvider( props ) {
 		bindableAttributes,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 	};
 
 	if (

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

@@ -35,7 +35,6 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
-import { useTypingObserver } from '../observe-typing';
 import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
@@ -113,7 +112,6 @@ function Root( { className, ...settings } ) {
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
-				useTypingObserver(),
 			] ),
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,

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

@@ -105,6 +105,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		canMove,
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 	} = useContext( PrivateBlockContext );
 
 	const defaultViewRef = useRefEffect( ( element ) => {
@@ -153,6 +154,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility,
 		deviceType,
+		viewportSettings,
 		view: defaultViewRef.current,
 	} );
 

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

@@ -29,9 +29,8 @@ import { unlock } from '../../../lock-unlock';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
+	const { isBlockSelected, isMultiSelecting, isZoomOut, getSelectionStart } =
+		unlock( useSelect( blockEditorStore ) );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
@@ -87,7 +86,27 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-		placeCaretAtHorizontalEdge( target, isReverse );
+		// Do not place a caret when the target already contains one:
+		// while a focused editing host contains the target (the block
+		// supports `editableRoot`), the caret can be inside it without the
+		// target holding focus. Only a caret the rich text synchronized to
+		// the store (offsets present) is deliberate; a leftover one yields
+		// to an explicitly requested edge position (initialPosition -1).
+		const { activeElement } = ownerDocument;
+		const selection = ownerDocument.defaultView.getSelection();
+		const { clientId: selectionClientId, offset } = getSelectionStart();
+		const hasCaret =
+			activeElement?.isContentEditable &&
+			activeElement.contains( target ) &&
+			!! selection.anchorNode &&
+			target.contains( selection.anchorNode );
+		const isDeliberate =
+			initialPosition === 0 ||
+			( offset !== undefined && selectionClientId === clientId );
+
+		if ( ! ( hasCaret && isDeliberate ) ) {
+			placeCaretAtHorizontalEdge( target, isReverse );
+		}
 	}, [ initialPosition, clientId ] );
 
 	return ref;

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

@@ -12,6 +12,7 @@ import {
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { isShiftClickInProgress } from '../../writing-flow/utils';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
@@ -22,7 +23,8 @@ const { subscribeDelegatedListener } = unlock( composePrivateApis );
  * @param {string} clientId Block client ID.
  */
 export function useFocusHandler( clientId ) {
-	const { isBlockSelected } = useSelect( blockEditorStore );
+	const { isBlockSelected, isBlockMultiSelected } =
+		useSelect( blockEditorStore );
 	const { selectBlock, selectionChange } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
@@ -36,14 +38,6 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
-				// When the whole editor is editable, let writing flow handle
-				// selection.
-				if (
-					node.parentElement.closest( '[contenteditable="true"]' )
-				) {
-					return;
-				}
-
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {
@@ -54,12 +48,43 @@ export function useFocusHandler( clientId ) {
 					return;
 				}
 
+				// Never select on the focus fired by a shift+click: the
+				// browser can focus the common editable ancestor of the
+				// range (e.g. a group block), and any selection re-render
+				// mid gesture destroys the native selection being made. The
+				// selection observer builds the multi-selection on mouseup.
+				if ( isShiftClickInProgress() ) {
+					return;
+				}
+
+				// A block that is part of the current multi-selection must
+				// not collapse it. Focus can land on the clicked block after
+				// the multi-selection was built: the focus event of a
+				// shift+click is not ordered consistently against its
+				// mouseup across browsers.
+				if ( isBlockMultiSelected( clientId ) ) {
+					return;
+				}
+
 				// If an inner block is focussed, that block is responsible for
 				// setting the selected block.
 				if ( ! isInsideRootBlock( node, event.target ) ) {
 					return;
 				}
 
+				// For editable targets, select without initial caret
+				// placement: the caret is inside the target. Placement would
+				// move it, and would collapse a native selection in the
+				// making, e.g. a shift+click extending the selection across
+				// blocks while the wrapper is the editing host. The observer
+				// builds the multi-selection from the anchor it recorded at
+				// mousedown, so this dispatch overwriting the store anchor
+				// is harmless.
+				if ( event.target.isContentEditable ) {
+					selectBlock( clientId, null );
+					return;
+				}
+
 				selectBlock( clientId );
 			}
 

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

@@ -29,7 +29,7 @@
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }
 

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

@@ -21,7 +21,7 @@
 	z-index: 1;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }