@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/src/components/border-radius-control/test/utils.js

@@ -9,73 +9,35 @@ import {
 	mode,
 } from '../utils';
 
-describe( 'getAllUnit', () => {
-	describe( 'when provided string based values', () => {
-		it( 'should return valid unit when passed a valid unit', () => {
-			expect( getAllUnit( '32em' ) ).toBe( 'em' );
-		} );
-
-		it( 'should fall back to px when passed an invalid unit', () => {
-			expect( getAllUnit( '32apples' ) ).toBe( 'px' );
-		} );
+const defaultUnitSelections = {
+	flat: undefined,
+	topLeft: '%',
+	topRight: 'rem',
+	bottomLeft: 'rem',
+	bottomRight: 'vw',
+};
 
-		it( 'should fall back to px when passed a value without a unit', () => {
-			expect( getAllUnit( '32' ) ).toBe( 'px' );
-		} );
+describe( 'getAllUnit', () => {
+	it( 'should return flat radius unit when selected', () => {
+		const selectedUnits = { ...defaultUnitSelections, flat: 'em' };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'em' );
 	} );
 
-	describe( 'when provided object based values', () => {
-		it( 'should return the most common value', () => {
-			const values = {
-				bottomLeft: '2em',
-				bottomRight: '2em',
-				topLeft: '0',
-				topRight: '2px',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
-
-		it( 'should return the real value when the most common value is undefined', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: '0',
-				topLeft: '0',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return most common corner unit', () => {
+		expect( getAllUnit( defaultUnitSelections ) ).toBe( 'rem' );
+	} );
 
-		it( 'should return the most common value there are no undefined values', () => {
-			const values = {
-				bottomLeft: '1em',
-				bottomRight: '1em',
-				topLeft: '2px',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return a real unit when the most common is undefined', () => {
+		expect( getAllUnit( { bottomRight: '%' } ) ).toBe( '%' );
+	} );
 
-		it( 'should fall back to px when all values are undefined or equivalent', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: undefined,
-				topLeft: undefined,
-				topRight: '0',
-			};
-			expect( getAllUnit( values ) ).toBe( 'px' );
-		} );
+	it( 'should return most common corner unit when some are unselected', () => {
+		const selectedUnits = { ...defaultUnitSelections, topLeft: undefined };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'rem' );
 	} );
 
-	describe( 'when provided invalid values', () => {
-		it( 'should return px when passed an array', () => {
-			expect( getAllUnit( [] ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed a boolean', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed undefined', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
+	it( 'should fallback to px when all values are undefined', () => {
+		expect( getAllUnit( {} ) ).toBe( 'px' );
 	} );
 } );
 

package/src/components/border-radius-control/utils.js

@@ -28,24 +28,20 @@ export function mode( inputArray ) {
 }
 
 /**
- * Returns the most common CSS unit in the radius values.
- * Falls back to `px` as a default unit.
+ * Returns the most common CSS unit from the current CSS unit selections.
  *
- * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values. Default: `px`.
+ * - If a single flat border radius is set, its unit will be used
+ * - If individual corner selections, the most common of those will be used
+ * - Failing any unit selections a default of 'px' is returned.
+ *
+ * @param {Object} selectedUnits Unit selections for flat radius & each corner.
+ * @return {string} Most common CSS unit from current selections. Default: `px`.
  */
-export function getAllUnit( values = {} ) {
-	if ( typeof values === 'string' ) {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( values );
-		return unit || 'px';
-	}
-
-	const allUnits = Object.values( values ).map( ( value ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( value );
-		return unit;
-	} );
-
-	return mode( allUnits ) || 'px';
+export function getAllUnit( selectedUnits = {} ) {
+	const { flat, ...cornerUnits } = selectedUnits;
+	return (
+		flat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'
+	);
 }
 
 /**

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 { kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,16 @@ import {
 } from './utils';
 import useSetting from '../use-setting';
 
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
+
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.

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

@@ -29,7 +29,7 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid color',
+	title: 'Solid',
 	value: 'color',
 };
 const TAB_GRADIENT = {
@@ -113,8 +113,15 @@ function ColorGradientControlInner( {
 		),
 	};
 
+	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
@@ -141,15 +148,13 @@ function ColorGradientControlInner( {
 									: !! canChooseAColor && TAB_COLOR.value
 							}
 						>
-							{ ( tab ) => (
-								<div className="block-editor-color-gradient-control__tab-panel">
-									{ tabPanels[ tab.value ] }
-								</div>
-							) }
+							{ ( tab ) => renderPanelType( tab.value ) }
 						</TabPanel>
 					) }
-					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
-					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
+					{ ! 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,19 +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%;
-}
 
-.block-editor-color-gradient-control__tab-panel {
-	padding-top: $grid-unit-10;
+	.component-color-indicator {
+		flex-shrink: 0;
+	}
 }

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

@@ -53,7 +53,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid color' } )
+			screen.getByRole( 'tab', { name: 'Solid' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -86,7 +86,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -133,7 +133,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )

package/src/components/copy-handler/index.js

@@ -6,6 +6,7 @@ import {
 	serialize,
 	pasteHandler,
 	store as blocksStore,
+	createBlock,
 } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -155,6 +156,23 @@ export function useClipboardHandler() {
 						);
 						blocks = [ head, ...inBetweenBlocks, tail ];
 					}
+
+					const wrapperBlockName = event.clipboardData.getData(
+						'__unstableWrapperBlockName'
+					);
+
+					if ( wrapperBlockName ) {
+						blocks = createBlock(
+							wrapperBlockName,
+							JSON.parse(
+								event.clipboardData.getData(
+									'__unstableWrapperBlockAttributes'
+								)
+							),
+							blocks
+						);
+					}
+
 					const serialized = serialize( blocks );
 
 					event.clipboardData.setData(