@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/src/components/block-bindings/use-block-bindings-utils.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit';
+
+/**
+ * Checks if the given object is empty.
+ *
+ * @param {?Object} object The object to check.
+ *
+ * @return {boolean} Whether the object is empty.
+ */
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+/**
+ * Contains utils to update the block `bindings` metadata.
+ *
+ * @typedef {Object} WPBlockBindingsUtils
+ *
+ * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.
+ * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
+ */
+
+/**
+ * Retrieves the existing utils needed to update the block `bindings` metadata.
+ * They can be used to create, modify, or remove connections from the existing block attributes.
+ *
+ * It contains the following utils:
+ * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+ * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
+ * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
+ *
+ * @example
+ * ```js
+ * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+ * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+ *
+ * // Update url and alt attributes.
+ * updateBlockBindings( {
+ *     url: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'url_custom_field',
+ *         },
+ *     },
+ *     alt: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'text_custom_field',
+ *         },
+ *     },
+ * } );
+ *
+ * // Remove binding from url attribute.
+ * updateBlockBindings( { url: undefined } );
+ *
+ * // Remove bindings from all attributes.
+ * removeAllBlockBindings();
+ * ```
+ */
+export default function useBlockBindingsUtils( clientId ) {
+	const { clientId: contextClientId } = useBlockEditContext();
+	const blockClientId = clientId || contextClientId;
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
+
+	/**
+	 * Updates the value of the bindings connected to block attributes.
+	 * It removes the binding when the new value is `undefined`.
+	 *
+	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
+	 * @param {string} bindings.source The source name to connect to.
+	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { updateBlockBindings } = useBlockBindingsUtils();
+	 * updateBlockBindings( {
+	 *     url: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'url_custom_field',
+	 *         },
+	 * 	   },
+	 *     alt: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'text_custom_field',
+	 *         },
+	 * 	   }
+	 * } );
+	 * ```
+	 */
+	const updateBlockBindings = ( bindings ) => {
+		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		const newBindings = { ...currentBindings };
+
+		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
+			if ( ! binding && newBindings[ attribute ] ) {
+				delete newBindings[ attribute ];
+				return;
+			}
+			newBindings[ attribute ] = binding;
+		} );
+
+		const newMetadata = {
+			...metadata,
+			bindings: newBindings,
+		};
+
+		if ( isObjectEmpty( newMetadata.bindings ) ) {
+			delete newMetadata.bindings;
+		}
+
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
+		} );
+	};
+
+	/**
+	 * Removes the bindings property of the `metadata` attribute.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
+	 * removeAllBlockBindings();
+	 * ```
+	 */
+	const removeAllBlockBindings = () => {
+		const { metadata: { bindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}

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

@@ -100,10 +100,10 @@ const EditWithGeneratedProps = ( props ) => {
 			),
 		};
 	}, [
-		name,
 		blockType?.usesContext,
 		blockContext,
 		attributes?.metadata?.bindings,
+		bindableAttributes,
 		registeredSources,
 	] );
 
@@ -180,7 +180,6 @@ const EditWithGeneratedProps = ( props ) => {
 			blockBindings,
 			clientId,
 			context,
-			name,
 			registeredSources,
 		]
 	);
@@ -262,7 +261,6 @@ const EditWithGeneratedProps = ( props ) => {
 			hasPatternOverrides,
 			setAttributes,
 			registeredSources,
-			name,
 			registry,
 		]
 	);

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-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>
 	);

package/src/components/block-styles/preview-panel.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -16,11 +15,10 @@ export default function BlockStylesPreviewPanel( {
 	className,
 	activeStyle,
 } ) {
-	const example = getBlockType( genericPreviewBlock.name )?.example;
 	const styleClassName = replaceActiveStyle( className, activeStyle, style );
 	const previewBlocks = useMemo( () => {
 		return {
-			...genericPreviewBlock,
+			name: genericPreviewBlock.name,
 			title: style.label || style.name,
 			description: style.description,
 			initialAttributes: {
@@ -29,9 +27,9 @@ export default function BlockStylesPreviewPanel( {
 					styleClassName +
 					' block-editor-block-styles__block-preview-container',
 			},
-			example,
+			example: genericPreviewBlock,
 		};
-	}, [ genericPreviewBlock, styleClassName ] );
+	}, [ genericPreviewBlock, style, styleClassName ] );
 
 	return <InserterPreviewPanel item={ previewBlocks } />;
 }

package/src/components/block-styles/use-styles-for-block.js

@@ -37,7 +37,7 @@ function useGenericPreviewBlock( block, type ) {
 		if ( block ) {
 			return cloneBlock( block );
 		}
-	}, [ type?.example ? block?.name : block, type ] );
+	}, [ block, type?.example, type?.name ] );
 }
 
 /**
@@ -63,7 +63,7 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 		const { getBlockStyles } = select( blocksStore );
 
 		return {
-			block,
+			block: ! blockType?.example ? block : null,
 			blockType,
 			styles: getBlockStyles( block.name ),
 			className: block.attributes.className || '',