@wordpress/block-editor 12.16.1-next.79a6196f.0 → 12.18.0

package/src/components/use-on-block-drop/index.js

@@ -4,9 +4,11 @@
 import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
+	createBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
@@ -61,6 +63,8 @@ export function parseDropEvent( event ) {
  * @param {Function} moveBlocks                A function that moves blocks.
  * @param {Function} insertOrReplaceBlocks     A function that inserts or replaces blocks.
  * @param {Function} clearSelectedBlock        A function that clears block selection.
+ * @param {string}   operation                 The type of operation to perform on drop. Could be `insert` or `replace` or `group`.
+ * @param {Function} getBlock                  A function that returns a block given its client id.
  * @return {Function} The event handler for a block drop event.
  */
 export function onBlockDrop(
@@ -70,7 +74,9 @@ export function onBlockDrop(
 	getClientIdsOfDescendants,
 	moveBlocks,
 	insertOrReplaceBlocks,
-	clearSelectedBlock
+	clearSelectedBlock,
+	operation,
+	getBlock
 ) {
 	return ( event ) => {
 		const {
@@ -113,6 +119,21 @@ export function onBlockDrop(
 				return;
 			}
 
+			// If the user is dropping a block over another block, replace both blocks
+			// with a group block containing them
+			if ( operation === 'group' ) {
+				const blocksToInsert = sourceClientIds.map( ( clientId ) =>
+					getBlock( clientId )
+				);
+				insertOrReplaceBlocks(
+					blocksToInsert,
+					true,
+					null,
+					sourceClientIds
+				);
+				return;
+			}
+
 			const isAtSameLevel = sourceRootClientId === targetRootClientId;
 			const draggedBlockCount = sourceClientIds.length;
 
@@ -202,7 +223,7 @@ export default function useOnBlockDrop(
 	targetBlockIndex,
 	options = {}
 ) {
-	const { operation = 'insert' } = options;
+	const { operation = 'insert', nearestSide = 'right' } = options;
 	const {
 		canInsertBlockType,
 		getBlockIndex,
@@ -210,7 +231,10 @@ export default function useOnBlockDrop(
 		getBlockOrder,
 		getBlocksByClientId,
 		getSettings,
+		getBlock,
+		isGroupable,
 	} = useSelect( blockEditorStore );
+	const { getBlockType, getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
@@ -222,12 +246,63 @@ export default function useOnBlockDrop(
 	const registry = useRegistry();
 
 	const insertOrReplaceBlocks = useCallback(
-		( blocks, updateSelection = true, initialPosition = 0 ) => {
+		(
+			blocks,
+			updateSelection = true,
+			initialPosition = 0,
+			clientIdsToReplace = []
+		) => {
+			const clientIds = getBlockOrder( targetRootClientId );
+			const clientId = clientIds[ targetBlockIndex ];
+			const blocksClientIds = blocks.map( ( block ) => block.clientId );
+			const areGroupableBlocks = isGroupable( [
+				...blocksClientIds,
+				clientId,
+			] );
 			if ( operation === 'replace' ) {
-				const clientIds = getBlockOrder( targetRootClientId );
-				const clientId = clientIds[ targetBlockIndex ];
-
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
+			} else if ( operation === 'group' && areGroupableBlocks ) {
+				const targetBlock = getBlock( clientId );
+				if ( nearestSide === 'left' ) {
+					blocks.push( targetBlock );
+				} else {
+					blocks.unshift( targetBlock );
+				}
+
+				const groupInnerBlocks = blocks.map( ( block ) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				} );
+
+				const areAllImages = blocks.every( ( block ) => {
+					return block.name === 'core/image';
+				} );
+
+				const galleryBlock = !! getBlockType( 'core/gallery' );
+
+				const wrappedBlocks = createBlock(
+					areAllImages && galleryBlock
+						? 'core/gallery'
+						: getGroupingBlockName(),
+					{
+						layout: {
+							type: 'flex',
+							flexWrap: areAllImages ? null : 'nowrap',
+						},
+					},
+					groupInnerBlocks
+				);
+				// Need to make sure both the target block and the block being dragged are replaced
+				// otherwise the dragged block will be duplicated.
+				replaceBlocks(
+					[ clientId, ...clientIdsToReplace ],
+					wrappedBlocks,
+					undefined,
+					initialPosition
+				);
 			} else {
 				insertBlocks(
 					blocks,
@@ -239,12 +314,16 @@ export default function useOnBlockDrop(
 			}
 		},
 		[
-			operation,
 			getBlockOrder,
-			insertBlocks,
-			replaceBlocks,
-			targetBlockIndex,
 			targetRootClientId,
+			targetBlockIndex,
+			operation,
+			replaceBlocks,
+			getBlock,
+			nearestSide,
+			getBlockType,
+			getGroupingBlockName,
+			insertBlocks,
 		]
 	);
 
@@ -297,7 +376,9 @@ export default function useOnBlockDrop(
 		getClientIdsOfDescendants,
 		moveBlocks,
 		insertOrReplaceBlocks,
-		clearSelectedBlock
+		clearSelectedBlock,
+		operation,
+		getBlock
 	);
 	const _onFilesDrop = onFilesDrop(
 		targetRootClientId,

package/src/hooks/block-hooks.js

@@ -55,8 +55,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
 				( clientIds, block ) => {
 					// If the block doesn't exist anywhere in the block tree,
-					// we know that we have to display the toggle for it, and set
-					// it to disabled.
+					// we know that we have to set the toggle to disabled.
 					if ( getGlobalBlockCount( block.name ) === 0 ) {
 						return clientIds;
 					}
@@ -83,7 +82,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 					}
 
 					const hookedBlock = candidates?.find(
-						( candidate ) => name === candidate.name
+						( candidate ) => candidate.name === block.name
 					);
 
 					// If the block exists in the designated location, we consider it hooked
@@ -96,13 +95,8 @@ function BlockHooksControlPure( { name, clientId } ) {
 					}
 
 					// If no hooked block was found in any of its designated locations,
-					// but it exists elsewhere in the block tree, we consider it manually inserted.
-					// In this case, we take note and will remove the corresponding toggle from the
-					// block inspector panel.
-					return {
-						...clientIds,
-						[ block.name ]: false,
-					};
+					// we set the toggle to disabled.
+					return clientIds;
 				},
 				{}
 			);
@@ -118,13 +112,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
 
-	// Remove toggle if block isn't present in the designated location but elsewhere in the block tree.
-	const hookedBlocksForCurrentBlockIfNotPresentElsewhere =
-		hookedBlocksForCurrentBlock?.filter(
-			( block ) => hookedBlockClientIds?.[ block.name ] !== false
-		);
-
-	if ( ! hookedBlocksForCurrentBlockIfNotPresentElsewhere.length ) {
+	if ( ! hookedBlocksForCurrentBlock.length ) {
 		return null;
 	}
 

package/src/hooks/content-lock-ui.js

@@ -4,40 +4,23 @@
 import { ToolbarButton, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { unlock } from '../lock-unlock';
 
-function StopEditingAsBlocksOnOutsideSelect( {
-	clientId,
-	stopEditingAsBlock,
-} ) {
-	const isBlockOrDescendantSelected = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return (
-				isBlockSelected( clientId ) ||
-				hasSelectedInnerBlock( clientId, true )
-			);
-		},
-		[ clientId ]
-	);
-	useEffect( () => {
-		if ( ! isBlockOrDescendantSelected ) {
-			stopEditingAsBlock();
-		}
-	}, [ isBlockOrDescendantSelected, stopEditingAsBlock ] );
-	return null;
-}
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId, isSelected } ) {
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const focusModeToRevert = useRef();
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -61,31 +44,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		updateBlockListSettings,
 		__unstableSetTemporarilyEditingAsBlocks,
 	} = useDispatch( blockEditorStore );
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
 
-	const stopEditingAsBlock = useCallback( () => {
-		__unstableMarkNextChangeAsNotPersistent();
-		updateBlockAttributes( clientId, {
-			templateLock: 'contentOnly',
-		} );
-		updateBlockListSettings( clientId, {
-			...getBlockListSettings( clientId ),
-			templateLock: 'contentOnly',
-		} );
-		updateSettings( { focusMode: focusModeToRevert.current } );
-		__unstableSetTemporarilyEditingAsBlocks();
-	}, [
-		clientId,
-		updateSettings,
-		updateBlockListSettings,
-		getBlockListSettings,
-		__unstableMarkNextChangeAsNotPersistent,
-		updateBlockAttributes,
-		__unstableSetTemporarilyEditingAsBlocks,
-	] );
+	const stopEditingAsBlockCallback = useCallback( () => {
+		stopEditingAsBlocks( clientId );
+	}, [ clientId, stopEditingAsBlocks ] );
 
 	if ( ! isContentLocked && ! isEditingAsBlocks ) {
 		return null;
@@ -99,16 +66,8 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		<>
 			{ showStopEditingAsBlocks && (
 				<>
-					<StopEditingAsBlocksOnOutsideSelect
-						clientId={ clientId }
-						stopEditingAsBlock={ stopEditingAsBlock }
-					/>
 					<BlockControls group="other">
-						<ToolbarButton
-							onClick={ () => {
-								stopEditingAsBlock();
-							} }
-						>
+						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
 							{ __( 'Done' ) }
 						</ToolbarButton>
 					</BlockControls>
@@ -127,11 +86,12 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 									...getBlockListSettings( clientId ),
 									templateLock: false,
 								} );
-								focusModeToRevert.current =
+								const focusModeToRevert =
 									getSettings().focusMode;
 								updateSettings( { focusMode: true } );
 								__unstableSetTemporarilyEditingAsBlocks(
-									clientId
+									clientId,
+									focusModeToRevert
 								);
 								onClose();
 							} }

package/src/hooks/effects.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import StylesEffectsPanel, {
+	useHasEffectsPanel,
+} from '../components/global-styles/effects-panel';
+import { InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+import { cleanEmptyObject } from './utils';
+
+export const SHADOW_SUPPORT_KEY = 'shadow';
+export const EFFECTS_SUPPORT_KEYS = [ SHADOW_SUPPORT_KEY ];
+
+export function hasEffectsSupport( blockName ) {
+	return EFFECTS_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
+	);
+}
+
+function EffectsInspectorControl( { children, resetAllFilter } ) {
+	return (
+		<InspectorControls group="effects" resetAllFilter={ resetAllFilter }>
+			{ children }
+		</InspectorControls>
+	);
+}
+export function EffectsPanel( { clientId, setAttributes, settings } ) {
+	const isEnabled = useHasEffectsPanel( settings );
+	const value = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
+
+	const onChange = ( newStyle ) => {
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<StylesEffectsPanel
+			as={ EffectsInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
+}

package/src/hooks/index.js

@@ -27,6 +27,7 @@ import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
 import blockRenaming from './block-renaming';
+import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
@@ -68,6 +69,7 @@ createBlockSaveFilter( [
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
+export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/index.native.js

@@ -28,6 +28,7 @@ createBlockSaveFilter( [
 ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
+export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/style.js

@@ -27,6 +27,11 @@ import {
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
 } from './dimensions';
+import {
+	EFFECTS_SUPPORT_KEYS,
+	SHADOW_SUPPORT_KEY,
+	EffectsPanel,
+} from './effects';
 import {
 	shouldSkipSerialization,
 	useStyleOverride,
@@ -37,6 +42,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
+	...EFFECTS_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	DIMENSIONS_SUPPORT_KEY,
@@ -110,6 +116,7 @@ const skipSerializationPathsEdit = {
 	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		SPACING_SUPPORT_KEY,
 	],
+	[ `${ SHADOW_SUPPORT_KEY }` ]: [ SHADOW_SUPPORT_KEY ],
 };
 
 /**
@@ -336,6 +343,7 @@ function BlockStyleControls( {
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />
 			<DimensionsPanel { ...passedProps } />
+			<EffectsPanel { ...passedProps } />
 		</>
 	);
 }

package/src/hooks/supports.js

@@ -59,8 +59,10 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	WRITING_MODE_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
+const EFFECTS_SUPPORT_KEYS = [ 'shadow' ];
 const SPACING_SUPPORT_KEY = 'spacing';
 const styleSupportKeys = [
+	...EFFECTS_SUPPORT_KEYS,
 	...TYPOGRAPHY_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,

package/src/hooks/test/effects.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import { hasEffectsSupport } from '../effects';
+
+describe( 'effects', () => {
+	describe( 'hasEffectsSupport', () => {
+		it( 'should return false if the block does not support effects', () => {
+			const settings = {
+				supports: {
+					shadow: false,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( false );
+		} );
+
+		it( 'should return true if the block supports effects', () => {
+			const settings = {
+				supports: {
+					shadow: true,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( true );
+		} );
+
+		it( 'should return true if the block supports effects and other features', () => {
+			const settings = {
+				supports: {
+					shadow: true,
+					align: true,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( true );
+		} );
+	} );
+} );

package/src/hooks/typography.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { pure } from '@wordpress/compose';
+import { memo } from '@wordpress/element';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -57,4 +57,4 @@ function TypographyPanelPure( { clientId, setAttributes, settings } ) {
 // We don't want block controls to re-render when typing inside a block. `pure`
 // will prevent re-renders unless props change, so only pass the needed props
 // and not the whole attributes object.
-export const TypographyPanel = pure( TypographyPanelPure );
+export const TypographyPanel = memo( TypographyPanelPure );

package/src/hooks/use-bindings-attributes.js

@@ -0,0 +1,148 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit/context';
+import { unlock } from '../lock-unlock';
+
+/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+/**
+ * Given a binding of block attributes, returns a higher order component that
+ * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ *
+ * @return {WPHigherOrderComponent} Higher-order component.
+ */
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget' ],
+};
+
+const createEditFunctionWithBindingsAttribute = () =>
+	createHigherOrderComponent(
+		( BlockEdit ) => ( props ) => {
+			const { clientId, name: blockName } = useBlockEditContext();
+			const { getBlockBindingsSource } = unlock(
+				useSelect( blockEditorStore )
+			);
+			const { getBlockAttributes, updateBlockAttributes } =
+				useSelect( blockEditorStore );
+
+			const updatedAttributes = getBlockAttributes( clientId );
+			if ( updatedAttributes?.metadata?.bindings ) {
+				Object.entries( updatedAttributes.metadata.bindings ).forEach(
+					( [ attributeName, settings ] ) => {
+						const source = getBlockBindingsSource(
+							settings.source.name
+						);
+
+						if ( source ) {
+							// Second argument (`updateMetaValue`) will be used to update the value in the future.
+							const {
+								placeholder,
+								useValue: [ metaValue = null ] = [],
+							} = source.useSource(
+								props,
+								settings.source.attributes
+							);
+
+							if ( placeholder && ! metaValue ) {
+								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.
+								// Adding this workaround until attributes and metadata fields types are improved and include `url`.
+								const htmlAttribute =
+									getBlockType( blockName ).attributes[
+										attributeName
+									].attribute;
+								if (
+									htmlAttribute === 'src' ||
+									htmlAttribute === 'href'
+								) {
+									updatedAttributes[ attributeName ] = null;
+								} else {
+									updatedAttributes[ attributeName ] =
+										placeholder;
+								}
+							}
+
+							if ( metaValue ) {
+								updatedAttributes[ attributeName ] = metaValue;
+							}
+						}
+					}
+				);
+			}
+
+			const registry = useRegistry();
+
+			return (
+				<>
+					<BlockEdit
+						key="edit"
+						attributes={ updatedAttributes }
+						setAttributes={ ( newAttributes, blockId ) =>
+							registry.batch( () =>
+								updateBlockAttributes( blockId, newAttributes )
+							)
+						}
+						{ ...props }
+					/>
+				</>
+			);
+		},
+		'useBoundAttributes'
+	);
+
+/**
+ * Filters a registered block's settings to enhance a block's `edit` component
+ * to upgrade bound attributes.
+ *
+ * @param {WPBlockSettings} settings Registered block settings.
+ *
+ * @return {WPBlockSettings} Filtered block settings.
+ */
+function shimAttributeSource( settings ) {
+	if ( ! ( settings.name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+		return settings;
+	}
+	settings.edit = createEditFunctionWithBindingsAttribute()( settings.edit );
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
+	shimAttributeSource
+);
+
+// Add the context to all blocks.
+addFilter(
+	'blocks.registerBlockType',
+	'core/block-bindings-ui',
+	( settings, name ) => {
+		if ( ! ( name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+			return settings;
+		}
+		const contextItems = [ 'postId', 'postType', 'queryId' ];
+		const usesContextArray = settings.usesContext;
+		const oldUsesContextArray = new Set( usesContextArray );
+		contextItems.forEach( ( item ) => {
+			if ( ! oldUsesContextArray.has( item ) ) {
+				usesContextArray.push( item );
+			}
+		} );
+		settings.usesContext = usesContextArray;
+		return settings;
+	}
+);