@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -25,12 +25,10 @@ function setContentEditableWrapper( node, value ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useDragSelection() {
-	const { startMultiSelect, stopMultiSelect } = useDispatch(
-		blockEditorStore
-	);
-	const { isSelectionEnabled, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { startMultiSelect, stopMultiSelect } =
+		useDispatch( blockEditorStore );
+	const { isSelectionEnabled, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -61,9 +59,8 @@ export default function useDragSelection() {
 					const selection = defaultView.getSelection();
 
 					if ( selection.rangeCount ) {
-						const {
-							commonAncestorContainer,
-						} = selection.getRangeAt( 0 );
+						const { commonAncestorContainer } =
+							selection.getRangeAt( 0 );
 
 						if (
 							anchorElement.contains( commonAncestorContainer )

package/src/components/writing-flow/use-input.js

@@ -30,6 +30,16 @@ export default function useInput() {
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
+		function onBeforeInput( event ) {
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+			// Prevent the browser to format something when we have multiselection.
+			if ( event.inputType?.startsWith( 'format' ) ) {
+				event.preventDefault();
+			}
+		}
+
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented ) {
 				return;
@@ -102,9 +112,11 @@ export default function useInput() {
 			}
 		}
 
+		node.addEventListener( 'beforeinput', onBeforeInput );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'compositionstart', onCompositionStart );
 		return () => {
+			node.removeEventListener( 'beforeinput', onBeforeInput );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'compositionstart', onCompositionStart );
 		};

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

@@ -74,10 +74,8 @@ export default function useMultiSelection() {
 
 				if ( selection.rangeCount && ! selection.isCollapsed ) {
 					const blockNode = selectedRef.current;
-					const {
-						startContainer,
-						endContainer,
-					} = selection.getRangeAt( 0 );
+					const { startContainer, endContainer } =
+						selection.getRangeAt( 0 );
 
 					if (
 						!! blockNode &&

package/src/components/writing-flow/use-select-all.js

@@ -17,11 +17,8 @@ import { useRefEffect } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../store';
 
 export default function useSelectAll() {
-	const {
-		getBlockOrder,
-		getSelectedBlockClientIds,
-		getBlockRootClientId,
-	} = useSelect( blockEditorStore );
+	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { multiSelect } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 

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

@@ -73,12 +73,10 @@ function setContentEditableWrapper( node, value ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useSelectionObserver() {
-	const { multiSelect, selectBlock, selectionChange } = useDispatch(
-		blockEditorStore
-	);
-	const { getBlockParents, getBlockSelectionStart } = useSelect(
-		blockEditorStore
-	);
+	const { multiSelect, selectBlock, selectionChange } =
+		useDispatch( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;

package/src/components/writing-flow/use-tab-nav.js

@@ -17,11 +17,8 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 	const lastFocus = useRef();
-	const {
-		hasMultiSelection,
-		getSelectedBlockClientId,
-		getBlockCount,
-	} = useSelect( blockEditorStore );
+	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
+		useSelect( blockEditorStore );
 	const { setNavigationMode } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),

package/src/elements/index.js

@@ -0,0 +1 @@
+export const __experimentalElementButtonClassName = 'wp-element-button';

package/src/hooks/anchor.js

@@ -117,7 +117,7 @@ export const withInspectorControl = createHigherOrderComponent(
 						 * We plan to remove scoping anchors to 'core/heading' to support
 						 * anchors for all eligble blocks. Additionally we plan to explore
 						 * leveraging InspectorAdvancedControls instead of a custom
-						 * PanelBody title. https://git.io/Jtcov
+						 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
 						 */ }
 						{ ! isWeb && props.name === 'core/heading' && (
 							<InspectorControls>

package/src/hooks/border.js

@@ -269,17 +269,8 @@ export function BorderPanel( props ) {
 						colors={ colors }
 						enableAlpha={ true }
 						onChange={ onBorderChange }
-						popoverClassNames={ {
-							linked: 'block-editor__border-box-control__popover',
-							top:
-								'block-editor__border-box-control__popover-top',
-							right:
-								'block-editor__border-box-control__popover-right',
-							bottom:
-								'block-editor__border-box-control__popover-bottom',
-							left:
-								'block-editor__border-box-control__popover-left',
-						} }
+						popoverPlacement="left-start"
+						popoverOffset={ 40 }
 						showStyle={ isStyleSupported }
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }

package/src/hooks/border.scss

@@ -3,51 +3,3 @@
 		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/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 ) {
@@ -42,8 +43,8 @@ export default function ColorPanel( {
 		}
 
 		let backgroundColorNode = ref.current;
-		let backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
+		let backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
 		while (
 			backgroundColor === 'rgba(0, 0, 0, 0)' &&
 			backgroundColorNode.parentNode &&
@@ -51,23 +52,26 @@ export default function ColorPanel( {
 				backgroundColorNode.parentNode.ELEMENT_NODE
 		) {
 			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor = getComputedStyle( backgroundColorNode )
-				.backgroundColor;
+			backgroundColor =
+				getComputedStyle( backgroundColorNode ).backgroundColor;
 		}
 
 		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-panel.native.js

@@ -23,8 +23,8 @@ const ColorPanel = ( { settings } ) => {
 	const { baseGlobalStyles } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
-			baseGlobalStyles: getSettings()
-				?.__experimentalGlobalStylesBaseStyles?.color,
+			baseGlobalStyles:
+				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
 		};
 	} );
 

package/src/hooks/color.js

@@ -76,34 +76,6 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
-/**
- * Checks whether a color has been set either with a named preset color in
- * a top level block attribute or as a custom value within the style attribute
- * object.
- *
- * @param {string} name Name of the color to check.
- * @return {boolean} Whether or not a color has a value.
- */
-const hasColor = ( name ) => ( props ) => {
-	if ( name === 'background' ) {
-		return (
-			!! props.attributes.backgroundColor ||
-			!! props.attributes.style?.color?.background ||
-			!! props.attributes.gradient ||
-			!! props.attributes.style?.color?.gradient
-		);
-	}
-
-	if ( name === 'link' ) {
-		return !! props.attributes.style?.elements?.link?.color?.text;
-	}
-
-	return (
-		!! props.attributes[ `${ name }Color` ] ||
-		!! props.attributes.style?.color?.[ name ]
-	);
-};
-
 /**
  * Clears a single color property from a style object.
  *
@@ -114,20 +86,6 @@ const hasColor = ( name ) => ( props ) => {
 const clearColorFromStyles = ( path, style ) =>
 	cleanEmptyObject( immutableSet( style, path, undefined ) );
 
-/**
- * Resets the block attributes for text color.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetTextColor = ( { attributes, setAttributes } ) => {
-	setAttributes( {
-		textColor: undefined,
-		style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-	} );
-};
-
 /**
  * Clears text color related properties from supplied attributes.
  *
@@ -139,18 +97,6 @@ const resetAllTextFilter = ( attributes ) => ( {
 	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
 } );
 
-/**
- * Resets the block attributes for link color.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetLinkColor = ( { attributes, setAttributes } ) => {
-	const path = [ 'elements', 'link', 'color', 'text' ];
-	setAttributes( { style: clearColorFromStyles( path, attributes.style ) } );
-};
-
 /**
  * Clears link color related properties from supplied attributes.
  *
@@ -184,17 +130,6 @@ const clearBackgroundAndGradient = ( attributes ) => ( {
 	},
 } );
 
-/**
- * Resets the block attributes for both background color and gradient.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetBackgroundAndGradient = ( { attributes, setAttributes } ) => {
-	setAttributes( clearBackgroundAndGradient( attributes ) );
-};
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -496,12 +431,16 @@ export function ColorEdit( props ) {
 
 		const newStyle = cleanEmptyObject(
 			immutableSet(
-				style,
+				localAttributes.current?.style,
 				[ 'elements', 'link', 'color', 'text' ],
 				newLinkColorValue
 			)
 		);
 		props.setAttributes( { style: newStyle } );
+		localAttributes.current = {
+			...localAttributes.current,
+			...{ style: newStyle },
+		};
 	};
 
 	const enableContrastChecking =
@@ -529,8 +468,6 @@ export function ColorEdit( props ) {
 									style?.color?.text
 								).color,
 								isShownByDefault: defaultColorControls?.text,
-								hasValue: () => hasColor( 'text' )( props ),
-								onDeselect: () => resetTextColor( props ),
 								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
@@ -553,10 +490,6 @@ export function ColorEdit( props ) {
 									: undefined,
 								isShownByDefault:
 									defaultColorControls?.background,
-								hasValue: () =>
-									hasColor( 'background' )( props ),
-								onDeselect: () =>
-									resetBackgroundAndGradient( props ),
 								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
@@ -570,11 +503,9 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable: !! style?.elements?.link?.color
-									?.text,
+								clearable:
+									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
-								hasValue: () => hasColor( 'link' )( props ),
-								onDeselect: () => resetLinkColor( props ),
 								resetAllFilter: resetAllLinkFilter,
 							},
 					  ]

package/src/hooks/color.scss

@@ -22,64 +22,11 @@
 	}
 
 	/**
-	 * 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.
+	 * After converting PanelColorGradientSettings to render as a ToolsPanel
+	 * we need to remove the top margin when wrapping inner content due to
+	 * rendering via SlotFills.
 	 */
-	.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;
-		}
+	.block-editor-tools-panel-color-gradient-settings__item.first {
+		margin-top: 0;
 	}
 }

package/src/hooks/dimensions.js

@@ -153,7 +153,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
 };
 
 /**
- * Custom hook to retrieve which padding/margin is supported
+ * Custom hook to retrieve which padding/margin/blockGap is supported
  * e.g. top, right, bottom or left.
  *
  * Sides are opted into by default. It is only if a specific side is set to
@@ -162,7 +162,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
  * @param {string} blockName Block name.
  * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
  *
- * @return {Object} Sides supporting custom margin.
+ * @return {?string[]} Strings representing the custom sides available.
  */
 export function useCustomSides( blockName, feature ) {
 	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
@@ -172,7 +172,15 @@ export function useCustomSides( blockName, feature ) {
 		return;
 	}
 
-	return support[ feature ];
+	// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
+	if ( Array.isArray( support[ feature ] ) ) {
+		return support[ feature ];
+	}
+
+	// Finally, attempt to return `.sides` if the setting is an object.
+	if ( support[ feature ]?.sides ) {
+		return support[ feature ].sides;
+	}
 }
 
 /**

package/src/hooks/font-family.js

@@ -111,8 +111,10 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
-		?.fontFamily;
+	const value = find(
+		fontFamilies,
+		( { slug } ) => fontFamily === slug
+	)?.fontFamily;
 
 	function onChange( newValue ) {
 		const predefinedFontFamily = find(

package/src/hooks/gap.js

@@ -67,9 +67,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
-	const blockGapBoxControlValue = getGapBoxControlValueFromStyle(
-		blockGapValue
-	);
+	const blockGapBoxControlValue =
+		getGapBoxControlValueFromStyle( blockGapValue );
 	if ( ! blockGapBoxControlValue ) {
 		return null;
 	}

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has } from 'lodash';
+import { has, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,49 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
+/**
+ * Generates the utility classnames for the given blocks layout attributes.
+ * This method was primarily added to reintroduce classnames that were removed
+ * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
+ * than providing an extensive list of all possible layout classes. The plan is to
+ * have the style engine generate a more extensive list of utility classnames which
+ * will then replace this method.
+ *
+ * @param { Array } attributes Array of block attributes.
+ *
+ * @return { Array } Array of CSS classname strings.
+ */
+function getLayoutClasses( attributes ) {
+	const layoutClassnames = [];
+
+	if ( ! attributes.layout ) {
+		return layoutClassnames;
+	}
+
+	if ( attributes?.layout?.orientation ) {
+		layoutClassnames.push(
+			`is-${ kebabCase( attributes.layout.orientation ) }`
+		);
+	}
+
+	if ( attributes?.layout?.justifyContent ) {
+		layoutClassnames.push(
+			`is-content-justification-${ kebabCase(
+				attributes.layout.justifyContent
+			) }`
+		);
+	}
+
+	if (
+		attributes?.layout?.flexWrap &&
+		attributes.layout.flexWrap === 'nowrap'
+	) {
+		layoutClassnames.push( 'is-nowrap' );
+	}
+
+	return layoutClassnames;
+}
+
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
@@ -212,9 +255,16 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
-		const className = classnames( props?.className, {
-			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
-		} );
+		const layoutClasses = shouldRenderLayoutStyles
+			? getLayoutClasses( attributes )
+			: null;
+		const className = classnames(
+			props?.className,
+			{
+				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+			},
+			layoutClasses
+		);
 
 		return (
 			<>