@wordpress/block-editor 12.18.2 → 12.19.0

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' );
+}

package/src/hooks/background.js

@@ -18,6 +18,7 @@ import {
 	__experimentalVStack as VStack,
 	DropZone,
 	FlexItem,
+	FocalPointPicker,
 	MenuItem,
 	VisuallyHidden,
 	__experimentalItemGroup as ItemGroup,
@@ -59,13 +60,17 @@ export function hasBackgroundImageValue( style ) {
 
 /**
  * Checks if there is a current value in the background size block support
- * attributes.
+ * attributes. Background size values include background size as well
+ * as background position.
  *
  * @param {Object} style Style attribute.
  * @return {boolean}     Whether or not the block has a background size value set.
  */
 export function hasBackgroundSizeValue( style ) {
-	return style?.background?.backgroundSize !== undefined;
+	return (
+		style?.background?.backgroundPosition !== undefined ||
+		style?.background?.backgroundSize !== undefined
+	);
 }
 
 /**
@@ -130,6 +135,7 @@ function resetBackgroundSize( style = {}, setAttributes ) {
 			...style,
 			background: {
 				...style?.background,
+				backgroundPosition: undefined,
 				backgroundRepeat: undefined,
 				backgroundSize: undefined,
 			},
@@ -359,14 +365,34 @@ function BackgroundImagePanelItem( {
 
 function backgroundSizeHelpText( value ) {
 	if ( value === 'cover' || value === undefined ) {
-		return __( 'Stretch image to cover the block.' );
+		return __( 'Image covers the space evenly.' );
 	}
 	if ( value === 'contain' ) {
-		return __( 'Resize image to fit without cropping.' );
+		return __( 'Image is contained without distortion.' );
 	}
-	return __( 'Set a fixed width.' );
+	return __( 'Specify a fixed width.' );
 }
 
+export const coordsToBackgroundPosition = ( value ) => {
+	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
+		return undefined;
+	}
+
+	return `${ value.x * 100 }% ${ value.y * 100 }%`;
+};
+
+export const backgroundPositionToCoords = ( value ) => {
+	if ( ! value ) {
+		return { x: undefined, y: undefined };
+	}
+
+	let [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );
+	x = isNaN( x ) ? undefined : x;
+	y = isNaN( y ) ? x : y;
+
+	return { x, y };
+};
+
 function BackgroundSizePanelItem( {
 	clientId,
 	isShownByDefault,
@@ -446,6 +472,18 @@ function BackgroundSizePanelItem( {
 		} );
 	};
 
+	const updateBackgroundPosition = ( next ) => {
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				background: {
+					...style?.background,
+					backgroundPosition: coordsToBackgroundPosition( next ),
+				},
+			} ),
+		} );
+	};
+
 	const toggleIsRepeated = () => {
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -471,8 +509,16 @@ function BackgroundSizePanelItem( {
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
+			<FocalPointPicker
+				__next40pxDefaultSize
+				label={ __( 'Position' ) }
+				url={ style?.background?.backgroundImage?.url }
+				value={ backgroundPositionToCoords(
+					style?.background?.backgroundPosition
+				) }
+				onChange={ updateBackgroundPosition }
+			/>
 			<ToggleGroupControl
-				__nextHasNoMarginBottom
 				size={ '__unstable-large' }
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -507,8 +553,7 @@ function BackgroundSizePanelItem( {
 			) : null }
 			{ currentValueForToggle !== 'cover' && (
 				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Repeat image' ) }
+					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }
 				/>