@wordpress/block-editor 8.5.4 → 9.0.0

package/src/hooks/border.scss

@@ -3,3 +3,51 @@
 		grid-column: span 1;
 	}
 }
+
+.block-editor__border-box-control__popover,
+.block-editor__border-box-control__popover-top,
+.block-editor__border-box-control__popover-right,
+.block-editor__border-box-control__popover-bottom,
+.block-editor__border-box-control__popover-left {
+	.components-popover__content {
+		width: 282px;
+	}
+}
+
+$split-border-control-offset: 55px;
+
+@include break-medium() {
+	.block-editor__border-box-control__popover,
+	.block-editor__border-box-control__popover-left {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 } !important;
+		}
+	}
+
+	.block-editor__border-box-control__popover-top,
+	.block-editor__border-box-control__popover-bottom {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + $split-border-control-offset } !important;
+		}
+	}
+
+	.block-editor__border-box-control__popover-right {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + ( $split-border-control-offset * 2 )} !important;
+		}
+	}
+
+	.block-editor__border-box-control__popover,
+	.block-editor__border-box-control__popover-top,
+	.block-editor__border-box-control__popover-right,
+	.block-editor__border-box-control__popover-bottom,
+	.block-editor__border-box-control__popover-left {
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+	}
+}

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/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/use-border-props.js

@@ -1,46 +1,28 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * Internal dependencies
  */
 import { getInlineStyles } from './style';
-import {
-	getColorClassName,
-	getColorObjectByAttributeValues,
-} from '../components/colors';
-import useSetting from '../components/use-setting';
+import { getBorderClasses, getMultiOriginColor } from './border';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 
 // This utility is intended to assist where the serialization of the border
 // block support is being skipped for a block but the border related CSS classes
 // & styles still need to be generated so they can be applied to inner elements.
 
-const EMPTY_ARRAY = [];
-
 /**
  * Provides the CSS class names and inline styles for a block's border support
  * attributes.
  *
- * @param {Object} attributes             Block attributes.
- * @param {string} attributes.borderColor Selected named border color.
- * @param {Object} attributes.style       Block's styles attribute.
- *
+ * @param {Object} attributes Block attributes.
  * @return {Object} Border block support derived CSS classes & styles.
  */
-export function getBorderClassesAndStyles( { borderColor, style } ) {
-	const borderStyles = style?.border || {};
-	const borderClass = getColorClassName( 'border-color', borderColor );
-
-	const className = classnames( {
-		[ borderClass ]: !! borderClass,
-		'has-border-color': borderColor || style?.border?.color,
-	} );
+export function getBorderClassesAndStyles( attributes ) {
+	const border = attributes.style?.border || {};
+	const className = getBorderClasses( attributes );
 
 	return {
 		className: className || undefined,
-		style: getInlineStyles( { border: borderStyles } ),
+		style: getInlineStyles( { border } ),
 	};
 }
 
@@ -56,16 +38,17 @@ export function getBorderClassesAndStyles( { borderColor, style } ) {
  * @return {Object} ClassName & style props from border block support.
  */
 export function useBorderProps( attributes ) {
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+	const { colors } = useMultipleOriginColorsAndGradients();
 	const borderProps = getBorderClassesAndStyles( attributes );
+	const { borderColor } = attributes;
 
-	// Force inline style to apply border color when themes do not load their
-	// color stylesheets in the editor.
-	if ( attributes.borderColor ) {
-		const borderColorObject = getColorObjectByAttributeValues(
+	// Force inline styles to apply named border colors when themes do not load
+	// their color stylesheets in the editor.
+	if ( borderColor ) {
+		const borderColorObject = getMultiOriginColor( {
 			colors,
-			attributes.borderColor
-		);
+			namedColor: borderColor,
+		} );
 
 		borderProps.style.borderColor = borderColorObject.color;
 	}

package/src/store/actions.js

@@ -1261,22 +1261,34 @@ export function stopDraggingBlocks() {
 /**
  * Returns an action object used in signalling that the caret has entered formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function enterFormattedText() {
+	deprecated( 'wp.data.dispatch( "core/block-editor" ).enterFormattedText', {
+		since: '6.1',
+		version: '6.3',
+	} );
 	return {
-		type: 'ENTER_FORMATTED_TEXT',
+		type: 'DO_NOTHING',
 	};
 }
 
 /**
  * Returns an action object used in signalling that the user caret has exited formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function exitFormattedText() {
+	deprecated( 'wp.data.dispatch( "core/block-editor" ).exitFormattedText', {
+		since: '6.1',
+		version: '6.3',
+	} );
 	return {
-		type: 'EXIT_FORMATTED_TEXT',
+		type: 'DO_NOTHING',
 	};
 }
 

package/src/store/defaults.js

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

package/src/store/reducer.js

@@ -1181,26 +1181,6 @@ export function draggedBlocks( state = [], action ) {
 	return state;
 }
 
-/**
- * Reducer returning whether the caret is within formatted text.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function isCaretWithinFormattedText( state = false, action ) {
-	switch ( action.type ) {
-		case 'ENTER_FORMATTED_TEXT':
-			return true;
-
-		case 'EXIT_FORMATTED_TEXT':
-			return false;
-	}
-
-	return state;
-}
-
 /**
  * Internal helper reducer for selectionStart and selectionEnd. Can hold a block
  * selection, represented by an object with property clientId.
@@ -1765,7 +1745,6 @@ export default combineReducers( {
 	blocks,
 	isTyping,
 	draggedBlocks,
-	isCaretWithinFormattedText,
 	selection,
 	isMultiSelecting,
 	isSelectionEnabled,