@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.6deb34194.0

package/src/components/block-bindings/source-fields-list.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockBindingsSource } from '@wordpress/blocks';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import useBlockBindingsUtils from './use-block-bindings-utils';
+import { unlock } from '../../lock-unlock';
+import BlockContext from '../block-context';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function BlockBindingsSourceFieldsListItem( {
+	args,
+	attribute,
+	field,
+	source,
+	sourceKey,
+} ) {
+	const itemBindings = useMemo(
+		() => ( {
+			source: sourceKey,
+			args: field.args || {
+				key: field.key,
+			},
+		} ),
+		[ field.args, field.key, sourceKey ]
+	);
+
+	const blockContext = useContext( BlockContext );
+	const values = useSelect(
+		( select ) =>
+			source.getValues( {
+				select,
+				context: blockContext,
+				bindings: {
+					[ attribute ]: itemBindings,
+				},
+			} ),
+		[ attribute, blockContext, itemBindings, source ]
+	);
+	const { updateBlockBindings } = useBlockBindingsUtils();
+
+	return (
+		<Menu.CheckboxItem
+			onChange={ () => {
+				const isCurrentlySelected =
+					fastDeepEqual( args, field.args ) ??
+					// Deprecate key dependency in 7.0.
+					field.key === args?.key;
+
+				if ( isCurrentlySelected ) {
+					// Unset if the same field is selected again.
+					updateBlockBindings( {
+						[ attribute ]: undefined,
+					} );
+				} else {
+					updateBlockBindings( {
+						[ attribute ]: itemBindings,
+					} );
+				}
+			} }
+			name={ attribute + '-binding' }
+			value={ values[ attribute ] }
+			checked={
+				fastDeepEqual( args, field.args ) ??
+				// Deprecate key dependency in 7.0.
+				field.key === args?.key
+			}
+		>
+			<Menu.ItemLabel>{ field.label }</Menu.ItemLabel>
+			<Menu.ItemHelpText>{ values[ attribute ] }</Menu.ItemHelpText>
+		</Menu.CheckboxItem>
+	);
+}
+
+export default function BlockBindingsSourceFieldsList( {
+	args,
+	attribute,
+	sourceKey,
+	fields,
+} ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	// Only render source if it has compatible fields.
+	if ( ! fields || fields.length === 0 ) {
+		return null;
+	}
+
+	const source = getBlockBindingsSource( sourceKey );
+
+	return (
+		<Menu
+			key={ sourceKey }
+			placement={ isMobile ? 'bottom-start' : 'left-start' }
+		>
+			<Menu.SubmenuTriggerItem>
+				<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
+			</Menu.SubmenuTriggerItem>
+			<Menu.Popover gutter={ 8 }>
+				<Menu.Group>
+					{ fields.map( ( field ) => (
+						<BlockBindingsSourceFieldsListItem
+							key={
+								sourceKey + JSON.stringify( field.args ) ||
+								field.key
+							}
+							args={ args }
+							attribute={ attribute }
+							field={ field }
+							source={ source }
+							sourceKey={ sourceKey }
+						/>
+					) ) }
+				</Menu.Group>
+			</Menu.Popover>
+		</Menu>
+	);
+}

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-list/content.scss

@@ -222,6 +222,11 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		cursor: grab;
 	}
 
+	// Dragging multi selected blocks is not supported yet.
+	&.is-multi-selected {
+		cursor: default;
+	}
+
 	&[contenteditable],
 	[contenteditable] {
 		cursor: text;

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

@@ -226,6 +226,8 @@ function Items( {
 				rootClientId === selectedBlockClientId
 			);
 
+			const templateLock = getTemplateLock( rootClientId );
+
 			return {
 				order: _order,
 				selectedBlocks: selectedBlockClientIds,
@@ -238,7 +240,7 @@ function Items( {
 							rootClientId
 						) ) &&
 					getBlockEditingMode( rootClientId ) !== 'disabled' &&
-					! getTemplateLock( rootClientId ) &&
+					( ! templateLock || templateLock === 'contentOnly' ) &&
 					hasAppender &&
 					! _isZoomOut() &&
 					( hasCustomAppender ||

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/index.js

@@ -50,7 +50,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				canToggleSelectedBlocksVisibility: getBlocksByClientId(
 					ids
 				).every( ( block ) =>
-					hasBlockSupport( block.name, 'blockVisibility', true )
+					hasBlockSupport( block.name, 'visibility', true )
 				),
 			};
 		},

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 || '',

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

@@ -32,7 +32,6 @@ import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
-import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
@@ -265,11 +264,7 @@ export function PrivateBlockToolbar( {
 							group="other"
 							className="block-editor-block-toolbar__slot"
 						/>
-						<__unstableBlockNameContext.Provider
-							value={ blockType?.name }
-						>
-							<__unstableBlockToolbarLastItem.Slot />
-						</__unstableBlockNameContext.Provider>
+						<__unstableBlockToolbarLastItem.Slot />
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

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

@@ -193,6 +193,12 @@
 				font-size: $helptext-font-size;
 			}
 		}
+
+		.block-editor-block-icon {
+			width: 0 !important;
+			height: 0 !important;
+			min-width: 0 !important;
+		}
 	}
 
 	// Padding overrides.
@@ -201,12 +207,6 @@
 		padding-right: 6px;
 	}
 
-	.block-editor-block-icon {
-		width: 0 !important;
-		height: 0 !important;
-		min-width: 0 !important;
-	}
-
 	// Parent selector overrides
 	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 		border-top-right-radius: 0;

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-visibility/toolbar.js

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