@wordpress/block-editor 9.2.0 → 9.5.0

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

@@ -7,16 +7,13 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	TabPanel,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -30,6 +27,19 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
+const TAB_COLOR = {
+	name: 'color',
+	title: 'Solid color',
+	value: 'color',
+};
+const TAB_GRADIENT = {
+	name: 'gradient',
+	title: 'Gradient',
+	value: 'gradient',
+};
+
+const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -52,13 +62,57 @@ function ColorGradientControlInner( {
 	const canChooseAGradient =
 		onGradientChange &&
 		( ! isEmpty( gradients ) || ! disableCustomGradients );
-	const [ currentTab, setCurrentTab ] = useState(
-		gradientValue ? 'gradient' : !! canChooseAColor && 'color'
-	);
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;
 	}
+
+	const tabPanels = {
+		[ TAB_COLOR.value ]: (
+			<ColorPalette
+				value={ colorValue }
+				onChange={
+					canChooseAGradient
+						? ( newColor ) => {
+								onColorChange( newColor );
+								onGradientChange();
+						  }
+						: onColorChange
+				}
+				{ ...{ colors, disableCustomColors } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+				enableAlpha={ enableAlpha }
+			/>
+		),
+		[ TAB_GRADIENT.value ]: (
+			<GradientPicker
+				value={ gradientValue }
+				onChange={
+					canChooseAColor
+						? ( newGradient ) => {
+								onGradientChange( newGradient );
+								onColorChange();
+						  }
+						: onGradientChange
+				}
+				{ ...{ gradients, disableCustomGradients } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+			/>
+		),
+	};
+
 	return (
 		<BaseControl
 			className={ classnames(
@@ -78,66 +132,24 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<ToggleGroupControl
-							value={ currentTab }
-							onChange={ setCurrentTab }
-							label={ __( 'Select color type' ) }
-							hideLabelFromVision
-							isBlock
-						>
-							<ToggleGroupControlOption
-								value="color"
-								label={ __( 'Solid' ) }
-							/>
-							<ToggleGroupControlOption
-								value="gradient"
-								label={ __( 'Gradient' ) }
-							/>
-						</ToggleGroupControl>
-					) }
-					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-						<ColorPalette
-							value={ colorValue }
-							onChange={
-								canChooseAGradient
-									? ( newColor ) => {
-											onColorChange( newColor );
-											onGradientChange();
-									  }
-									: onColorChange
+						<TabPanel
+							className="block-editor-color-gradient-control__tabs"
+							tabs={ TABS_SETTINGS }
+							initialTabName={
+								gradientValue
+									? TAB_GRADIENT.value
+									: !! canChooseAColor && TAB_COLOR.value
 							}
-							{ ...{ colors, disableCustomColors } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-						<GradientPicker
-							value={ gradientValue }
-							onChange={
-								canChooseAColor
-									? ( newGradient ) => {
-											onGradientChange( newGradient );
-											onColorChange();
-									  }
-									: onGradientChange
-							}
-							{ ...{ gradients, disableCustomGradients } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-						/>
+						>
+							{ ( tab ) => (
+								<div className="block-editor-color-gradient-control__tab-panel">
+									{ tabPanels[ tab.value ] }
+								</div>
+							) }
+						</TabPanel>
 					) }
+					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
+					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
 				</VStack>
 			</fieldset>
 		</BaseControl>

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

@@ -67,24 +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 { colorValue, label } = settings;
+const renderToggle =
+	( settings ) =>
+	( { onToggle, isOpen } ) => {
+		const { colorValue, label } = settings;
 
-	const toggleProps = {
-		onClick: onToggle,
-		className: classnames(
-			'block-editor-panel-color-gradient-settings__dropdown',
-			{ 'is-open': isOpen }
-		),
-		'aria-expanded': isOpen,
-	};
+		const toggleProps = {
+			onClick: onToggle,
+			className: classnames(
+				'block-editor-panel-color-gradient-settings__dropdown',
+				{ 'is-open': isOpen }
+			),
+			'aria-expanded': isOpen,
+		};
 
-	return (
-		<Button { ...toggleProps }>
-			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</Button>
-	);
-};
+		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
@@ -109,6 +114,7 @@ export default function ColorGradientSettingsDropdown( {
 		popoverProps = {
 			placement: 'left-start',
 			offset: 36,
+			__unstableShift: true,
 		};
 	}
 

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

@@ -100,3 +100,7 @@
 .block-editor-panel-color-gradient-settings__dropdown {
 	width: 100%;
 }
+
+.block-editor-color-gradient-control__tab-panel {
+	padding-top: $grid-unit-10;
+}

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

@@ -3,33 +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 getTabWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ] === text
-	);
-};
-
-const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getTabWithTestPredicate( 'Gradient' );
+const getButtonWithAriaLabelStartPredicate =
+	( ariaLabelStart ) => ( element ) => {
+		return (
+			element.type === 'button' &&
+			element.props[ 'aria-label' ] &&
+			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
+		);
+	};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
@@ -63,8 +52,12 @@ describe( 'ColorPaletteControl', () => {
 		);
 
 		// Is showing the two tab buttons.
-		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
-		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Solid color' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Gradient' } )
+		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
@@ -92,12 +85,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect(
@@ -139,12 +132,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
 		expect(

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

@@ -20,12 +20,8 @@ const layouts = {
 };
 
 function BlockGroupToolbar() {
-	const {
-		blocksSelection,
-		clientIds,
-		groupingBlockName,
-		isGroupable,
-	} = useConvertToGroupButtonProps();
+	const { blocksSelection, clientIds, groupingBlockName, isGroupable } =
+		useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
 	const { canRemove, variations } = useSelect(

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/date-format-picker/index.js

@@ -90,6 +90,7 @@ function NonDefaultControls( { format, onChange } ) {
 		_x( 'M j, Y', 'medium date format' ),
 		_x( 'M j, Y g:i A', 'medium date format with time' ),
 		_x( 'F j, Y', 'long date format' ),
+		_x( 'M j', 'short date format without the year' ),
 	] );
 
 	const suggestedOptions = suggestedFormats.map(

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() {

package/src/components/default-style-picker/index.js

@@ -14,24 +14,22 @@ import { store as blockEditorStore } from '../../store';
 import { getDefaultStyle } from '../block-styles/utils';
 
 export default function DefaultStylePicker( { blockName } ) {
-	const {
-		preferredStyle,
-		onUpdatePreferredStyleVariations,
-		styles,
-	} = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			const preferredStyleVariations =
-				settings.__experimentalPreferredStyleVariations;
-			return {
-				preferredStyle: preferredStyleVariations?.value?.[ blockName ],
-				onUpdatePreferredStyleVariations:
-					preferredStyleVariations?.onChange ?? null,
-				styles: select( blocksStore ).getBlockStyles( blockName ),
-			};
-		},
-		[ blockName ]
-	);
+	const { preferredStyle, onUpdatePreferredStyleVariations, styles } =
+		useSelect(
+			( select ) => {
+				const settings = select( blockEditorStore ).getSettings();
+				const preferredStyleVariations =
+					settings.__experimentalPreferredStyleVariations;
+				return {
+					preferredStyle:
+						preferredStyleVariations?.value?.[ blockName ],
+					onUpdatePreferredStyleVariations:
+						preferredStyleVariations?.onChange ?? null,
+					styles: select( blocksStore ).getBlockStyles( blockName ),
+				};
+			},
+			[ blockName ]
+		);
 	const selectOptions = useMemo(
 		() => [
 			{ label: __( 'Not set' ), value: '' },
@@ -39,9 +37,10 @@ export default function DefaultStylePicker( { blockName } ) {
 		],
 		[ styles ]
 	);
-	const defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [
-		styles,
-	] );
+	const defaultStyleName = useMemo(
+		() => getDefaultStyle( styles )?.name,
+		[ styles ]
+	);
 	const selectOnChange = useCallback(
 		( blockStyle ) => {
 			onUpdatePreferredStyleVariations( blockName, blockStyle );

package/src/components/duotone/components.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {Object}   props          Duotone props.
+ * @param {string}   props.selector Selector to apply the filter to.
+ * @param {string}   props.id       Unique id for this duotone filter.
+ *
+ * @return {WPElement} Duotone element.
+ */
+export function DuotoneStylesheet( { selector, id } ) {
+	const css = `
+${ selector } {
+	filter: url( #${ id } );
+}
+`;
+	return <style>{ css }</style>;
+}
+
+/**
+ * Stylesheet for disabling a global styles duotone filter.
+ *
+ * @param {Object}   props          Duotone props.
+ * @param {string}   props.selector Selector to disable the filter for.
+ *
+ * @return {WPElement} Filter none style element.
+ */
+export function DuotoneUnsetStylesheet( { selector } ) {
+	const css = `
+${ selector } {
+	filter: none;
+}
+`;
+	return <style>{ css }</style>;
+}
+
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {Object}   props        Duotone props.
+ * @param {string}   props.id     Unique id for this duotone filter.
+ * @param {string[]} props.colors Color strings from dark to light.
+ *
+ * @return {WPElement} Duotone SVG.
+ */
+export function DuotoneFilter( { id, colors } ) {
+	const values = getValuesFromColors( colors );
+	return (
+		<SVG
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			viewBox="0 0 0 0"
+			width="0"
+			height="0"
+			focusable="false"
+			role="none"
+			style={ {
+				visibility: 'hidden',
+				position: 'absolute',
+				left: '-9999px',
+				overflow: 'hidden',
+			} }
+		>
+			<defs>
+				<filter id={ id }>
+					<feColorMatrix
+						// Use sRGB instead of linearRGB so transparency looks correct.
+						colorInterpolationFilters="sRGB"
+						type="matrix"
+						// Use perceptual brightness to convert to grayscale.
+						values="
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+						"
+					/>
+					<feComponentTransfer
+						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
+						colorInterpolationFilters="sRGB"
+					>
+						<feFuncR
+							type="table"
+							tableValues={ values.r.join( ' ' ) }
+						/>
+						<feFuncG
+							type="table"
+							tableValues={ values.g.join( ' ' ) }
+						/>
+						<feFuncB
+							type="table"
+							tableValues={ values.b.join( ' ' ) }
+						/>
+						<feFuncA
+							type="table"
+							tableValues={ values.a.join( ' ' ) }
+						/>
+					</feComponentTransfer>
+					<feComposite
+						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+						in2="SourceGraphic"
+						operator="in"
+					/>
+				</filter>
+			</defs>
+		</SVG>
+	);
+}
+
+/**
+ * SVG from a duotone preset
+ *
+ * @param {Object} props        Duotone props.
+ * @param {Object} props.preset Duotone preset settings.
+ *
+ * @return {WPElement} Duotone element.
+ */
+export function PresetDuotoneFilter( { preset } ) {
+	return (
+		<DuotoneFilter
+			id={ `wp-duotone-${ preset.slug }` }
+			colors={ preset.colors }
+		/>
+	);
+}