@wordpress/block-editor 9.2.0 → 9.3.0

package/src/components/color-style-selector/index.js

@@ -49,35 +49,34 @@ const ColorSelectorIcon = ( { style, className } ) => {
  *
  * @return {*} React toggle button component.
  */
-const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
-	onToggle,
-	isOpen,
-} ) => {
-	const openOnArrowDown = ( event ) => {
-		if ( ! isOpen && event.keyCode === DOWN ) {
-			event.preventDefault();
-			onToggle();
-		}
-	};
+const renderToggleComponent =
+	( { TextColor, BackgroundColor } ) =>
+	( { onToggle, isOpen } ) => {
+		const openOnArrowDown = ( event ) => {
+			if ( ! isOpen && event.keyCode === DOWN ) {
+				event.preventDefault();
+				onToggle();
+			}
+		};
 
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control block-library-colors-selector__toggle"
-				label={ __( 'Open Colors Selector' ) }
-				onClick={ onToggle }
-				onKeyDown={ openOnArrowDown }
-				icon={
-					<BackgroundColor>
-						<TextColor>
-							<ColorSelectorIcon />
-						</TextColor>
-					</BackgroundColor>
-				}
-			/>
-		</ToolbarGroup>
-	);
-};
+		return (
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control block-library-colors-selector__toggle"
+					label={ __( 'Open Colors Selector' ) }
+					onClick={ onToggle }
+					onKeyDown={ openOnArrowDown }
+					icon={
+						<BackgroundColor>
+							<TextColor>
+								<ColorSelectorIcon />
+							</TextColor>
+						</BackgroundColor>
+					}
+				/>
+			</ToolbarGroup>
+		);
+	};
 
 const BlockColorsStyleSelector = ( { children, ...other } ) => {
 	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {

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

@@ -28,13 +28,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 
@@ -56,13 +56,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( '000000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( '000000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 

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

@@ -30,9 +30,8 @@ import useSetting from '../use-setting';
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) => (
-			<WrappedComponent { ...props } colors={ colorsArray } />
-		),
+		( WrappedComponent ) => ( props ) =>
+			<WrappedComponent { ...props } colors={ colorsArray } />,
 		'withCustomColorPalette'
 	);
 
@@ -96,9 +95,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 
 					this.setters = this.createSetters();
 					this.colorUtils = {
-						getMostReadableColor: this.getMostReadableColor.bind(
-							this
-						),
+						getMostReadableColor:
+							this.getMostReadableColor.bind( this ),
 					};
 
 					this.state = {};
@@ -117,9 +115,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 							colorContext,
 							colorAttributeName
 						) => {
-							const upperFirstColorAttributeName = upperFirst(
-								colorAttributeName
-							);
+							const upperFirstColorAttributeName =
+								upperFirst( colorAttributeName );
 							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
 							settersAccumulator[
 								`set${ upperFirstColorAttributeName }`
@@ -181,9 +178,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 								previousColor === colorObject.color &&
 								previousColorObject
 							) {
-								newState[
-									colorAttributeName
-								] = previousColorObject;
+								newState[ colorAttributeName ] =
+									previousColorObject;
 							} else {
 								newState[ colorAttributeName ] = {
 									...colorObject,

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

@@ -67,24 +67,29 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
-const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
-	const { colorValue, label } = settings;
+const renderToggle =
+	( settings ) =>
+	( { onToggle, isOpen } ) => {
+		const { colorValue, label } = settings;
 
-	const toggleProps = {
-		onClick: onToggle,
-		className: classnames(
-			'block-editor-panel-color-gradient-settings__dropdown',
-			{ 'is-open': isOpen }
-		),
-		'aria-expanded': isOpen,
-	};
+		const toggleProps = {
+			onClick: onToggle,
+			className: classnames(
+				'block-editor-panel-color-gradient-settings__dropdown',
+				{ 'is-open': isOpen }
+			),
+			'aria-expanded': isOpen,
+		};
 
-	return (
-		<Button { ...toggleProps }>
-			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</Button>
-	);
-};
+		return (
+			<Button { ...toggleProps }>
+				<LabeledColorIndicator
+					colorValue={ colorValue }
+					label={ label }
+				/>
+			</Button>
+		);
+	};
 
 // Renders a collection of color controls as dropdowns. Depending upon the
 // context in which these dropdowns are being rendered, they may be wrapped

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

@@ -3,22 +3,22 @@
  */
 import { render, screen } from '@testing-library/react';
 import { create, act } from 'react-test-renderer';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
-	element
-) => {
-	return (
-		element.type === 'button' &&
-		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ].startsWith( ariaLabelStart )
-	);
-};
+const noop = () => {};
+
+const getButtonWithAriaLabelStartPredicate =
+	( ariaLabelStart ) => ( element ) => {
+		return (
+			element.type === 'button' &&
+			element.props[ 'aria-label' ] &&
+			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
+		);
+	};
 
 const getTabWithTestPredicate = ( text ) => ( element ) => {
 	return (

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

@@ -20,12 +20,8 @@ const layouts = {
 };
 
 function BlockGroupToolbar() {
-	const {
-		blocksSelection,
-		clientIds,
-		groupingBlockName,
-		isGroupable,
-	} = useConvertToGroupButtonProps();
+	const { blocksSelection, clientIds, groupingBlockName, isGroupable } =
+		useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
 	const { canRemove, variations } = useSelect(

package/src/components/copy-handler/README.md

@@ -8,8 +8,13 @@ Concretely, it handles the display of success messages and takes care of copying
 
 ## Table of contents
 
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
+- [Copy Handler](#copy-handler)
+	- [Table of contents](#table-of-contents)
+	- [Development guidelines](#development-guidelines)
+		- [Usage](#usage)
+		- [Props](#props)
+		- [`children`](#children)
+	- [Related components](#related-components)
 
 ## Development guidelines
 

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

@@ -10,6 +10,7 @@ import {
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
+	__unstableStripHTML as stripHTML,
 } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -144,10 +145,8 @@ export function useClipboardHandler() {
 					if ( shouldHandleWholeBlocks ) {
 						blocks = getBlocksByClientId( selectedBlockClientIds );
 					} else {
-						const [
-							head,
-							tail,
-						] = __unstableGetSelectedBlocksWithPartialSelection();
+						const [ head, tail ] =
+							__unstableGetSelectedBlocksWithPartialSelection();
 						const inBetweenBlocks = getBlocksByClientId(
 							selectedBlockClientIds.slice(
 								1,
@@ -158,7 +157,10 @@ export function useClipboardHandler() {
 					}
 					const serialized = serialize( blocks );
 
-					event.clipboardData.setData( 'text/plain', serialized );
+					event.clipboardData.setData(
+						'text/plain',
+						toPlainText( serialized )
+					);
 					event.clipboardData.setData( 'text/html', serialized );
 				}
 			}
@@ -178,7 +180,8 @@ export function useClipboardHandler() {
 					return;
 				}
 				const {
-					__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
 				} = getSettings();
 				const { plainText, html } = getPasteEventData( event );
 				const blocks = pasteHandler( {
@@ -213,6 +216,23 @@ function CopyHandler( { children } ) {
 	return <div ref={ useClipboardHandler() }>{ children }</div>;
 }
 
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+	// Manually handle BR tags as line breaks prior to `stripHTML` call
+	html = html.replace( /<br>/g, '\n' );
+
+	const plainText = stripHTML( html ).trim();
+
+	// Merge any consecutive line breaks
+	return plainText.replace( /\n\n+/g, '\n\n' );
+}
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
  */

package/src/components/default-block-appender/index.js

@@ -79,9 +79,8 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } = select(
-			blockEditorStore
-		);
+		const { getBlockCount, getSettings, getTemplateLock } =
+			select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const { bodyPlaceholder } = getSettings();
@@ -93,9 +92,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } = dispatch(
-			blockEditorStore
-		);
+		const { insertDefaultBlock, startTyping } =
+			dispatch( blockEditorStore );
 
 		return {
 			onAppend() {

package/src/components/default-block-appender/index.native.js

@@ -58,12 +58,8 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockCount,
-			getBlockName,
-			isBlockValid,
-			getTemplateLock,
-		} = select( blockEditorStore );
+		const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } =
+			select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const isLastBlockDefault =
@@ -77,9 +73,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } = dispatch(
-			blockEditorStore
-		);
+		const { insertDefaultBlock, startTyping } =
+			dispatch( blockEditorStore );
 
 		return {
 			onAppend() {

package/src/components/default-style-picker/index.js

@@ -14,24 +14,22 @@ import { store as blockEditorStore } from '../../store';
 import { getDefaultStyle } from '../block-styles/utils';
 
 export default function DefaultStylePicker( { blockName } ) {
-	const {
-		preferredStyle,
-		onUpdatePreferredStyleVariations,
-		styles,
-	} = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			const preferredStyleVariations =
-				settings.__experimentalPreferredStyleVariations;
-			return {
-				preferredStyle: preferredStyleVariations?.value?.[ blockName ],
-				onUpdatePreferredStyleVariations:
-					preferredStyleVariations?.onChange ?? null,
-				styles: select( blocksStore ).getBlockStyles( blockName ),
-			};
-		},
-		[ blockName ]
-	);
+	const { preferredStyle, onUpdatePreferredStyleVariations, styles } =
+		useSelect(
+			( select ) => {
+				const settings = select( blockEditorStore ).getSettings();
+				const preferredStyleVariations =
+					settings.__experimentalPreferredStyleVariations;
+				return {
+					preferredStyle:
+						preferredStyleVariations?.value?.[ blockName ],
+					onUpdatePreferredStyleVariations:
+						preferredStyleVariations?.onChange ?? null,
+					styles: select( blocksStore ).getBlockStyles( blockName ),
+				};
+			},
+			[ blockName ]
+		);
 	const selectOptions = useMemo(
 		() => [
 			{ label: __( 'Not set' ), value: '' },
@@ -39,9 +37,10 @@ export default function DefaultStylePicker( { blockName } ) {
 		],
 		[ styles ]
 	);
-	const defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [
-		styles,
-	] );
+	const defaultStyleName = useMemo(
+		() => getDefaultStyle( styles )?.name,
+		[ styles ]
+	);
 	const selectOnChange = useCallback(
 		( blockStyle ) => {
 			onUpdatePreferredStyleVariations( blockName, blockStyle );

package/src/components/font-sizes/with-font-sizes.js

@@ -78,9 +78,8 @@ export default ( ...fontSizeNames ) => {
 								customFontSizeAttributeName,
 								fontSizeAttributeName
 							) => {
-								const upperFirstFontSizeAttributeName = upperFirst(
-									fontSizeAttributeName
-								);
+								const upperFirstFontSizeAttributeName =
+									upperFirst( fontSizeAttributeName );
 								settersAccumulator[
 									`set${ upperFirstFontSizeAttributeName }`
 								] = this.createSetFontSize(

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -33,12 +33,8 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
 }
 
 export default function AspectRatioDropdown( { toggleProps } ) {
-	const {
-		isInProgress,
-		aspect,
-		setAspect,
-		defaultAspect,
-	} = useImageEditingContext();
+	const { isInProgress, aspect, setAspect, defaultAspect } =
+		useImageEditingContext();
 
 	return (
 		<DropdownMenu

package/src/components/image-size-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, noop } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,7 @@ import { __ } from '@wordpress/i18n';
 import useDimensionHandler from './use-dimension-handler';
 
 const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
+const noop = () => {};
 
 export default function ImageSizeControl( {
 	imageWidth,
@@ -32,12 +33,8 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
-	const {
-		currentHeight,
-		currentWidth,
-		updateDimension,
-		updateDimensions,
-	} = useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
+	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
+		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 
 	return (
 		<>

package/src/components/index.js

@@ -51,6 +51,7 @@ export { default as __experimentalTextTransformControl } from './text-transform-
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
+export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,
@@ -148,6 +149,7 @@ 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';
+export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
 
 /*
  * State Related Components

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -40,9 +40,8 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition } = useSelect(
-		blockEditorStore
-	);
+	const { getSelectedBlocksInitialCaretPosition } =
+		useSelect( blockEditorStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const innerBlocks = useSelect(
 		( select ) => select( blockEditorStore ).getBlocks( clientId ),

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -49,16 +49,13 @@ export default function useNestedSettingsUpdate(
 
 	const { blockListSettings, parentLock } = useSelect(
 		( select ) => {
-			const rootClientId = select(
-				blockEditorStore
-			).getBlockRootClientId( clientId );
+			const rootClientId =
+				select( blockEditorStore ).getBlockRootClientId( clientId );
 			return {
-				blockListSettings: select(
-					blockEditorStore
-				).getBlockListSettings( clientId ),
-				parentLock: select( blockEditorStore ).getTemplateLock(
-					rootClientId
-				),
+				blockListSettings:
+					select( blockEditorStore ).getBlockListSettings( clientId ),
+				parentLock:
+					select( blockEditorStore ).getTemplateLock( rootClientId ),
 			};
 		},
 		[ clientId ]

package/src/components/inserter/block-types-tab.native.js

@@ -31,9 +31,8 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 		[ rootClientId ]
 	);
 
-	const { items, trackBlockTypeSelected } = useBlockTypeImpressions(
-		blockTypes
-	);
+	const { items, trackBlockTypeSelected } =
+		useBlockTypeImpressions( blockTypes );
 
 	const handleSelect = ( ...args ) => {
 		trackBlockTypeSelected( ...args );

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -11,9 +11,8 @@ import { store as blockEditorStore } from '../../../store';
 
 function useBlockTypeImpressions( blockTypes ) {
 	const { blockTypeImpressions } = useSelect( ( select ) => {
-		const { getSettings: getBlockEditorSettings } = select(
-			blockEditorStore
-		);
+		const { getSettings: getBlockEditorSettings } =
+			select( blockEditorStore );
 		const { impressions } = getBlockEditorSettings();
 
 		return {

package/src/components/inserter/hooks/use-insertion-point.js

@@ -72,8 +72,9 @@ function useInsertionPoint( {
 				_destinationIndex = getBlockIndex( selectedBlockClientId ) + 1;
 			} else {
 				// Insert at the end of the list.
-				_destinationIndex = getBlockOrder( _destinationRootClientId )
-					.length;
+				_destinationIndex = getBlockOrder(
+					_destinationRootClientId
+				).length;
 			}
 
 			return {

package/src/components/inserter/hooks/use-patterns-state.js

@@ -28,13 +28,12 @@ import { store as blockEditorStore } from '../../../store';
 const usePatternsState = ( onInsert, rootClientId ) => {
 	const { patternCategories, patterns } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } = select(
-				blockEditorStore
-			);
+			const { __experimentalGetAllowedPatterns, getSettings } =
+				select( blockEditorStore );
 			return {
 				patterns: __experimentalGetAllowedPatterns( rootClientId ),
-				patternCategories: getSettings()
-					.__experimentalBlockPatternCategories,
+				patternCategories:
+					getSettings().__experimentalBlockPatternCategories,
 			};
 		},
 		[ rootClientId ]

package/src/components/inserter/index.js

@@ -225,9 +225,8 @@ export default compose( [
 
 		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
 
-		const directInsertBlock = __experimentalGetDirectInsertBlock(
-			rootClientId
-		);
+		const directInsertBlock =
+			__experimentalGetDirectInsertBlock( rootClientId );
 
 		const index = getBlockIndex( clientId );
 		const blockCount = getBlockCount();
@@ -276,9 +275,8 @@ export default compose( [
 				}
 
 				function getAdjacentBlockAttributes( attributesToCopy ) {
-					const { getBlock, getPreviousBlockClientId } = select(
-						blockEditorStore
-					);
+					const { getBlock, getPreviousBlockClientId } =
+						select( blockEditorStore );
 
 					if (
 						! attributesToCopy ||