@wordpress/block-editor 8.6.0 → 9.0.0

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

@@ -7,7 +7,10 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
+import {
+	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -91,8 +94,10 @@ const removeCustomPrefixes = ( path ) => {
 };
 
 /**
- * Hook that retrieves the editor setting.
- * It works with nested objects using by finding the value at path.
+ * Hook that retrieves the given setting for the block instance in use.
+ *
+ * It looks up the settings first in the block instance hierarchy.
+ * If none is found, it'll look it up in the block editor store.
  *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
@@ -102,7 +107,7 @@ const removeCustomPrefixes = ( path ) => {
  * ```
  */
 export default function useSetting( path ) {
-	const { name: blockName } = useBlockEditContext();
+	const { name: blockName, clientId } = useBlockEditContext();
 
 	const setting = useSelect(
 		( select ) => {
@@ -113,28 +118,59 @@ export default function useSetting( path ) {
 				);
 				return undefined;
 			}
-			const settings = select( blockEditorStore ).getSettings();
 
-			// 1 - Use __experimental features, if available.
-			// We cascade to the all value if the block one is not available.
+			let result;
 			const normalizedPath = removeCustomPrefixes( path );
-			const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
-			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
-			const experimentalFeaturesResult =
-				get( settings, blockPath ) ?? get( settings, defaultsPath );
 
-			if ( experimentalFeaturesResult !== undefined ) {
+			// 1. Take settings from the block instance or its ancestors.
+			const candidates = [
+				...select( blockEditorStore ).getBlockParents( clientId ),
+				clientId, // The current block is added last, so it overwrites any ancestor.
+			];
+			candidates.forEach( ( candidateClientId ) => {
+				const candidateBlockName = select(
+					blockEditorStore
+				).getBlockName( candidateClientId );
+				if (
+					hasBlockSupport(
+						candidateBlockName,
+						'__experimentalSettings',
+						false
+					)
+				) {
+					const candidateAtts = select(
+						blockEditorStore
+					).getBlockAttributes( candidateClientId );
+					const candidateResult =
+						get(
+							candidateAtts,
+							`settings.blocks.${ blockName }.${ normalizedPath }`
+						) ??
+						get( candidateAtts, `settings.${ normalizedPath }` );
+					if ( candidateResult !== undefined ) {
+						result = candidateResult;
+					}
+				}
+			} );
+
+			// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
+			const settings = select( blockEditorStore ).getSettings();
+			if ( result === undefined ) {
+				const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
+				const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
+				result =
+					get( settings, blockPath ) ?? get( settings, defaultsPath );
+			}
+
+			// Return if the setting was found in either the block instance or the store.
+			if ( result !== undefined ) {
 				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-					return (
-						experimentalFeaturesResult.custom ??
-						experimentalFeaturesResult.theme ??
-						experimentalFeaturesResult.default
-					);
+					return result.custom ?? result.theme ?? result.default;
 				}
-				return experimentalFeaturesResult;
+				return result;
 			}
 
-			// 2 - Use deprecated settings, otherwise.
+			// 3. Otherwise, use deprecated settings.
 			const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
 				? deprecatedFlags[ normalizedPath ]( settings )
 				: undefined;
@@ -142,13 +178,13 @@ export default function useSetting( path ) {
 				return deprecatedSettingsValue;
 			}
 
-			// 3 - Fall back for typography.dropCap:
+			// 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, path ]
+		[ blockName, clientId, path ]
 	);
 
 	return setting;

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

@@ -11,10 +11,9 @@ import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const {
 		isSelectionEnabled,
-		getBlockParents,
 		getBlockSelectionStart,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
@@ -54,10 +53,8 @@ export default function useClickSelection() {
 			};
 		},
 		[
-			multiSelect,
 			selectBlock,
 			isSelectionEnabled,
-			getBlockParents,
 			getBlockSelectionStart,
 			hasMultiSelection,
 		]

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

@@ -76,36 +76,81 @@ export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } = useDispatch(
 		blockEditorStore
 	);
-	const { getBlockParents } = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart } = useSelect(
+		blockEditorStore
+	);
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
-			function onSelectionChange() {
+			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-
 				// If no selection is found, end multi selection and disable the
 				// contentEditable wrapper.
-				if ( ! selection.rangeCount || selection.isCollapsed ) {
+				if ( ! selection.rangeCount ) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
+				// If selection is collapsed and we haven't used `shift+click`,
+				// end multi selection and disable the contentEditable wrapper.
+				// We have to check about `shift+click` case because elements
+				// that don't support text selection might be involved, and we might
+				// update the clientIds to multi-select blocks.
+				// For now we check if the event is a `mouse` event.
+				const isClickShift = event.shiftKey && event.type === 'mouseup';
+				if ( selection.isCollapsed && ! isClickShift ) {
 					setContentEditableWrapper( node, false );
 					return;
 				}
 
-				const clientId = getBlockClientId(
+				let startClientId = getBlockClientId(
 					extractSelectionStartNode( selection )
 				);
-				const endClientId = getBlockClientId(
+				let endClientId = getBlockClientId(
 					extractSelectionEndNode( selection )
 				);
-				const isSingularSelection = clientId === endClientId;
+				// If the selection has changed and we had pressed `shift+click`,
+				// we need to check if in an element that doesn't support
+				// text selection has been clicked.
+				if ( isClickShift ) {
+					const selectedClientId = getBlockSelectionStart();
+					const clickedClientId = getBlockClientId( event.target );
+					// `endClientId` is not defined if we end the selection by clicking a non-selectable block.
+					// We need to check if there was already a selection with a non-selectable focusNode.
+					const focusNodeIsNonSelectable =
+						clickedClientId !== endClientId;
+					if (
+						( startClientId === endClientId &&
+							selection.isCollapsed ) ||
+						! endClientId ||
+						focusNodeIsNonSelectable
+					) {
+						endClientId = clickedClientId;
+					}
+					// Handle the case when we have a non-selectable block
+					// selected and click another one.
+					if ( startClientId !== selectedClientId ) {
+						startClientId = selectedClientId;
+					}
+				}
+
+				// If the selection did not involve a block, return.
+				if (
+					startClientId === undefined &&
+					endClientId === undefined
+				) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
 
+				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
-					selectBlock( clientId );
+					selectBlock( startClientId );
 				} else {
 					const startPath = [
-						...getBlockParents( clientId ),
-						clientId,
+						...getBlockParents( startClientId ),
+						startClientId,
 					];
 					const endPath = [
 						...getBlockParents( endClientId ),

package/src/hooks/dimensions.js

@@ -19,6 +19,7 @@ import {
 } from './gap';
 import {
 	MarginEdit,
+	MarginVisualizer,
 	hasMarginSupport,
 	hasMarginValue,
 	resetMargin,
@@ -26,6 +27,7 @@ import {
 } from './margin';
 import {
 	PaddingEdit,
+	PaddingVisualizer,
 	hasPaddingSupport,
 	hasPaddingValue,
 	resetPadding,
@@ -71,44 +73,48 @@ export function DimensionsPanel( props ) {
 	} );
 
 	return (
-		<InspectorControls __experimentalGroup="dimensions">
-			{ ! isPaddingDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasPaddingValue( props ) }
-					label={ __( 'Padding' ) }
-					onDeselect={ () => resetPadding( props ) }
-					resetAllFilter={ createResetAllFilter( 'padding' ) }
-					isShownByDefault={ defaultSpacingControls?.padding }
-					panelId={ props.clientId }
-				>
-					<PaddingEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isMarginDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasMarginValue( props ) }
-					label={ __( 'Margin' ) }
-					onDeselect={ () => resetMargin( props ) }
-					resetAllFilter={ createResetAllFilter( 'margin' ) }
-					isShownByDefault={ defaultSpacingControls?.margin }
-					panelId={ props.clientId }
-				>
-					<MarginEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isGapDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasGapValue( props ) }
-					label={ __( 'Block spacing' ) }
-					onDeselect={ () => resetGap( props ) }
-					resetAllFilter={ createResetAllFilter( 'blockGap' ) }
-					isShownByDefault={ defaultSpacingControls?.blockGap }
-					panelId={ props.clientId }
-				>
-					<GapEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<>
+			<InspectorControls __experimentalGroup="dimensions">
+				{ ! isPaddingDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasPaddingValue( props ) }
+						label={ __( 'Padding' ) }
+						onDeselect={ () => resetPadding( props ) }
+						resetAllFilter={ createResetAllFilter( 'padding' ) }
+						isShownByDefault={ defaultSpacingControls?.padding }
+						panelId={ props.clientId }
+					>
+						<PaddingEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ ! isMarginDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasMarginValue( props ) }
+						label={ __( 'Margin' ) }
+						onDeselect={ () => resetMargin( props ) }
+						resetAllFilter={ createResetAllFilter( 'margin' ) }
+						isShownByDefault={ defaultSpacingControls?.margin }
+						panelId={ props.clientId }
+					>
+						<MarginEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ ! isGapDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasGapValue( props ) }
+						label={ __( 'Block spacing' ) }
+						onDeselect={ () => resetGap( props ) }
+						resetAllFilter={ createResetAllFilter( 'blockGap' ) }
+						isShownByDefault={ defaultSpacingControls?.blockGap }
+						panelId={ props.clientId }
+					>
+						<GapEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+			</InspectorControls>
+			{ ! isPaddingDisabled && <PaddingVisualizer { ...props } /> }
+			{ ! isMarginDisabled && <MarginVisualizer { ...props } /> }
+		</>
 	);
 }
 

package/src/hooks/index.js

@@ -8,6 +8,7 @@ import './anchor';
 import './custom-class-name';
 import './generated-class-name';
 import './style';
+import './settings';
 import './color';
 import './duotone';
 import './font-size';

package/src/hooks/margin.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
+import {
+	Platform,
+	useMemo,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -20,6 +27,7 @@ import {
 	useIsDimensionsSupportValid,
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
+import BlockPopover from '../components/block-popover';
 
 /**
  * Determines if there is margin support.
@@ -124,26 +132,12 @@ export function MarginEdit( props ) {
 		} );
 	};
 
-	const onChangeShowVisualizer = ( next ) => {
-		const newStyle = {
-			...style,
-			visualizers: {
-				margin: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
 	return Platform.select( {
 		web: (
 			<>
 				<BoxControl
 					values={ style?.spacing?.margin }
 					onChange={ onChange }
-					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Margin' ) }
 					sides={ sides }
 					units={ units }
@@ -155,3 +149,58 @@ export function MarginEdit( props ) {
 		native: null,
 	} );
 }
+
+export function MarginVisualizer( { clientId, attributes } ) {
+	const margin = attributes?.style?.spacing?.margin;
+	const style = useMemo( () => {
+		return {
+			borderTopWidth: margin?.top ?? 0,
+			borderRightWidth: margin?.right ?? 0,
+			borderBottomWidth: margin?.bottom ?? 0,
+			borderLeftWidth: margin?.left ?? 0,
+			top: margin?.top ? `-${ margin.top }` : 0,
+			right: margin?.right ? `-${ margin.right }` : 0,
+			bottom: margin?.bottom ? `-${ margin.bottom }` : 0,
+			left: margin?.left ? `-${ margin.left }` : 0,
+		};
+	}, [ margin ] );
+
+	const [ isActive, setIsActive ] = useState( false );
+	const valueRef = useRef( margin );
+	const timeoutRef = useRef();
+
+	const clearTimer = () => {
+		if ( timeoutRef.current ) {
+			window.clearTimeout( timeoutRef.current );
+		}
+	};
+
+	useEffect( () => {
+		if ( ! isShallowEqual( margin, valueRef.current ) ) {
+			setIsActive( true );
+			valueRef.current = margin;
+
+			clearTimer();
+
+			timeoutRef.current = setTimeout( () => {
+				setIsActive( false );
+			}, 400 );
+		}
+
+		return () => clearTimer();
+	}, [ margin ] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstableRefreshSize={ margin }
+		>
+			<div className="block-editor__padding-visualizer" style={ style } />
+		</BlockPopover>
+	);
+}

package/src/hooks/padding.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
+import {
+	Platform,
+	useState,
+	useRef,
+	useEffect,
+	useMemo,
+} from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -20,6 +27,7 @@ import {
 	useIsDimensionsSupportValid,
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
+import BlockPopover from '../components/block-popover';
 
 /**
  * Determines if there is padding support.
@@ -124,26 +132,12 @@ export function PaddingEdit( props ) {
 		} );
 	};
 
-	const onChangeShowVisualizer = ( next ) => {
-		const newStyle = {
-			...style,
-			visualizers: {
-				padding: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
 	return Platform.select( {
 		web: (
 			<>
 				<BoxControl
 					values={ style?.spacing?.padding }
 					onChange={ onChange }
-					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Padding' ) }
 					sides={ sides }
 					units={ units }
@@ -155,3 +149,54 @@ export function PaddingEdit( props ) {
 		native: null,
 	} );
 }
+
+export function PaddingVisualizer( { clientId, attributes } ) {
+	const padding = attributes?.style?.spacing?.padding;
+	const style = useMemo( () => {
+		return {
+			borderTopWidth: padding?.top ?? 0,
+			borderRightWidth: padding?.right ?? 0,
+			borderBottomWidth: padding?.bottom ?? 0,
+			borderLeftWidth: padding?.left ?? 0,
+		};
+	}, [ padding ] );
+
+	const [ isActive, setIsActive ] = useState( false );
+	const valueRef = useRef( padding );
+	const timeoutRef = useRef();
+
+	const clearTimer = () => {
+		if ( timeoutRef.current ) {
+			window.clearTimeout( timeoutRef.current );
+		}
+	};
+
+	useEffect( () => {
+		if ( ! isShallowEqual( padding, valueRef.current ) ) {
+			setIsActive( true );
+			valueRef.current = padding;
+
+			clearTimer();
+
+			timeoutRef.current = setTimeout( () => {
+				setIsActive( false );
+			}, 400 );
+		}
+
+		return () => clearTimer();
+	}, [ padding ] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstableRefreshSize={ padding }
+		>
+			<div className="block-editor__padding-visualizer" style={ style } />
+		</BlockPopover>
+	);
+}

package/src/hooks/padding.scss

@@ -0,0 +1,12 @@
+.block-editor__padding-visualizer {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	opacity: 0.5;
+	border-color: var(--wp-admin-theme-color);
+	border-style: solid;
+	pointer-events: none;
+	box-sizing: border-box;
+}

package/src/hooks/settings.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+const hasSettingsSupport = ( blockType ) =>
+	hasBlockSupport( blockType, '__experimentalSettings', false );
+
+function addAttribute( settings ) {
+	if ( ! hasSettingsSupport( settings ) ) {
+		return settings;
+	}
+
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( ! settings?.attributes?.settings ) {
+		settings.attributes = {
+			...settings.attributes,
+			settings: {
+				type: 'object',
+			},
+		};
+	}
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/settings/addAttribute',
+	addAttribute
+);

package/src/hooks/test/settings.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import '../settings';
+
+describe( 'with settings', () => {
+	const blockSettings = {
+		save: () => <div className="default" />,
+		category: 'text',
+		title: 'block title',
+	};
+
+	describe( 'addAttribute', () => {
+		const addAttribute = applyFilters.bind(
+			null,
+			'blocks.registerBlockType'
+		);
+
+		it( 'does not have settings att if settings block support is not enabled', () => {
+			const settings = addAttribute( {
+				...blockSettings,
+				supports: {
+					__experimentalSettings: false,
+				},
+			} );
+
+			expect( settings.attributes ).toBe( undefined );
+		} );
+
+		it( 'has settings att if settings block supports is enabled', () => {
+			const settings = addAttribute( {
+				...blockSettings,
+				supports: {
+					__experimentalSettings: true,
+				},
+			} );
+
+			expect( settings.attributes ).toStrictEqual( {
+				settings: { type: 'object' },
+			} );
+		} );
+	} );
+} );

package/src/store/defaults.js

@@ -160,7 +160,6 @@ export const SETTINGS_DEFAULTS = {
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
-	__experimentalSpotlightEntityBlocks: [],
 	__unstableGalleryWithImageBlocks: false,
 
 	generateAnchors: false,