@wordpress/block-editor 12.14.0 → 12.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.14.0",
+	"version": "12.16.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.46.0",
-		"@wordpress/api-fetch": "^6.43.0",
-		"@wordpress/blob": "^3.46.0",
-		"@wordpress/blocks": "^12.23.0",
-		"@wordpress/commands": "^0.17.0",
-		"@wordpress/components": "^25.12.0",
-		"@wordpress/compose": "^6.23.0",
-		"@wordpress/data": "^9.16.0",
-		"@wordpress/date": "^4.46.0",
-		"@wordpress/deprecated": "^3.46.0",
-		"@wordpress/dom": "^3.46.0",
-		"@wordpress/element": "^5.23.0",
-		"@wordpress/escape-html": "^2.46.0",
-		"@wordpress/hooks": "^3.46.0",
-		"@wordpress/html-entities": "^3.46.0",
-		"@wordpress/i18n": "^4.46.0",
-		"@wordpress/icons": "^9.37.0",
-		"@wordpress/is-shallow-equal": "^4.46.0",
-		"@wordpress/keyboard-shortcuts": "^4.23.0",
-		"@wordpress/keycodes": "^3.46.0",
-		"@wordpress/notices": "^4.14.0",
-		"@wordpress/preferences": "^3.23.0",
-		"@wordpress/private-apis": "^0.28.0",
-		"@wordpress/rich-text": "^6.23.0",
-		"@wordpress/style-engine": "^1.29.0",
-		"@wordpress/token-list": "^2.46.0",
-		"@wordpress/url": "^3.47.0",
-		"@wordpress/warning": "^2.46.0",
-		"@wordpress/wordcount": "^3.46.0",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/api-fetch": "^6.45.0",
+		"@wordpress/blob": "^3.48.0",
+		"@wordpress/blocks": "^12.25.0",
+		"@wordpress/commands": "^0.19.0",
+		"@wordpress/components": "^25.14.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/data": "^9.18.0",
+		"@wordpress/date": "^4.48.0",
+		"@wordpress/deprecated": "^3.48.0",
+		"@wordpress/dom": "^3.48.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/escape-html": "^2.48.0",
+		"@wordpress/hooks": "^3.48.0",
+		"@wordpress/html-entities": "^3.48.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/is-shallow-equal": "^4.48.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/notices": "^4.16.0",
+		"@wordpress/preferences": "^3.25.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/rich-text": "^6.25.0",
+		"@wordpress/style-engine": "^1.31.0",
+		"@wordpress/token-list": "^2.48.0",
+		"@wordpress/url": "^3.49.0",
+		"@wordpress/warning": "^2.48.0",
+		"@wordpress/wordcount": "^3.48.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

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

@@ -2,11 +2,13 @@
  * WordPress dependencies
  */
 import { useMergeRefs } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockTools from '../block-tools';
 import EditorStyles from '../editor-styles';
 import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
@@ -23,11 +25,15 @@ export function ExperimentalBlockCanvas( {
 } ) {
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
-	const contentRef = useMergeRefs( [ contentRefProp, clearerRef ] );
+	const localRef = useRef();
+	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
 
 	if ( ! shouldIframe ) {
 		return (
-			<>
+			<BlockTools
+				__unstableContentRef={ localRef }
+				style={ { height, display: 'flex' } }
+			>
 				<EditorStyles
 					styles={ styles }
 					scope=".editor-styles-wrapper"
@@ -36,29 +42,37 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ { height } }
+					style={ {
+						height: '100%',
+						width: '100%',
+					} }
 				>
 					{ children }
 				</WritingFlow>
-			</>
+			</BlockTools>
 		);
 	}
 
 	return (
-		<Iframe
-			{ ...iframeProps }
-			ref={ resetTypingRef }
-			contentRef={ contentRef }
-			style={ {
-				width: '100%',
-				height,
-				...iframeProps?.style,
-			} }
-			name="editor-canvas"
+		<BlockTools
+			__unstableContentRef={ localRef }
+			style={ { height, display: 'flex' } }
 		>
-			<EditorStyles styles={ styles } />
-			{ children }
-		</Iframe>
+			<Iframe
+				{ ...iframeProps }
+				ref={ resetTypingRef }
+				contentRef={ contentRef }
+				style={ {
+					width: '100%',
+					height: '100%',
+					...iframeProps?.style,
+				} }
+				name="editor-canvas"
+			>
+				<EditorStyles styles={ styles } />
+				{ children }
+			</Iframe>
+		</BlockTools>
 	);
 }
 

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

@@ -16,7 +16,7 @@ The `BlockCaption` component renders block-level UI for adding and editing capti
 Renders an editable caption field designed specifically for block-level use.
 
 ```jsx
-import { BlockCaption } from '@wordpress/block-editor';
+import { BlockCaption, RichText } from '@wordpress/block-editor';
 
 const MyBlockCaption = (
 	clientId,
@@ -29,7 +29,7 @@ const MyBlockCaption = (
 		clientId={ clientId }
 		accessible={ true }
 		accessibilityLabelCreator={ ( caption ) =>
-			! caption
+			RichText.isEmpty( caption )
 				? /* translators: accessibility text. Empty caption. */
 				  'Caption. Empty'
 				: sprintf(

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

@@ -62,9 +62,11 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			<BlockIcon icon={ icon } showColors />
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>
-				<span className="block-editor-block-card__description">
-					{ description }
-				</span>
+				{ description && (
+					<span className="block-editor-block-card__description">
+						{ description }
+					</span>
+				) }
 			</div>
 		</div>
 	);

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

@@ -1,24 +1,28 @@
 .block-editor-block-card {
-	display: flex;
 	align-items: flex-start;
+	color: $gray-900;
+	display: flex;
+	padding: $grid-unit-20;
 }
 
 .block-editor-block-card__content {
 	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
 }
 
 .block-editor-block-card__title {
 	font-weight: 500;
 
 	&.block-editor-block-card__title {
+		font-size: $default-font-size;
 		line-height: $button-size-small;
-		margin: 0 0 $grid-unit-05;
+		margin: 0;
 	}
 }
 
 .block-editor-block-card__description {
+	display: block;
 	font-size: $default-font-size;
+	margin-top: $grid-unit-05;
 }
 
 .block-editor-block-card .block-editor-block-icon {

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

@@ -1,45 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
-import { store as blockEditorStore } from '../../store';
-import { useBlockEditContext } from '../block-edit/context';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../block-edit/context';
 
 export default function useBlockControlsFill( group, shareWithChildBlocks ) {
-	const isDisplayed = useDisplayBlockControls();
-	const { clientId } = useBlockEditContext();
-	const isParentDisplayed = useSelect(
-		( select ) => {
-			if ( ! shareWithChildBlocks ) {
-				return false;
-			}
-
-			const { getBlockName, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-
-			return (
-				hasBlockSupport(
-					getBlockName( clientId ),
-					'__experimentalExposeControlsToChildren',
-					false
-				) && hasSelectedInnerBlock( clientId )
-			);
-		},
-		[ shareWithChildBlocks, clientId ]
-	);
-
-	if ( isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( context[ mayDisplayControlsKey ] ) {
 		return groups[ group ]?.Fill;
 	}
-	if ( isParentDisplayed ) {
+	if ( context[ mayDisplayParentControlsKey ] && shareWithChildBlocks ) {
 		return groups.parent.Fill;
 	}
 	return null;

package/src/components/block-controls/test/index.js

@@ -59,7 +59,7 @@ describe( 'BlockControls', () => {
 	it( 'should render a dynamic toolbar of controls', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -84,7 +84,7 @@ describe( 'BlockControls', () => {
 	it( 'should render its children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -99,7 +99,7 @@ describe( 'BlockControls', () => {
 	it( 'should a dynamic toolbar when passed as children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls>
 						<ToolbarGroup controls={ controls } />
 					</BlockControls>

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

@@ -3,6 +3,9 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
+export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
+export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',
 	isSelected: false,

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

@@ -8,7 +8,12 @@ import { hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider, useBlockEditContext } from './context';
+import {
+	BlockEditContextProvider,
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from './context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -20,7 +25,13 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
  */
 export { useBlockEditContext };
 
-export default function BlockEdit( props ) {
+export default function BlockEdit( {
+	mayDisplayControls,
+	mayDisplayParentControls,
+	// The remaining props are passed through the BlockEdit filters and are thus
+	// public API!
+	...props
+} ) {
 	const {
 		name,
 		isSelected,
@@ -32,19 +43,34 @@ export default function BlockEdit( props ) {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
-	const context = {
-		name,
-		isSelected,
-		clientId,
-		layout: layoutSupport ? layout : null,
-		__unstableLayoutClassNames,
-	};
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
 			// changed to avoid  unnecessary rerenders.
 			// See https://reactjs.org/docs/context.html#caveats.
-			value={ useMemo( () => context, Object.values( context ) ) }
+			value={ useMemo(
+				() => ( {
+					name,
+					isSelected,
+					clientId,
+					layout: layoutSupport ? layout : null,
+					__unstableLayoutClassNames,
+					// We use symbols in favour of an __unstable prefix to avoid
+					// usage outside of the package (this context is exposed).
+					[ mayDisplayControlsKey ]: mayDisplayControls,
+					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+				} ),
+				[
+					name,
+					isSelected,
+					clientId,
+					layoutSupport,
+					layout,
+					__unstableLayoutClassNames,
+					mayDisplayControls,
+					mayDisplayParentControls,
+				]
+			) }
 		>
 			<Edit { ...props } />
 		</BlockEditContextProvider>

package/src/components/block-info-slot-fill/index.js

@@ -7,14 +7,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
 
 const BlockInfo = ( props ) => {
-	const isDisplayed = useDisplayBlockControls();
-	if ( ! isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 	return <Fill { ...props } />;

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

@@ -34,10 +34,6 @@
 		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
 		margin-top: -$border-width;
 	}
-
-	.block-editor-block-card {
-		padding: $grid-unit-20;
-	}
 }
 
 .block-editor-block-inspector__no-blocks,

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

@@ -15,6 +15,7 @@ import {
 	switchToBlockType,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -53,10 +54,18 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA?.className && propsB?.className ) {
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA?.style && propsB?.style ) {
+
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 
@@ -95,21 +104,40 @@ function BlockListBlock( {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
+		mayDisplayControls,
+		mayDisplayParentControls,
 	} = useSelect(
 		( select ) => {
 			const {
 				getSettings,
 				__unstableGetTemporarilyEditingAsBlocks,
 				getBlockEditingMode,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
+			const { hasBlockSupport } = select( blocksStore );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
 				isTemporarilyEditingAsBlocks:
 					__unstableGetTemporarilyEditingAsBlocks() === clientId,
 				blockEditingMode: getBlockEditingMode( clientId ),
+				mayDisplayControls:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
+				mayDisplayParentControls:
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'__experimentalExposeControlsToChildren',
+						false
+					) && hasSelectedInnerBlock( clientId ),
 			};
 		},
-		[ clientId ]
+		[ clientId, isSelected, name ]
 	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
@@ -137,6 +165,8 @@ function BlockListBlock( {
 			__unstableParentLayout={
 				Object.keys( parentLayout ).length ? parentLayout : undefined
 			}
+			mayDisplayControls={ mayDisplayControls }
+			mayDisplayParentControls={ mayDisplayParentControls }
 		/>
 	);
 
@@ -161,6 +191,10 @@ function BlockListBlock( {
 		!! wrapperProps[ 'data-align' ] &&
 		! themeSupportsLayout;
 
+	// Support for sticky position in classic themes with alignment wrappers.
+
+	const isSticky = className?.includes( 'is-position-sticky' );
+
 	// For aligned blocks, provide a wrapper element so the block can be
 	// positioned relative to the block column.
 	// This is only kept for classic themes that don't support layout
@@ -172,7 +206,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className="wp-block"
+				className={ classnames( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -221,7 +255,7 @@ function BlockListBlock( {
 					isTemporarilyEditingAsBlocks,
 			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-			className
+			! ( dataAlign && isSticky ) && className
 		),
 		wrapperProps: restWrapperProps,
 		isAligned,

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

@@ -148,6 +148,7 @@ function BlockListBlock( {
 		isDescendentBlockSelected,
 		isParentSelected,
 		order,
+		mayDisplayControls,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -158,6 +159,9 @@ function BlockListBlock( {
 				getSelectedBlockClientId,
 				getSettings,
 				hasSelectedInnerBlock,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
 			const currentBlockCategory = currentBlockType?.category;
@@ -205,6 +209,12 @@ function BlockListBlock( {
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
 				order: blockOrder,
+				mayDisplayControls:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
 			};
 		},
 		[ clientId, isSelected, name, rootClientId ]
@@ -243,10 +253,13 @@ function BlockListBlock( {
 	);
 
 	// Block level styles.
-	const wrapperProps = getWrapperProps(
-		attributes,
-		blockType.getEditWrapperProps
-	);
+	let wrapperProps = {};
+	if ( blockType?.getEditWrapperProps ) {
+		wrapperProps = getWrapperProps(
+			attributes,
+			blockType.getEditWrapperProps
+		);
+	}
 
 	// Inherited styles merged with block level styles.
 	const mergedStyle = useMemo( () => {
@@ -346,6 +359,7 @@ function BlockListBlock( {
 									: undefined
 							}
 							wrapperProps={ wrapperProps }
+							mayDisplayControls={ mayDisplayControls }
 						/>
 						<View onLayout={ onLayout } />
 					</GlobalStylesContext.Provider>
@@ -605,6 +619,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
+				} else {
+					removeBlock( clientId );
 				}
 			}
 		},