@wordpress/block-editor 9.1.0 → 9.2.0

package/src/components/block-popover/inbetween.js

@@ -28,11 +28,13 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { orientation, rootClientId } = useSelect(
+	const { orientation, rootClientId, isVisible } = useSelect(
 		( select ) => {
-			const { getBlockListSettings, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockListSettings,
+				getBlockRootClientId,
+				isBlockVisible,
+			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( previousClientId );
 			return {
@@ -40,6 +42,9 @@ function BlockPopoverInbetween( {
 					getBlockListSettings( _rootClientId )?.orientation ||
 					'vertical',
 				rootClientId: _rootClientId,
+				isVisible:
+					isBlockVisible( previousClientId ) &&
+					isBlockVisible( nextClientId ),
 			};
 		},
 		[ previousClientId ]
@@ -48,7 +53,7 @@ function BlockPopoverInbetween( {
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -87,7 +92,7 @@ function BlockPopoverInbetween( {
 	}, [ previousElement, nextElement, isVertical ] );
 
 	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -149,7 +154,7 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement ) {
+	if ( ! previousElement || ! nextElement || ! isVisible ) {
 		return null;
 	}
 

package/src/components/block-popover/index.js

@@ -62,6 +62,7 @@ export default function BlockPopover( {
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
 			__unstableForcePosition
+			__unstableShift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

package/src/components/block-tools/block-selection-button.js

@@ -262,6 +262,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						onClick={ () => setNavigationMode( false ) }
 						onKeyDown={ onKeyDown }
 						label={ label }
+						showTooltip={ false }
 						className="block-selection-button_select-button"
 					>
 						<BlockTitle

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

@@ -17,6 +17,7 @@ import { chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 function VariationsButtons( {
@@ -33,7 +34,7 @@ function VariationsButtons( {
 			{ variations.map( ( variation ) => (
 				<Button
 					key={ variation.name }
-					icon={ variation.icon }
+					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
 					label={
 						selectedValue === variation.name
@@ -121,9 +122,12 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	// Check if each variation has a unique icon.
 	const hasUniqueIcons = useMemo( () => {
 		const variationIcons = new Set();
+		if ( ! variations ) {
+			return false;
+		}
 		variations.forEach( ( variation ) => {
 			if ( variation.icon ) {
-				variationIcons.add( variation.icon );
+				variationIcons.add( variation.icon?.src || variation.icon );
 			}
 		} );
 		return variationIcons.size === variations.length;

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

@@ -12,8 +12,6 @@ import {
 	Dropdown,
 	FlexItem,
 	__experimentalHStack as HStack,
-	__experimentalItem as Item,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
@@ -22,46 +20,34 @@ import {
  */
 import ColorGradientControl from './control';
 
-// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
-// `ItemGroup` allowing for a standalone group of controls to be
-// rendered semantically.
-const WithItemGroup = ( { __experimentalIsItemGroup, children } ) => {
-	if ( ! __experimentalIsItemGroup ) {
-		return children;
-	}
-
-	return (
-		<ItemGroup
-			isBordered
-			isSeparated
-			className="block-editor-panel-color-gradient-settings__item-group"
-		>
-			{ children }
-		</ItemGroup>
-	);
-};
-
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
-const WithToolsPanelItem = ( {
-	__experimentalIsItemGroup,
-	settings,
-	children,
-	...props
-} ) => {
-	if ( __experimentalIsItemGroup ) {
-		return children;
-	}
-
+const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
+	const clearValue = () => {
+		if ( setting.colorValue ) {
+			setting.onColorChange();
+		} else if ( setting.gradientValue ) {
+			setting.onGradientChange();
+		}
+	};
 	return (
 		<ToolsPanelItem
-			hasValue={ settings.hasValue }
-			label={ settings.label }
-			onDeselect={ settings.onDeselect }
-			isShownByDefault={ settings.isShownByDefault }
-			resetAllFilter={ settings.resetAllFilter }
+			hasValue={ () => {
+				return !! setting.colorValue || !! setting.gradientValue;
+			} }
+			label={ setting.label }
+			onDeselect={ clearValue }
+			isShownByDefault={
+				setting.isShownByDefault !== undefined
+					? setting.isShownByDefault
+					: true
+			}
 			{ ...props }
 			className="block-editor-tools-panel-color-gradient-settings__item"
+			panelId={ panelId }
+			// Pass resetAllFilter if supplied due to rendering via SlotFill
+			// into parent ToolsPanel.
+			resetAllFilter={ setting.resetAllFilter }
 		>
 			{ children }
 		</ToolsPanelItem>
@@ -82,23 +68,21 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
 const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
-	const { __experimentalIsItemGroup, colorValue, label } = settings;
+	const { colorValue, label } = settings;
 
-	// Determine component, `Item` or `Button`, to wrap color indicator with.
-	const ToggleComponent = __experimentalIsItemGroup ? Item : Button;
-	const toggleClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__item'
-		: 'block-editor-panel-color-gradient-settings__dropdown';
 	const toggleProps = {
 		onClick: onToggle,
-		className: classnames( toggleClassName, { 'is-open': isOpen } ),
-		'aria-expanded': __experimentalIsItemGroup ? undefined : isOpen,
+		className: classnames(
+			'block-editor-panel-color-gradient-settings__dropdown',
+			{ 'is-open': isOpen }
+		),
+		'aria-expanded': isOpen,
 	};
 
 	return (
-		<ToggleComponent { ...toggleProps }>
+		<Button { ...toggleProps }>
 			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</ToggleComponent>
+		</Button>
 	);
 };
 
@@ -115,15 +99,11 @@ export default function ColorGradientSettingsDropdown( {
 	disableCustomGradients,
 	enableAlpha,
 	gradients,
-	__experimentalIsItemGroup = true,
 	settings,
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
-	const dropdownClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__dropdown'
-		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
 	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
 		popoverProps = {
@@ -133,12 +113,10 @@ export default function ColorGradientSettingsDropdown( {
 	}
 
 	return (
-		// Only wrap with `ItemGroup` if these controls are being rendered
-		// semantically.
-		<WithItemGroup __experimentalIsItemGroup={ __experimentalIsItemGroup }>
+		<>
 			{ settings.map( ( setting, index ) => {
 				const controlProps = {
-					clearable: __experimentalIsItemGroup ? undefined : false,
+					clearable: false,
 					colorValue: setting.colorValue,
 					colors,
 					disableCustomColors,
@@ -156,7 +134,6 @@ export default function ColorGradientSettingsDropdown( {
 				};
 				const toggleSettings = {
 					colorValue: setting.gradientValue ?? setting.colorValue,
-					__experimentalIsItemGroup,
 					label: setting.label,
 				};
 
@@ -166,15 +143,12 @@ export default function ColorGradientSettingsDropdown( {
 						// `ToolsPanelItem`
 						<WithToolsPanelItem
 							key={ index }
-							__experimentalIsItemGroup={
-								__experimentalIsItemGroup
-							}
-							settings={ setting }
+							setting={ setting }
 							{ ...props }
 						>
 							<Dropdown
 								popoverProps={ popoverProps }
-								className={ dropdownClassName }
+								className="block-editor-tools-panel-color-gradient-settings__dropdown"
 								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
@@ -185,6 +159,6 @@ export default function ColorGradientSettingsDropdown( {
 					)
 				);
 			} ) }
-		</WithItemGroup>
+		</>
 	);
 }

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -9,27 +9,19 @@ import { every, isEmpty } from 'lodash';
  */
 import {
 	__experimentalSpacer as Spacer,
-	ColorIndicator,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { useRegistry } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(%s: color %s)' );
-
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -37,55 +29,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const Indicators = ( { colors, gradients, settings } ) => {
-	return settings.map(
-		(
-			{
-				colorValue,
-				gradientValue,
-				label,
-				colors: availableColors,
-				gradients: availableGradients,
-			},
-			index
-		) => {
-			if ( ! colorValue && ! gradientValue ) {
-				return null;
-			}
-			let ariaLabel;
-			if ( colorValue ) {
-				const colorObject = getColorObjectByColorValue(
-					availableColors || colors,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					colorIndicatorAriaLabel,
-					label.toLowerCase(),
-					( colorObject && colorObject.name ) || colorValue
-				);
-			} else {
-				const gradientObject = __experimentalGetGradientObjectByGradientValue(
-					availableGradients || gradients,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					gradientIndicatorAriaLabel,
-					label.toLowerCase(),
-					( gradientObject && gradientObject.name ) || gradientValue
-				);
-			}
-
-			return (
-				<ColorIndicator
-					key={ index }
-					colorValue={ colorValue || gradientValue }
-					aria-label={ ariaLabel }
-				/>
-			);
-		}
-	);
-};
-
 export const PanelColorGradientSettingsInner = ( {
 	className,
 	colors,
@@ -99,8 +42,9 @@ export const PanelColorGradientSettingsInner = ( {
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
-	...props
 } ) => {
+	const panelId = useInstanceId( PanelColorGradientSettingsInner );
+	const { batch } = useRegistry();
 	if (
 		isEmpty( colors ) &&
 		isEmpty( gradients ) &&
@@ -120,28 +64,38 @@ export const PanelColorGradientSettingsInner = ( {
 		return null;
 	}
 
-	const titleElement = (
-		<span className="block-editor-panel-color-gradient-settings__panel-title">
-			{ title }
-			<Indicators
-				colors={ colors }
-				gradients={ gradients }
-				settings={ settings }
-			/>
-		</span>
-	);
-
 	return (
-		<PanelBody
+		<ToolsPanel
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ showTitle ? titleElement : undefined }
-			{ ...props }
+			label={ showTitle ? title : undefined }
+			resetAll={ () => {
+				batch( () => {
+					settings.forEach(
+						( {
+							colorValue,
+							gradientValue,
+							onColorChange,
+							onGradientChange,
+						} ) => {
+							if ( colorValue ) {
+								onColorChange();
+							} else if ( gradientValue ) {
+								onGradientChange();
+							}
+						}
+					);
+				} );
+			} }
+			panelId={ panelId }
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			<ColorGradientSettingsDropdown
 				settings={ settings }
+				panelId={ panelId }
 				{ ...{
 					colors,
 					gradients,
@@ -157,7 +111,7 @@ export const PanelColorGradientSettingsInner = ( {
 					<Spacer marginY={ 4 } /> { children }
 				</>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 };
 

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

@@ -10,25 +10,14 @@
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings {
-	.block-editor-panel-color-gradient-settings__panel-title {
-		display: flex;
-		gap: $grid-unit-10;
-
-		.component-color-indicator {
-			width: $grid-unit-15;
-			height: $grid-unit-15;
-			align-self: center;
-
-			&:first-child {
-				margin-left: $grid-unit-15;
-			}
-		}
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
+	&,
+	& > div:not(:first-of-type) {
+		display: block;
 	}
+}
 
-	&.is-opened &__panel-title .component-color-indicator {
-		display: none;
-	}
+.block-editor-panel-color-gradient-settings {
 
 	// Must equal $color-palette-circle-size from:
 	// @wordpress/components/src/circular-option-picker/style.scss
@@ -49,32 +38,12 @@
 		margin-bottom: inherit;
 	}
 
-	.block-editor-panel-color-gradient-settings__dropdown {
-		display: block;
-	}
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-	width: 100%;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 	width: $sidebar-width;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-	border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-	padding-top: $grid-unit-15 !important;
-	padding-bottom: $grid-unit-15 !important;
-
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
-	}
-}
 
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
@@ -97,6 +66,7 @@
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
 	&.first {
+		margin-top: $grid-unit-30;
 		border-top-left-radius: 2px;
 		border-top-right-radius: 2px;
 		border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -126,3 +96,7 @@
 		}
 	}
 }
+
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { group, row, stack } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -28,14 +28,20 @@ function BlockGroupToolbar() {
 	} = useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-	const { canRemove } = useSelect(
+	const { canRemove, variations } = useSelect(
 		( select ) => {
 			const { canRemoveBlocks } = select( blockEditorStore );
+			const { getBlockVariations } = select( blocksStore );
+
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
+				variations: getBlockVariations(
+					groupingBlockName,
+					'transform'
+				),
 			};
 		},
-		[ clientIds ]
+		[ clientIds, groupingBlockName ]
 	);
 
 	const onConvertToGroup = ( layout = 'group' ) => {
@@ -63,6 +69,13 @@ function BlockGroupToolbar() {
 		return null;
 	}
 
+	const canInsertRow = !! variations.find(
+		( { name } ) => name === 'group-row'
+	);
+	const canInsertStack = !! variations.find(
+		( { name } ) => name === 'group-stack'
+	);
+
 	return (
 		<ToolbarGroup>
 			<ToolbarButton
@@ -70,16 +83,20 @@ function BlockGroupToolbar() {
 				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 }
-			/>
+			{ canInsertRow && (
+				<ToolbarButton
+					icon={ row }
+					label={ _x( 'Row', 'single horizontal line' ) }
+					onClick={ onConvertToRow }
+				/>
+			) }
+			{ canInsertStack && (
+				<ToolbarButton
+					icon={ stack }
+					label={ _x( 'Stack', 'verb' ) }
+					onClick={ onConvertToStack }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

package/src/components/index.js

@@ -147,6 +147,7 @@ export { default as useBlockDisplayInformation } from './use-block-display-infor
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
+export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 
 /*
  * State Related Components

package/src/components/media-placeholder/index.js

@@ -73,7 +73,6 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
-	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -327,7 +326,6 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
-				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

package/src/components/media-replace-flow/index.js

@@ -42,7 +42,6 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
-	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -158,7 +157,6 @@ const MediaReplaceFlow = ( {
 								selectMedia( media, onClose )
 							}
 							allowedTypes={ allowedTypes }
-							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }

package/src/components/media-upload/index.native.js

@@ -39,6 +39,7 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -78,6 +79,8 @@ export class MediaUpload extends Component {
 	}
 
 	getAllSources() {
+		const { onSelectURL } = this.props;
+
 		const cameraImageSource = {
 			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
@@ -124,16 +127,17 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE ],
 			icon: globe,
 		};
 
+		// Only include `urlSource` option if `onSelectURL` prop is present, in order to match the web behavior.
 		const internalSources = [
 			deviceLibrarySource,
 			cameraImageSource,
 			cameraVideoSource,
 			siteLibrarySource,
-			urlSource,
+			...( onSelectURL ? [ urlSource ] : [] ),
 		];
 
 		return internalSources.concat( this.state.otherMediaOptions );