@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

package/build-types/utils/dom.d.ts

@@ -36,20 +36,18 @@ export function getBlockClientId(node: Node | null): string | undefined;
  */
 export function rectUnion(rect1: DOMRect, rect2: DOMRect): DOMRect;
 /**
- * Returns the rect of the element including all visible nested elements.
- *
- * Visible nested elements, including elements that overflow the parent, are
- * taken into account.
- *
- * This function is useful for calculating the visible area of a block that
- * contains nested elements that overflow the block, e.g. the Navigation block,
- * which can contain overflowing Submenu blocks.
+ * Returns the bounding rectangle of an element, with special handling for blocks
+ * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).
  *
+ * For blocks like Navigation that can have overflowing elements (e.g. submenus),
+ * this function calculates the combined bounds of both the parent and its visible
+ * children. The returned rect may extend beyond the viewport.
  * The returned rect represents the full extent of the element and its visible
  * children, which may extend beyond the viewport.
  *
  * @param {Element} element Element.
  * @return {DOMRect} Bounding client rect of the element and its visible children.
  */
-export function getVisibleElementBounds(element: Element): DOMRect;
+export function getElementBounds(element: Element): DOMRect;
+export const WITH_OVERFLOW_ELEMENT_BLOCKS: string[];
 //# sourceMappingURL=dom.d.ts.map

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA8DD;;;;;;;;;;;;;;;GAeG;AACH,iDAHW,OAAO,GACN,OAAO,CA6ClB"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA+DD;;;;;;;;;;;;GAYG;AACH,0CAHW,OAAO,GACN,OAAO,CAoDlB;AAhED,oDAAkE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.6.0",
+	"version": "14.7.1-next.082ed6819.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,6 +26,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
@@ -36,36 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "*",
-		"@wordpress/api-fetch": "*",
-		"@wordpress/blob": "*",
-		"@wordpress/block-serialization-default-parser": "*",
-		"@wordpress/blocks": "*",
-		"@wordpress/commands": "*",
+		"@wordpress/a11y": "^4.12.1-next.082ed6819.0",
+		"@wordpress/api-fetch": "^7.12.1-next.082ed6819.0",
+		"@wordpress/blob": "^4.12.1-next.082ed6819.0",
+		"@wordpress/block-serialization-default-parser": "^5.12.1-next.082ed6819.0",
+		"@wordpress/blocks": "^14.1.1-next.082ed6819.0",
+		"@wordpress/commands": "^1.12.1-next.082ed6819.0",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "*",
+		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
 		"@wordpress/data": "*",
-		"@wordpress/date": "*",
-		"@wordpress/deprecated": "*",
-		"@wordpress/dom": "*",
-		"@wordpress/element": "*",
-		"@wordpress/escape-html": "*",
-		"@wordpress/hooks": "*",
-		"@wordpress/html-entities": "*",
-		"@wordpress/i18n": "*",
-		"@wordpress/icons": "*",
-		"@wordpress/is-shallow-equal": "*",
-		"@wordpress/keyboard-shortcuts": "*",
-		"@wordpress/keycodes": "*",
-		"@wordpress/notices": "*",
-		"@wordpress/preferences": "*",
-		"@wordpress/private-apis": "*",
-		"@wordpress/rich-text": "*",
-		"@wordpress/style-engine": "*",
-		"@wordpress/token-list": "*",
-		"@wordpress/url": "*",
-		"@wordpress/warning": "*",
-		"@wordpress/wordcount": "*",
+		"@wordpress/date": "^5.12.1-next.082ed6819.0",
+		"@wordpress/deprecated": "^4.12.1-next.082ed6819.0",
+		"@wordpress/dom": "^4.12.1-next.082ed6819.0",
+		"@wordpress/element": "^6.12.1-next.082ed6819.0",
+		"@wordpress/escape-html": "^3.12.1-next.082ed6819.0",
+		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
+		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
+		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
+		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
+		"@wordpress/is-shallow-equal": "^5.12.1-next.082ed6819.0",
+		"@wordpress/keyboard-shortcuts": "^5.12.1-next.082ed6819.0",
+		"@wordpress/keycodes": "^4.12.1-next.082ed6819.0",
+		"@wordpress/notices": "^5.12.1-next.082ed6819.0",
+		"@wordpress/preferences": "^4.12.1-next.082ed6819.0",
+		"@wordpress/priority-queue": "^3.12.1-next.082ed6819.0",
+		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
+		"@wordpress/rich-text": "^7.12.1-next.082ed6819.0",
+		"@wordpress/style-engine": "^2.12.1-next.082ed6819.0",
+		"@wordpress/token-list": "^3.12.1-next.082ed6819.0",
+		"@wordpress/url": "^4.12.1-next.082ed6819.0",
+		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
+		"@wordpress/wordcount": "^4.12.1-next.082ed6819.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -88,6 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"wpScript": true,
-	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
+	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
 }

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

@@ -3,7 +3,7 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
-	background-color: transparent;
 	// Handles transitions between device previews
 	@include editor-canvas-resize-animation;
+	background-color: $gray-300;
 }

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

@@ -31,9 +31,10 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		[ toolbarState, contextState ]
 	);
 
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill.name );
+
+	if ( ! slotFill ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
 		return null;
 	}
@@ -42,6 +43,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
+	const { Slot } = slotFill;
 	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
 
 	if ( group === 'default' ) {

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

@@ -26,7 +26,6 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
-import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
@@ -253,7 +252,6 @@ const BlockInspectorSingleBlock = ( {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
-			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

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

@@ -10,7 +10,8 @@
 		margin-bottom: 1.5em;
 	}
 
-	.components-base-control {
+	.components-base-control,
+	.components-radio-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}

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

@@ -24,8 +24,8 @@ import {
 	isReusableBlock,
 	getBlockDefaultClassName,
 	hasBlockSupport,
+	createBlock,
 	store as blocksStore,
-	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -47,8 +47,6 @@ import { PrivateBlockContext } from './private-block-context';
 
 import { unlock } from '../../lock-unlock';
 
-const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
-
 /**
  * Merges wrapper props with special handling for classNames and styles.
  *
@@ -313,6 +311,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			function switchToDefaultOrRemove() {
 				const block = getBlock( clientId );
 				const defaultBlockName = getDefaultBlockName();
+				const defaultBlockType = getBlockType( defaultBlockName );
 				if ( getBlockName( clientId ) !== defaultBlockName ) {
 					const replacement = switchToBlockType(
 						block,
@@ -329,6 +328,15 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 							selectBlock( nextBlockClientId );
 						} );
 					}
+				} else if ( defaultBlockType.merge ) {
+					const attributes = defaultBlockType.merge(
+						{},
+						block.attributes
+					);
+					replaceBlocks(
+						[ clientId ],
+						[ createBlock( defaultBlockName, attributes ) ]
+					);
 				}
 			}
 
@@ -342,6 +350,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			 *                                  to the moved block.
 			 */
 			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const wrapperBlockName = getBlockName( _clientId );
+				const wrapperBlockType = getBlockType( wrapperBlockName );
+				const isTextualWrapper = wrapperBlockType.category === 'text';
 				const targetRootClientId = getBlockRootClientId( _clientId );
 				const blockOrder = getBlockOrder( _clientId );
 				const [ firstClientId ] = blockOrder;
@@ -351,50 +362,14 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					isUnmodifiedBlock( getBlock( firstClientId ) )
 				) {
 					removeBlock( _clientId );
-				} else {
+				} else if ( isTextualWrapper ) {
 					registry.batch( () => {
-						const firstBlock = getBlock( firstClientId );
-						const isFirstBlockContentUnmodified =
-							isUnmodifiedBlockContent( firstBlock );
-						const defaultBlockName = getDefaultBlockName();
-						const replacement = switchToBlockType(
-							firstBlock,
-							defaultBlockName
-						);
-						const canTransformToDefaultBlock =
-							!! replacement?.length &&
-							replacement.every( ( block ) =>
-								canInsertBlockType( block.name, _clientId )
-							);
-
 						if (
-							isFirstBlockContentUnmodified &&
-							canTransformToDefaultBlock
-						) {
-							// Step 1: If the block is empty and can be transformed to the default block type.
-							replaceBlocks(
-								firstClientId,
-								replacement,
-								changeSelection
-							);
-						} else if (
-							isFirstBlockContentUnmodified &&
-							firstBlock.name === defaultBlockName
-						) {
-							// Step 2: If the block is empty and is already the default block type.
-							removeBlock( firstClientId );
-							const nextBlockClientId =
-								getNextBlockClientId( clientId );
-							if ( nextBlockClientId ) {
-								selectBlock( nextBlockClientId );
-							}
-						} else if (
 							canInsertBlockType(
-								firstBlock.name,
+								getBlockName( firstClientId ),
 								targetRootClientId
 							)
 						) {
-							// Step 3: If the block can be moved up.
 							moveBlocksToPosition(
 								[ firstClientId ],
 								_clientId,
@@ -402,17 +377,21 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const canLiftAndTransformToDefaultBlock =
-								!! replacement?.length &&
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if (
+								replacement &&
+								replacement.length &&
 								replacement.every( ( block ) =>
 									canInsertBlockType(
 										block.name,
 										targetRootClientId
 									)
-								);
-
-							if ( canLiftAndTransformToDefaultBlock ) {
-								// Step 4: If the block can be transformed to the default block type and moved up.
+								)
+							) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -421,7 +400,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								);
 								removeBlock( firstClientId, false );
 							} else {
-								// Step 5: Continue the default behavior.
 								switchToDefaultOrRemove();
 							}
 						}
@@ -433,6 +411,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 							removeBlock( _clientId, false );
 						}
 					} );
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 

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

@@ -24,7 +24,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
-const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];
 
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.

package/src/components/block-manager/category.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesChecklist from './checklist';
+
+function BlockManagerCategory( {
+	title,
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+
+	const toggleVisible = useCallback(
+		( blockType, nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [ ...selectedBlockTypes, blockType ] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( { name } ) => name !== blockType.name
+					)
+				);
+			}
+		},
+		[ selectedBlockTypes, onChange ]
+	);
+
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [
+					...selectedBlockTypes,
+					...blockTypes.filter(
+						( blockType ) =>
+							! selectedBlockTypes.find(
+								( { name } ) => name === blockType.name
+							)
+					),
+				] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( selectedBlockType ) =>
+							! blockTypes.find(
+								( { name } ) => name === selectedBlockType.name
+							)
+					)
+				);
+			}
+		},
+		[ blockTypes, selectedBlockTypes, onChange ]
+	);
+
+	if ( ! blockTypes.length ) {
+		return null;
+	}
+
+	const checkedBlockNames = blockTypes
+		.map( ( { name } ) => name )
+		.filter( ( type ) =>
+			( selectedBlockTypes ?? [] ).some(
+				( selectedBlockType ) => selectedBlockType.name === type
+			)
+		);
+
+	const titleId = 'block-editor-block-manager__category-title-' + instanceId;
+
+	const isAllChecked = checkedBlockNames.length === blockTypes.length;
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
+
+	return (
+		<div
+			role="group"
+			aria-labelledby={ titleId }
+			className="block-editor-block-manager__category"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ isAllChecked }
+				onChange={ toggleAllVisible }
+				className="block-editor-block-manager__category-title"
+				indeterminate={ isIndeterminate }
+				label={ <span id={ titleId }>{ title }</span> }
+			/>
+			<BlockTypesChecklist
+				blockTypes={ blockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
+			/>
+		</div>
+	);
+}
+
+export default BlockManagerCategory;

package/src/components/block-manager/checklist.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="block-editor-block-manager__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="block-editor-block-manager__checklist-item"
+				>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ blockType.title }
+						checked={ value.includes( blockType.name ) }
+						onChange={ ( ...args ) =>
+							onItemChange( blockType, ...args )
+						}
+					/>
+					<BlockIcon icon={ blockType.icon } />
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;

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

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { SearchControl, Button } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockManagerCategory from './category';
+
+/**
+ * Provides a list of blocks with checkboxes.
+ *
+ * @param {Object}   props                    Props.
+ * @param {Array}    props.blockTypes         An array of blocks.
+ * @param {Array}    props.selectedBlockTypes An array of selected blocks.
+ * @param {Function} props.onChange           Function to be called when the selected blocks change.
+ */
+export default function BlockManager( {
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ search, setSearch ] = useState( '' );
+	const { categories, isMatchingSearchTerm } = useSelect( ( select ) => {
+		return {
+			categories: select( blocksStore ).getCategories(),
+			isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
+		};
+	}, [] );
+
+	function enableAllBlockTypes() {
+		onChange( blockTypes );
+	}
+
+	const filteredBlockTypes = blockTypes.filter( ( blockType ) => {
+		return ! search || isMatchingSearchTerm( blockType, search );
+	} );
+
+	const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length;
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = filteredBlockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
+
+	return (
+		<div className="block-editor-block-manager__content">
+			{ !! numberOfHiddenBlocks && (
+				<div className="block-editor-block-manager__disabled-blocks-count">
+					{ sprintf(
+						/* translators: %d: number of blocks. */
+						_n(
+							'%d block is hidden.',
+							'%d blocks are hidden.',
+							numberOfHiddenBlocks
+						),
+						numberOfHiddenBlocks
+					) }
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ enableAllBlockTypes }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			) }
+			<SearchControl
+				__nextHasNoMarginBottom
+				label={ __( 'Search for a block' ) }
+				placeholder={ __( 'Search for a block' ) }
+				value={ search }
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
+				className="block-editor-block-manager__search"
+			/>
+			<div
+				tabIndex="0"
+				role="region"
+				aria-label={ __( 'Available block types' ) }
+				className="block-editor-block-manager__results"
+			>
+				{ filteredBlockTypes.length === 0 && (
+					<p className="block-editor-block-manager__no-results">
+						{ __( 'No blocks found.' ) }
+					</p>
+				) }
+				{ categories.map( ( category ) => (
+					<BlockManagerCategory
+						key={ category.slug }
+						title={ category.title }
+						blockTypes={ filteredBlockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
+						selectedBlockTypes={ selectedBlockTypes }
+						onChange={ onChange }
+					/>
+				) ) }
+				<BlockManagerCategory
+					title={ __( 'Uncategorized' ) }
+					blockTypes={ filteredBlockTypes.filter(
+						( { category } ) => ! category
+					) }
+					selectedBlockTypes={ selectedBlockTypes }
+					onChange={ onChange }
+				/>
+			</div>
+		</div>
+	);
+}