@wordpress/block-editor 7.0.2 → 8.0.1

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"

package/src/components/duotone-control/index.js

@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import {
+	Dropdown,
+	DuotonePicker,
+	DuotoneSwatch,
+	MenuGroup,
+	ToolbarButton,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 
-/**
- * Internal dependencies
- */
-import DuotonePickerPopover from './duotone-picker-popover';
-
 function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
@@ -19,42 +19,50 @@ function DuotoneControl( {
 	value,
 	onChange,
 } ) {
-	const [ isOpen, setIsOpen ] = useState( false );
-
-	const onToggle = () => {
-		setIsOpen( ( prev ) => ! prev );
-	};
-
-	const openOnArrowDown = ( event ) => {
-		if ( ! isOpen && event.keyCode === DOWN ) {
-			event.preventDefault();
-			onToggle();
-		}
-	};
-
 	return (
-		<>
-			<ToolbarButton
-				showTooltip
-				onClick={ onToggle }
-				aria-haspopup="true"
-				aria-expanded={ isOpen }
-				onKeyDown={ openOnArrowDown }
-				label={ __( 'Apply duotone filter' ) }
-				icon={ <DuotoneSwatch values={ value } /> }
-			/>
-			{ isOpen && (
-				<DuotonePickerPopover
-					value={ value }
-					onChange={ onChange }
-					onToggle={ onToggle }
-					duotonePalette={ duotonePalette }
-					colorPalette={ colorPalette }
-					disableCustomColors={ disableCustomColors }
-					disableCustomDuotone={ disableCustomDuotone }
-				/>
+		<Dropdown
+			popoverProps={ {
+				className: 'block-editor-duotone-control__popover',
+				headerTitle: __( 'Duotone' ),
+				isAlternate: true,
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						onToggle();
+					}
+				};
+				return (
+					<ToolbarButton
+						showTooltip
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onKeyDown={ openOnArrowDown }
+						label={ __( 'Apply duotone filter' ) }
+						icon={ <DuotoneSwatch values={ value } /> }
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<MenuGroup label={ __( 'Duotone' ) }>
+					<div className="block-editor-duotone-control__description">
+						{ __(
+							'Create a two-tone color effect without losing your original image.'
+						) }
+					</div>
+					<DuotonePicker
+						colorPalette={ colorPalette }
+						duotonePalette={ duotonePalette }
+						disableCustomColors={ disableCustomColors }
+						disableCustomDuotone={ disableCustomDuotone }
+						value={ value }
+						onChange={ onChange }
+					/>
+				</MenuGroup>
 			) }
-		</>
+		/>
 	);
 }
 

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

@@ -1,23 +1,38 @@
+// Must equal $color-palette-circle-size and $color-palette-circle-spacing from:
+// @wordpress/components/src/circular-option-picker/style.scss
+$swatch-size: 28px;
+$swatch-gap: 12px;
+
+$popover-width: $sidebar-width;
+$popover-padding: $grid-unit-20;
+
+$swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
+
 .block-editor-duotone-control__popover {
-	.components-popover__content {
-		border: $border-width solid $gray-900;
-		min-width: 214px;
+	> .components-popover__content > div {
+		padding: $popover-padding;
+		width: $popover-width;
 	}
 
-	.components-circular-option-picker {
-		padding: $grid-unit-15;
+	.components-menu-group__label {
+		padding: 0;
 	}
 
-	.components-menu-group__label {
-		padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
-		width: 100%;
-		box-sizing: border-box;
+	.components-custom-gradient-picker__gradient-bar {
+		margin: $grid-unit-20 0 $grid-unit-15;
+	}
+
+	.components-circular-option-picker__swatches {
+		display: grid;
+		grid-template-columns: repeat($swatch-columns, $swatch-size);
+		gap: $swatch-gap;
+		justify-content: space-between;
 	}
 }
 
-.block-editor-duotone-control__popover > .components-popover__content {
-	// Matches 8 swatches in width.
-	width: 334px;
+.block-editor-duotone-control__description {
+	margin: $grid-unit-20 0;
+	font-size: $helptext-font-size;
 }
 
 // Better align the popover under the swatch.

package/src/components/editor-styles/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
@@ -14,6 +16,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 import transformStyles from '../../utils/transform-styles';
 
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
+extend( [ namesPlugin, a11yPlugin ] );
 
 function useDarkThemeBodyClassName( styles ) {
 	return useCallback(
@@ -48,11 +51,11 @@ function useDarkThemeBodyClassName( styles ) {
 					.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
-
+			const colordBackgroundColor = colord( backgroundColor );
 			// If background is transparent, it should be treated as light color.
 			if (
-				tinycolor( backgroundColor ).getLuminance() > 0.5 ||
-				tinycolor( backgroundColor ).getAlpha() === 0
+				colordBackgroundColor.luminance() > 0.5 ||
+				colordBackgroundColor.alpha() === 0
 			) {
 				body.classList.remove( 'is-dark-theme' );
 			} else {

package/src/components/font-appearance-control/index.js

@@ -55,6 +55,26 @@ const FONT_WEIGHTS = [
 	},
 ];
 
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+
+	return __( 'Appearance' );
+};
+
 /**
  * Control to display unified font style and weight options.
  *
@@ -70,6 +90,7 @@ export default function FontAppearanceControl( props ) {
 		value: { fontStyle, fontWeight },
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
 	const defaultOption = {
 		key: 'default',
 		name: __( 'Default' ),
@@ -143,25 +164,14 @@ export default function FontAppearanceControl( props ) {
 		return hasFontStyles ? styleOptions() : weightOptions();
 	}, [ props.options ] );
 
-	// Find current selection by comparing font style & weight against options.
-	const currentSelection = selectOptions.find(
-		( option ) =>
-			option.style.fontStyle === fontStyle &&
-			option.style.fontWeight === fontWeight
-	);
-
-	// Adjusts field label in case either styles or weights are disabled.
-	const getLabel = () => {
-		if ( ! hasFontStyles ) {
-			return __( 'Font weight' );
-		}
-
-		if ( ! hasFontWeights ) {
-			return __( 'Font style' );
-		}
-
-		return __( 'Appearance' );
-	};
+	// Find current selection by comparing font style & weight against options,
+	// and fall back to the Default option if there is no matching option.
+	const currentSelection =
+		selectOptions.find(
+			( option ) =>
+				option.style.fontStyle === fontStyle &&
+				option.style.fontWeight === fontWeight
+		) || selectOptions[ 0 ];
 
 	// Adjusts screen reader description based on styles or weights.
 	const getDescribedBy = () => {
@@ -193,19 +203,17 @@ export default function FontAppearanceControl( props ) {
 	};
 
 	return (
-		<fieldset className="components-font-appearance-control">
-			{ hasStylesOrWeights && (
-				<CustomSelectControl
-					className="components-font-appearance-control__select"
-					label={ getLabel() }
-					describedBy={ getDescribedBy() }
-					options={ selectOptions }
-					value={ currentSelection }
-					onChange={ ( { selectedItem } ) =>
-						onChange( selectedItem.style )
-					}
-				/>
-			) }
-		</fieldset>
+		hasStylesOrWeights && (
+			<CustomSelectControl
+				className="components-font-appearance-control"
+				label={ label }
+				describedBy={ getDescribedBy() }
+				options={ selectOptions }
+				value={ currentSelection }
+				onChange={ ( { selectedItem } ) =>
+					onChange( selectedItem.style )
+				}
+			/>
+		)
 	);
 }

package/src/components/font-appearance-control/style.scss

@@ -1,4 +1,4 @@
-.components-font-appearance-control__select {
+.components-font-appearance-control {
 	margin-bottom: 24px;
 
 	ul {

package/src/components/iframe/index.js

@@ -76,7 +76,7 @@ function styleSheetsCompat( doc ) {
 
 		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
 			// eslint-disable-next-line no-console
-			console.error(
+			console.warn(
 				`Stylesheet ${ ownerNode.id } was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,
@@ -134,7 +134,7 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'keydown', 'keypress', 'dragover' ];
+	const eventTypes = [ 'dragover' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );
@@ -168,8 +168,8 @@ function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( window.__editorAssets.styles );
-	const scripts = useParsedAssets( window.__editorAssets.scripts );
+	const styles = useParsedAssets( window.__editorAssets?.styles );
+	const scripts = useParsedAssets( window.__editorAssets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {