@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/rich-text/use-input-events.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useInputEvents( inputEvents ) {
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			for ( const keyboardShortcut of inputEvents.current ) {
+				keyboardShortcut( event );
+			}
+		}
+
+		element.addEventListener( 'input', onInput );
+		return () => {
+			element.removeEventListener( 'input', onInput );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-paste-handler.js

@@ -21,6 +21,25 @@ import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 
+/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
+
+/**
+ * Replaces line separators with line breaks if not multiline.
+ * Replaces line breaks with line separators if multiline.
+ *
+ * @param {RichTextValue} value       Value to adjust.
+ * @param {boolean}       isMultiline Whether to adjust to multiline or not.
+ *
+ * @return {RichTextValue} Adjusted value.
+ */
+function adjustLines( value, isMultiline ) {
+	if ( isMultiline ) {
+		return replace( value, /\n+/g, LINE_SEPARATOR );
+	}
+
+	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
+}
+
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -69,6 +88,9 @@ export function usePasteHandler( props ) {
 				}
 			}
 
+			// Remove Windows-specific metadata appended within copied HTML text.
+			html = removeWindowsFragments( html );
+
 			event.preventDefault();
 
 			// Allows us to ask for this information when we get a report.
@@ -107,13 +129,19 @@ export function usePasteHandler( props ) {
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( {
+				const pastedMultilineTag =
+					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
+					undefined;
+				let pastedValue = create( {
 					html,
-					multilineTag,
+					multilineTag: pastedMultilineTag,
 					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
+						pastedMultilineTag === 'li'
+							? [ 'ul', 'ol' ]
+							: undefined,
 					preserveWhiteSpace,
 				} );
+				pastedValue = adjustLines( pastedValue, !! multilineTag );
 				addActiveFormats( pastedValue, value.activeFormats );
 				onChange( insert( value, pastedValue ) );
 				return;
@@ -187,18 +215,11 @@ export function usePasteHandler( props ) {
 			if ( typeof content === 'string' ) {
 				let valueToInsert = create( { html: content } );
 
-				addActiveFormats( valueToInsert, value.activeFormats );
-
 				// If the content should be multiline, we should process text
 				// separated by a line break as separate lines.
-				if ( multilineTag ) {
-					valueToInsert = replace(
-						valueToInsert,
-						/\n+/g,
-						LINE_SEPARATOR
-					);
-				}
+				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
 
+				addActiveFormats( valueToInsert, value.activeFormats );
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {
@@ -222,3 +243,17 @@ export function usePasteHandler( props ) {
 		};
 	}, [] );
 }
+
+/**
+ * Normalizes a given string of HTML to remove the Windows specific "Fragment" comments
+ * and any preceeding and trailing whitespace.
+ *
+ * @param {string} html the html to be normalized
+ * @return {string} the normalized html
+ */
+function removeWindowsFragments( html ) {
+	const startReg = /.*<!--StartFragment-->/s;
+	const endReg = /<!--EndFragment-->.*/s;
+
+	return html.replace( startReg, '' ).replace( endReg, '' );
+}

package/src/components/rich-text/use-shortcuts.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useShortcuts( keyboardShortcuts ) {
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			for ( const keyboardShortcut of keyboardShortcuts.current ) {
+				keyboardShortcut( event );
+			}
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

package/src/components/rich-text/utils.js

@@ -3,6 +3,8 @@
  */
 import { regexp } from '@wordpress/shortcode';
 import deprecated from '@wordpress/deprecated';
+import { renderToString } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
 
 export function addActiveFormats( value, activeFormats ) {
 	if ( activeFormats?.length ) {
@@ -60,3 +62,17 @@ export function getAllowedFormats( {
 getAllowedFormats.EMPTY_ARRAY = [];
 
 export const isShortcode = ( text ) => regexp( '.*' ).test( text );
+
+/**
+ * Creates a link from pasted URL.
+ * Creates a paragraph block containing a link to the URL, and calls `onReplace`.
+ *
+ * @param {string}   url       The URL that could not be embedded.
+ * @param {Function} onReplace Function to call with the created fallback block.
+ */
+export function createLinkInParagraph( url, onReplace ) {
+	const link = <a href={ url }>{ url }</a>;
+	onReplace(
+		createBlock( 'core/paragraph', { content: renderToString( link ) } )
+	);
+}

package/src/components/skip-to-selected-block/README.md

@@ -0,0 +1,39 @@
+# SkipToSelectedBlock
+
+`SkipToSelectedBlock` provides a way for keyboard and assistive technologies users to jump back to the currently selected block.
+
+The component renders as a visually hidden, secondary button with the text, 'Skip to the selected block'. When clicked it will set [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) on the currently selected block. This means that the currently selected block will now receive all keyboard and similar events by default until focus is moved elsewhere.
+
+If there are multiple blocks selected, the focus will be set on the block that was selected first.
+
+## Usage
+
+Render a `<SkipToSelectedBlock />` component passing in the currently selected block's `clientId`.
+
+```jsx
+function render( { clientId } ) {
+	return (
+		<div>
+			<SkipToSelectedBlock selectedBlockClientId={ clientId } />
+		</div>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `selectedBlockClientId`
+
+-   **Type:** `String`
+-   **Required** `true`
+-   **Default:** `undefined`
+
+The `selectedBlockClientId` is passed to `useBlockRef` inside the component to correctly reference the currently selected block.
+
+If a `clientId` is not provided, the component will return `null`.
+
+## Examples
+
+This component is currently used in the [block inspector](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-inspector) in the sidebar, at the bottom right corner of the screen.

package/src/components/tool-selector/style.scss

@@ -1,10 +1,10 @@
 .block-editor-tool-selector__help {
 	margin-top: $grid-unit-10;
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	margin-bottom: -$grid-unit-15;
-	padding: $grid-unit-15 ($grid-unit-15 + $grid-unit-10);
-	border-top: 1px solid $gray-300;
+	margin-left: -$grid-unit-10;
+	margin-right: -$grid-unit-10;
+	margin-bottom: -$grid-unit-10;
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
 	color: $gray-700;
 	min-width: 280px;
 }

package/src/components/typewriter/index.js

@@ -16,8 +16,9 @@ const arrowKeyCodes = new Set( [ UP, DOWN, LEFT, RIGHT ] );
 const initialTriggerPercentage = 0.75;
 
 export function useTypewriter() {
-	const hasSelectedBlock = useSelect( ( select ) =>
-		select( blockEditorStore ).hasSelectedBlock()
+	const hasSelectedBlock = useSelect(
+		( select ) => select( blockEditorStore ).hasSelectedBlock(),
+		[]
 	);
 
 	return useRefEffect(

package/src/components/url-input/index.js

@@ -60,7 +60,10 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const { value } = this.props;
+		const {
+			value,
+			__experimentalShowInitialSuggestions = false,
+		} = this.props;
 
 		// only have to worry about scrolling selected suggestion into view
 		// when already expanded
@@ -84,12 +87,19 @@ class URLInput extends Component {
 			}, 100 );
 		}
 
-		// Only attempt an update on suggestions if the input value has actually changed.
+		// Update suggestions when the value changes
 		if (
 			prevProps.value !== value &&
-			this.shouldShowInitialSuggestions()
+			! this.props.disableSuggestions &&
+			! this.isUpdatingSuggestions
 		) {
-			this.updateSuggestions();
+			if ( value?.length ) {
+				// If the new value is not empty we need to update with suggestions for it
+				this.updateSuggestions( value );
+			} else if ( __experimentalShowInitialSuggestions ) {
+				// If the new value is empty and we can show initial suggestions, then show initial suggestions
+				this.updateSuggestions();
+			}
 		}
 	}
 
@@ -134,7 +144,13 @@ class URLInput extends Component {
 			return;
 		}
 
-		const isInitialSuggestions = ! ( value && value.length );
+		// Initial suggestions may only show if there is no value
+		// (note: this includes whitespace).
+		const isInitialSuggestions = ! value?.length;
+
+		// Trim only now we've determined whether or not it originally had a "length"
+		// (even if that value was all whitespace).
+		value = value.trim();
 
 		// Allow a suggestions request if:
 		// - there are at least 2 characters in the search input (except manual searches where
@@ -219,7 +235,7 @@ class URLInput extends Component {
 
 		this.props.onChange( inputValue );
 		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue.trim() );
+			this.updateSuggestions( inputValue );
 		}
 	}
 
@@ -236,7 +252,7 @@ class URLInput extends Component {
 			! ( suggestions && suggestions.length )
 		) {
 			// Ensure the suggestions are updated with the current input value
-			this.updateSuggestions( value.trim() );
+			this.updateSuggestions( value );
 		}
 	}
 
@@ -288,7 +304,7 @@ class URLInput extends Component {
 				// Submitting while loading should trigger onSubmit
 				case ENTER: {
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit();
+						this.props.onSubmit( null, event );
 					}
 
 					break;
@@ -338,10 +354,10 @@ class URLInput extends Component {
 					this.selectLink( suggestion );
 
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit( suggestion );
+						this.props.onSubmit( suggestion, event );
 					}
 				} else if ( this.props.onSubmit ) {
-					this.props.onSubmit();
+					this.props.onSubmit( null, event );
 				}
 
 				break;

package/src/components/use-display-block-controls/index.js

@@ -11,11 +11,10 @@ import { store as blockEditorStore } from '../../store';
 
 export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
-	const isFirstAndSameTypeMultiSelected = useSelect(
+	return useSelect(
 		( select ) => {
-			// Don't bother checking, see OR statement below.
 			if ( isSelected ) {
-				return;
+				return true;
 			}
 
 			const {
@@ -24,16 +23,14 @@ export default function useDisplayBlockControls() {
 				getMultiSelectedBlockClientIds,
 			} = select( blockEditorStore );
 
-			if ( ! isFirstMultiSelectedBlock( clientId ) ) {
-				return false;
+			if ( isFirstMultiSelectedBlock( clientId ) ) {
+				return getMultiSelectedBlockClientIds().every(
+					( id ) => getBlockName( id ) === name
+				);
 			}
 
-			return getMultiSelectedBlockClientIds().every(
-				( id ) => getBlockName( id ) === name
-			);
+			return false;
 		},
 		[ clientId, isSelected, name ]
 	);
-
-	return isSelected || isFirstAndSameTypeMultiSelected;
 }

package/src/components/use-moving-animation/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useSpring } from 'react-spring/web.cjs';
+import { useSpring } from '@react-spring/web';
 
 /**
  * WordPress dependencies
@@ -136,19 +136,20 @@ function useMovingAnimation( {
 	}
 
 	// Called for every frame computed by useSpring.
-	function onFrame( { x, y } ) {
+	function onChange( { value } ) {
+		let { x, y } = value;
 		x = Math.round( x );
 		y = Math.round( y );
 
-		if ( x !== onFrame.x || y !== onFrame.y ) {
+		if ( x !== onChange.x || y !== onChange.y ) {
 			onFrameChange( { x, y } );
-			onFrame.x = x;
-			onFrame.y = y;
+			onChange.x = x;
+			onChange.y = y;
 		}
 	}
 
-	onFrame.x = 0;
-	onFrame.y = 0;
+	onChange.x = 0;
+	onChange.y = 0;
 
 	useSpring( {
 		from: {
@@ -162,7 +163,7 @@ function useMovingAnimation( {
 		reset: triggeredAnimation !== finishedAnimation,
 		config: { mass: 5, tension: 2000, friction: 200 },
 		immediate: prefersReducedMotion,
-		onFrame,
+		onChange,
 	} );
 
 	return ref;

package/src/components/use-on-block-drop/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	cloneBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
@@ -80,8 +81,11 @@ export function onBlockDrop(
 		// If the user is inserting a block
 		if ( dropType === 'inserter' ) {
 			clearSelectedBlock();
+			const blocksToInsert = blocks.map( ( block ) =>
+				cloneBlock( block )
+			);
 			insertBlocks(
-				blocks,
+				blocksToInsert,
 				targetBlockIndex,
 				targetRootClientId,
 				true,

package/src/components/use-resize-canvas/index.js

@@ -3,23 +3,14 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { default as useSimulatedMediaQuery } from '../../components/use-simulated-media-query';
-
 /**
  * Function to resize the editor window.
  *
- * @param {string}  deviceType                  Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
- * @param {boolean} __unstableDisableSimulation Whether to disable media query simulation.
+ * @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
  *
  * @return {Object} Inline styles to be added to resizable container.
  */
-export default function useResizeCanvas(
-	deviceType,
-	__unstableDisableSimulation
-) {
+export default function useResizeCanvas( deviceType ) {
 	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
 
 	useEffect( () => {
@@ -72,11 +63,5 @@ export default function useResizeCanvas(
 		}
 	};
 
-	const width = __unstableDisableSimulation
-		? null
-		: getCanvasWidth( deviceType );
-
-	useSimulatedMediaQuery( 'resizable-editor-section', width );
-
 	return contentInlineStyles( deviceType );
 }

package/src/components/use-setting/index.js

@@ -7,6 +7,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -33,8 +34,7 @@ const deprecatedFlags = {
 		settings.disableCustomFontSizes === undefined
 			? undefined
 			: ! settings.disableCustomFontSizes,
-	'typography.customLineHeight': ( settings ) =>
-		settings.enableCustomLineHeight,
+	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
 	'spacing.units': ( settings ) => {
 		if ( settings.enableCustomUnits === undefined ) {
 			return;
@@ -46,14 +46,46 @@ const deprecatedFlags = {
 
 		return settings.enableCustomUnits;
 	},
-	'spacing.customPadding': ( settings ) => settings.enableCustomSpacing,
+	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
 };
 
-const PATHS_WITH_MERGE = {
-	'color.gradients': true,
-	'color.palette': true,
-	'typography.fontFamilies': true,
-	'typography.fontSizes': true,
+const prefixedFlags = {
+	/*
+	 * These were only available in the plugin
+	 * and can be removed when the minimum WordPress version
+	 * for the plugin is 5.9.
+	 */
+	'border.customColor': 'border.color',
+	'border.customStyle': 'border.style',
+	'border.customWidth': 'border.width',
+	'typography.customFontStyle': 'typography.fontStyle',
+	'typography.customFontWeight': 'typography.fontWeight',
+	'typography.customLetterSpacing': 'typography.letterSpacing',
+	'typography.customTextDecorations': 'typography.textDecoration',
+	'typography.customTextTransforms': 'typography.textTransform',
+	/*
+	 * These were part of WordPress 5.8 and we need to keep them.
+	 */
+	'border.customRadius': 'border.radius',
+	'spacing.customMargin': 'spacing.margin',
+	'spacing.customPadding': 'spacing.padding',
+	'typography.customLineHeight': 'typography.lineHeight',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string}     The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+	return prefixedFlags[ path ] || path;
 };
 
 /**
@@ -61,9 +93,7 @@ const PATHS_WITH_MERGE = {
  * It works with nested objects using by finding the value at path.
  *
  * @param {string} path The path to the setting.
- *
  * @return {any} Returns the value defined for the setting.
- *
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
@@ -78,12 +108,14 @@ export default function useSetting( path ) {
 
 			// 1 - Use __experimental features, if available.
 			// We cascade to the all value if the block one is not available.
-			const defaultsPath = `__experimentalFeatures.${ path }`;
-			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
+			const normalizedPath = removeCustomPrefixes( path );
+			const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
+			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
 			const experimentalFeaturesResult =
 				get( settings, blockPath ) ?? get( settings, defaultsPath );
+
 			if ( experimentalFeaturesResult !== undefined ) {
-				if ( PATHS_WITH_MERGE[ path ] ) {
+				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
 					return (
 						experimentalFeaturesResult.user ??
 						experimentalFeaturesResult.theme ??
@@ -94,8 +126,8 @@ export default function useSetting( path ) {
 			}
 
 			// 2 - Use deprecated settings, otherwise.
-			const deprecatedSettingsValue = deprecatedFlags[ path ]
-				? deprecatedFlags[ path ]( settings )
+			const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
+				? deprecatedFlags[ normalizedPath ]( settings )
 				: undefined;
 			if ( deprecatedSettingsValue !== undefined ) {
 				return deprecatedSettingsValue;
@@ -105,7 +137,7 @@ export default function useSetting( path ) {
 			// This is only necessary to support typography.dropCap.
 			// when __experimentalFeatures are not present (core without plugin).
 			// To remove when __experimentalFeatures are ported to core.
-			return path === 'typography.dropCap' ? true : undefined;
+			return normalizedPath === 'typography.dropCap' ? true : undefined;
 		},
 		[ blockName, path ]
 	);

package/src/components/writing-flow/use-multi-selection.js

@@ -122,6 +122,12 @@ export default function useMultiSelection() {
 				return;
 			}
 
+			// The block refs might not be immediately available
+			// when dragging blocks into another block.
+			if ( ! startRef.current || ! endRef.current ) {
+				return;
+			}
+
 			// For some browsers, like Safari, it is important that focus happens
 			// BEFORE selection.
 			node.focus();

package/src/components/writing-flow/use-tab-nav.js

@@ -27,9 +27,11 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 	const lastFocus = useRef();
-	const { hasMultiSelection, getSelectedBlockClientId } = useSelect(
-		blockEditorStore
-	);
+	const {
+		hasMultiSelection,
+		getSelectedBlockClientId,
+		getBlockCount,
+	} = useSelect( blockEditorStore );
 	const { setNavigationMode } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),
@@ -143,6 +145,18 @@ export default function useTabNav() {
 
 		function onFocusOut( event ) {
 			lastFocus.current = event.target;
+
+			const { ownerDocument } = node;
+
+			// If focus disappears due to there being no blocks, move focus to
+			// the writing flow wrapper.
+			if (
+				! event.relatedTarget &&
+				ownerDocument.activeElement === ownerDocument.body &&
+				getBlockCount() === 0
+			) {
+				node.focus();
+			}
 		}
 
 		// When tabbing back to an element in block list, this event handler prevents scrolling if the
@@ -179,17 +193,13 @@ export default function useTabNav() {
 			}
 		}
 
-		node.ownerDocument.defaultView.addEventListener(
-			'keydown',
-			preventScrollOnTab
-		);
+		const { ownerDocument } = node;
+		const { defaultView } = ownerDocument;
+		defaultView.addEventListener( 'keydown', preventScrollOnTab );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'focusout', onFocusOut );
 		return () => {
-			node.ownerDocument.defaultView.removeEventListener(
-				'keydown',
-				preventScrollOnTab
-			);
+			defaultView.removeEventListener( 'keydown', preventScrollOnTab );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'focusout', onFocusOut );
 		};

package/src/default-editor-styles.scss

@@ -0,0 +1,24 @@
+/**
+ * Default editor styles.
+ *
+ * These styles are shown if a theme does not register its own editor style,
+ * a theme.json file, or has toggled off "Use theme styles" in preferences.
+ */
+
+body {
+	font-family: $default-font;
+	font-size: 18px;
+	line-height: 1.5;
+	--wp--style--block-gap: 2em;
+}
+
+p {
+	line-height: 1.8;
+}
+
+.editor-post-title__block {
+	margin-top: 2em;
+	margin-bottom: 1em;
+	font-size: 2.5em;
+	font-weight: 800;
+}