@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.738bb1424.0

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

@@ -9,6 +9,7 @@
 	li {
 		display: inline-flex;
 		margin: 0;
+		white-space: nowrap;
 
 		.block-editor-block-breadcrumb__separator {
 			fill: currentColor;

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

@@ -244,9 +244,8 @@ const EditWithGeneratedProps = ( props ) => {
 					! ( hasPatternOverrides && hasParentPattern ) &&
 					Object.keys( keptAttributes ).length
 				) {
-					// Don't update caption and href until they are supported.
+					// Don't update href until it is supported.
 					if ( hasPatternOverrides ) {
-						delete keptAttributes.caption;
 						delete keptAttributes.href;
 					}
 					setAttributes( keptAttributes );

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

@@ -3,24 +3,69 @@
  */
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { isReusableBlock, isTemplatePart } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';
+import { store as blockEditorStore } from '../../store';
 
-export default function EditContents( { clientId } ) {
-	const {
-		isWithinSection,
-		isWithinEditedSection,
-		editedContentOnlySection,
-		editContentOnlySection,
-		stopEditingContentOnlySection,
-	} = useContentOnlySectionEdit( clientId );
+function IsolatedEditButton( {
+	block,
+	onNavigateToEntityRecord,
+	isSyncedPattern,
+	isTemplatePartBlock,
+} ) {
+	const blockAttributes = block?.attributes || {};
 
-	if ( ! isWithinSection && ! isWithinEditedSection ) {
-		return null;
-	}
+	const handleClick = () => {
+		if ( isSyncedPattern ) {
+			onNavigateToEntityRecord( {
+				postId: blockAttributes.ref,
+				postType: 'wp_block',
+			} );
+		} else if ( isTemplatePartBlock ) {
+			const { theme, slug } = blockAttributes;
+			const templatePartId =
+				theme && slug ? `${ theme }//${ slug }` : null;
+			if ( templatePartId ) {
+				onNavigateToEntityRecord( {
+					postId: templatePartId,
+					postType: 'wp_template_part',
+				} );
+			}
+		}
+	};
+
+	return (
+		<VStack className="block-editor-block-inspector-edit-contents" expanded>
+			<Button
+				className="block-editor-block-inspector-edit-contents__button"
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ handleClick }
+			>
+				{ __( 'Edit section' ) }
+			</Button>
+		</VStack>
+	);
+}
+
+function InlineEditButton( {
+	clientId,
+	editedContentOnlySection,
+	editContentOnlySection,
+	stopEditingContentOnlySection,
+} ) {
+	const handleClick = () => {
+		if ( ! editedContentOnlySection ) {
+			editContentOnlySection( clientId );
+		} else {
+			stopEditingContentOnlySection();
+		}
+	};
 
 	return (
 		<VStack className="block-editor-block-inspector-edit-contents" expanded>
@@ -28,13 +73,7 @@ export default function EditContents( { clientId } ) {
 				className="block-editor-block-inspector-edit-contents__button"
 				__next40pxDefaultSize
 				variant="secondary"
-				onClick={ () => {
-					if ( ! editedContentOnlySection ) {
-						editContentOnlySection( clientId );
-					} else {
-						stopEditingContentOnlySection();
-					}
-				} }
+				onClick={ handleClick }
 			>
 				{ editedContentOnlySection
 					? __( 'Exit section' )
@@ -43,3 +82,54 @@ export default function EditContents( { clientId } ) {
 		</VStack>
 	);
 }
+
+export default function EditContents( { clientId } ) {
+	const {
+		isWithinSection,
+		isWithinEditedSection,
+		editedContentOnlySection,
+		editContentOnlySection,
+		stopEditingContentOnlySection,
+	} = useContentOnlySectionEdit( clientId );
+
+	const { block, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			return {
+				block: getBlock( clientId ),
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! isWithinSection && ! isWithinEditedSection ) {
+		return null;
+	}
+
+	const isSyncedPattern = isReusableBlock( block );
+	const isTemplatePartBlock = isTemplatePart( block );
+	const shouldUseIsolatedEditor =
+		( isSyncedPattern || isTemplatePartBlock ) && onNavigateToEntityRecord;
+
+	if ( shouldUseIsolatedEditor ) {
+		return (
+			<IsolatedEditButton
+				block={ block }
+				onNavigateToEntityRecord={ onNavigateToEntityRecord }
+				isSyncedPattern={ isSyncedPattern }
+				isTemplatePartBlock={ isTemplatePartBlock }
+			/>
+		);
+	}
+
+	return (
+		<InlineEditButton
+			clientId={ clientId }
+			editedContentOnlySection={ editedContentOnlySection }
+			editContentOnlySection={ editContentOnlySection }
+			stopEditingContentOnlySection={ stopEditingContentOnlySection }
+		/>
+	);
+}

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

@@ -86,8 +86,9 @@ function StyleInspectorSlots( {
 function BlockInspector() {
 	const {
 		selectedBlockCount,
-		selectedBlockName,
 		selectedBlockClientId,
+		renderedBlockName,
+		renderedBlockClientId,
 		blockType,
 		isSectionBlock,
 		isSectionBlockInSelection,
@@ -109,29 +110,30 @@ function BlockInspector() {
 		const isWithinEditedSection = isWithinEditedContentOnlySection(
 			_selectedBlockClientId
 		);
-		const renderedBlockClientId = isWithinEditedSection
+		const _renderedBlockClientId = isWithinEditedSection
 			? _selectedBlockClientId
 			: getParentSectionBlock( _selectedBlockClientId ) ||
 			  _selectedBlockClientId;
-		const _selectedBlockName =
-			renderedBlockClientId && getBlockName( renderedBlockClientId );
+		const _renderedBlockName =
+			_renderedBlockClientId && getBlockName( _renderedBlockClientId );
 		const _blockType =
-			_selectedBlockName && getBlockType( _selectedBlockName );
+			_renderedBlockName && getBlockType( _renderedBlockName );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const _isSectionBlockInSelection = selectedBlockClientIds.some(
 			( id ) => _isSectionBlock( id )
 		);
 		const blockStyles =
-			_selectedBlockName && getBlockStyles( _selectedBlockName );
+			_renderedBlockName && getBlockStyles( _renderedBlockName );
 		const _hasBlockStyles = blockStyles && blockStyles.length > 0;
 
 		return {
 			selectedBlockCount: getSelectedBlockCount(),
-			selectedBlockClientId: renderedBlockClientId,
-			selectedBlockName: _selectedBlockName,
+			selectedBlockClientId: _selectedBlockClientId,
+			renderedBlockClientId: _renderedBlockClientId,
+			renderedBlockName: _renderedBlockName,
 			blockType: _blockType,
 			isSectionBlockInSelection: _isSectionBlockInSelection,
-			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
+			isSectionBlock: _isSectionBlock( _renderedBlockClientId ),
 			hasBlockStyles: _hasBlockStyles,
 			editedContentOnlySection: getEditedContentOnlySection(),
 		};
@@ -140,7 +142,7 @@ function BlockInspector() {
 	// Separate useSelect for contentClientIds with proper dependencies
 	const contentClientIds = useSelect(
 		( select ) => {
-			if ( ! isSectionBlock || ! selectedBlockClientId ) {
+			if ( ! isSectionBlock || ! renderedBlockClientId ) {
 				return [];
 			}
 
@@ -151,7 +153,7 @@ function BlockInspector() {
 			} = unlock( select( blockEditorStore ) );
 
 			const descendants = getClientIdsOfDescendants(
-				selectedBlockClientId
+				renderedBlockClientId
 			);
 
 			// Temporary workaround for issue #71991
@@ -182,7 +184,7 @@ function BlockInspector() {
 				);
 			} );
 		},
-		[ isSectionBlock, selectedBlockClientId ]
+		[ isSectionBlock, renderedBlockClientId ]
 	);
 
 	const availableTabs = useInspectorControlsTabs(
@@ -212,7 +214,7 @@ function BlockInspector() {
 					<InspectorControlsTabs tabs={ availableTabs } />
 				) : (
 					<StyleInspectorSlots
-						blockName={ selectedBlockName }
+						blockName={ renderedBlockName }
 						showAdvancedControls={ false }
 						showPositionControls={ false }
 						showBindingsControls={ false }
@@ -230,15 +232,15 @@ function BlockInspector() {
 		);
 	}
 
-	const isSelectedBlockUnregistered =
-		selectedBlockName === getUnregisteredTypeHandlerName();
+	const isRenderedBlockUnregistered =
+		renderedBlockName === getUnregisteredTypeHandlerName();
 
 	/*
-	 * If the selected block is of an unregistered type, avoid showing it as an actual selection
+	 * If the rendered block is of an unregistered type, avoid showing it as an actual selection
 	 * because we want the user to focus on the unregistered block warning, not block settings.
 	 */
 	const shouldShowWarning =
-		! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered;
+		! blockType || ! renderedBlockClientId || isRenderedBlockUnregistered;
 
 	if ( shouldShowWarning ) {
 		return (
@@ -256,14 +258,15 @@ function BlockInspector() {
 					blockInspectorAnimationSettings={
 						blockInspectorAnimationSettings
 					}
-					selectedBlockClientId={ selectedBlockClientId }
+					renderedBlockClientId={ renderedBlockClientId }
 				>
 					{ children }
 				</AnimatedContainer>
 			) }
 		>
 			<BlockInspectorSingleBlock
-				clientId={ selectedBlockClientId }
+				renderedBlockClientId={ renderedBlockClientId }
+				selectedBlockClientId={ selectedBlockClientId }
 				blockName={ blockType.name }
 				isSectionBlock={ isSectionBlock }
 				availableTabs={ availableTabs }
@@ -281,7 +284,7 @@ const BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {
 
 const AnimatedContainer = ( {
 	blockInspectorAnimationSettings,
-	selectedBlockClientId,
+	renderedBlockClientId,
 	children,
 } ) => {
 	const animationOrigin =
@@ -304,7 +307,7 @@ const AnimatedContainer = ( {
 				x: animationOrigin,
 				opacity: 0,
 			} }
-			key={ selectedBlockClientId }
+			key={ renderedBlockClientId }
 		>
 			{ children }
 		</motion.div>
@@ -312,7 +315,13 @@ const AnimatedContainer = ( {
 };
 
 const BlockInspectorSingleBlock = ( {
-	clientId,
+	// The block that is displayed in the inspector. This is the block whose
+	// controls and information are shown to the user.
+	renderedBlockClientId,
+	// The actual block that is selected in the editor. This may or may not
+	// be the same as the rendered block (e.g., when a child block is selected
+	// but its parent section block is the main one rendered in the inspector).
+	selectedBlockClientId,
 	blockName,
 	isSectionBlock,
 	availableTabs,
@@ -324,13 +333,18 @@ const BlockInspectorSingleBlock = ( {
 	const hasParentChildBlockCards =
 		window?.__experimentalContentOnlyPatternInsertion &&
 		editedContentOnlySection &&
-		editedContentOnlySection !== clientId;
+		editedContentOnlySection !== renderedBlockClientId;
 	const parentBlockInformation = useBlockDisplayInformation(
 		editedContentOnlySection
 	);
-	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockInformation = useBlockDisplayInformation(
+		renderedBlockClientId
+	);
 	const isBlockSynced = blockInformation.isSynced;
 	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
+	const isSectionBlockSelected =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		selectedBlockClientId === renderedBlockClientId;
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -346,16 +360,16 @@ const BlockInspectorSingleBlock = ( {
 				allowParentNavigation
 				className={ isBlockSynced && 'is-synced' }
 				isChild={ hasParentChildBlockCards }
-				clientId={ clientId }
+				clientId={ renderedBlockClientId }
 			/>
 			{ window?.__experimentalContentOnlyPatternInsertion && (
-				<EditContents clientId={ clientId } />
+				<EditContents clientId={ renderedBlockClientId } />
 			) }
-			<BlockVariationTransforms blockClientId={ clientId } />
+			<BlockVariationTransforms blockClientId={ renderedBlockClientId } />
 			{ shouldShowTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }
-					clientId={ clientId }
+					clientId={ renderedBlockClientId }
 					blockName={ blockName }
 					tabs={ availableTabs }
 					isSectionBlock={ isSectionBlock }
@@ -365,10 +379,10 @@ const BlockInspectorSingleBlock = ( {
 			{ ! shouldShowTabs && (
 				<>
 					{ hasBlockStyles && (
-						<BlockStylesPanel clientId={ clientId } />
+						<BlockStylesPanel clientId={ renderedBlockClientId } />
 					) }
 					<ContentTab
-						rootClientId={ clientId }
+						rootClientId={ renderedBlockClientId }
 						contentClientIds={ contentClientIds }
 					/>
 					{ ! isSectionBlock && (
@@ -377,6 +391,15 @@ const BlockInspectorSingleBlock = ( {
 							showListControls
 						/>
 					) }
+					{ isSectionBlock &&
+						isBlockSynced &&
+						isSectionBlockSelected && (
+							<>
+								<InspectorControls.Slot />
+								{ /* Allow AdvancedControls so users can adjust local attributes (e.g. additional CSS classes, HTML element). */ }
+								<AdvancedControls />
+							</>
+						) }
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />

package/src/components/block-list/content.scss

@@ -202,11 +202,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		background-color: transparent;
 	}
 
-	// Reusable blocks parent border.
-	&.is-reusable.has-child-selected::after {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-
 	// Clear floats.
 	&[data-clear="true"] {
 		float: none;

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

@@ -114,7 +114,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					>
 						<li>
 							<CheckboxControl
-								__nextHasNoMarginBottom
 								className="block-editor-block-lock-modal__options-all"
 								label={ __( 'Lock all' ) }
 								checked={ isAllChecked }
@@ -136,7 +135,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								{ allowsEditLocking && (
 									<li className="block-editor-block-lock-modal__checklist-item">
 										<CheckboxControl
-											__nextHasNoMarginBottom
 											label={ __( 'Lock editing' ) }
 											checked={ !! lock.edit }
 											onChange={ ( edit ) =>
@@ -158,7 +156,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								) }
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
-										__nextHasNoMarginBottom
 										label={ __( 'Lock movement' ) }
 										checked={ lock.move }
 										onChange={ ( move ) =>
@@ -177,7 +174,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								</li>
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
-										__nextHasNoMarginBottom
 										label={ __( 'Lock removal' ) }
 										checked={ lock.remove }
 										onChange={ ( remove ) =>
@@ -200,7 +196,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 					{ hasTemplateLock && (
 						<ToggleControl
-							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }

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

@@ -83,7 +83,6 @@ function BlockManagerCategory( {
 			className="block-editor-block-manager__category"
 		>
 			<CheckboxControl
-				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
 				className="block-editor-block-manager__category-title"

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

@@ -17,7 +17,6 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 					className="block-editor-block-manager__checklist-item"
 				>
 					<CheckboxControl
-						__nextHasNoMarginBottom
 						label={ blockType.title }
 						checked={ value.includes( blockType.name ) }
 						onChange={ ( ...args ) =>

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

@@ -71,7 +71,6 @@ export default function BlockManager( {
 	return (
 		<VStack className="block-editor-block-manager__content" spacing={ 4 }>
 			<SearchControl
-				__nextHasNoMarginBottom
 				label={ __( 'Search for a block' ) }
 				placeholder={ __( 'Search for a block' ) }
 				value={ search }
@@ -91,7 +90,6 @@ export default function BlockManager( {
 						}
 					} }
 					indeterminate={ isIndeterminate }
-					__nextHasNoMarginBottom
 				/>
 			) }
 			<div

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

@@ -107,7 +107,6 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 			>
 				<VStack spacing="3">
 					<TextControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }

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

@@ -3,11 +3,14 @@
  */
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { isReusableBlock, isTemplatePart } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';
+import { store as blockEditorStore } from '../../store';
 
 export function EditSectionMenuItem( { clientId, onClose } ) {
 	const {
@@ -16,6 +19,18 @@ export function EditSectionMenuItem( { clientId, onClose } ) {
 		editContentOnlySection,
 	} = useContentOnlySectionEdit( clientId );
 
+	const { block, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			return {
+				block: getBlock( clientId ),
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
 	// Only show when the experiment is enabled, the block is a section block,
 	// and we're not already editing it
 	if (
@@ -26,13 +41,42 @@ export function EditSectionMenuItem( { clientId, onClose } ) {
 		return null;
 	}
 
+	const blockAttributes = block?.attributes || {};
+
+	// Synced patterns and template parts should navigate to the isolated editor
+	const isSyncedPattern = isReusableBlock( block );
+	const isTemplatePartBlock = isTemplatePart( block );
+	const shouldNavigateToIsolatedEditor =
+		( isSyncedPattern || isTemplatePartBlock ) && onNavigateToEntityRecord;
+
+	const handleClick = () => {
+		if ( shouldNavigateToIsolatedEditor ) {
+			// Navigate to isolated editor for synced patterns and template parts
+			if ( isSyncedPattern ) {
+				onNavigateToEntityRecord( {
+					postId: blockAttributes.ref,
+					postType: 'wp_block',
+				} );
+			} else if ( isTemplatePartBlock ) {
+				const { theme, slug } = blockAttributes;
+				const templatePartId =
+					theme && slug ? `${ theme }//${ slug }` : null;
+				if ( templatePartId ) {
+					onNavigateToEntityRecord( {
+						postId: templatePartId,
+						postType: 'wp_template_part',
+					} );
+				}
+			}
+		} else {
+			// Use spotlight mode for unsynced patterns
+			editContentOnlySection( clientId );
+		}
+		onClose();
+	};
+
 	return (
-		<MenuItem
-			onClick={ () => {
-				editContentOnlySection( clientId );
-				onClose();
-			} }
-		>
+		<MenuItem onClick={ handleClick }>
 			{ _x( 'Edit section', 'Editing a section in the Editor' ) }
 		</MenuItem>
 	);