@wordpress/block-editor 15.23.0 → 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

@@ -394,13 +394,14 @@ const BlockInspectorSingleBlock = ( {
 	selectedBlockStyleState,
 	showStateOnCanvas,
 	isResponsiveEditing,
-	isBlockStyleStateSelected,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
 	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
 	const isEditingStyleState =
-		isBlockStyleStateSelected || isResponsiveEditing;
+		( hasViewportBlockStyleState( selectedBlockStyleState ) &&
+			isResponsiveEditing ) ||
+		hasPseudoBlockStyleState( selectedBlockStyleState );
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;

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);
 	}
 }
 

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

@@ -10,5 +10,5 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }

package/src/components/block-patterns-list/stories/index.story.jsx

@@ -11,7 +11,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
 // Reason: Styles are contained in ExperimentalBlockEditorProvider iframe.
 // eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
-import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
+import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],

package/src/components/block-quick-navigation/style.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables";
-
 .block-editor-block-quick-navigation__item {
-	font-weight: variables.$font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 }

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

@@ -30,7 +30,7 @@
 
 	button.components-button.block-editor-block-styles__item {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
+		border-color: $gray-300;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
@@ -52,7 +52,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
+			@include outset-ring__focus();
 		}
 	}
 

package/src/components/block-styles/use-styles-for-block.js

@@ -31,6 +31,7 @@ function useGenericPreviewBlock( block, type ) {
 			return getBlockFromExample( blockName, {
 				attributes: example.attributes,
 				innerBlocks: example.innerBlocks,
+				innerContent: example.innerContent,
 			} );
 		}
 

package/src/components/block-title/use-block-display-title.js

@@ -39,7 +39,7 @@ export default function useBlockDisplayTitle( {
 				return null;
 			}
 
-			const { getBlockName, getBlockAttributes } =
+			const { getBlockName, getBlockAttributes, getBlock } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -57,7 +57,12 @@ export default function useBlockDisplayTitle( {
 				return label;
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			// Label will fallback to the title if no label is defined for the current label context.
 			return match?.title || blockType.title;
 		},