@wordpress/block-editor 8.3.0 → 8.5.0

package/src/components/block-variation-transforms/index.js

@@ -2,47 +2,63 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { __experimentalGetMatchingVariation as getMatchingVariation } from '../../utils';
 import { store as blockEditorStore } from '../../store';
 
-function __experimentalBlockVariationTransforms( { blockClientId } ) {
-	const [ selectedValue, setSelectedValue ] = useState();
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { variations, blockAttributes } = useSelect(
-		( select ) => {
-			const { getBlockVariations } = select( blocksStore );
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const blockName = blockClientId && getBlockName( blockClientId );
-			return {
-				variations:
-					blockName && getBlockVariations( blockName, 'transform' ),
-				blockAttributes: getBlockAttributes( blockClientId ),
-			};
-		},
-		[ blockClientId ]
+function VariationsButtons( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<fieldset className={ className }>
+			<VisuallyHidden as="legend">
+				{ __( 'Transform to variation' ) }
+			</VisuallyHidden>
+			{ variations.map( ( variation ) => (
+				<Button
+					key={ variation.name }
+					icon={ variation.icon }
+					isPressed={ selectedValue === variation.name }
+					label={
+						selectedValue === variation.name
+							? variation.title
+							: sprintf(
+									/* translators: %s: Name of the block variation */
+									__( 'Transform to %s' ),
+									variation.title
+							  )
+					}
+					onClick={ () => onSelectVariation( variation.name ) }
+					aria-label={ variation.title }
+					showTooltip
+				/>
+			) ) }
+		</fieldset>
 	);
-	useEffect( () => {
-		setSelectedValue(
-			getMatchingVariation( blockAttributes, variations )?.name
-		);
-	}, [ blockAttributes, variations ] );
-	if ( ! variations?.length ) return null;
+}
 
+function VariationsDropdown( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
 	const selectOptions = variations.map(
 		( { name, title, description } ) => ( {
 			value: name,
@@ -50,27 +66,21 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 			info: description,
 		} )
 	);
-	const onSelectVariation = ( variationName ) => {
-		updateBlockAttributes( blockClientId, {
-			...variations.find( ( { name } ) => name === variationName )
-				.attributes,
-		} );
-	};
-	const baseClass = 'block-editor-block-variation-transforms';
+
 	return (
 		<DropdownMenu
-			className={ baseClass }
+			className={ className }
 			label={ __( 'Transform to variation' ) }
 			text={ __( 'Transform to variation' ) }
 			popoverProps={ {
 				position: 'bottom center',
-				className: `${ baseClass }__popover`,
+				className: `${ className }__popover`,
 			} }
 			icon={ chevronDown }
 			toggleProps={ { iconPosition: 'right' } }
 		>
 			{ () => (
-				<div className={ `${ baseClass }__container` }>
+				<div className={ `${ className }__container` }>
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ selectOptions }
@@ -84,4 +94,63 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	);
 }
 
+function __experimentalBlockVariationTransforms( { blockClientId } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { activeBlockVariation, variations } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } = select(
+				blocksStore
+			);
+			const { getBlockName, getBlockAttributes } = select(
+				blockEditorStore
+			);
+			const name = blockClientId && getBlockName( blockClientId );
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId )
+				),
+				variations: name && getBlockVariations( name, 'transform' ),
+			};
+		},
+		[ blockClientId ]
+	);
+
+	const selectedValue = activeBlockVariation?.name;
+
+	// Check if each variation has a unique icon.
+	const hasUniqueIcons = useMemo( () => {
+		const variationIcons = new Set();
+		variations.forEach( ( variation ) => {
+			if ( variation.icon ) {
+				variationIcons.add( variation.icon );
+			}
+		} );
+		return variationIcons.size === variations.length;
+	}, [ variations ] );
+
+	const onSelectVariation = ( variationName ) => {
+		updateBlockAttributes( blockClientId, {
+			...variations.find( ( { name } ) => name === variationName )
+				.attributes,
+		} );
+	};
+
+	const baseClass = 'block-editor-block-variation-transforms';
+
+	// Skip rendering if there are no variations
+	if ( ! variations?.length ) return null;
+
+	const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+
+	return (
+		<Component
+			className={ baseClass }
+			onSelectVariation={ onSelectVariation }
+			selectedValue={ selectedValue }
+			variations={ variations }
+		/>
+	);
+}
+
 export default __experimentalBlockVariationTransforms;

package/src/components/block-variation-transforms/style.scss

@@ -1,5 +1,5 @@
 .block-editor-block-variation-transforms {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;
 
 	.components-dropdown-menu__toggle {

package/src/components/block-vertical-alignment-control/index.js

@@ -3,10 +3,15 @@
  */
 import BlockVerticalAlignmentUI from './ui';
 
-export function BlockVerticalAlignmentControl( props ) {
+const BlockVerticalAlignmentControl = ( props ) => {
 	return <BlockVerticalAlignmentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function BlockVerticalAlignmentToolbar( props ) {
+const BlockVerticalAlignmentToolbar = ( props ) => {
 	return <BlockVerticalAlignmentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-control/README.md
+ */
+export { BlockVerticalAlignmentControl, BlockVerticalAlignmentToolbar };

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

@@ -79,7 +79,6 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							values={ values }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
-							unit={ unit }
 							units={ units }
 						/>
 						<RangeControl

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

@@ -150,6 +150,10 @@ describe( 'hasMixedValues', () => {
 		expect( hasMixedValues( '2px' ) ).toBe( false );
 	} );
 
+	it( 'should return false when passed a string value containing a unit with no quantity', () => {
+		expect( hasMixedValues( 'em' ) ).toBe( false );
+	} );
+
 	it( 'should return true when passed mixed values', () => {
 		const values = {
 			bottomLeft: '1em',

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

@@ -91,7 +91,8 @@ export function getAllValue( values = {} ) {
  */
 export function hasMixedValues( values = {} ) {
 	const allValue = getAllValue( values );
-	const isMixed = isNaN( parseFloat( allValue ) );
+	const isMixed =
+		typeof values === 'string' ? false : isNaN( parseFloat( allValue ) );
 
 	return isMixed;
 }

package/src/components/button-block-appender/style.scss

@@ -3,12 +3,16 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-10;
 	width: 100%;
 	height: auto;
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
+	// Needs specificity to override button styles.
+	&.components-button.components-button {
+		padding: $grid-unit-15;
+	}
+
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

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

@@ -69,13 +69,64 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   min-height: 0;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.emotion-10>*+*:not( marquee ) {
+  margin-left: calc(4px * 2);
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
+.emotion-13 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-15 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
   <div
     className="components-base-control__field emotion-2 emotion-3"
   >
-    <fieldset>
+    <fieldset
+      className="block-editor-color-gradient-control__fieldset"
+    >
       <div
         className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
         data-wp-c16t={true}
@@ -104,8 +155,10 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             <button
               aria-expanded={false}
               aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-color-palette__custom-color"
+              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 {
@@ -114,7 +167,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 }
               }
             >
-              #f00
+              <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

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

@@ -66,7 +66,7 @@ function ColorGradientControlInner( {
 				className
 			) }
 		>
-			<fieldset>
+			<fieldset className="block-editor-color-gradient-control__fieldset">
 				<VStack spacing={ 1 }>
 					{ showTitle && (
 						<legend>

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

@@ -4,6 +4,12 @@
 	}
 }
 
+.block-editor-color-gradient-control__fieldset {
+	// Prevents the `fieldset` from growing beyond its parent's size
+	// in order to fit its content.
+	min-width: 0;
+}
+
 .block-editor-panel-color-gradient-settings {
 	.block-editor-panel-color-gradient-settings__panel-title {
 		display: flex;

package/src/components/contrast-checker/index.js

@@ -138,4 +138,7 @@ function ContrastChecker( {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md
+ */
 export default ContrastChecker;

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

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+import BlockGroupToolbar from './toolbar';
 
 function ConvertToGroupButton( {
 	clientIds,
@@ -73,4 +74,8 @@ function ConvertToGroupButton( {
 	);
 }
 
-export { useConvertToGroupButtonProps, ConvertToGroupButton };
+export {
+	BlockGroupToolbar,
+	ConvertToGroupButton,
+	useConvertToGroupButtonProps,
+};

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

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { switchToBlockType } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { group, row, stack } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useConvertToGroupButtonProps } from '../convert-to-group-buttons';
+import { store as blockEditorStore } from '../../store';
+
+const layouts = {
+	group: undefined,
+	row: { type: 'flex', flexWrap: 'nowrap' },
+	stack: { type: 'flex', orientation: 'vertical' },
+};
+
+function BlockGroupToolbar() {
+	const {
+		blocksSelection,
+		clientIds,
+		groupingBlockName,
+		isGroupable,
+	} = useConvertToGroupButtonProps();
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const { canRemove } = useSelect(
+		( select ) => {
+			const { canRemoveBlocks } = select( blockEditorStore );
+			return {
+				canRemove: canRemoveBlocks( clientIds ),
+			};
+		},
+		[ clientIds ]
+	);
+
+	const onConvertToGroup = ( layout = 'group' ) => {
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+
+		if ( newBlocks && newBlocks.length > 0 ) {
+			// Because the block is not in the store yet we can't use
+			// updateBlockAttributes so need to manually update attributes.
+			newBlocks[ 0 ].attributes.layout = layouts[ layout ];
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	const onConvertToRow = () => onConvertToGroup( 'row' );
+	const onConvertToStack = () => onConvertToGroup( 'stack' );
+
+	// Don't render the button if the current selection cannot be grouped.
+	// A good example is selecting multiple button blocks within a Buttons block:
+	// The group block is not a valid child of Buttons, so we should not show the button.
+	// Any blocks that are locked against removal also cannot be grouped.
+	if ( ! isGroupable || ! canRemove ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				icon={ group }
+				label={ _x( 'Group', 'verb' ) }
+				onClick={ onConvertToGroup }
+			/>
+			<ToolbarButton
+				icon={ row }
+				label={ _x( 'Row', 'single horizontal line' ) }
+				onClick={ onConvertToRow }
+			/>
+			<ToolbarButton
+				icon={ stack }
+				label={ _x( 'Stack', 'verb' ) }
+				onClick={ onConvertToStack }
+			/>
+		</ToolbarGroup>
+	);
+}
+
+export default BlockGroupToolbar;

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

@@ -171,4 +171,7 @@ function CopyHandler( { children } ) {
 	return <div ref={ useClipboardHandler() }>{ children }</div>;
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
+ */
 export default CopyHandler;

package/src/components/date-format-picker/README.md

@@ -0,0 +1,58 @@
+# DateFormatPicker
+
+The `DateFormatPicker` component renders controls that let the user choose a
+_date format_. That is, how they want their dates to be formatted.
+
+A user can pick _Default_ to use the default date format (usually set at the
+site level).
+
+Otherwise, a user may choose a suggested date format or type in their own date
+format by selecting _Custom_.
+
+All date format strings should be in the format accepted by by the [`dateI18n`
+function in
+`@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n).
+
+## Usage
+
+```jsx
+import { DateFormatPicker } from '@wordpress/block-editor';
+
+const Example = () => {
+	const [ format, setFormat ] = useState( null );
+	return (
+		<DateFormatPicker
+			format={ format }
+			defaultFormat={ 'M j, Y' }
+			onChange={ ( nextFormat ) =>
+				setFormat( nextFormat );
+			}
+		/>
+	);
+};
+```
+
+## Props
+
+### `format`
+
+The current date format selected by the user. If `null`, _Default_ is selected.
+
+-   Type: `string|null`
+-   Required: Yes
+
+### `defaultFormat`
+
+The default format string. Used to show to the user what the date will look like
+if _Default_ is selected.
+
+-   Type: `string`
+-   Required: Yes
+
+### `onChange`
+
+Called when the user makes a selection, or when the user types in a date format.
+`null` indicates that _Default_ is selected.
+
+-   Type: `( format: string|null ) => void`
+-   Required: Yes