@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.2.0

package/src/components/provider/use-block-sync.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useContext, useEffect, useRef } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { SelectionContext } from './selection-context';
 
@@ -252,13 +245,17 @@ export default function useBlockSync( {
 					cloneBlockWithMapping( block, idMappingRef.current )
 				);
 
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				setHasControlledInnerBlocks( clientId, true );
 
 				if ( subscribedRef.current ) {
 					pendingChangesRef.current.incoming = storeBlocks;
 				}
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				replaceInnerBlocks( clientId, storeBlocks );
 
 				// Invalidate the applied-selection ref so that
@@ -271,7 +268,9 @@ export default function useBlockSync( {
 			if ( subscribedRef.current ) {
 				pendingChangesRef.current.incoming = controlledBlocks;
 			}
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( controlledBlocks );
 		}
 	};
@@ -280,12 +279,18 @@ export default function useBlockSync( {
 	// containing useBlockSync() unmounts.
 	const unsetControlledBlocks = () => {
 		if ( clientId ) {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			setHasControlledInnerBlocks( clientId, false );
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			replaceInnerBlocks( clientId, [] );
 		} else {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( [] );
 		}
 	};

package/src/components/provider/use-media-upload-settings.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -21,6 +18,8 @@ function useMediaUploadSettings( settings = {} ) {
 			allowedMimeTypes: settings.allowedMimeTypes,
 			allImageSizes: settings.allImageSizes,
 			bigImageSizeThreshold: settings.bigImageSizeThreshold,
+			imageStripMeta: settings.imageStripMeta,
+			imageMaxBitDepth: settings.imageMaxBitDepth,
 		} ),
 		[ settings ]
 	);

package/src/components/provider/with-registry-provider.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 

package/src/components/publish-date-time-picker/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
 export function PublishDateTimePicker(

package/src/components/recursion-provider/README.md

@@ -7,9 +7,6 @@ To help with detecting infinite loops on the client, the `RecursionProvider` com
 ## Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
 import {
 	RecursionProvider,
 	useHasRecursion,

package/src/components/recursion-provider/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext, useMemo } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import { useBlockEditContext } from '../block-edit/context';
 
 const RenderedRefsContext = createContext( {} );

package/src/components/recursion-provider/test/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useHasRecursion, RecursionProvider } from '..';
 import {
 	BlockEditContextProvider,

package/src/components/resizable-box-popover/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { ResizableBox } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import BlockPopoverCover from '../block-popover/cover';
 
 export default function ResizableBoxPopover( {

package/src/components/resolution-tool/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	SelectControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,

package/src/components/resolution-tool/stories/index.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useReducer } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ResolutionTool from '..';
 
 export default {

package/src/components/responsive-block-control/index.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ResponsiveBlockControlLabel from './label';
 
 function ResponsiveBlockControl( props ) {

package/src/components/responsive-block-control/label.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/ui';
 import { _x, sprintf } from '@wordpress/i18n';

package/src/components/responsive-block-control/style.scss

@@ -32,7 +32,7 @@
 }
 
 .block-editor-responsive-block-control__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin-bottom: 0.6em;
 	margin-left: -3px; // visual compensation
 }

package/src/components/responsive-block-control/test/index.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { Fragment, useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ResponsiveBlockControl from '../index';
 
 const inputId = 'input-12345678';

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

@@ -1,18 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { RawHTML } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import RichText from './';
-
-/**
- * Internal dependencies
- */
 import { getMultilineTag } from './utils';
 
 export function valueToHTMLString( value, multiline ) {

package/src/components/rich-text/event-listeners/before-input-rules.js

@@ -1,17 +1,13 @@
-/**
- * WordPress dependencies
- */
-import { insert, isCollapsed } from '@wordpress/rich-text';
+import {
+	insert,
+	isCollapsed,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -84,10 +80,10 @@ export default ( props ) => ( element ) => {
 		// call few lines above has fully updated the data store state and rerendered
 		// all affected components.
 		window.queueMicrotask( () => {
-			event.target.dispatchEvent( newEvent );
+			element.dispatchEvent( newEvent );
 		} );
 		event.preventDefault();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
+	return subscribeOwnedListener( element, 'beforeinput', onInput, true );
 };

package/src/components/rich-text/event-listeners/delete.js

@@ -1,16 +1,12 @@
-/**
- * WordPress dependencies
- */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-import { isCollapsed, isEmpty } from '@wordpress/rich-text';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import {
+	isCollapsed,
+	isEmpty,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -54,5 +50,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

package/src/components/rich-text/event-listeners/enter.js

@@ -1,15 +1,13 @@
-/**
- * WordPress dependencies
- */
 import { ENTER } from '@wordpress/keycodes';
-import { insert, remove } from '@wordpress/rich-text';
+import {
+	insert,
+	remove,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../../lock-unlock';
 
+const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
@@ -31,8 +29,9 @@ export default ( props ) => ( element ) => {
 		}
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element, or whether the element owns the
+		// selection through a focused editing host.
+		if ( event.target !== element && ! ownsSelection( element ) ) {
 			return;
 		}
 
@@ -90,7 +89,7 @@ export default ( props ) => ( element ) => {
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
 		element,
 		'keydown',
 		onKeyDownDeprecated,

package/src/components/rich-text/event-listeners/firefox-compat.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 
 export default ( props ) => ( element ) => {

package/src/components/rich-text/event-listeners/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useMemo, useRef, useInsertionEffect } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import beforeInputRules from './before-input-rules';
 import inputRules from './input-rules';
 import insertReplacementText from './insert-replacement-text';

package/src/components/rich-text/event-listeners/input-events.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
@@ -18,5 +11,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'input', onInput );
+	return subscribeOwnedListener( element, 'input', onInput );
 };

package/src/components/rich-text/event-listeners/input-rules.js

@@ -1,13 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import {
+	insert,
+	toHTMLString,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { preventEventDiscovery } from '../prevent-event-discovery';
 import {
@@ -16,7 +12,7 @@ import {
 } from '../../../utils/selection';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -117,19 +113,21 @@ export default ( props ) => ( element ) => {
 
 		const value = getValue();
 
-		const transforms = getBlockTransforms( 'from' ).filter(
-			( transform ) => transform.type === 'input'
-		);
-		const transformation = findTransform( transforms, ( item ) => {
-			return item.regExp.test( value.text );
-		} );
-
-		if ( transformation ) {
-			onReplace( transformation.transform() );
-			registry
-				.dispatch( blockEditorStore )
-				.__unstableMarkAutomaticChange();
-			return;
+		if ( onReplace ) {
+			const transforms = getBlockTransforms( 'from' ).filter(
+				( transform ) => transform.type === 'input'
+			);
+			const transformation = findTransform( transforms, ( item ) =>
+				item.regExp.test( value.text )
+			);
+
+			if ( transformation ) {
+				onReplace( transformation.transform() );
+				registry
+					.dispatch( blockEditorStore )
+					.__unstableMarkAutomaticChange();
+				return;
+			}
 		}
 
 		const transformed = formatTypes.reduce(
@@ -160,13 +158,13 @@ export default ( props ) => ( element ) => {
 
 	// Capture phase so these run before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listeners.
-	const unsubscribeInput = subscribeDelegatedListener(
+	const unsubscribeInput = subscribeOwnedListener(
 		element,
 		'input',
 		onInput,
 		true
 	);
-	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+	const unsubscribeCompositionEnd = subscribeOwnedListener(
 		element,
 		'compositionend',
 		onInput,

package/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When the browser is about to auto correct, add an undo level so the user can
@@ -29,5 +22,5 @@ export default ( props ) => ( element ) => {
 			.__unstableMarkLastChangeAsPersistent();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput );
+	return subscribeOwnedListener( element, 'beforeinput', onInput );
 };

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -1,20 +1,19 @@
-/**
- * WordPress dependencies
- */
 import { pasteHandler } from '@wordpress/blocks';
-import { isEmpty, insert, create } from '@wordpress/rich-text';
+import {
+	isEmpty,
+	insert,
+	create,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../../store';
 import { addActiveFormats } from '../utils';
 import { getPasteEventData } from '../../../utils/pasting';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { ownsSelection } = unlock( richTextPrivateApis );
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -34,8 +33,14 @@ export default ( props ) => ( element ) => {
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element or inside the element.
-		if ( ! element.contains( event.target ) ) {
+		// the target is the element or inside the element. When the editable
+		// wrapper holds focus (the selected block supports `editableRoot`),
+		// the event targets the wrapper instead; the element then owns the
+		// paste when it contains the selection.
+		if (
+			! element.contains( event.target ) &&
+			! ownsSelection( element )
+		) {
 			return;
 		}
 
@@ -43,10 +48,23 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		const { plainText, html } = getPasteEventData( event );
+		const pasteData = getPasteEventData( event );
+
+		// Some browsers don't support `clipboardData` and paste plain text on
+		// their own, so the event has to be left alone for them.
+		if ( ! pasteData ) {
+			return;
+		}
 
 		event.preventDefault();
 
+		const { plainText, html, files } = pasteData;
+
+		// Rich text can only paste text; files are placed by the writing flow.
+		if ( files.length ) {
+			return;
+		}
+
 		// Allows us to ask for this information when we get a report.
 		// `pasteHandler` also logs this, but we're not using `pasteHandler` in
 		// every case.

package/src/components/rich-text/event-listeners/remove-browser-shortcuts.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { isKeyboardEvent } from '@wordpress/keycodes';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * Hook to prevent default behaviors for key combinations otherwise handled
@@ -25,5 +18,5 @@ export default () => ( node ) => {
 			event.preventDefault();
 		}
 	}
-	return subscribeDelegatedListener( node, 'keydown', onKeydown, true );
+	return subscribeOwnedListener( node, 'keydown', onKeydown, true );
 };

package/src/components/rich-text/event-listeners/shortcuts.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { keyboardShortcuts } = props.current;
@@ -18,5 +11,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown, true );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 };