@wordpress/block-editor 9.3.0 → 9.6.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,15 +62,60 @@ 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
+			__nextHasNoMarginBottom
 			className={ classnames(
 				'block-editor-color-gradient-control',
 				className
@@ -78,66 +133,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

@@ -11,6 +11,7 @@ import {
 	ColorIndicator,
 	Dropdown,
 	FlexItem,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -114,6 +115,7 @@ export default function ColorGradientSettingsDropdown( {
 		popoverProps = {
 			placement: 'left-start',
 			offset: 36,
+			__unstableShift: true,
 		};
 	}
 
@@ -154,10 +156,15 @@ export default function ColorGradientSettingsDropdown( {
 							<Dropdown
 								popoverProps={ popoverProps }
 								className="block-editor-tools-panel-color-gradient-settings__dropdown"
-								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
-									<ColorGradientControl { ...controlProps } />
+									<DropdownContentWrapper paddingSize="medium">
+										<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+											<ColorGradientControl
+												{ ...controlProps }
+											/>
+										</div>
+									</DropdownContentWrapper>
 								) }
 							/>
 						</WithToolsPanelItem>

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

@@ -1,3 +1,8 @@
+// Must equal $color-palette-circle-size from:
+// @wordpress/components/src/circular-option-picker/style.scss
+$swatch-size: 28px;
+$swatch-gap: 12px;
+
 .block-editor-color-gradient-control {
 	.block-editor-color-gradient-control__color-indicator {
 		margin-bottom: $grid-unit-15;
@@ -18,11 +23,6 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-
-	// Must equal $color-palette-circle-size from:
-	// @wordpress/components/src/circular-option-picker/style.scss
-	$swatch-size: 28px;
-
 	@media screen and (min-width: $break-medium) {
 		.components-circular-option-picker__swatches {
 			display: grid;
@@ -40,11 +40,10 @@
 
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	width: $sidebar-width;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+	width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ); // Ensure the popover perfectly wraps the swatches.
 }
 
-
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
@@ -100,3 +99,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

@@ -20,17 +20,6 @@ const getButtonWithAriaLabelStartPredicate =
 		);
 	};
 
-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' );
-
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
 		render(
@@ -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/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/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 }
+		/>
+	);
+}

package/src/components/duotone/index.js

@@ -0,0 +1,7 @@
+export { getValuesFromColors as __unstableGetValuesFromColors } from './utils';
+export {
+	DuotoneFilter as __unstableDuotoneFilter,
+	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
+	DuotoneStylesheet as __unstableDuotoneStylesheet,
+	DuotoneUnsetStylesheet as __unstableDuotoneUnsetStylesheet,
+} from './components';

package/src/components/duotone/utils.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
+/**
+ * Convert a list of colors to an object of R, G, and B values.
+ *
+ * @param {string[]} colors Array of RBG color strings.
+ *
+ * @return {Object} R, G, and B values.
+ */
+export function getValuesFromColors( colors = [] ) {
+	const values = { r: [], g: [], b: [], a: [] };
+
+	colors.forEach( ( color ) => {
+		const rgbColor = colord( color ).toRgb();
+		values.r.push( rgbColor.r / 255 );
+		values.g.push( rgbColor.g / 255 );
+		values.b.push( rgbColor.b / 255 );
+		values.a.push( rgbColor.a );
+	} );
+
+	return values;
+}

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	ColorIndicator,
 	Dropdown,
 	DuotonePicker,
 	DuotoneSwatch,
@@ -20,6 +21,16 @@ function DuotoneControl( {
 	value,
 	onChange,
 } ) {
+	let toolbarIcon;
+	if ( value === 'unset' ) {
+		toolbarIcon = (
+			<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+		);
+	} else if ( value ) {
+		toolbarIcon = <DuotoneSwatch values={ value } />;
+	} else {
+		toolbarIcon = <Icon icon={ filter } />;
+	}
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -42,13 +53,7 @@ function DuotoneControl( {
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
 						label={ __( 'Apply duotone filter' ) }
-						icon={
-							value ? (
-								<DuotoneSwatch values={ value } />
-							) : (
-								<Icon icon={ filter } />
-							)
-						}
+						icon={ toolbarIcon }
 					/>
 				);
 			} }

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

@@ -34,3 +34,8 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
+
+.block-editor-duotone-control__unset-indicator {
+	// Show a diagonal line (crossed out) for empty swatches.
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}

package/src/components/iframe/index.js

@@ -65,12 +65,31 @@ function useStylesCompatibility() {
 				return;
 			}
 
-			const isMatch = Array.from( cssRules ).find(
-				( { selectorText } ) =>
-					selectorText &&
-					( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
-						selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-			);
+			function matchFromRules( _cssRules ) {
+				return Array.from( _cssRules ).find(
+					( {
+						selectorText,
+						conditionText,
+						cssRules: __cssRules,
+					} ) => {
+						// If the rule is conditional then it will not have selector text.
+						// Recurse into child CSS ruleset to determine selector eligibility.
+						if ( conditionText ) {
+							return matchFromRules( __cssRules );
+						}
+
+						return (
+							selectorText &&
+							( selectorText.includes(
+								`.${ BODY_CLASS_NAME }`
+							) ||
+								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
+						);
+					}
+				);
+			}
+
+			const isMatch = matchFromRules( cssRules );
 
 			if (
 				isMatch &&

package/src/components/image-editor/cropper.js

@@ -23,6 +23,7 @@ export default function ImageCropper( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	borderProps,
 } ) {
 	const {
 		isInProgress,
@@ -44,10 +45,15 @@ export default function ImageCropper( {
 
 	return (
 		<div
-			className={ classnames( 'wp-block-image__crop-area', {
-				'is-applying': isInProgress,
-			} ) }
+			className={ classnames(
+				'wp-block-image__crop-area',
+				borderProps?.className,
+				{
+					'is-applying': isInProgress,
+				}
+			) }
 			style={ {
+				...borderProps?.style,
 				width: width || clientWidth,
 				height: editedHeight,
 			} }

package/src/components/image-editor/index.js

@@ -20,10 +20,12 @@ export default function ImageEditor( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	borderProps,
 } ) {
 	return (
 		<>
 			<Cropper
+				borderProps={ borderProps }
 				url={ url }
 				width={ width }
 				height={ height }

package/src/components/index.js

@@ -5,6 +5,7 @@
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
+export * from './duotone';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
 export { default as Autocomplete } from './autocomplete';
 export {