@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.9.0

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -15,21 +15,33 @@ function listener( event ) {
 	);
 }
 
-/*
+/**
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
+ *
+ * @param {Object}  options                  Options object.
+ * @param {boolean} [options.isEnabled=true] Whether to enable hover detection.
+ *
+ * @return {Function} Ref callback.
  */
-export function useIsHovered() {
-	return useRefEffect( ( node ) => {
-		node.addEventListener( 'mouseout', listener );
-		node.addEventListener( 'mouseover', listener );
+export function useIsHovered( { isEnabled = true } = {} ) {
+	return useRefEffect(
+		( node ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			node.addEventListener( 'mouseout', listener );
+			node.addEventListener( 'mouseover', listener );
 
-		return () => {
-			node.removeEventListener( 'mouseout', listener );
-			node.removeEventListener( 'mouseover', listener );
+			return () => {
+				node.removeEventListener( 'mouseout', listener );
+				node.removeEventListener( 'mouseover', listener );
 
-			// Remove class in case it lingers.
-			node.classList.remove( 'is-hovered' );
-		};
-	}, [] );
+				// Remove class in case it lingers.
+				node.classList.remove( 'is-hovered' );
+			};
+		},
+		[ isEnabled ]
+	);
 }

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -25,15 +25,20 @@ function isColorTransparent( color ) {
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, isZoomOut, hasMultiSelection } = unlock(
-		useSelect( blockEditorStore )
-	);
+	const {
+		getBlockRootClientId,
+		isZoomOut,
+		hasMultiSelection,
+		isSectionBlock,
+		editedContentOnlySection,
+	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		insertAfterBlock,
 		removeBlock,
 		resetZoomLevel,
 		startDraggingBlocks,
 		stopDraggingBlocks,
+		editContentOnlySection,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
@@ -282,9 +287,32 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			node.addEventListener( 'keydown', onKeyDown );
 			node.addEventListener( 'dragstart', onDragStart );
 
+			/**
+			 * Handles double-click events on section blocks to edit content only section.
+			 *
+			 * @param {MouseEvent} event Double-click event.
+			 */
+			function onDoubleClick( event ) {
+				const isSection = isSectionBlock( clientId );
+				const isAlreadyEditing = editedContentOnlySection === clientId;
+
+				if ( isSection && ! isAlreadyEditing ) {
+					event.preventDefault();
+					editContentOnlySection( clientId );
+				}
+			}
+
+			// Only add double-click listener if experimental flag is enabled
+			if ( window?.__experimentalContentOnlyPatternInsertion ) {
+				node.addEventListener( 'dblclick', onDoubleClick );
+			}
+
 			return () => {
 				node.removeEventListener( 'keydown', onKeyDown );
 				node.removeEventListener( 'dragstart', onDragStart );
+				if ( window?.__experimentalContentOnlyPatternInsertion ) {
+					node.removeEventListener( 'dblclick', onDoubleClick );
+				}
 			};
 		},
 		[
@@ -298,6 +326,9 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			hasMultiSelection,
 			startDraggingBlocks,
 			stopDraggingBlocks,
+			isSectionBlock,
+			editedContentOnlySection,
+			editContentOnlySection,
 		]
 	);
 }

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

@@ -42,7 +42,8 @@ function getTemplateLockValue( lock ) {
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
+	const { isEditLocked, isMoveLocked, isRemoveLocked } =
+		useBlockLock( clientId );
 	const { allowsEditLocking, templateLock, hasTemplateLock } = useSelect(
 		( select ) => {
 			const { getBlockName, getBlockAttributes } =
@@ -66,11 +67,11 @@ export default function BlockLockModal( { clientId, onClose } ) {
 
 	useEffect( () => {
 		setLock( {
-			move: ! canMove,
-			remove: ! canRemove,
-			...( allowsEditLocking ? { edit: ! canEdit } : {} ),
+			move: isMoveLocked,
+			remove: isRemoveLocked,
+			...( allowsEditLocking ? { edit: isEditLocked } : {} ),
 		} );
-	}, [ canEdit, canMove, canRemove, allowsEditLocking ] );
+	}, [ isEditLocked, isMoveLocked, isRemoveLocked, allowsEditLocking ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;

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

@@ -7,6 +7,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Return details about the block lock status.
@@ -19,25 +20,20 @@ export default function useBlockLock( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				canEditBlock,
-				canMoveBlock,
-				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
-				getTemplateLock,
-			} = select( blockEditorStore );
-
-			const canEdit = canEditBlock( clientId );
-			const canMove = canMoveBlock( clientId );
-			const canRemove = canRemoveBlock( clientId );
+				isEditLockedBlock,
+				isMoveLockedBlock,
+				isRemoveLockedBlock,
+				isLockedBlock,
+			} = unlock( select( blockEditorStore ) );
 
 			return {
-				canEdit,
-				canMove,
-				canRemove,
+				isEditLocked: isEditLockedBlock( clientId ),
+				isMoveLocked: isMoveLockedBlock( clientId ),
+				isRemoveLocked: isRemoveLockedBlock( clientId ),
 				canLock: canLockBlockType( getBlockName( clientId ) ),
-				isContentLocked: getTemplateLock( clientId ) === 'contentOnly',
-				isLocked: ! canEdit || ! canMove || ! canRemove,
+				isLocked: isLockedBlock( clientId ),
 			};
 		},
 		[ clientId ]

package/src/components/block-patterns-list/stories/{index.story.js → index.story.jsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
+import { fn } from '@storybook/test';
 
 /**
  * Internal dependencies
@@ -32,6 +33,8 @@ export const Default = {
 		isDraggable: false,
 		label: 'Block patterns story',
 		showTitlesAsTooltip: false,
+		onClickPattern: fn(),
+		onHover: fn(),
 	},
 	argTypes: {
 		blockPatterns: { description: 'The patterns to render.' },
@@ -58,7 +61,6 @@ export const Default = {
 		},
 	},
 	parameters: {
-		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 	},
 };

package/src/components/block-settings-menu-controls/edit-section-menu-item.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';
+
+export function EditSectionMenuItem( { clientId, onClose } ) {
+	const {
+		isSectionBlock,
+		isEditingContentOnlySection,
+		editContentOnlySection,
+	} = useContentOnlySectionEdit( clientId );
+
+	// Only show when the experiment is enabled, the block is a section block,
+	// and we're not already editing it
+	if (
+		! window?.__experimentalContentOnlyPatternInsertion ||
+		! isSectionBlock ||
+		isEditingContentOnlySection
+	) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				editContentOnlySection( clientId );
+				onClose();
+			} }
+		>
+			{ _x( 'Edit section', 'Editing a section in the Editor' ) }
+		</MenuItem>
+	);
+}

package/src/components/block-settings-menu-controls/index.js

@@ -22,6 +22,7 @@ import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 import { BlockVisibilityMenuItem } from '../block-visibility';
+import { EditSectionMenuItem } from './edit-section-menu-item';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
@@ -49,7 +50,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				canToggleSelectedBlocksVisibility: getBlocksByClientId(
 					ids
 				).every( ( block ) =>
-					hasBlockSupport( block.name, 'blockVisibility', true )
+					hasBlockSupport( block.name, 'visibility', true )
 				),
 			};
 		},
@@ -98,6 +99,12 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 								onClose={ fillProps?.onClose }
 							/>
 						) }
+						{ selectedClientIds.length === 1 && (
+							<EditSectionMenuItem
+								clientId={ selectedClientIds[ 0 ] }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }

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

@@ -4,7 +4,7 @@
 import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { copy } from '@wordpress/icons';
+import { copy, symbol } from '@wordpress/icons';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -24,7 +24,6 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockName,
 		getBlockAttributes,
 		getBlockParentsByBlockName,
-		isSectionBlock,
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
@@ -40,8 +39,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const blockName = isSingleBlock && getBlockName( clientIds[ 0 ] );
 	const hasBlockStyles =
 		isSingleBlock && !! getBlockStyles( blockName )?.length;
-	const isSectionInSelection = clientIds.some( ( id ) =>
-		isSectionBlock( id )
+	const hasPatternNameInSelection = clientIds.some(
+		( id ) => !! getBlockAttributes( id )?.metadata?.patternName
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -59,7 +58,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
 	const _hideTransformsForSections =
 		window?.__experimentalContentOnlyPatternInsertion &&
-		isSectionInSelection;
+		hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
@@ -81,19 +80,24 @@ function getBlockIcon( { select, clientIds } ) {
 	const { getBlockName, getBlockAttributes } = unlock(
 		select( blockEditorStore )
 	);
-	const { getActiveBlockVariation } = select( blocksStore );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
+	const blockAttributes = getBlockAttributes( firstClientId );
+	if (
+		_isSingleBlock &&
+		blockAttributes?.metadata?.patternName &&
+		window?.__experimentalContentOnlyPatternInsertion
+	) {
+		return symbol;
+	}
 
 	const blockName = getBlockName( firstClientId );
 	const blockType = getBlockType( blockName );
 
 	if ( _isSingleBlock ) {
-		const match = getActiveBlockVariation(
-			blockName,
-			getBlockAttributes( firstClientId )
-		);
+		const { getActiveBlockVariation } = select( blocksStore );
+		const match = getActiveBlockVariation( blockName, blockAttributes );
 		return match?.icon || blockType?.icon;
 	}
 

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -219,7 +224,7 @@ export default function BlockTools( {
 				const canToggleBlockVisibility = blocks.every( ( block ) =>
 					hasBlockSupport(
 						getBlockName( block.clientId ),
-						'blockVisibility',
+						'visibility',
 						true
 					)
 				);
@@ -262,7 +267,15 @@ export default function BlockTools( {
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div { ...props } onKeyDown={ onKeyDown }>
+		<div
+			{ ...props }
+			onKeyDown={ onKeyDown }
+			// Popover slots cannot be unmounted during dragging because the
+			// will just be rendered in a fallback popover slot instead.
+			className={ clsx( props.className, {
+				'block-editor-block-tools--is-dragging': isDragging,
+			} ) }
+		>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
 				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint

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

@@ -206,3 +206,7 @@
 	top: 50%;
 	left: 50%;
 }
+
+.block-editor-block-tools--is-dragging > .popover-slot {
+	display: none;
+}

package/src/components/block-variation-transforms/index.js

@@ -147,41 +147,102 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly, isSection } =
-		useSelect(
-			( select ) => {
-				const { getActiveBlockVariation, getBlockVariations } =
-					select( blocksStore );
-
-				const {
-					getBlockName,
-					getBlockAttributes,
-					getBlockEditingMode,
-					isSectionBlock,
-				} = unlock( select( blockEditorStore ) );
-
-				const name = blockClientId && getBlockName( blockClientId );
-
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContentBlock = hasContentRoleAttribute( name );
-
-				return {
-					activeBlockVariation: getActiveBlockVariation(
-						name,
-						getBlockAttributes( blockClientId ),
-						'transform'
-					),
-					variations: name && getBlockVariations( name, 'transform' ),
-					isContentOnly:
-						getBlockEditingMode( blockClientId ) ===
-							'contentOnly' && ! isContentBlock,
-					isSection: isSectionBlock( blockClientId ),
-				};
-			},
-			[ blockClientId ]
-		);
+	const {
+		activeBlockVariation,
+		unfilteredVariations,
+		blockName,
+		isContentOnly,
+		isSection,
+	} = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlockEditingMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
+
+			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId ),
+					'transform'
+				),
+				unfilteredVariations:
+					name && getBlockVariations( name, 'transform' ),
+				blockName: name,
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
+				isSection: isSectionBlock( blockClientId ),
+			};
+		},
+		[ blockClientId ]
+	);
+
+	/*
+	 * Hack for WordPress 6.9
+	 *
+	 * The Stretchy blocks shipped in 6.9 were ultimately
+	 * implemented as block variations of the base types Paragraph
+	 * and Heading. See #73056 for discussion and trade-offs.
+	 *
+	 * The main drawback of this choice is that the Variations API
+	 * doesn't offer enough control over how prominent and how tied
+	 * to the base type a variation should be.
+	 *
+	 * In order to ship these new "blocks" with an acceptable UX,
+	 * we need two hacks until the Variations API is improved:
+	 *
+	 * - Don't show the variations switcher in the block inspector
+	 *   for Paragraph, Heading, Stretchy Paragraph and Stretchy
+	 *   Heading (implemented below). Transformations are still
+	 *   available in the block switcher.
+	 *
+	 * - Move the stretchy variations to the end of the core blocks
+	 *   list in the block inserter (implemented in
+	 *   getInserterItems in #73056).
+	 */
+	const variations = useMemo( () => {
+		if ( blockName === 'core/paragraph' ) {
+			// Always hide options when active variation is stretchy, but
+			// ensure that there are no third-party variations before doing the
+			// same elsewhere.
+			if (
+				activeBlockVariation?.name === 'stretchy-paragraph' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			// If there are other variations, only hide the stretchy one.
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-paragraph'
+			);
+		} else if ( blockName === 'core/heading' ) {
+			if (
+				activeBlockVariation?.name === 'stretchy-heading' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'heading', 'stretchy-heading' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-heading'
+			);
+		}
+		return unfilteredVariations;
+	}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );
 
 	const selectedValue = activeBlockVariation?.name;
 

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

@@ -25,7 +25,7 @@ export default function BlockVisibilityToolbar( { clientIds } ) {
 				canToggleBlockVisibility: _blocks.every( ( { clientId } ) =>
 					hasBlockSupport(
 						getBlockName( clientId ),
-						'blockVisibility',
+						'visibility',
 						true
 					)
 				),

package/src/components/border-radius-control/single-input-control.js

@@ -74,6 +74,7 @@ export default function SingleInputControl( {
 	const onChangeUnit = ( next ) => {
 		const newUnits = { ...selectedUnits };
 		if ( corner === 'all' ) {
+			newUnits.flat = next;
 			newUnits.topLeft = next;
 			newUnits.topRight = next;
 			newUnits.bottomLeft = next;

package/src/components/content-only-controls/fields-dropdown-menu.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical, check } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
+
+export default function FieldsDropdownMenu( {
+	fields,
+	visibleFields,
+	onToggleField,
+} ) {
+	const { popoverProps } = useInspectorPopoverPlacement();
+
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			popoverProps={ popoverProps }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup label={ __( 'Show / Hide' ) }>
+					{ fields.map( ( field ) => {
+						const isVisible = visibleFields.includes( field.id );
+						return (
+							<MenuItem
+								key={ field.id }
+								isSelected={ isVisible }
+								onClick={ () => {
+									onToggleField( field.id );
+									onClose();
+								} }
+								role="menuitemcheckbox"
+								icon={ isVisible ? check : null }
+							>
+								{ field.label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}