@wordpress/block-editor 9.1.0 → 9.4.0

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

@@ -12,8 +12,6 @@ import {
 	Dropdown,
 	FlexItem,
 	__experimentalHStack as HStack,
-	__experimentalItem as Item,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
@@ -22,46 +20,34 @@ import {
  */
 import ColorGradientControl from './control';
 
-// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
-// `ItemGroup` allowing for a standalone group of controls to be
-// rendered semantically.
-const WithItemGroup = ( { __experimentalIsItemGroup, children } ) => {
-	if ( ! __experimentalIsItemGroup ) {
-		return children;
-	}
-
-	return (
-		<ItemGroup
-			isBordered
-			isSeparated
-			className="block-editor-panel-color-gradient-settings__item-group"
-		>
-			{ children }
-		</ItemGroup>
-	);
-};
-
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
-const WithToolsPanelItem = ( {
-	__experimentalIsItemGroup,
-	settings,
-	children,
-	...props
-} ) => {
-	if ( __experimentalIsItemGroup ) {
-		return children;
-	}
-
+const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
+	const clearValue = () => {
+		if ( setting.colorValue ) {
+			setting.onColorChange();
+		} else if ( setting.gradientValue ) {
+			setting.onGradientChange();
+		}
+	};
 	return (
 		<ToolsPanelItem
-			hasValue={ settings.hasValue }
-			label={ settings.label }
-			onDeselect={ settings.onDeselect }
-			isShownByDefault={ settings.isShownByDefault }
-			resetAllFilter={ settings.resetAllFilter }
+			hasValue={ () => {
+				return !! setting.colorValue || !! setting.gradientValue;
+			} }
+			label={ setting.label }
+			onDeselect={ clearValue }
+			isShownByDefault={
+				setting.isShownByDefault !== undefined
+					? setting.isShownByDefault
+					: true
+			}
 			{ ...props }
 			className="block-editor-tools-panel-color-gradient-settings__item"
+			panelId={ panelId }
+			// Pass resetAllFilter if supplied due to rendering via SlotFill
+			// into parent ToolsPanel.
+			resetAllFilter={ setting.resetAllFilter }
 		>
 			{ children }
 		</ToolsPanelItem>
@@ -81,26 +67,29 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
-const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
-	const { __experimentalIsItemGroup, colorValue, label } = settings;
+const renderToggle =
+	( settings ) =>
+	( { onToggle, isOpen } ) => {
+		const { colorValue, label } = settings;
 
-	// Determine component, `Item` or `Button`, to wrap color indicator with.
-	const ToggleComponent = __experimentalIsItemGroup ? Item : Button;
-	const toggleClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__item'
-		: 'block-editor-panel-color-gradient-settings__dropdown';
-	const toggleProps = {
-		onClick: onToggle,
-		className: classnames( toggleClassName, { 'is-open': isOpen } ),
-		'aria-expanded': __experimentalIsItemGroup ? undefined : isOpen,
-	};
+		const toggleProps = {
+			onClick: onToggle,
+			className: classnames(
+				'block-editor-panel-color-gradient-settings__dropdown',
+				{ 'is-open': isOpen }
+			),
+			'aria-expanded': isOpen,
+		};
 
-	return (
-		<ToggleComponent { ...toggleProps }>
-			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</ToggleComponent>
-	);
-};
+		return (
+			<Button { ...toggleProps }>
+				<LabeledColorIndicator
+					colorValue={ colorValue }
+					label={ label }
+				/>
+			</Button>
+		);
+	};
 
 // Renders a collection of color controls as dropdowns. Depending upon the
 // context in which these dropdowns are being rendered, they may be wrapped
@@ -115,30 +104,25 @@ export default function ColorGradientSettingsDropdown( {
 	disableCustomGradients,
 	enableAlpha,
 	gradients,
-	__experimentalIsItemGroup = true,
 	settings,
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
-	const dropdownClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__dropdown'
-		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
 	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
 		popoverProps = {
 			placement: 'left-start',
 			offset: 36,
+			__unstableShift: true,
 		};
 	}
 
 	return (
-		// Only wrap with `ItemGroup` if these controls are being rendered
-		// semantically.
-		<WithItemGroup __experimentalIsItemGroup={ __experimentalIsItemGroup }>
+		<>
 			{ settings.map( ( setting, index ) => {
 				const controlProps = {
-					clearable: __experimentalIsItemGroup ? undefined : false,
+					clearable: false,
 					colorValue: setting.colorValue,
 					colors,
 					disableCustomColors,
@@ -156,7 +140,6 @@ export default function ColorGradientSettingsDropdown( {
 				};
 				const toggleSettings = {
 					colorValue: setting.gradientValue ?? setting.colorValue,
-					__experimentalIsItemGroup,
 					label: setting.label,
 				};
 
@@ -166,15 +149,12 @@ export default function ColorGradientSettingsDropdown( {
 						// `ToolsPanelItem`
 						<WithToolsPanelItem
 							key={ index }
-							__experimentalIsItemGroup={
-								__experimentalIsItemGroup
-							}
-							settings={ setting }
+							setting={ setting }
 							{ ...props }
 						>
 							<Dropdown
 								popoverProps={ popoverProps }
-								className={ dropdownClassName }
+								className="block-editor-tools-panel-color-gradient-settings__dropdown"
 								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
@@ -185,6 +165,6 @@ export default function ColorGradientSettingsDropdown( {
 					)
 				);
 			} ) }
-		</WithItemGroup>
+		</>
 	);
 }

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

@@ -9,27 +9,19 @@ import { every, isEmpty } from 'lodash';
  */
 import {
 	__experimentalSpacer as Spacer,
-	ColorIndicator,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { useRegistry } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(%s: color %s)' );
-
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -37,55 +29,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const Indicators = ( { colors, gradients, settings } ) => {
-	return settings.map(
-		(
-			{
-				colorValue,
-				gradientValue,
-				label,
-				colors: availableColors,
-				gradients: availableGradients,
-			},
-			index
-		) => {
-			if ( ! colorValue && ! gradientValue ) {
-				return null;
-			}
-			let ariaLabel;
-			if ( colorValue ) {
-				const colorObject = getColorObjectByColorValue(
-					availableColors || colors,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					colorIndicatorAriaLabel,
-					label.toLowerCase(),
-					( colorObject && colorObject.name ) || colorValue
-				);
-			} else {
-				const gradientObject = __experimentalGetGradientObjectByGradientValue(
-					availableGradients || gradients,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					gradientIndicatorAriaLabel,
-					label.toLowerCase(),
-					( gradientObject && gradientObject.name ) || gradientValue
-				);
-			}
-
-			return (
-				<ColorIndicator
-					key={ index }
-					colorValue={ colorValue || gradientValue }
-					aria-label={ ariaLabel }
-				/>
-			);
-		}
-	);
-};
-
 export const PanelColorGradientSettingsInner = ( {
 	className,
 	colors,
@@ -99,8 +42,9 @@ export const PanelColorGradientSettingsInner = ( {
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
-	...props
 } ) => {
+	const panelId = useInstanceId( PanelColorGradientSettingsInner );
+	const { batch } = useRegistry();
 	if (
 		isEmpty( colors ) &&
 		isEmpty( gradients ) &&
@@ -120,28 +64,38 @@ export const PanelColorGradientSettingsInner = ( {
 		return null;
 	}
 
-	const titleElement = (
-		<span className="block-editor-panel-color-gradient-settings__panel-title">
-			{ title }
-			<Indicators
-				colors={ colors }
-				gradients={ gradients }
-				settings={ settings }
-			/>
-		</span>
-	);
-
 	return (
-		<PanelBody
+		<ToolsPanel
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ showTitle ? titleElement : undefined }
-			{ ...props }
+			label={ showTitle ? title : undefined }
+			resetAll={ () => {
+				batch( () => {
+					settings.forEach(
+						( {
+							colorValue,
+							gradientValue,
+							onColorChange,
+							onGradientChange,
+						} ) => {
+							if ( colorValue ) {
+								onColorChange();
+							} else if ( gradientValue ) {
+								onGradientChange();
+							}
+						}
+					);
+				} );
+			} }
+			panelId={ panelId }
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			<ColorGradientSettingsDropdown
 				settings={ settings }
+				panelId={ panelId }
 				{ ...{
 					colors,
 					gradients,
@@ -157,7 +111,7 @@ export const PanelColorGradientSettingsInner = ( {
 					<Spacer marginY={ 4 } /> { children }
 				</>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 };
 

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

@@ -10,25 +10,14 @@
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings {
-	.block-editor-panel-color-gradient-settings__panel-title {
-		display: flex;
-		gap: $grid-unit-10;
-
-		.component-color-indicator {
-			width: $grid-unit-15;
-			height: $grid-unit-15;
-			align-self: center;
-
-			&:first-child {
-				margin-left: $grid-unit-15;
-			}
-		}
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
+	&,
+	& > div:not(:first-of-type) {
+		display: block;
 	}
+}
 
-	&.is-opened &__panel-title .component-color-indicator {
-		display: none;
-	}
+.block-editor-panel-color-gradient-settings {
 
 	// Must equal $color-palette-circle-size from:
 	// @wordpress/components/src/circular-option-picker/style.scss
@@ -49,32 +38,12 @@
 		margin-bottom: inherit;
 	}
 
-	.block-editor-panel-color-gradient-settings__dropdown {
-		display: block;
-	}
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-	width: 100%;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 	width: $sidebar-width;
 }
 
-.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;
-
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
-	}
-}
 
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
@@ -97,6 +66,7 @@
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
 	&.first {
+		margin-top: $grid-unit-30;
 		border-top-left-radius: 2px;
 		border-top-right-radius: 2px;
 		border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -126,3 +96,7 @@
 		}
 	}
 }
+
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}

package/src/components/colors-gradients/test/control.js

@@ -3,22 +3,22 @@
  */
 import { render, screen } from '@testing-library/react';
 import { create, act } from 'react-test-renderer';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
-	element
-) => {
-	return (
-		element.type === 'button' &&
-		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ].startsWith( ariaLabelStart )
-	);
-};
+const noop = () => {};
+
+const getButtonWithAriaLabelStartPredicate =
+	( ariaLabelStart ) => ( element ) => {
+		return (
+			element.type === 'button' &&
+			element.props[ 'aria-label' ] &&
+			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
+		);
+	};
 
 const getTabWithTestPredicate = ( text ) => ( element ) => {
 	return (

package/src/components/convert-to-group-buttons/toolbar.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { group, row, stack } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -20,22 +20,24 @@ const layouts = {
 };
 
 function BlockGroupToolbar() {
-	const {
-		blocksSelection,
-		clientIds,
-		groupingBlockName,
-		isGroupable,
-	} = useConvertToGroupButtonProps();
+	const { blocksSelection, clientIds, groupingBlockName, isGroupable } =
+		useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-	const { canRemove } = useSelect(
+	const { canRemove, variations } = useSelect(
 		( select ) => {
 			const { canRemoveBlocks } = select( blockEditorStore );
+			const { getBlockVariations } = select( blocksStore );
+
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
+				variations: getBlockVariations(
+					groupingBlockName,
+					'transform'
+				),
 			};
 		},
-		[ clientIds ]
+		[ clientIds, groupingBlockName ]
 	);
 
 	const onConvertToGroup = ( layout = 'group' ) => {
@@ -63,6 +65,13 @@ function BlockGroupToolbar() {
 		return null;
 	}
 
+	const canInsertRow = !! variations.find(
+		( { name } ) => name === 'group-row'
+	);
+	const canInsertStack = !! variations.find(
+		( { name } ) => name === 'group-stack'
+	);
+
 	return (
 		<ToolbarGroup>
 			<ToolbarButton
@@ -70,16 +79,20 @@ function BlockGroupToolbar() {
 				label={ _x( 'Group', 'verb' ) }
 				onClick={ onConvertToGroup }
 			/>
-			<ToolbarButton
-				icon={ row }
-				label={ _x( 'Row', 'single horizontal line' ) }
-				onClick={ onConvertToRow }
-			/>
-			<ToolbarButton
-				icon={ stack }
-				label={ _x( 'Stack', 'verb' ) }
-				onClick={ onConvertToStack }
-			/>
+			{ canInsertRow && (
+				<ToolbarButton
+					icon={ row }
+					label={ _x( 'Row', 'single horizontal line' ) }
+					onClick={ onConvertToRow }
+				/>
+			) }
+			{ canInsertStack && (
+				<ToolbarButton
+					icon={ stack }
+					label={ _x( 'Stack', 'verb' ) }
+					onClick={ onConvertToStack }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

package/src/components/copy-handler/README.md

@@ -8,8 +8,13 @@ Concretely, it handles the display of success messages and takes care of copying
 
 ## Table of contents
 
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
+- [Copy Handler](#copy-handler)
+	- [Table of contents](#table-of-contents)
+	- [Development guidelines](#development-guidelines)
+		- [Usage](#usage)
+		- [Props](#props)
+		- [`children`](#children)
+	- [Related components](#related-components)
 
 ## Development guidelines
 

package/src/components/copy-handler/index.js

@@ -10,6 +10,7 @@ import {
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
+	__unstableStripHTML as stripHTML,
 } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -144,10 +145,8 @@ export function useClipboardHandler() {
 					if ( shouldHandleWholeBlocks ) {
 						blocks = getBlocksByClientId( selectedBlockClientIds );
 					} else {
-						const [
-							head,
-							tail,
-						] = __unstableGetSelectedBlocksWithPartialSelection();
+						const [ head, tail ] =
+							__unstableGetSelectedBlocksWithPartialSelection();
 						const inBetweenBlocks = getBlocksByClientId(
 							selectedBlockClientIds.slice(
 								1,
@@ -158,7 +157,10 @@ export function useClipboardHandler() {
 					}
 					const serialized = serialize( blocks );
 
-					event.clipboardData.setData( 'text/plain', serialized );
+					event.clipboardData.setData(
+						'text/plain',
+						toPlainText( serialized )
+					);
 					event.clipboardData.setData( 'text/html', serialized );
 				}
 			}
@@ -178,7 +180,8 @@ export function useClipboardHandler() {
 					return;
 				}
 				const {
-					__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
 				} = getSettings();
 				const { plainText, html } = getPasteEventData( event );
 				const blocks = pasteHandler( {
@@ -213,6 +216,23 @@ function CopyHandler( { children } ) {
 	return <div ref={ useClipboardHandler() }>{ children }</div>;
 }
 
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+	// Manually handle BR tags as line breaks prior to `stripHTML` call
+	html = html.replace( /<br>/g, '\n' );
+
+	const plainText = stripHTML( html ).trim();
+
+	// Merge any consecutive line breaks
+	return plainText.replace( /\n\n+/g, '\n\n' );
+}
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
  */

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

@@ -79,9 +79,8 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } = select(
-			blockEditorStore
-		);
+		const { getBlockCount, getSettings, getTemplateLock } =
+			select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const { bodyPlaceholder } = getSettings();
@@ -93,9 +92,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } = dispatch(
-			blockEditorStore
-		);
+		const { insertDefaultBlock, startTyping } =
+			dispatch( blockEditorStore );
 
 		return {
 			onAppend() {

package/src/components/default-block-appender/index.native.js

@@ -58,12 +58,8 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockCount,
-			getBlockName,
-			isBlockValid,
-			getTemplateLock,
-		} = select( blockEditorStore );
+		const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } =
+			select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const isLastBlockDefault =
@@ -77,9 +73,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } = dispatch(
-			blockEditorStore
-		);
+		const { insertDefaultBlock, startTyping } =
+			dispatch( blockEditorStore );
 
 		return {
 			onAppend() {