@wordpress/block-editor 12.18.1 → 12.19.0

package/src/components/use-flash-editable-blocks/index.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function useFlashEditableBlocks( {
+	clientId = '',
+	isEnabled = true,
+} = {} ) {
+	const { getEnabledClientIdsTree } = unlock( useSelect( blockEditorStore ) );
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			const flashEditableBlocks = () => {
+				getEnabledClientIdsTree( clientId ).forEach(
+					( { clientId: id } ) => {
+						const block = element.querySelector(
+							`[data-block="${ id }"]`
+						);
+						if ( ! block ) {
+							return;
+						}
+						block.classList.remove( 'has-editable-outline' );
+						// Force reflow to trigger the animation.
+						// eslint-disable-next-line no-unused-expressions
+						block.offsetWidth;
+						block.classList.add( 'has-editable-outline' );
+					}
+				);
+			};
+
+			const handleClick = ( event ) => {
+				const shouldFlash =
+					event.target === element ||
+					event.target.classList.contains( 'is-root-container' );
+				if ( ! shouldFlash ) {
+					return;
+				}
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				event.preventDefault();
+				flashEditableBlocks();
+			};
+
+			element.addEventListener( 'click', handleClick );
+			return () => element.removeEventListener( 'click', handleClick );
+		},
+		[ isEnabled ]
+	);
+}

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

@@ -234,7 +234,7 @@ export default function useOnBlockDrop(
 		getBlock,
 		isGroupable,
 	} = useSelect( blockEditorStore );
-	const { getBlockType, getGroupingBlockName } = useSelect( blocksStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
@@ -252,6 +252,8 @@ export default function useOnBlockDrop(
 			initialPosition = 0,
 			clientIdsToReplace = []
 		) => {
+			if ( ! Array.isArray( blocks ) ) blocks = [ blocks ];
+
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];
 			const blocksClientIds = blocks.map( ( block ) => block.clientId );
@@ -281,7 +283,10 @@ export default function useOnBlockDrop(
 					return block.name === 'core/image';
 				} );
 
-				const galleryBlock = !! getBlockType( 'core/gallery' );
+				const galleryBlock = canInsertBlockType(
+					'core/gallery',
+					targetRootClientId
+				);
 
 				const wrappedBlocks = createBlock(
 					areAllImages && galleryBlock
@@ -290,7 +295,8 @@ export default function useOnBlockDrop(
 					{
 						layout: {
 							type: 'flex',
-							flexWrap: areAllImages ? null : 'nowrap',
+							flexWrap:
+								areAllImages && galleryBlock ? null : 'nowrap',
 						},
 					},
 					groupInnerBlocks
@@ -317,11 +323,12 @@ export default function useOnBlockDrop(
 			getBlockOrder,
 			targetRootClientId,
 			targetBlockIndex,
+			isGroupable,
 			operation,
 			replaceBlocks,
 			getBlock,
 			nearestSide,
-			getBlockType,
+			canInsertBlockType,
 			getGroupingBlockName,
 			insertBlocks,
 		]

package/src/components/use-settings/index.js

@@ -1,133 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
-	hasBlockSupport,
-} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { useMemo } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
-import { getValueFromObjectPath } from '../../utils/object';
-
-const blockedPaths = [
-	'color',
-	'border',
-	'dimensions',
-	'typography',
-	'spacing',
-];
-
-const deprecatedFlags = {
-	'color.palette': ( settings ) => settings.colors,
-	'color.gradients': ( settings ) => settings.gradients,
-	'color.custom': ( settings ) =>
-		settings.disableCustomColors === undefined
-			? undefined
-			: ! settings.disableCustomColors,
-	'color.customGradient': ( settings ) =>
-		settings.disableCustomGradients === undefined
-			? undefined
-			: ! settings.disableCustomGradients,
-	'typography.fontSizes': ( settings ) => settings.fontSizes,
-	'typography.customFontSize': ( settings ) =>
-		settings.disableCustomFontSizes === undefined
-			? undefined
-			: ! settings.disableCustomFontSizes,
-	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
-	'spacing.units': ( settings ) => {
-		if ( settings.enableCustomUnits === undefined ) {
-			return;
-		}
-
-		if ( settings.enableCustomUnits === true ) {
-			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
-		}
-
-		return settings.enableCustomUnits;
-	},
-	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
-};
-
-const prefixedFlags = {
-	/*
-	 * These were only available in the plugin
-	 * and can be removed when the minimum WordPress version
-	 * for the plugin is 5.9.
-	 */
-	'border.customColor': 'border.color',
-	'border.customStyle': 'border.style',
-	'border.customWidth': 'border.width',
-	'typography.customFontStyle': 'typography.fontStyle',
-	'typography.customFontWeight': 'typography.fontWeight',
-	'typography.customLetterSpacing': 'typography.letterSpacing',
-	'typography.customTextDecorations': 'typography.textDecoration',
-	'typography.customTextTransforms': 'typography.textTransform',
-	/*
-	 * These were part of WordPress 5.8 and we need to keep them.
-	 */
-	'border.customRadius': 'border.radius',
-	'spacing.customMargin': 'spacing.margin',
-	'spacing.customPadding': 'spacing.padding',
-	'typography.customLineHeight': 'typography.lineHeight',
-};
-
-/**
- * Remove `custom` prefixes for flags that did not land in 5.8.
- *
- * This provides continued support for `custom` prefixed properties. It will
- * be removed once third party devs have had sufficient time to update themes,
- * plugins, etc.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34485
- *
- * @param {string} path Path to desired value in settings.
- * @return {string}     The value for defined setting.
- */
-const removeCustomPrefixes = ( path ) => {
-	return prefixedFlags[ path ] || path;
-};
-
-/**
- * For settings like `color.palette`, which have a value that is an object
- * with `default`, `theme`, `custom`, with field values that are arrays of
- * items, merge these three arrays into one and return it. The calculation
- * is memoized so that identical input values produce identical output.
- * @param {Object} value Object to merge
- * @return {Array} Array of merged items
- */
-export function mergeOrigins( value ) {
-	let result = mergeCache.get( value );
-	if ( ! result ) {
-		result = [ 'default', 'theme', 'custom' ].flatMap(
-			( key ) => value[ key ] ?? []
-		);
-		mergeCache.set( value, result );
-	}
-	return result;
-}
-const mergeCache = new WeakMap();
-
-/**
- * For settings like `color.palette`, which have a value that is an object
- * with `default`, `theme`, `custom`, with field values that are arrays of
- * items, see if any of the three origins have values.
- *
- * @param {Object} value Object to check
- * @return {boolean} Whether the object has values in any of the three origins
- */
-export function hasMergedOrigins( value ) {
-	return [ 'default', 'theme', 'custom' ].some(
-		( key ) => value?.[ key ]?.length
-	);
-}
+import { unlock } from '../../lock-unlock';
 
 /**
  * Hook that retrieves the given settings for the block instance in use.
@@ -143,120 +25,15 @@ export function hasMergedOrigins( value ) {
  * ```
  */
 export function useSettings( ...paths ) {
-	const { name: blockName, clientId = null } = useBlockEditContext();
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	paths = useMemo( () => paths, paths );
-
+	const { clientId = null } = useBlockEditContext();
 	return useSelect(
-		( select ) => {
-			const candidates = clientId
-				? [
-						clientId,
-						...select( blockEditorStore ).getBlockParents(
-							clientId,
-							/* ascending */ true
-						),
-				  ].filter( ( candidateClientId ) => {
-						const candidateBlockName =
-							select( blockEditorStore ).getBlockName(
-								candidateClientId
-							);
-						return hasBlockSupport(
-							candidateBlockName,
-							'__experimentalSettings',
-							false
-						);
-				  } )
-				: [];
-
-			return paths.map( ( path ) => {
-				if ( blockedPaths.includes( path ) ) {
-					// eslint-disable-next-line no-console
-					console.warn(
-						'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
-					);
-					return undefined;
-				}
-
-				// 0. Allow third parties to filter the block's settings at runtime.
-				let result = applyFilters(
-					'blockEditor.useSetting.before',
-					undefined,
-					path,
-					clientId,
-					blockName
-				);
-
-				if ( undefined !== result ) {
-					return result;
-				}
-
-				const normalizedPath = removeCustomPrefixes( path );
-
-				// 1. Take settings from the block instance or its ancestors.
-				// Start from the current block and work our way up the ancestors.
-				for ( const candidateClientId of candidates ) {
-					const candidateAtts =
-						select( blockEditorStore ).getBlockAttributes(
-							candidateClientId
-						);
-					result =
-						getValueFromObjectPath(
-							candidateAtts.settings?.blocks?.[ blockName ],
-							normalizedPath
-						) ??
-						getValueFromObjectPath(
-							candidateAtts.settings,
-							normalizedPath
-						);
-					if ( result !== undefined ) {
-						// Stop the search for more distant ancestors and move on.
-						break;
-					}
-				}
-
-				// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
-				const settings = select( blockEditorStore ).getSettings();
-				if ( result === undefined && blockName ) {
-					result = getValueFromObjectPath(
-						settings.__experimentalFeatures?.blocks?.[ blockName ],
-						normalizedPath
-					);
-				}
-
-				if ( result === undefined ) {
-					result = getValueFromObjectPath(
-						settings.__experimentalFeatures,
-						normalizedPath
-					);
-				}
-
-				// Return if the setting was found in either the block instance or the store.
-				if ( result !== undefined ) {
-					if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-						return mergeOrigins( result );
-					}
-					return result;
-				}
-
-				// 3. Otherwise, use deprecated settings.
-				const deprecatedSettingsValue =
-					deprecatedFlags[ normalizedPath ]?.( settings );
-				if ( deprecatedSettingsValue !== undefined ) {
-					return deprecatedSettingsValue;
-				}
-
-				// 4. Fallback for typography.dropCap:
-				// This is only necessary to support typography.dropCap.
-				// when __experimentalFeatures are not present (core without plugin).
-				// To remove when __experimentalFeatures are ported to core.
-				return normalizedPath === 'typography.dropCap'
-					? true
-					: undefined;
-			} );
-		},
-		[ blockName, clientId, paths ]
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockSettings(
+				clientId,
+				...paths
+			),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ clientId, ...paths ]
 	);
 }
 

package/src/components/writing-flow/use-clipboard-handler.js

@@ -1,17 +1,9 @@
 /**
  * WordPress dependencies
  */
-import {
-	serialize,
-	pasteHandler,
-	createBlock,
-	findTransform,
-	getBlockTransforms,
-} from '@wordpress/blocks';
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
-	__unstableStripHTML as stripHTML,
 } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
@@ -19,9 +11,9 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getPasteEventData } from '../../utils/pasting';
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
+import { getPasteBlocks, setClipboardBlocks } from './utils';
 
 export default function useClipboardHandler() {
 	const {
@@ -112,29 +104,7 @@ export default function useClipboardHandler() {
 						blocks = [ head, ...inBetweenBlocks, tail ];
 					}
 
-					const wrapperBlockName = event.clipboardData.getData(
-						'__unstableWrapperBlockName'
-					);
-
-					if ( wrapperBlockName ) {
-						blocks = createBlock(
-							wrapperBlockName,
-							JSON.parse(
-								event.clipboardData.getData(
-									'__unstableWrapperBlockAttributes'
-								)
-							),
-							blocks
-						);
-					}
-
-					const serialized = serialize( blocks );
-
-					event.clipboardData.setData(
-						'text/plain',
-						toPlainText( serialized )
-					);
-					event.clipboardData.setData( 'text/html', serialized );
+					setClipboardBlocks( event, blocks );
 				}
 			}
 
@@ -153,35 +123,10 @@ export default function useClipboardHandler() {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
 				} = getSettings();
-				const { plainText, html, files } = getPasteEventData( event );
-				let blocks = [];
-
-				if ( files.length ) {
-					const fromTransforms = getBlockTransforms( 'from' );
-					blocks = files
-						.reduce( ( accumulator, file ) => {
-							const transformation = findTransform(
-								fromTransforms,
-								( transform ) =>
-									transform.type === 'files' &&
-									transform.isMatch( [ file ] )
-							);
-							if ( transformation ) {
-								accumulator.push(
-									transformation.transform( [ file ] )
-								);
-							}
-							return accumulator;
-						}, [] )
-						.flat();
-				} else {
-					blocks = pasteHandler( {
-						HTML: html,
-						plainText,
-						mode: 'BLOCKS',
-						canUserUseUnfilteredHTML,
-					} );
-				}
+				const blocks = getPasteBlocks(
+					event,
+					canUserUseUnfilteredHTML
+				);
 
 				if ( selectedBlockClientIds.length === 1 ) {
 					const [ selectedBlockClientId ] = selectedBlockClientIds;
@@ -223,20 +168,3 @@ export default function useClipboardHandler() {
 		};
 	}, [] );
 }
-
-/**
- * Given a string of HTML representing serialized blocks, returns the plain
- * text extracted after stripping the HTML of any tags and fixing line breaks.
- *
- * @param {string} html Serialized blocks.
- * @return {string} The plain-text content with any html removed.
- */
-function toPlainText( html ) {
-	// Manually handle BR tags as line breaks prior to `stripHTML` call
-	html = html.replace( /<br>/g, '\n' );
-
-	const plainText = stripHTML( html ).trim();
-
-	// Merge any consecutive line breaks
-	return plainText.replace( /\n\n+/g, '\n\n' );
-}

package/src/components/writing-flow/use-drag-selection.js

@@ -63,19 +63,28 @@ export default function useDragSelection() {
 					const selection = defaultView.getSelection();
 
 					if ( selection.rangeCount ) {
-						const { commonAncestorContainer } =
-							selection.getRangeAt( 0 );
+						const range = selection.getRangeAt( 0 );
+						const { commonAncestorContainer } = range;
+						const clonedRange = range.cloneRange();
 
 						if (
 							anchorElement.contains( commonAncestorContainer )
 						) {
 							anchorElement.focus();
+							selection.removeAllRanges();
+							selection.addRange( clonedRange );
 						}
 					}
 				} );
 			}
 
-			function onMouseLeave( { buttons, target } ) {
+			function onMouseLeave( { buttons, target, relatedTarget } ) {
+				// If we're moving into a child element, ignore. We're tracking
+				// the mouse leaving the element to a parent, no a child.
+				if ( target.contains( relatedTarget ) ) {
+					return;
+				}
+
 				// Avoid triggering a multi-selection if the user is already
 				// dragging blocks.
 				if ( isDraggingBlocks() ) {

package/src/components/writing-flow/utils.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import {
+	serialize,
+	createBlock,
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getPasteEventData } from '../../utils/pasting';
+
+/**
+ * Sets the clipboard data for the provided blocks, with both HTML and plain
+ * text representations.
+ *
+ * @param {ClipboardEvent} event  Clipboard event.
+ * @param {WPBlock[]}      blocks Blocks to set as clipboard data.
+ */
+export function setClipboardBlocks( event, blocks ) {
+	let _blocks = blocks;
+	const wrapperBlockName = event.clipboardData.getData(
+		'__unstableWrapperBlockName'
+	);
+
+	if ( wrapperBlockName ) {
+		_blocks = createBlock(
+			wrapperBlockName,
+			JSON.parse(
+				event.clipboardData.getData(
+					'__unstableWrapperBlockAttributes'
+				)
+			),
+			_blocks
+		);
+	}
+
+	const serialized = serialize( _blocks );
+
+	event.clipboardData.setData( 'text/plain', toPlainText( serialized ) );
+	event.clipboardData.setData( 'text/html', serialized );
+}
+
+/**
+ * Returns the blocks to be pasted from the clipboard event.
+ *
+ * @param {ClipboardEvent} event                    The clipboard event.
+ * @param {boolean}        canUserUseUnfilteredHTML Whether the user can or can't post unfiltered HTML.
+ * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
+ */
+export function getPasteBlocks( event, canUserUseUnfilteredHTML ) {
+	const { plainText, html, files } = getPasteEventData( event );
+	let blocks = [];
+
+	if ( files.length ) {
+		const fromTransforms = getBlockTransforms( 'from' );
+		blocks = files
+			.reduce( ( accumulator, file ) => {
+				const transformation = findTransform(
+					fromTransforms,
+					( transform ) =>
+						transform.type === 'files' &&
+						transform.isMatch( [ file ] )
+				);
+				if ( transformation ) {
+					accumulator.push( transformation.transform( [ file ] ) );
+				}
+				return accumulator;
+			}, [] )
+			.flat();
+	} else {
+		blocks = pasteHandler( {
+			HTML: html,
+			plainText,
+			mode: 'BLOCKS',
+			canUserUseUnfilteredHTML,
+		} );
+	}
+
+	return blocks;
+}
+
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+	// Manually handle BR tags as line breaks prior to `stripHTML` call
+	html = html.replace( /<br>/g, '\n' );
+
+	const plainText = stripHTML( html ).trim();
+
+	// Merge any consecutive line breaks
+	return plainText.replace( /\n\n+/g, '\n\n' );
+}