@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/src/components/block-styles/test/{index.js → utils.js}

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from '../utils';
+import {
+	getActiveStyle,
+	getDefaultStyle,
+	getRenderedStyles,
+	replaceActiveStyle,
+} from '../utils';
 
 describe( 'getActiveStyle', () => {
 	it( 'Should return the undefined if no active style', () => {
@@ -74,3 +79,57 @@ describe( 'replaceActiveStyle', () => {
 		);
 	} );
 } );
+
+describe( 'getRenderedStyles', () => {
+	it( 'Should return an empty array if styles is falsy', () => {
+		expect( getRenderedStyles( null ) ).toEqual( [] );
+	} );
+
+	it( 'Should return an empty array if styles array is empty', () => {
+		expect( getRenderedStyles( [] ) ).toEqual( [] );
+	} );
+
+	it( 'Should return styles collection if there is a default', () => {
+		const styles = [
+			{ name: 'hazlenut' },
+			{ name: 'cashew', isDefault: true },
+		];
+
+		expect( getRenderedStyles( styles ) ).toEqual( styles );
+	} );
+
+	it( 'Should add a default item to the styles collection if there is no default', () => {
+		const styles = [ { name: 'pistachio' }, { name: 'peanut' } ];
+		const defaultStyle = {
+			name: 'default',
+			label: 'Default',
+			isDefault: true,
+		};
+
+		expect( getRenderedStyles( styles ) ).toEqual( [
+			defaultStyle,
+			...styles,
+		] );
+	} );
+} );
+
+describe( 'getDefaultStyle', () => {
+	it( 'Should return default style object', () => {
+		const styles = [
+			{ name: 'trout' },
+			{ name: 'bream', isDefault: true },
+		];
+
+		expect( getDefaultStyle( styles ) ).toEqual( styles[ 1 ] );
+	} );
+
+	it( 'Should return `undefined` if there is no default', () => {
+		const styles = [ { name: 'snapper' }, { name: 'perch' } ];
+
+		expect( getDefaultStyle( styles ) ).toBeUndefined();
+	} );
+
+	it( 'Should return `undefined` if `styles` argument is no passed', () => {
+		expect( getDefaultStyle() ).toBeUndefined();
+	} );
+} );

package/src/components/block-styles/use-styles-for-block.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	cloneBlock,
+	getBlockType,
+	getBlockFromExample,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ *
+ * @param {WPBlock}     block Block object.
+ * @param {WPBlockType} type  Block type settings.
+ * @return {WPBlock}          A generic block ready for styles preview.
+ */
+function useGenericPreviewBlock( block, type ) {
+	return useMemo( () => {
+		const example = type?.example;
+		const blockName = type?.name;
+
+		if ( example && blockName ) {
+			return getBlockFromExample( blockName, {
+				attributes: example.attributes,
+				innerBlocks: example.innerBlocks,
+			} );
+		}
+
+		if ( block ) {
+			return cloneBlock( block );
+		}
+	}, [ type?.example ? block?.name : block, type ] );
+}
+
+/**
+ * @typedef useStylesForBlocksArguments
+ * @property {string}     clientId Block client ID.
+ * @property {() => void} onSwitch Block style switch callback function.
+ */
+
+/**
+ *
+ * @param {useStylesForBlocksArguments} useStylesForBlocks arguments.
+ * @return {Object}                                         Results of the select methods.
+ */
+export default function useStylesForBlocks( { clientId, onSwitch } ) {
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+
+		if ( ! block ) {
+			return {};
+		}
+		const blockType = getBlockType( block.name );
+		const { getBlockStyles } = select( blocksStore );
+
+		return {
+			block,
+			blockType,
+			styles: getBlockStyles( block.name ),
+			className: block.attributes.className || '',
+		};
+	};
+	const { styles, block, blockType, className } = useSelect( selector, [
+		clientId,
+	] );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const stylesToRender = getRenderedStyles( styles );
+	const activeStyle = getActiveStyle( stylesToRender, className );
+	const genericPreviewBlock = useGenericPreviewBlock( block, blockType );
+
+	const onSelect = ( style ) => {
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			style
+		);
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+		onSwitch();
+	};
+
+	return {
+		onSelect,
+		stylesToRender,
+		activeStyle,
+		genericPreviewBlock,
+		className,
+	};
+}

package/src/components/block-styles/utils.js

@@ -6,6 +6,7 @@ import { find } from 'lodash';
  * WordPress dependencies
  */
 import TokenList from '@wordpress/token-list';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Returns the active style from the given className.
@@ -51,3 +52,41 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
 
 	return list.value;
 }
+
+/**
+ * Returns a collection of styles that can be represented on the frontend.
+ * The function checks a style collection for a default style. If none is found, it adds one to
+ * act as a fallback for when there is no active style applied to a block. The default item also serves
+ * as a switch on the frontend to deactivate non-default styles.
+ *
+ * @param {Array} styles Block style variations.
+ *
+ * @return {Array<Object?>}        The style collection.
+ */
+export function getRenderedStyles( styles ) {
+	if ( ! styles || styles.length === 0 ) {
+		return [];
+	}
+
+	return getDefaultStyle( styles )
+		? styles
+		: [
+				{
+					name: 'default',
+					label: _x( 'Default', 'block style' ),
+					isDefault: true,
+				},
+				...styles,
+		  ];
+}
+
+/**
+ * Returns a style object from a collection of styles where that style object is the default block style.
+ *
+ * @param {Array} styles Block style variations.
+ *
+ * @return {Object?}        The default style object, if found.
+ */
+export function getDefaultStyle( styles ) {
+	return find( styles, 'isDefault' );
+}

package/src/components/block-switcher/block-styles-menu.js

@@ -3,56 +3,21 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import {
-	cloneBlock,
-	getBlockFromExample,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import BlockStyles from '../block-styles';
-import PreviewBlockPopover from './preview-block-popover';
+import BlockStylesMenuItems from '../block-styles/menu-items';
 
 export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
-	const { name, clientId } = hoveredBlock;
-	const [ hoveredClassName, setHoveredClassName ] = useState();
-	const blockType = useSelect(
-		( select ) => select( blocksStore ).getBlockType( name ),
-		[ name ]
-	);
+	const { clientId } = hoveredBlock;
 
 	return (
 		<MenuGroup
 			label={ __( 'Styles' ) }
 			className="block-editor-block-switcher__styles__menugroup"
 		>
-			{ hoveredClassName && (
-				<PreviewBlockPopover
-					blocks={
-						blockType && blockType.example
-							? getBlockFromExample( blockType.name, {
-									attributes: {
-										...blockType.example.attributes,
-										className: hoveredClassName,
-									},
-									innerBlocks: blockType.example.innerBlocks,
-							  } )
-							: cloneBlock( hoveredBlock, {
-									className: hoveredClassName,
-							  } )
-					}
-				/>
-			) }
-			<BlockStyles
-				clientId={ clientId }
-				onSwitch={ onSwitch }
-				onHoverClassName={ setHoveredClassName }
-				itemRole="menuitem"
-			/>
+			<BlockStylesMenuItems clientId={ clientId } onSwitch={ onSwitch } />
 		</MenuGroup>
 	);
 }

package/src/components/block-tools/back-compat.js

@@ -22,6 +22,7 @@ export default function BlockToolsBackCompat( { children } ) {
 
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
+		since: '5.8',
 	} );
 
 	return (

package/src/components/block-tools/block-selection-button.js

@@ -194,7 +194,13 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				let nextTabbable;
 
 				if ( navigateDown ) {
-					nextTabbable = focus.tabbable.findNext( blockElement );
+					nextTabbable = blockElement;
+					do {
+						nextTabbable = focus.tabbable.findNext( nextTabbable );
+					} while (
+						nextTabbable &&
+						blockElement.contains( nextTabbable )
+					);
 
 					if ( ! nextTabbable ) {
 						nextTabbable =

package/src/components/block-tools/insertion-point.js

@@ -32,7 +32,7 @@ function InsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -195,6 +195,14 @@ function InsertionPointPopover( {
 		}
 	}
 
+	function maybeHideInserterPoint( event ) {
+		// Only hide the inserter if it's triggered on the wrapper,
+		// and the inserter is not open.
+		if ( event.target === ref.current && ! openRef.current ) {
+			hideInsertionPoint();
+		}
+	}
+
 	// Only show the in-between inserter between blocks, so when there's a
 	// previous and a next element.
 	const showInsertionPointInserter =
@@ -309,6 +317,7 @@ function InsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': showInsertionPointInserter,
 				} ) }
+				onHoverEnd={ maybeHideInserterPoint }
 				style={ style }
 			>
 				<motion.div

package/src/components/block-types-list/index.native.js

@@ -34,10 +34,13 @@ export default function BlockTypesList( {
 	const [ maxWidth, setMaxWidth ] = useState();
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onLayout );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onLayout
+		);
 		onLayout();
 		return () => {
-			Dimensions.removeEventListener( 'change', onLayout );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/components/border-radius-control/style.scss

@@ -2,7 +2,7 @@
 	margin-bottom: $grid-unit-15;
 
 	legend {
-		padding-bottom: $grid-unit-05;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.components-border-radius-control__wrapper {

package/src/components/border-style-control/style.scss

@@ -7,7 +7,6 @@
 
 	.components-border-style-control__buttons {
 		display: inline-flex;
-		margin-bottom: $grid-unit-30;
 
 		.components-button.has-icon {
 			min-width: 30px;

package/src/components/button-block-appender/index.js

@@ -90,6 +90,7 @@ function ButtonBlockAppender(
 export const ButtonBlockerAppender = forwardRef( ( props, ref ) => {
 	deprecated( `wp.blockEditor.ButtonBlockerAppender`, {
 		alternative: 'wp.blockEditor.ButtonBlockAppender',
+		since: '5.9',
 	} );
 
 	return ButtonBlockAppender( props, ref );

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -40,6 +40,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-6 {
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+}
+
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -56,11 +61,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.emotion-6>*+*:not( marquee ) {
+.emotion-8>*+*:not( marquee ) {
   margin-top: calc(4px * 3);
 }
 
-.emotion-6>* {
+.emotion-8>* {
   min-height: 0;
 }
 
@@ -81,14 +86,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             className="block-editor-color-gradient-control__color-indicator"
           >
             <span
-              className="components-base-control__label"
+              className="components-base-control__label emotion-6 emotion-7"
             >
               Test Color
             </span>
           </div>
         </legend>
         <div
-          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
           data-wp-c16t={true}
           data-wp-component="VStack"
         >
@@ -145,7 +150,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   fill="#000"
                   focusable={false}
                   height={24}
-                  role="img"
                   viewBox="0 0 24 24"
                   width={24}
                   xmlns="http://www.w3.org/2000/svg"

package/src/components/colors-gradients/dropdown.js

@@ -41,51 +41,56 @@ export default function ColorGradientSettingsDropdown( {
 			isSeparated
 			className="block-editor-panel-color-gradient-settings__item-group"
 		>
-			{ settings.map( ( setting, index ) => (
-				<Dropdown
-					key={ index }
-					position={ dropdownPosition }
-					className="block-editor-panel-color-gradient-settings__dropdown"
-					contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
-					renderToggle={ ( { isOpen, onToggle } ) => {
-						return (
-							<Item
-								onClick={ onToggle }
-								className={ classnames(
-									'block-editor-panel-color-gradient-settings__item',
-									{ 'is-open': isOpen }
-								) }
-							>
-								<HStack justify="flex-start">
-									<ColorIndicator
-										className="block-editor-panel-color-gradient-settings__color-indicator"
-										colorValue={
-											setting.gradientValue ??
-											setting.colorValue
-										}
-									/>
-									<FlexItem>{ setting.label }</FlexItem>
-								</HStack>
-							</Item>
-						);
-					} }
-					renderContent={ () => (
-						<ColorGradientControl
-							showTitle={ false }
-							{ ...{
-								colors,
-								gradients,
-								disableCustomColors,
-								disableCustomGradients,
-								__experimentalHasMultipleOrigins,
-								__experimentalIsRenderedInSidebar,
-								enableAlpha,
-								...setting,
+			{ settings.map(
+				( setting, index ) =>
+					setting && (
+						<Dropdown
+							key={ index }
+							position={ dropdownPosition }
+							className="block-editor-panel-color-gradient-settings__dropdown"
+							contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+							renderToggle={ ( { isOpen, onToggle } ) => {
+								return (
+									<Item
+										onClick={ onToggle }
+										className={ classnames(
+											'block-editor-panel-color-gradient-settings__item',
+											{ 'is-open': isOpen }
+										) }
+									>
+										<HStack justify="flex-start">
+											<ColorIndicator
+												className="block-editor-panel-color-gradient-settings__color-indicator"
+												colorValue={
+													setting.gradientValue ??
+													setting.colorValue
+												}
+											/>
+											<FlexItem>
+												{ setting.label }
+											</FlexItem>
+										</HStack>
+									</Item>
+								);
 							} }
+							renderContent={ () => (
+								<ColorGradientControl
+									showTitle={ false }
+									{ ...{
+										colors,
+										gradients,
+										disableCustomColors,
+										disableCustomGradients,
+										__experimentalHasMultipleOrigins,
+										__experimentalIsRenderedInSidebar,
+										enableAlpha,
+										...setting,
+									} }
+								/>
+							) }
 						/>
-					) }
-				/>
-			) ) }
+					)
+			) }
 		</ItemGroup>
 	);
 }

package/src/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -14,13 +14,18 @@ import { useMemo } from '@wordpress/element';
  */
 import { blockSettingsScreens } from '../block-settings';
 
-export default function PanelColorGradientSettings( { settings, title } ) {
+export default function PanelColorGradientSettings( {
+	settings,
+	title,
+	children,
+} ) {
 	const navigation = useNavigation();
 
 	const mappedSettings = useMemo( () => {
 		return settings.map(
 			( {
 				onColorChange,
+				onColorCleared,
 				colorValue,
 				onGradientChange,
 				gradientValue,
@@ -33,6 +38,7 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 							colorValue: gradientValue || colorValue,
 							gradientValue,
 							onGradientChange,
+							onColorCleared,
 							label,
 						} );
 					} }
@@ -44,5 +50,10 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 		);
 	}, [ settings ] );
 
-	return <PanelBody title={ title }>{ mappedSettings }</PanelBody>;
+	return (
+		<>
+			<PanelBody title={ title }>{ mappedSettings }</PanelBody>
+			<PanelBody>{ children }</PanelBody>
+		</>
+	);
 }

package/src/components/colors-gradients/style.scss

@@ -5,13 +5,18 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-	.component-color-indicator {
-		vertical-align: text-bottom;
-	}
+	.block-editor-panel-color-gradient-settings__panel-title {
+		display: flex;
+		gap: $grid-unit-10;
 
-	&__panel-title {
 		.component-color-indicator {
-			display: inline-block;
+			width: $grid-unit-15;
+			height: $grid-unit-15;
+			align-self: center;
+
+			&:first-child {
+				margin-left: $grid-unit-15;
+			}
 		}
 	}
 

package/src/components/colors-gradients/tools-panel-color-dropdown.js

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from './control';
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+
+export default function ToolsPanelColorDropdown( {
+	settings,
+	enableAlpha,
+	...otherProps
+} ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const controlSettings = {
+		...colorGradientSettings,
+		clearable: false,
+		enableAlpha,
+		label: settings.label,
+		onColorChange: settings.onColorChange,
+		onGradientChange: settings.onGradientChange,
+		colorValue: settings.colorValue,
+		gradientValue: settings.gradientValue,
+	};
+	const selectedColor = settings.gradientValue ?? settings.colorValue;
+
+	return (
+		<ToolsPanelItem
+			hasValue={ settings.hasValue }
+			label={ settings.label }
+			onDeselect={ settings.onDeselect }
+			isShownByDefault={ settings.isShownByDefault }
+			resetAllFilter={ settings.resetAllFilter }
+			{ ...otherProps }
+			className="block-editor-tools-panel-color-gradient-settings__item"
+		>
+			<Dropdown
+				className="block-editor-tools-panel-color-dropdown"
+				contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						className={ classnames(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						) }
+					>
+						<HStack justify="flex-start">
+							<ColorIndicator
+								className="block-editor-panel-color-gradient-settings__color-indicator"
+								colorValue={ selectedColor }
+							/>
+							<FlexItem>{ settings.label }</FlexItem>
+						</HStack>
+					</Button>
+				) }
+				renderContent={ () => (
+					<ColorGradientControl
+						showTitle={ false }
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
+						enableAlpha
+						{ ...controlSettings }
+					/>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}