@wordpress/block-editor 8.5.7 → 9.1.0

package/src/hooks/color-panel.js

@@ -6,9 +6,10 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import ContrastChecker from '../components/contrast-checker';
-import ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';
 import InspectorControls from '../components/inspector-controls';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
@@ -58,16 +59,19 @@ export default function ColorPanel( {
 		setDetectedBackgroundColor( backgroundColor );
 	} );
 
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
 		<InspectorControls __experimentalGroup="color">
-			{ settings.map( ( setting, index ) => (
-				<ToolsPanelColorDropdown
-					key={ index }
-					settings={ setting }
-					panelId={ clientId }
-					enableAlpha={ enableAlpha }
-				/>
-			) ) }
+			<ColorGradientSettingsDropdown
+				enableAlpha={ enableAlpha }
+				panelId={ clientId }
+				settings={ settings }
+				__experimentalIsItemGroup={ false }
+				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
+				{ ...colorGradientSettings }
+			/>
 			{ enableContrastChecking && (
 				<ContrastChecker
 					backgroundColor={ detectedBackgroundColor }

package/src/hooks/color.scss

@@ -20,66 +20,4 @@
 			row-gap: 0;
 		}
 	}
-
-	/**
-	 * The following styles replicate the separated border of the
-	 * `ItemGroup` component but allows for hidden items. This is because
-	 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
-	 * must at least render a placeholder which would otherwise interfere
-	 * with the `:last-child` styles.
-	 */
-	.block-editor-tools-panel-color-gradient-settings__item {
-		padding: 0;
-
-		// Border styles.
-		border-left: 1px solid rgba(0, 0, 0, 0.1);
-		border-right: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-		&.first {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-			border-top: 1px solid rgba(0, 0, 0, 0.1);
-		}
-
-		&.last {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		> div,
-		> div > button {
-			border-radius: inherit;
-		}
-	}
-
-	.block-editor-panel-color-gradient-settings__color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-	}
-
-	/**
-	 * The following few styles fix the layout and spacing for the due to the
-	 * introduced wrapper element by the `Item` component.
-	 */
-	.block-editor-tools-panel-color-dropdown {
-		display: block;
-		padding: 0;
-
-		> button {
-			height: 46px;
-
-			&.is-open {
-				background: $gray-100;
-				color: var(--wp-admin-theme-color);
-			}
-		}
-	}
-
-	.color-block-support-panel__item-group {
-		> div {
-			grid-column: span 2;
-			border-radius: inherit;
-		}
-	}
 }

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,10 +8,11 @@ import './anchor';
 import './custom-class-name';
 import './generated-class-name';
 import './style';
+import './settings';
 import './color';
 import './duotone';
 import './font-size';
-import './border-color';
+import './border';
 import './layout';
 
 export { useCustomSides } from './dimensions';

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

@@ -1,18 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	first,
-	forEach,
-	get,
-	has,
-	isEmpty,
-	isString,
-	kebabCase,
-	map,
-	omit,
-	startsWith,
-} from 'lodash';
+import { get, has, isEmpty, kebabCase, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -58,7 +47,7 @@ const VARIABLE_REFERENCE_PREFIX = 'var:';
 const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
 function compileStyleValue( uncompiledValue ) {
-	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -82,13 +71,13 @@ export function getInlineStyles( styles = {} ) {
 		const path = STYLE_PROPERTY[ propKey ].value;
 		const subPaths = STYLE_PROPERTY[ propKey ].properties;
 		// Ignore styles on elements because they are handled on the server.
-		if ( has( styles, path ) && 'elements' !== first( path ) ) {
+		if ( has( styles, path ) && 'elements' !== path?.[ 0 ] ) {
 			// Checking if style value is a string allows for shorthand css
 			// option and backwards compatibility for border radius support.
 			const styleValue = get( styles, path );
 
 			if ( ! STYLE_PROPERTY[ propKey ].useEngine ) {
-				if ( !! subPaths && ! isString( styleValue ) ) {
+				if ( !! subPaths && typeof styleValue !== 'string' ) {
 					Object.entries( subPaths ).forEach( ( entry ) => {
 						const [ name, subPath ] = entry;
 						const value = get( styleValue, [ subPath ] );
@@ -108,11 +97,8 @@ export function getInlineStyles( styles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( styles, { selector: 'self' } );
+	const extraRules = getCSSRules( styles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		output[ rule.key ] = rule.value;
 	} );
 
@@ -120,24 +106,25 @@ export function getInlineStyles( styles = {} ) {
 }
 
 function compileElementsStyles( selector, elements = {} ) {
-	return map( elements, ( styles, element ) => {
-		const elementStyles = getInlineStyles( styles );
-		if ( ! isEmpty( elementStyles ) ) {
-			// The .editor-styles-wrapper selector is required on elements styles. As it is
-			// added to all other editor styles, not providing it causes reset and global
-			// styles to override element styles because of higher specificity.
-			return [
-				`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
-				...map(
-					elementStyles,
-					( value, property ) =>
-						`\t${ kebabCase( property ) }: ${ value };`
-				),
-				'}',
-			].join( '\n' );
-		}
-		return '';
-	} ).join( '\n' );
+	return Object.entries( elements )
+		.map( ( [ element, styles ] ) => {
+			const elementStyles = getInlineStyles( styles );
+			if ( ! isEmpty( elementStyles ) ) {
+				// The .editor-styles-wrapper selector is required on elements styles. As it is
+				// added to all other editor styles, not providing it causes reset and global
+				// styles to override element styles because of higher specificity.
+				return [
+					`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
+					...Object.entries( elementStyles ).map(
+						( [ cssProperty, value ] ) =>
+							`\t${ kebabCase( cssProperty ) }: ${ value };`
+					),
+					'}',
+				].join( '\n' );
+			}
+			return '';
+		} )
+		.join( '\n' );
 }
 
 /**
@@ -235,8 +222,7 @@ export function addSaveProps(
 	}
 
 	let { style } = attributes;
-
-	forEach( skipPaths, ( path, indicator ) => {
+	Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
 		const skipSerialization = getBlockSupport( blockType, indicator );
 
 		if ( skipSerialization === true ) {

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/hooks/typography.js

@@ -130,6 +130,7 @@ export function TypographyPanel( props ) {
 			{ ! isFontSizeDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasFontSizeValue( props ) }
+					/* translators: Ensure translation is distinct from "Letter case" */
 					label={ __( 'Font size' ) }
 					onDeselect={ () => resetFontSize( props ) }
 					isShownByDefault={ defaultControls?.fontSize }
@@ -205,6 +206,7 @@ export function TypographyPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasTextTransformValue( props ) }
+					/* translators: Ensure translation is distinct from "Font size" */
 					label={ __( 'Letter case' ) }
 					onDeselect={ () => resetTextTransform( props ) }
 					isShownByDefault={ defaultControls?.textTransform }