@wordpress/block-editor 15.7.1-next.2f1c7c01b.0 → 15.8.0

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

@@ -6,6 +6,21 @@
 	color: $gray-900;
 	display: flex;
 	padding: $grid-unit-20;
+
+	&.is-parent {
+		padding-bottom: $grid-unit-05;
+	}
+
+	&.is-child {
+		padding-top: $grid-unit-05;
+	}
+}
+
+.block-editor-block-card__parent-select-button {
+	padding: 0;
+	align-items: start;
+	text-align: start;
+	height: auto !important;
 }
 
 .block-editor-block-card__title {
@@ -26,7 +41,8 @@
 	padding: 3px 0; // This makes the title as high as the icon.
 }
 
-.block-editor-block-card .block-editor-block-icon {
+.block-editor-block-card .block-editor-block-icon,
+.block-editor-block-card__child-indicator-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;
 	margin-right: $grid-unit-15;

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

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function EditContents( { clientId } ) {
+	const { editContentOnlySection, stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { isWithinSection, isWithinEditedSection, editedContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					isSectionBlock,
+					getParentSectionBlock,
+					getEditedContentOnlySection,
+					isWithinEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+
+				return {
+					isWithinSection:
+						isSectionBlock( clientId ) ||
+						!! getParentSectionBlock( clientId ),
+					isWithinEditedSection:
+						isWithinEditedContentOnlySection( clientId ),
+					editedContentOnlySection: getEditedContentOnlySection(),
+				};
+			},
+			[ clientId ]
+		);
+
+	if ( ! isWithinSection && ! isWithinEditedSection ) {
+		return null;
+	}
+
+	return (
+		<VStack className="block-editor-block-inspector-edit-contents" expanded>
+			<Button
+				className="block-editor-block-inspector-edit-contents__button"
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ () => {
+					if ( ! editedContentOnlySection ) {
+						editContentOnlySection( clientId );
+					} else {
+						stopEditingContentOnlySection();
+					}
+				} }
+			>
+				{ editedContentOnlySection
+					? __( 'Lock design' )
+					: __( 'Unlock design' ) }
+			</Button>
+		</VStack>
+	);
+}

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

@@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import EditContentsButton from './edit-contents-button';
+import EditContents from './edit-contents';
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
 import MultiSelectionInspector from '../multi-selection-inspector';
@@ -93,6 +93,7 @@ function BlockInspector() {
 		isSectionBlock,
 		isSectionBlockInSelection,
 		hasBlockStyles,
+		editedContentOnlySection,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -101,12 +102,18 @@ function BlockInspector() {
 			getBlockName,
 			getParentSectionBlock,
 			isSectionBlock: _isSectionBlock,
+			getEditedContentOnlySection,
+			isWithinEditedContentOnlySection,
 		} = unlock( select( blockEditorStore ) );
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
-		const renderedBlockClientId =
-			getParentSectionBlock( _selectedBlockClientId ) ||
-			_selectedBlockClientId;
+		const isWithinEditedSection = isWithinEditedContentOnlySection(
+			_selectedBlockClientId
+		);
+		const renderedBlockClientId = isWithinEditedSection
+			? _selectedBlockClientId
+			: getParentSectionBlock( _selectedBlockClientId ) ||
+			  _selectedBlockClientId;
 		const _selectedBlockName =
 			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
@@ -115,7 +122,6 @@ function BlockInspector() {
 		const _isSectionBlockInSelection = selectedBlockClientIds.some(
 			( id ) => _isSectionBlock( id )
 		);
-
 		const blockStyles =
 			_selectedBlockName && getBlockStyles( _selectedBlockName );
 		const _hasBlockStyles = blockStyles && blockStyles.length > 0;
@@ -128,6 +134,7 @@ function BlockInspector() {
 			isSectionBlockInSelection: _isSectionBlockInSelection,
 			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 			hasBlockStyles: _hasBlockStyles,
+			editedContentOnlySection: getEditedContentOnlySection(),
 		};
 	}, [] );
 
@@ -263,6 +270,7 @@ function BlockInspector() {
 				availableTabs={ availableTabs }
 				contentClientIds={ contentClientIds }
 				hasBlockStyles={ hasBlockStyles }
+				editedContentOnlySection={ editedContentOnlySection }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -311,25 +319,39 @@ const BlockInspectorSingleBlock = ( {
 	availableTabs,
 	contentClientIds,
 	hasBlockStyles,
+	editedContentOnlySection,
 } ) => {
 	const hasMultipleTabs = availableTabs?.length > 1;
-
+	const hasParentChildBlockCards =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		editedContentOnlySection &&
+		editedContentOnlySection !== clientId;
+	const parentBlockInformation = useBlockDisplayInformation(
+		editedContentOnlySection
+	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const isBlockSynced = blockInformation.isSynced;
-
 	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
 
 	return (
 		<div className="block-editor-block-inspector">
+			{ hasParentChildBlockCards && (
+				<BlockCard
+					{ ...parentBlockInformation }
+					className={ parentBlockInformation.isSynced && 'is-synced' }
+					parentClientId={ editedContentOnlySection }
+				/>
+			) }
 			<BlockCard
 				{ ...blockInformation }
-				className={ isBlockSynced && 'is-synced' }
 				allowParentNavigation
-			>
-				{ window?.__experimentalContentOnlyPatternInsertion && (
-					<EditContentsButton clientId={ clientId } />
-				) }
-			</BlockCard>
+				className={ isBlockSynced && 'is-synced' }
+				isChild={ hasParentChildBlockCards }
+				clientId={ clientId }
+			/>
+			{ window?.__experimentalContentOnlyPatternInsertion && (
+				<EditContents clientId={ clientId } />
+			) }
 			<BlockVariationTransforms blockClientId={ clientId } />
 			{ shouldShowTabs && (
 				<InspectorControlsTabs

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

@@ -55,7 +55,10 @@
 	border-top: $border-width solid $gray-300;
 }
 
-.block-editor-block-inspector-edit-contents-button {
-	margin-top: $grid-unit-10;
-	justify-content: center;
+.block-editor-block-inspector-edit-contents {
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+
+	.block-editor-block-inspector-edit-contents__button {
+		justify-content: center;
+	}
 }

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

@@ -15,9 +15,9 @@ import {
 import { useMergeRefs, useDebounce } from '@wordpress/compose';
 import {
 	createContext,
+	useEffect,
 	useMemo,
 	useCallback,
-	useEffect,
 } from '@wordpress/element';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
@@ -52,9 +52,9 @@ function Root( { className, ...settings } ) {
 		( select ) => {
 			const {
 				getSettings,
-				getEditedContentOnlySection,
 				isTyping,
 				hasBlockSpotlight,
+				getEditedContentOnlySection,
 			} = unlock( select( blockEditorStore ) );
 			const { outlineMode, focusMode } = getSettings();
 			return {
@@ -133,24 +133,26 @@ function StopEditingContentOnlySectionOnOutsideSelect( { clientId } ) {
 	);
 	const isBlockOrDescendantSelected = useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockSelectionStart,
+			} = select( blockEditorStore );
 			return (
+				! getBlockSelectionStart() ||
 				isBlockSelected( clientId ) ||
 				hasSelectedInnerBlock( clientId, true )
 			);
 		},
 		[ clientId ]
 	);
+
 	useEffect( () => {
 		if ( ! isBlockOrDescendantSelected ) {
 			stopEditingContentOnlySection();
 		}
-	}, [
-		isBlockOrDescendantSelected,
-		clientId,
-		stopEditingContentOnlySection,
-	] );
+	}, [ isBlockOrDescendantSelected, stopEditingContentOnlySection ] );
+
 	return null;
 }
 

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

@@ -4,7 +4,6 @@
 import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
-	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
 	__experimentalText as Text,
@@ -17,60 +16,64 @@ import {
 	isTemplatePart,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { copy } from '@wordpress/icons';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
 import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import { unlock } from '../../lock-unlock';
 
-function BlockSwitcherDropdownMenuContents( {
-	onClose,
-	clientIds,
-	hasBlockStyles,
-	canRemove,
-} ) {
+function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockAttributes,
-					getBlocksByClientId,
-					getBlockRootClientId,
-					getBlockTransformItems,
-					__experimentalGetPatternTransformItems,
-				} = select( blockEditorStore );
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				const _blocks = getBlocksByClientId( clientIds );
-				return {
-					blocks: _blocks,
-					possibleBlockTransformations: getBlockTransformItems(
-						_blocks,
-						rootClientId
-					),
-					patterns: __experimentalGetPatternTransformItems(
-						_blocks,
-						rootClientId
-					),
-					isUsingBindings: clientIds.every(
-						( clientId ) =>
-							!! getBlockAttributes( clientId )?.metadata
-								?.bindings
-					),
-				};
-			},
-			[ clientIds ]
-		);
+	const {
+		possibleBlockTransformations,
+		patterns,
+		blocks,
+		isUsingBindings,
+		canRemove,
+		hasBlockStyles,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlocksByClientId,
+				getBlockRootClientId,
+				getBlockTransformItems,
+				__experimentalGetPatternTransformItems,
+				canRemoveBlocks,
+				getBlockName,
+			} = select( blockEditorStore );
+			const { getBlockStyles } = select( blocksStore );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const _blocks = getBlocksByClientId( clientIds );
+			const _isSingleBlock = clientIds.length === 1;
+			const _blockName = _isSingleBlock && getBlockName( clientIds[ 0 ] );
+			const _hasBlockStyles =
+				_isSingleBlock && !! getBlockStyles( _blockName )?.length;
+			return {
+				blocks: _blocks,
+				possibleBlockTransformations: getBlockTransformItems(
+					_blocks,
+					rootClientId
+				),
+				patterns: __experimentalGetPatternTransformItems(
+					_blocks,
+					rootClientId
+				),
+				isUsingBindings: clientIds.every(
+					( clientId ) =>
+						!! getBlockAttributes( clientId )?.metadata?.bindings
+				),
+				canRemove: canRemoveBlocks( clientIds ),
+				hasBlockStyles: _hasBlockStyles,
+			};
+		},
+		[ clientIds ]
+	);
 	const blockVariationTransformations = useBlockVariationTransforms( {
 		clientIds,
 		blocks,
@@ -101,6 +104,7 @@ function BlockSwitcherDropdownMenuContents( {
 		replaceBlocks( clientIds, transformedBlocks );
 		selectForMultipleBlocks( transformedBlocks );
 	}
+
 	/**
 	 * The `isSynced` check is a stopgap solution here.
 	 * Ideally, the Transforms API should handle this
@@ -189,133 +193,8 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-export const BlockSwitcher = ( { clientIds } ) => {
-	const {
-		hasContentOnlyLocking,
-		canRemove,
-		hasBlockStyles,
-		icon,
-		invalidBlocks,
-		isReusable,
-		isTemplate,
-		isDisabled,
-		isSectionInSelection,
-	} = useSelect(
-		( select ) => {
-			const {
-				getTemplateLock,
-				getBlocksByClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-				getBlockEditingMode,
-				isSectionBlock,
-			} = unlock( select( blockEditorStore ) );
-			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
-				select( blocksStore );
-			const _blocks = getBlocksByClientId( clientIds );
-			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
-				return { invalidBlocks: true };
-			}
-			const [ { name: firstBlockName } ] = _blocks;
-			const _isSingleBlockSelected = _blocks.length === 1;
-			const blockType = getBlockType( firstBlockName );
-			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
-
-			let _icon;
-			let _hasTemplateLock;
-			if ( _isSingleBlockSelected ) {
-				const match = getActiveBlockVariation(
-					firstBlockName,
-					getBlockAttributes( clientIds[ 0 ] )
-				);
-				// Take into account active block variations.
-				_icon = match?.icon || blockType.icon;
-				_hasTemplateLock =
-					getTemplateLock( clientIds[ 0 ] ) === 'contentOnly';
-			} else {
-				const isSelectionOfSameType =
-					new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
-				_hasTemplateLock = clientIds.some(
-					( id ) => getTemplateLock( id ) === 'contentOnly'
-				);
-				// When selection consists of blocks of multiple types, display an
-				// appropriate icon to communicate the non-uniformity.
-				_icon = isSelectionOfSameType ? blockType.icon : copy;
-			}
-
-			const _isSectionInSelection = clientIds.some( ( id ) =>
-				isSectionBlock( id )
-			);
-
-			return {
-				canRemove: canRemoveBlocks( clientIds ),
-				hasBlockStyles:
-					_isSingleBlockSelected &&
-					!! getBlockStyles( firstBlockName )?.length,
-				icon: _icon,
-				isReusable:
-					_isSingleBlockSelected && isReusableBlock( _blocks[ 0 ] ),
-				isTemplate:
-					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
-				hasContentOnlyLocking: _hasTemplateLock,
-				isDisabled: editingMode !== 'default',
-				isSectionInSelection: _isSectionInSelection,
-			};
-		},
-		[ clientIds ]
-	);
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: clientIds?.[ 0 ],
-		maximumLength: 35,
-	} );
-	const showIconLabels = useSelect(
-		( select ) =>
-			select( preferencesStore ).get( 'core', 'showIconLabels' ),
-		[]
-	);
-
-	if ( invalidBlocks ) {
-		return null;
-	}
-
+export const BlockSwitcher = ( { children, clientIds, label, text } ) => {
 	const isSingleBlock = clientIds.length === 1;
-	const blockSwitcherLabel = isSingleBlock
-		? blockTitle
-		: __( 'Multiple blocks selected' );
-
-	const blockIndicatorText =
-		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
-			? blockTitle
-			: undefined;
-
-	const hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		isSectionInSelection;
-	const hideDropdown =
-		hideTransformsForSections ||
-		isDisabled ||
-		( ! hasBlockStyles && ! canRemove ) ||
-		hasContentOnlyLocking;
-
-	if ( hideDropdown ) {
-		return (
-			<ToolbarGroup>
-				<ToolbarButton
-					disabled
-					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockSwitcherLabel }
-					icon={
-						<BlockIcon
-							className="block-editor-block-switcher__toggle"
-							icon={ icon }
-							showColors
-						/>
-					}
-					text={ blockIndicatorText }
-				/>
-			</ToolbarGroup>
-		);
-	}
 
 	const blockSwitcherDescription = isSingleBlock
 		? __( 'Change block type or style' )
@@ -334,19 +213,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				{ ( toggleProps ) => (
 					<DropdownMenu
 						className="block-editor-block-switcher"
-						label={ blockSwitcherLabel }
+						label={ label }
 						popoverProps={ {
 							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
-						icon={
-							<BlockIcon
-								className="block-editor-block-switcher__toggle"
-								icon={ icon }
-								showColors
-							/>
-						}
-						text={ blockIndicatorText }
+						icon={ children }
+						text={ text }
 						toggleProps={ {
 							description: blockSwitcherDescription,
 							...toggleProps,
@@ -357,8 +230,6 @@ export const BlockSwitcher = ( { clientIds } ) => {
 							<BlockSwitcherDropdownMenuContents
 								onClose={ onClose }
 								clientIds={ clientIds }
-								hasBlockStyles={ hasBlockStyles }
-								canRemove={ canRemove }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -1,54 +1,6 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
-.block-editor-block-switcher {
-	position: relative;
-
-	// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
-	// This is best fixed by making the mover control area a proper single toolbar group.
-	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
-	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {
-		min-width: $button-size;
-	}
-}
-
-// Show an indicator triangle.
-.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-switcher__toggle {
-	position: relative;
-}
-
-.components-button.block-editor-block-switcher__toggle,
-.components-button.block-editor-block-switcher__no-switcher-icon {
-	margin: 0;
-	display: block;
-	height: $grid-unit-60;
-
-	.block-editor-block-icon {
-		margin: auto;
-	}
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon {
-	display: flex;
-
-	.block-editor-block-icon {
-		margin-right: auto;
-		margin-left: auto;
-		min-width: $icon-size !important;
-	}
-}
-
-// Even when the block switcher does not have any transformations, it still serves as a block indicator.
-.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] {
-	color: $gray-900;
-
-	// Since it's not clickable, though, don't show a hover state.
-	&:hover {
-		color: $gray-900;
-	}
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
 	min-width: 300px;
 }
@@ -97,28 +49,6 @@
 	font-weight: $font-weight-medium;
 }
 
-// The block switcher in the contextual toolbar should be bigger.
-.block-editor-block-contextual-toolbar {
-	.components-button.block-editor-block-switcher__no-switcher-icon {
-		min-width: $button-size;
-	}
-
-	.components-button.block-editor-block-switcher__no-switcher-icon,
-	.components-button.block-editor-block-switcher__toggle {
-		height: $grid-unit-60;
-
-		.block-editor-block-icon,
-		.block-editor-block-switcher__transform {
-			width: $block-toolbar-height;
-			height: $block-toolbar-height;
-		}
-
-		.block-editor-block-switcher__transform {
-			padding: $grid-unit-15;
-		}
-	}
-}
-
 .block-editor-block-switcher__preview-patterns-container {
 	padding-bottom: $grid-unit-20;