@wordpress/block-editor 7.0.4 → 8.0.0

package/src/components/block-settings/container.native.js

@@ -6,6 +6,7 @@ import {
 	BottomSheet,
 	ColorSettings,
 	FocalPointSettingsPanel,
+	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -21,6 +22,7 @@ export const blockSettingsScreens = {
 	color: 'Color',
 	focalPoint: 'FocalPoint',
 	linkPicker: 'linkPicker',
+	imageLinkDestinations: 'imageLinkDestinations',
 };
 
 function BottomSheetSettings( {
@@ -75,6 +77,11 @@ function BottomSheetSettings( {
 						returnScreenName={ blockSettingsScreens.settings }
 					/>
 				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.imageLinkDestinations }
+				>
+					<ImageLinkDestinationsScreen { ...props } />
+				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -6,13 +6,13 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
 
 import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import { serialize, store as blocksStore } from '@wordpress/blocks';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -46,9 +46,17 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const onlyBlock = useSelect(
-		( select ) => 1 === select( blockEditorStore ).getBlockCount(),
-		[]
+	const { onlyBlock, title } = useSelect(
+		( select ) => {
+			const { getBlockCount, getBlockName } = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			return {
+				onlyBlock: 1 === getBlockCount(),
+				title: getBlockType( getBlockName( firstBlockClientId ) )
+					?.title,
+			};
+		},
+		[ firstBlockClientId ]
 	);
 
 	const shortcuts = useSelect( ( select ) => {
@@ -79,8 +87,12 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const removeBlockLabel =
-		count === 1 ? __( 'Remove block' ) : __( 'Remove blocks' );
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		title
+	);
+	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
 	return (
 		<BlockActions

package/src/components/block-styles/preview.native.js

@@ -67,11 +67,11 @@ function StylePreview( { onPress, isActive, style, url } ) {
 	);
 
 	const getOutline = ( outlineStyles ) =>
-		outlineStyles.map( ( outlineStyle ) => {
+		outlineStyles.map( ( outlineStyle, index ) => {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ JSON.stringify( outlineStyle ) }
+					key={ index }
 				/>
 			);
 		} );

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

@@ -6,7 +6,7 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <BlockIcon
+      <Memo(BlockIcon)
         icon={
           <SVG
             viewBox="0 0 24 24"

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -32,13 +32,38 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
+  margin-top: calc(4px * 1);
 }
 
 .emotion-4>* {
   min-height: 0;
 }
 
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-6>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-6>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -59,89 +84,89 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               className="components-base-control__label"
             >
               Test Color
-              <span
-                aria-label="(Color: #f00)"
-                className="component-color-indicator"
-                style={
-                  Object {
-                    "background": "#f00",
-                  }
-                }
-              />
             </span>
           </div>
         </legend>
         <div
-          className="components-circular-option-picker"
+          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          data-wp-c16t={true}
+          data-wp-component="VStack"
         >
           <div
-            className="components-circular-option-picker__swatches"
+            className="components-dropdown"
+            tabIndex="-1"
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup="true"
+              aria-label="Custom color picker"
+              className="components-color-palette__custom-color"
+              onClick={[Function]}
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
+            >
+              #f00
+            </button>
+          </div>
+          <div
+            className="components-circular-option-picker"
           >
             <div
-              className="components-circular-option-picker__option-wrapper"
+              className="components-circular-option-picker__swatches"
             >
-              <button
-                aria-describedby={null}
-                aria-label="Color: red"
-                aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-pressed"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#f00",
-                    "color": "#f00",
-                  }
-                }
-                type="button"
-              />
-              <svg
-                aria-hidden={true}
-                fill="#000"
-                focusable={false}
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                className="components-circular-option-picker__option-wrapper"
               >
-                <path
-                  d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                <button
+                  aria-describedby={null}
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
                 />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="#000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                  />
+                </svg>
+              </div>
             </div>
-          </div>
-          <div
-            className="components-circular-option-picker__custom-clear-wrapper"
-          >
             <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-              tabIndex="-1"
+              className="components-circular-option-picker__custom-clear-wrapper"
             >
               <button
                 aria-describedby={null}
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker"
-                className="components-button is-link"
+                className="components-button components-circular-option-picker__clear is-secondary is-small"
                 onClick={[Function]}
                 type="button"
               >
-                Custom color
+                Clear
               </button>
             </div>
-            <button
-              aria-describedby={null}
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
           </div>
         </div>
       </div>

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

@@ -13,25 +13,16 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	ColorIndicator,
 	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',
@@ -39,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,
@@ -90,6 +43,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	gradientValue,
 	clearable,
+	showTitle = true,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -111,19 +65,16 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<VStack space={ 3 }>
-					<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>
+				<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 }
@@ -154,6 +105,9 @@ function ColorGradientControlInner( {
 									: onColorChange
 							}
 							{ ...{ colors, disableCustomColors } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
 							clearable={ clearable }
 						/>
 					) }
@@ -169,6 +123,9 @@ function ColorGradientControlInner( {
 									: onGradientChange
 							}
 							{ ...{ gradients, disableCustomGradients } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
 							clearable={ clearable }
 						/>
 					) }

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
@@ -90,6 +91,7 @@ export const PanelColorGradientSettingsInner = ( {
 	settings,
 	title,
 	showTitle = true,
+	__experimentalHasMultipleOrigins,
 	...props
 } ) => {
 	if (
@@ -133,12 +135,14 @@ export const PanelColorGradientSettingsInner = ( {
 		>
 			{ settings.map( ( setting, index ) => (
 				<ColorGradientControl
+					showTitle={ showTitle }
 					key={ index }
 					{ ...{
 						colors,
 						gradients,
 						disableCustomColors,
 						disableCustomGradients,
+						__experimentalHasMultipleOrigins,
 						...setting,
 					} }
 				/>
@@ -148,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 } }
@@ -169,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

@@ -23,25 +23,14 @@
 	// @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.

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

@@ -10,14 +10,6 @@ import { noop } from 'lodash';
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.children[ 0 ] === text &&
-		element.children.length === 1
-	);
-};
-
 const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	element
 ) => {
@@ -76,9 +68,6 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect( screen.queryByText( 'Custom color' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -116,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/duotone-control/index.js

@@ -24,6 +24,7 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
+				isAlternate: true,
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
@@ -46,6 +47,11 @@ function DuotoneControl( {
 			} }
 			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 }