@wordpress/block-editor 8.0.13 → 8.1.0

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/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"
         >

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexItem,
+	ColorIndicator,
+	Dropdown,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from './control';
+
+export default function ColorGradientSettingsDropdown( {
+	colors,
+	gradients,
+	disableCustomColors,
+	disableCustomGradients,
+	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
+	enableAlpha,
+	settings,
+} ) {
+	let dropdownPosition;
+	if ( __experimentalIsRenderedInSidebar ) {
+		dropdownPosition = 'bottom left';
+	}
+
+	return (
+		<ItemGroup
+			isBordered
+			isSeparated
+			className="block-editor-panel-color-gradient-settings__item-group"
+		>
+			{ 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>
+	);
+}