@wordpress/block-editor 8.0.11 → 8.0.12-next.33ec3857e2.0

package/src/components/block-styles/preview-panel.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterPreviewPanel from '../inserter/preview-panel';
+import { replaceActiveStyle } from './utils';
+
+export default function BlockStylesPreviewPanel( {
+	genericPreviewBlock,
+	style,
+	className,
+	activeStyle,
+} ) {
+	const styleClassName = replaceActiveStyle( className, activeStyle, style );
+	const previewBlocks = useMemo( () => {
+		return {
+			...genericPreviewBlock,
+			title: style.label || style.name,
+			description: style.description,
+			initialAttributes: {
+				...genericPreviewBlock.attributes,
+				className:
+					styleClassName +
+					' block-editor-block-styles__block-preview-container',
+			},
+		};
+	}, [ genericPreviewBlock, styleClassName ] );
+
+	return (
+		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
+	);
+}

package/src/components/block-styles/style.scss

@@ -1,67 +1,75 @@
-.block-editor-block-styles {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+.block-editor-block-styles + .default-style-picker__default-switcher {
+	margin-top: $grid-unit-20;
 }
 
-.block-editor-block-styles__item {
-	width: calc(50% - #{ $grid-unit-05 });
-	margin: $grid-unit-05 0;
-	flex-shrink: 0;
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: $radius-block-ui;
-	padding: $grid-unit-05 * 1.5;
-	display: flex;
-	flex-direction: column;
-
-	&:focus {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.block-editor-block-styles__preview-panel {
+	display: none;
+	position: absolute;
+	right: $grid-unit-20;
+	left: auto;
+	// Same layer as the sidebar from which it's triggered.
+	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+	// Only show in narrow widths.
+	@include break-medium() {
+		display: block;
 	}
 
-	&:hover .block-editor-block-styles__item-preview {
-		border-color: var(--wp-admin-theme-color);
+	// Overrides for InserterPreviewPanel.
+	.block-editor-inserter__preview-container {
+		left: auto;
+		right: auto;
+		top: auto;
+		position: static;
 	}
 
-	&.is-active {
-		.block-editor-block-styles__item-label {
-			font-weight: bold;
-		}
-
-		.block-editor-block-styles__item-preview {
-			margin: 0;
-			border: 2px solid $gray-900;
-		}
+	.block-editor-block-card__title.block-editor-block-card__title {
+		margin: 0;
 	}
-
-	.block-editor-block-preview__container {
-		cursor: inherit;
+	.block-editor-block-icon {
+		display: none;
 	}
 }
 
-// Show a little preview thumbnail for style variations.
-.block-editor-block-styles__item-preview {
-	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
-	padding: 0;
-	margin: 2px;
-	border-radius: $radius-block-ui;
+.block-editor-block-styles__variants {
 	display: flex;
-	overflow: hidden;
-	background: $white;
-	align-items: center;
-	flex-grow: 1;
-	min-height: 80px;
-	max-height: 160px;
-}
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+
+	.block-editor-block-styles__item {
+		color: $gray-800;
+		box-shadow: inset 0 0 0 1px $gray-400;
+		display: inline-block;
+		width: calc(50% - #{$grid-unit-05});
+
+		&:focus,
+		&:hover {
+			color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+		}
+
+		&.is-active,
+		&.is-active:hover {
+			background-color: $gray-800;
+			box-shadow: none;
+		}
+
+		&.is-active .block-editor-block-styles__item-text,
+		&.is-active:hover .block-editor-block-styles__item-text {
+			color: $white;
+		}
 
-.block-editor-block-switcher__styles__menugroup {
-	position: relative;
+		&.is-active:focus {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
+		}
+	}
 }
 
-.block-editor-block-styles__item-label {
-	text-align: center;
-	padding: 4px 0;
+// To prevent overflow in the preview container,
+// ensure that block contents' margin and padding
+// do not add to the block container's width.
+.block-editor-block-styles__block-preview-container,
+.block-editor-block-styles__block-preview-container * {
+	box-sizing: border-box !important;
 }

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/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/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/colors-gradients/panel-color-gradient-settings.js

@@ -7,8 +7,17 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { PanelBody, ColorIndicator } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	FlexItem,
+	ColorIndicator,
+	PanelBody,
+	Dropdown,
+} from '@wordpress/components';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -127,6 +136,13 @@ export const PanelColorGradientSettingsInner = ( {
 		</span>
 	);
 
+	let dropdownPosition;
+	let popoverProps;
+	if ( __experimentalIsRenderedInSidebar ) {
+		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
+		popoverProps = { __unstableForcePosition: true };
+	}
+
 	return (
 		<PanelBody
 			className={ classnames(
@@ -136,23 +152,63 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			{ settings.map( ( setting, index ) => (
-				<ColorGradientControl
-					showTitle={ showTitle }
-					key={ index }
-					{ ...{
-						colors,
-						gradients,
-						disableCustomColors,
-						disableCustomGradients,
-						__experimentalHasMultipleOrigins,
-						__experimentalIsRenderedInSidebar,
-						enableAlpha,
-						...setting,
-					} }
-				/>
-			) ) }
-			{ children }
+			<ItemGroup
+				isBordered
+				isSeparated
+				className="block-editor-panel-color-gradient-settings__item-group"
+			>
+				{ settings.map( ( setting, index ) => (
+					<Dropdown
+						position={ dropdownPosition }
+						popoverProps={ popoverProps }
+						className="block-editor-panel-color-gradient-settings__dropdown"
+						key={ index }
+						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>
+			{ !! children && (
+				<>
+					<Spacer marginY={ 4 } /> { children }
+				</>
+			) }
 		</PanelBody>
 	);
 };

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

@@ -5,13 +5,14 @@
 }
 
 .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-15;
 
-	&__panel-title {
 		.component-color-indicator {
-			display: inline-block;
+			width: $grid-unit-15;
+			height: $grid-unit-15;
+			align-self: center;
 		}
 	}
 
@@ -37,4 +38,40 @@
 	.block-editor-block-inspector & .components-base-control {
 		margin-bottom: inherit;
 	}
+
+	.block-editor-panel-color-gradient-settings__dropdown {
+		display: block;
+	}
+}
+
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+	& > div {
+		width: $sidebar-width;
+	}
+}
+
+@include break-medium() {
+	.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+	}
 }
+
+.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
+	border-bottom-width: 0;
+}
+
+.block-editor-panel-color-gradient-settings__item {
+	padding-top: $grid-unit-15 !important;
+	padding-bottom: $grid-unit-15 !important;
+	.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%);
+	}
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+