@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -10,27 +10,19 @@ import { every, isEmpty } from 'lodash';
 import { useState } from '@wordpress/element';
 import {
 	BaseControl,
-	Button,
-	ButtonGroup,
-	ColorIndicator,
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(Color: %s)' );
-
-// translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-const gradientIndicatorAriaLabel = __( '(Gradient: %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -38,50 +30,12 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-function VisualLabel( {
-	colors,
-	gradients,
-	label,
-	currentTab,
-	colorValue,
-	gradientValue,
-} ) {
-	let value, ariaLabel;
-	if ( currentTab === 'color' ) {
-		if ( colorValue ) {
-			value = colorValue;
-			const colorObject = getColorObjectByColorValue( colors, value );
-			const colorName = colorObject && colorObject.name;
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
-	} else if ( currentTab === 'gradient' && gradientValue ) {
-		value = gradientValue;
-		const gradientObject = __experimentalGetGradientObjectByGradientValue(
-			gradients,
-			value
-		);
-		const gradientName = gradientObject && gradientObject.name;
-		ariaLabel = sprintf(
-			gradientIndicatorAriaLabel,
-			gradientName || value
-		);
-	}
-
-	return (
-		<>
-			{ label }
-			{ !! value && (
-				<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />
-			) }
-		</>
-	);
-}
-
 function ColorGradientControlInner( {
 	colors,
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
+	__experimentalHasMultipleOrigins,
 	className,
 	label,
 	onColorChange,
@@ -89,6 +43,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	gradientValue,
 	clearable,
+	showTitle = true,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -110,66 +65,71 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<legend>
-					<div className="block-editor-color-gradient-control__color-indicator">
-						<BaseControl.VisualLabel>
-							<VisualLabel
-								currentTab={ currentTab }
-								label={ label }
-								colorValue={ colorValue }
-								gradientValue={ gradientValue }
-							/>
-						</BaseControl.VisualLabel>
-					</div>
-				</legend>
-				{ canChooseAColor && canChooseAGradient && (
-					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
-						<Button
-							isSmall
-							isPressed={ currentTab === 'color' }
-							onClick={ () => setCurrentTab( 'color' ) }
-						>
-							{ __( 'Solid' ) }
-						</Button>
-						<Button
-							isSmall
-							isPressed={ currentTab === 'gradient' }
-							onClick={ () => setCurrentTab( 'gradient' ) }
+				<VStack spacing={ 1 }>
+					{ showTitle && (
+						<legend>
+							<div className="block-editor-color-gradient-control__color-indicator">
+								<BaseControl.VisualLabel>
+									{ label }
+								</BaseControl.VisualLabel>
+							</div>
+						</legend>
+					) }
+					{ canChooseAColor && canChooseAGradient && (
+						<ToggleGroupControl
+							value={ currentTab }
+							onChange={ setCurrentTab }
+							label={ __( 'Select color type' ) }
+							hideLabelFromVision
+							isBlock
 						>
-							{ __( 'Gradient' ) }
-						</Button>
-					</ButtonGroup>
-				) }
-				{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-					<ColorPalette
-						value={ colorValue }
-						onChange={
-							canChooseAGradient
-								? ( newColor ) => {
-										onColorChange( newColor );
-										onGradientChange();
-								  }
-								: onColorChange
-						}
-						{ ...{ colors, disableCustomColors } }
-						clearable={ clearable }
-					/>
-				) }
-				{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-					<GradientPicker
-						value={ gradientValue }
-						onChange={
-							canChooseAColor
-								? ( newGradient ) => {
-										onGradientChange( newGradient );
-										onColorChange();
-								  }
-								: onGradientChange
-						}
-						{ ...{ gradients, disableCustomGradients } }
-						clearable={ clearable }
-					/>
-				) }
+							<ToggleGroupControlOption
+								value="color"
+								label={ __( 'Solid' ) }
+							/>
+							<ToggleGroupControlOption
+								value="gradient"
+								label={ __( 'Gradient' ) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
+						<ColorPalette
+							value={ colorValue }
+							onChange={
+								canChooseAGradient
+									? ( newColor ) => {
+											onColorChange( newColor );
+											onGradientChange();
+									  }
+									: onColorChange
+							}
+							{ ...{ colors, disableCustomColors } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							clearable={ clearable }
+						/>
+					) }
+					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
+						<GradientPicker
+							value={ gradientValue }
+							onChange={
+								canChooseAColor
+									? ( newGradient ) => {
+											onGradientChange( newGradient );
+											onColorChange();
+									  }
+									: onGradientChange
+							}
+							{ ...{ gradients, disableCustomGradients } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							clearable={ clearable }
+						/>
+					) }
+				</VStack>
 			</fieldset>
 		</BaseControl>
 	);

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

@@ -9,6 +9,7 @@ import { every, isEmpty } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -89,6 +90,8 @@ export const PanelColorGradientSettingsInner = ( {
 	children,
 	settings,
 	title,
+	showTitle = true,
+	__experimentalHasMultipleOrigins,
 	...props
 } ) => {
 	if (
@@ -120,23 +123,26 @@ export const PanelColorGradientSettingsInner = ( {
 			/>
 		</span>
 	);
+
 	return (
 		<PanelBody
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ titleElement }
+			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
 			{ settings.map( ( setting, index ) => (
 				<ColorGradientControl
+					showTitle={ showTitle }
 					key={ index }
 					{ ...{
 						colors,
 						gradients,
 						disableCustomColors,
 						disableCustomGradients,
+						__experimentalHasMultipleOrigins,
 						...setting,
 					} }
 				/>
@@ -146,14 +152,77 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSelect = ( props ) => {
-	const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+	return {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
+}
+
+const PanelColorGradientSettingsSingleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
 	colorGradientSettings.colors = useSetting( 'color.palette' );
 	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
-		'color.customGradient'
+	return (
+		<PanelColorGradientSettingsInner
+			{ ...{ ...colorGradientSettings, ...props } }
+		/>
 	);
+};
+
+const PanelColorGradientSettingsMultipleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const userColors = useSetting( 'color.palette.user' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const coreColors = useSetting( 'color.palette.core' );
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( coreColors && coreColors.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				colors: coreColors,
+			} );
+		}
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				colors: themeColors,
+			} );
+		}
+		if ( userColors && userColors.length ) {
+			result.push( {
+				name: __( 'User' ),
+				colors: userColors,
+			} );
+		}
+		return result;
+	}, [ coreColors, themeColors, userColors ] );
+
+	const userGradients = useSetting( 'color.gradients.user' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const coreGradients = useSetting( 'color.gradients.core' );
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( coreGradients && coreGradients.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				gradients: coreGradients,
+			} );
+		}
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				gradients: themeGradients,
+			} );
+		}
+		if ( userGradients && userGradients.length ) {
+			result.push( {
+				name: __( 'User' ),
+				gradients: userGradients,
+			} );
+		}
+		return result;
+	}, [ userGradients, themeGradients, coreGradients ] );
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -167,7 +236,10 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	return <PanelColorGradientSettingsSelect { ...props } />;
+	if ( props.__experimentalHasMultipleOrigins ) {
+		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
+	}
+	return <PanelColorGradientSettingsSingleSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;

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

@@ -2,11 +2,6 @@
 	.block-editor-color-gradient-control__color-indicator {
 		margin-bottom: $grid-unit-15;
 	}
-
-	.block-editor-color-gradient-control__button-tabs {
-		display: block;
-		margin-bottom: $grid-unit-15;
-	}
 }
 
 .block-editor-panel-color-gradient-settings {
@@ -28,21 +23,18 @@
 	// @wordpress/components/src/circular-option-picker/style.scss
 	$swatch-size: 28px;
 
-	// Optimize fit of six swatches per line using calc() to create variable
-	// spacing that mimics a "justified/space-between" layout and works with
-	// or without scrollbars
 	@media screen and (min-width: $break-medium) {
-		// Overrides the default negative margin
 		.components-circular-option-picker__swatches {
-			margin-right: 0;
-		}
-		// Figures the spacing
-		.components-circular-option-picker__option-wrapper {
-			margin-right: calc((100% - (#{$swatch-size} * 6)) / 5);
-		}
-		// Removes the right margin on every sixth swatch
-		.components-circular-option-picker__option-wrapper:nth-child(6n + 6) {
-			margin-right: 0;
+			display: grid;
+			grid-template-columns: repeat(6, $swatch-size);
+			justify-content: space-between;
 		}
 	}
+
+	// This shouldn't be needed but there's a rule in the inspector controls
+	// overriding this causing too much spacing.
+	// That generic rule should ideally be removed.
+	.block-editor-block-inspector & .components-base-control {
+		margin-bottom: inherit;
+	}
 }

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { render, screen } from '@testing-library/react';
 import { create, act } from 'react-test-renderer';
 import { noop } from 'lodash';
 
@@ -9,85 +10,64 @@ import { noop } from 'lodash';
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithTestPredicate = ( text ) => ( element ) => {
+const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
+	element
+) => {
 	return (
 		element.type === 'button' &&
-		element.children[ 0 ] === text &&
-		element.children.length === 1
+		element.props[ 'aria-label' ] &&
+		element.props[ 'aria-label' ].startsWith( ariaLabelStart )
 	);
 };
 
-const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
-	element
-) => {
+const getTabWithTestPredicate = ( text ) => ( element ) => {
 	return (
 		element.type === 'button' &&
 		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ].startsWith( ariaLabelStart )
+		element.props[ 'aria-label' ] === text
 	);
 };
 
-const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getButtonWithTestPredicate( 'Gradient' );
+const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
+const gradientTabButtonPredicate = getTabWithTestPredicate( 'Gradient' );
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [
-						{ color: '#f00', name: 'red' },
-						{ color: '#0f0', name: 'green' },
-					] }
-					gradients={ [
-						{
-							gradient:
-								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
-							name: 'Vivid cyan blue to vivid purple',
-							slug: 'vivid-cyan-blue-to-vivid-purple',
-						},
-						{
-							gradient:
-								'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-							name: 'Light green cyan to vivid green cyan',
-							slug: 'light-green-cyan-to-vivid-green-cyan',
-						},
-					] }
-					disableCustomColors={ false }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [
+					{
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+				] }
+				disableCustomColors={ false }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			1
-		);
-		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 1 );
+		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
+		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.type === 'button' &&
-					element.props &&
-					element.props[ 'aria-label' ] &&
-					element.props[ 'aria-label' ].startsWith( 'Color:' )
-			)
-		).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -125,11 +105,6 @@ describe( 'ColorPaletteControl', () => {
 				getButtonWithAriaLabelStartPredicate( 'Color:' )
 			)
 		).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {

package/src/components/contrast-checker/index.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -11,14 +13,16 @@ import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 
+extend( [ namesPlugin, a11yPlugin ] );
+
 function ContrastCheckerMessage( {
-	tinyBackgroundColor,
-	tinyTextColor,
+	colordBackgroundColor,
+	colordTextColor,
 	backgroundColor,
 	textColor,
 } ) {
 	const msg =
-		tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness()
+		colordBackgroundColor.brightness() < colordTextColor.brightness()
 			? __(
 					'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
 			  )
@@ -61,16 +65,16 @@ function ContrastChecker( {
 	) {
 		return null;
 	}
-	const tinyBackgroundColor = tinycolor(
+	const colordBackgroundColor = colord(
 		backgroundColor || fallbackBackgroundColor
 	);
-	const tinyTextColor = tinycolor( textColor || fallbackTextColor );
+	const colordTextColor = colord( textColor || fallbackTextColor );
 	const hasTransparency =
-		tinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;
+		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
 
 	if (
 		hasTransparency ||
-		tinycolor.isReadable( tinyBackgroundColor, tinyTextColor, {
+		colordTextColor.isReadable( colordBackgroundColor, {
 			level: 'AA',
 			size:
 				isLargeText || ( isLargeText !== false && fontSize >= 24 )
@@ -85,8 +89,8 @@ function ContrastChecker( {
 		<ContrastCheckerMessage
 			backgroundColor={ backgroundColor }
 			textColor={ textColor }
-			tinyBackgroundColor={ tinyBackgroundColor }
-			tinyTextColor={ tinyTextColor }
+			colordBackgroundColor={ colordBackgroundColor }
+			colordTextColor={ colordTextColor }
 		/>
 	);
 }

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

@@ -31,7 +31,7 @@ export function useNotifyCopy() {
 		let notice = '';
 		if ( selectedBlockClientIds.length === 1 ) {
 			const clientId = selectedBlockClientIds[ 0 ];
-			const { title } = getBlockType( getBlockName( clientId ) );
+			const title = getBlockType( getBlockName( clientId ) )?.title;
 			notice =
 				eventType === 'copy'
 					? sprintf(
@@ -113,6 +113,7 @@ export function useClipboardHandler() {
 				return;
 			}
 
+			const eventDefaultPrevented = event.defaultPrevented;
 			event.preventDefault();
 
 			if ( event.type === 'copy' || event.type === 'cut' ) {
@@ -130,6 +131,10 @@ export function useClipboardHandler() {
 			if ( event.type === 'cut' ) {
 				removeBlocks( selectedBlockClientIds );
 			} else if ( event.type === 'paste' ) {
+				if ( eventDefaultPrevented ) {
+					// This was likely already handled in rich-text/use-paste-handler.js
+					return;
+				}
 				const {
 					__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
 				} = getSettings();

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

@@ -59,8 +59,8 @@ export function DefaultBlockAppender( {
 				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
 				aria-label={ __( 'Add block' ) }
-				// The wp-block className is important for editor styles.
-				className="wp-block block-editor-default-block-appender__content"
+				// A wrapping container for this one already has the wp-block className.
+				className="block-editor-default-block-appender__content"
 				onFocus={ onAppend }
 			>
 				{ showPrompt ? value : ZWNBSP }

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -7,7 +7,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={
       [MockFunction] {
@@ -43,7 +43,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={[MockFunction]}
     role="button"
@@ -67,7 +67,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={[MockFunction]}
     role="button"