@wordpress/block-editor 9.0.0 → 9.3.0

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/duotone-control/style.scss

@@ -9,7 +9,7 @@ $popover-padding: $grid-unit-20;
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
 .block-editor-duotone-control__popover {
-	> .components-popover__content > div {
+	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;
 	}
@@ -34,9 +34,3 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
-
-// Better align the popover under the swatch.
-// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
-.block-editor-duotone-control__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
-	margin-left: -14px;
-}

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/iframe/index.js

@@ -10,7 +10,6 @@ import {
 	useState,
 	createPortal,
 	forwardRef,
-	useEffect,
 	useMemo,
 	useReducer,
 } from '@wordpress/element';
@@ -34,61 +33,66 @@ const BLOCK_PREFIX = 'wp-block';
  *
  * Ideally, this hook should be removed in the future and styles should be added
  * explicitly as editor styles.
- *
- * @param {Document} doc The document to append cloned stylesheets to.
  */
-function styleSheetsCompat( doc ) {
-	// Search the document for stylesheets targetting the editor canvas.
-	Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
-		try {
-			// May fail for external styles.
-			// eslint-disable-next-line no-unused-expressions
-			styleSheet.cssRules;
-		} catch ( e ) {
-			return;
-		}
-
-		const { ownerNode, cssRules } = styleSheet;
-
-		if ( ! cssRules ) {
-			return;
-		}
+function useStylesCompatibility() {
+	return useRefEffect( ( node ) => {
+		// Search the document for stylesheets targetting the editor canvas.
+		Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
+			try {
+				// May fail for external styles.
+				// eslint-disable-next-line no-unused-expressions
+				styleSheet.cssRules;
+			} catch ( e ) {
+				return;
+			}
 
-		// Generally, ignore inline styles. We add inline styles belonging to a
-		// stylesheet later, which may or may not match the selectors.
-		if ( ownerNode.tagName !== 'LINK' ) {
-			return;
-		}
+			const { ownerNode, cssRules } = styleSheet;
 
-		// Don't try to add the reset styles, which were removed as a dependency
-		// from `edit-blocks` for the iframe since we don't need to reset admin
-		// styles.
-		if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
-			return;
-		}
-
-		const isMatch = Array.from( cssRules ).find(
-			( { selectorText } ) =>
-				selectorText &&
-				( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
-					selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-		);
+			if ( ! cssRules ) {
+				return;
+			}
 
-		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
-			// Display warning once we have a way to add style dependencies to the editor.
-			// See: https://github.com/WordPress/gutenberg/pull/37466.
+			// Generally, ignore inline styles. We add inline styles belonging to a
+			// stylesheet later, which may or may not match the selectors.
+			if ( ownerNode.tagName !== 'LINK' ) {
+				return;
+			}
 
-			doc.head.appendChild( ownerNode.cloneNode( true ) );
+			// Don't try to add the reset styles, which were removed as a dependency
+			// from `edit-blocks` for the iframe since we don't need to reset admin
+			// styles.
+			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+				return;
+			}
 
-			// Add inline styles belonging to the stylesheet.
-			const inlineCssId = ownerNode.id.replace( '-css', '-inline-css' );
-			const inlineCssElement = document.getElementById( inlineCssId );
+			const isMatch = Array.from( cssRules ).find(
+				( { selectorText } ) =>
+					selectorText &&
+					( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
+						selectorText.includes( `.${ BLOCK_PREFIX }` ) )
+			);
 
-			if ( inlineCssElement ) {
-				doc.head.appendChild( inlineCssElement.cloneNode( true ) );
+			if (
+				isMatch &&
+				! node.ownerDocument.getElementById( ownerNode.id )
+			) {
+				// Display warning once we have a way to add style dependencies to the editor.
+				// See: https://github.com/WordPress/gutenberg/pull/37466.
+				node.appendChild( ownerNode.cloneNode( true ) );
+
+				// Add inline styles belonging to the stylesheet.
+				const inlineCssId = ownerNode.id.replace(
+					'-css',
+					'-inline-css'
+				);
+				const inlineCssElement = document.getElementById( inlineCssId );
+
+				if ( inlineCssElement ) {
+					node.appendChild( inlineCssElement.cloneNode( true ) );
+				}
 			}
-		}
-	} );
+		} );
+	}, [] );
 }
 
 /**
@@ -222,12 +226,7 @@ function Iframe(
 			} );
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-
-	useEffect( () => {
-		if ( iframeDocument ) {
-			styleSheetsCompat( iframeDocument );
-		}
-	}, [ iframeDocument ] );
+	const styleCompatibilityRef = useStylesCompatibility();
 
 	head = (
 		<>
@@ -275,6 +274,15 @@ function Iframe(
 									...bodyClasses
 								) }
 							>
+								{ /*
+								 * This is a wrapper for the extra styles and scripts
+								 * rendered imperatively by cloning the parent,
+								 * it's important that this div's content remains uncontrolled.
+								 */ }
+								<div
+									style={ { display: 'none' } }
+									ref={ styleCompatibilityRef }
+								/>
 								<StyleProvider document={ iframeDocument }>
 									{ children }
 								</StyleProvider>

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-editor/use-save-image.js

@@ -6,6 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 export default function useSaveImage( {
 	crop,
@@ -60,7 +61,7 @@ export default function useSaveImage( {
 					sprintf(
 						/* translators: 1. Error message */
 						__( 'Could not edit image. %s' ),
-						error.message
+						stripHTML( error.message )
 					),
 					{
 						id: 'image-editing-error',

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

@@ -14,7 +14,7 @@ export {
 export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
-export { default as __experimentalBlockContentOverlay } from './block-content-overlay';
+export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';
 export { BlockContextProvider } from './block-context';
 export {
 	default as BlockControls,
@@ -51,7 +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 __experimentalToolsPanelColorDropdown } from './colors-gradients/tools-panel-color-dropdown';
+export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,
@@ -148,6 +148,8 @@ 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';
+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 ||

package/src/components/inserter/index.native.js

@@ -67,7 +67,7 @@ const defaultRenderToggle = ( {
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
 				// testID is present to disambiguate this element for native UI tests. It's not
-				// usually required for components. See: https://git.io/JeQ7G.
+				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
 			} }
@@ -282,9 +282,8 @@ export class Inserter extends Component {
 			this.setState(
 				{
 					destinationRootClientId: this.props.destinationRootClientId,
-					shouldReplaceBlock: this.shouldReplaceBlock(
-						insertionType
-					),
+					shouldReplaceBlock:
+						this.shouldReplaceBlock( insertionType ),
 					insertionIndex: this.getInsertionIndex( insertionType ),
 				},
 				onToggle
@@ -324,11 +323,8 @@ export class Inserter extends Component {
 	 */
 	renderContent( { onClose, isOpen } ) {
 		const { clientId, isAppender } = this.props;
-		const {
-			destinationRootClientId,
-			shouldReplaceBlock,
-			insertionIndex,
-		} = this.state;
+		const { destinationRootClientId, shouldReplaceBlock, insertionIndex } =
+			this.state;
 		return (
 			<InserterMenu
 				isOpen={ isOpen }
@@ -385,9 +381,8 @@ export default compose( [
 			: undefined;
 
 		function getDefaultInsertionIndex() {
-			const {
-				__experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
-			} = getBlockEditorSettings();
+			const { __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop } =
+				getBlockEditorSettings();
 
 			// If post title is selected insert as first block.
 			if ( shouldInsertAtTheTop ) {

package/src/components/inserter/library.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,6 +10,8 @@ import { forwardRef } from '@wordpress/element';
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 function InserterLibrary(
 	{
 		rootClientId,