@wordpress/block-editor 9.4.0 → 9.7.0

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

@@ -4,10 +4,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .components-panel__row .emotion-2 {
@@ -40,8 +43,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-8 {
@@ -144,100 +152,104 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           </div>
         </legend>
         <div
-          className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-          data-wp-c16t={true}
-          data-wp-component="VStack"
+          className="block-editor-color-gradient-control__panel"
         >
           <div
-            className="components-dropdown"
-            tabIndex="-1"
+            className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+            data-wp-c16t={true}
+            data-wp-component="VStack"
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-              className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-              data-wp-c16t={true}
-              data-wp-component="Flex"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                  "color": "#000",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              <span
-                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                data-wp-c16t={true}
-                data-wp-component="FlexItem"
-              >
-                red
-              </span>
-              <span
-                className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+              <button
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                 data-wp-c16t={true}
-                data-wp-component="FlexItem"
+                data-wp-component="Flex"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
               >
-                f00
-              </span>
-            </button>
-          </div>
-          <div
-            className="components-circular-option-picker"
-          >
+                <span
+                  className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                  data-wp-c16t={true}
+                  data-wp-component="FlexItem"
+                >
+                  red
+                </span>
+                <span
+                  className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  data-wp-c16t={true}
+                  data-wp-component="FlexItem"
+                >
+                  f00
+                </span>
+              </button>
+            </div>
             <div
-              className="components-circular-option-picker__swatches"
+              className="components-circular-option-picker"
             >
               <div
-                className="components-circular-option-picker__option-wrapper"
+                className="components-circular-option-picker__swatches"
+              >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <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}
+                    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
+                className="components-circular-option-picker__custom-clear-wrapper"
               >
                 <button
                   aria-describedby={null}
-                  aria-label="Color: red"
-                  aria-pressed={true}
-                  className="components-button components-circular-option-picker__option is-pressed"
-                  onBlur={[Function]}
+                  className="components-button components-circular-option-picker__clear is-tertiary"
                   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}
-                  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>
+                  Clear
+                </button>
               </div>
             </div>
-            <div
-              className="components-circular-option-picker__custom-clear-wrapper"
-            >
-              <button
-                aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-tertiary"
-                onClick={[Function]}
-                type="button"
-              >
-                Clear
-              </button>
-            </div>
           </div>
         </div>
       </div>

package/src/components/colors/test/__snapshots__/with-colors.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCustomColorsHOC provides the the wrapped component with color values and setter functions as props 1`] = `
+exports[`createCustomColorsHOC provides the wrapped component with color values and setter functions as props 1`] = `
 <Component
   attributes={
     Object {

package/src/components/colors/test/with-colors.js

@@ -9,7 +9,7 @@ import { shallow, mount } from 'enzyme';
 import { createCustomColorsHOC } from '../with-colors';
 
 describe( 'createCustomColorsHOC', () => {
-	it( 'provides the the wrapped component with color values and setter functions as props', () => {
+	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );

package/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, maxBy } from 'lodash';
+import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -77,6 +77,9 @@ export function getColorClassName( colorContextName, colorSlug ) {
  */
 export function getMostReadableColor( colors, colorValue ) {
 	const colordColor = colord( colorValue );
-	return maxBy( colors, ( { color } ) => colordColor.contrast( color ) )
+	const getColorContrast = ( { color } ) => colordColor.contrast( color );
+
+	const maxContrast = Math.max( ...colors.map( getColorContrast ) );
+	return colors.find( ( color ) => getColorContrast( color ) === maxContrast )
 		.color;
 }

package/src/components/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isString, kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce, upperFirst } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 		( colorObject, colorType ) => {
 			return {
 				...colorObject,
-				...( isString( colorType )
+				...( typeof colorType === 'string'
 					? { [ colorType ]: kebabCase( colorType ) }
 					: colorType ),
 			};

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',
+	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,66 @@ 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 }
+			/>
+		),
+	};
+
+	const renderPanelType = ( type ) => (
+		<div className="block-editor-color-gradient-control__panel">
+			{ tabPanels[ type ] }
+		</div>
+	);
+
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom
 			className={ classnames(
 				'block-editor-color-gradient-control',
 				className
@@ -78,66 +139,22 @@ 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
-							}
-							{ ...{ 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
+						<TabPanel
+							className="block-editor-color-gradient-control__tabs"
+							tabs={ TABS_SETTINGS }
+							initialTabName={
+								gradientValue
+									? TAB_GRADIENT.value
+									: !! canChooseAColor && TAB_COLOR.value
 							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-						/>
+						>
+							{ ( tab ) => renderPanelType( tab.value ) }
+						</TabPanel>
 					) }
+					{ ! canChooseAGradient &&
+						renderPanelType( TAB_COLOR.value ) }
+					{ ! canChooseAColor &&
+						renderPanelType( 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';
@@ -60,7 +61,12 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 			className="block-editor-panel-color-gradient-settings__color-indicator"
 			colorValue={ colorValue }
 		/>
-		<FlexItem>{ label }</FlexItem>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
 	</HStack>
 );
 
@@ -155,10 +161,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="none">
+										<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;
@@ -10,6 +15,12 @@
 	min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs {
+	.block-editor-color-gradient-control__panel {
+		padding: $grid-unit-20;
+	}
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -18,11 +29,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,10 +46,15 @@
 
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	width: $sidebar-width;
-}
+.block-editor-panel-color-gradient-settings__dropdown-content {
+	.block-editor-color-gradient-control__panel {
+		$panelPadding: $grid-unit-20;
 
+		// Ensure the popover perfectly wraps the swatches.
+		width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $panelPadding * 2 );
+		padding: $panelPadding;
+	}
+}
 
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
@@ -59,6 +70,7 @@
 */
 .block-editor-tools-panel-color-gradient-settings__item {
 	padding: 0;
+	max-width: 100%;
 
 	// Border styles.
 	border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -88,15 +100,28 @@
 	padding: 0;
 
 	> button {
-		height: 46px;
+		height: auto;
+		padding-top: $grid-unit * 1.25;
+		padding-bottom: $grid-unit * 1.25;
+		text-align: left;
 
 		&.is-open {
 			background: $gray-100;
 			color: var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-panel-color-gradient-settings__color-name {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown {
 	width: 100%;
+
+	.component-color-indicator {
+		flex-shrink: 0;
+	}
 }

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' } )
+		).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' } )
+		).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' } )
+		).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/font-appearance-control/index.js

@@ -88,6 +88,7 @@ export default function FontAppearanceControl( props ) {
 		hasFontStyles = true,
 		hasFontWeights = true,
 		value: { fontStyle, fontWeight },
+		...otherProps
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
 	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
@@ -205,6 +206,7 @@ export default function FontAppearanceControl( props ) {
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
+				{ ...otherProps }
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }
@@ -213,6 +215,7 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
+				__nextUnconstrainedWidth
 			/>
 		)
 	);