@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.10.0

package/src/components/link-control/search-input.js

@@ -11,6 +11,7 @@ import { URLInput } from '../';
 import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
+import deprecated from '@wordpress/deprecated';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings
@@ -156,3 +157,11 @@ const LinkControlSearchInput = forwardRef(
 );
 
 export default LinkControlSearchInput;
+
+export const __experimentalLinkControlSearchInput = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchInput', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchInput { ...props } />;
+};

package/src/components/link-control/search-item.js

@@ -17,6 +17,7 @@ import {
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
 import { pipe } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 const ICONS_MAP = {
 	post: postList,
@@ -160,3 +161,11 @@ function getVisualTypeName( suggestion ) {
 }
 
 export default LinkControlSearchItem;
+
+export const __experimentalLinkControlSearchItem = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchItem', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchItem { ...props } />;
+};

package/src/components/link-control/search-results.js

@@ -15,8 +15,9 @@ import clsx from 'clsx';
 import LinkControlSearchCreate from './search-create-button';
 import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
+import deprecated from '@wordpress/deprecated';
 
-export default function LinkControlSearchResults( {
+function LinkControlSearchResults( {
 	withCreateSuggestion,
 	currentInputValue,
 	handleSuggestionClick,
@@ -121,3 +122,13 @@ export default function LinkControlSearchResults( {
 		</div>
 	);
 }
+
+export default LinkControlSearchResults;
+
+export const __experimentalLinkControlSearchResults = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchResults', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchResults { ...props } />;
+};

package/src/components/list-view/style.scss

@@ -553,13 +553,18 @@ svg {
 }
 
 .list-view-appender .block-editor-inserter__toggle {
-	background-color: #1e1e1e;
-	color: #fff;
-	margin: $grid-unit-10 0 0 24px;
-	height: 24px;
-	min-width: 24px;
+	background-color: $gray-900;
+	color: $white;
+	margin: $grid-unit-10 0 0 $grid-unit-30;
+	height: $button-size-small;
 	padding: 0;
 
+	// TODO: Consider passing size="small" to the Inserter toggle instead.
+	// Special dimensions for this button.
+	&.has-icon.is-next-40px-default-size {
+		min-width: $button-size-small;
+	}
+
 	&:hover,
 	&:focus {
 		background: var(--wp-admin-theme-color);

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

@@ -15,7 +15,7 @@ import {
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
@@ -482,7 +482,7 @@ export function MediaPlaceholder( {
 										) }
 										onClick={ openFileDialog }
 									>
-										{ __( 'Upload' ) }
+										{ _x( 'Upload', 'verb' ) }
 									</Button>
 									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
@@ -512,7 +512,7 @@ export function MediaPlaceholder( {
 									'block-editor-media-placeholder__upload-button'
 								) }
 							>
-								{ __( 'Upload' ) }
+								{ _x( 'Upload', 'verb' ) }
 							</Button>
 						) }
 						onChange={ onUpload }

package/src/components/media-replace-flow/README.md

@@ -98,3 +98,10 @@ If passed, children are rendered inside the dropdown.
 -   Required: No
 
 If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.
+
+### renderToggle
+
+-   Type: `func`
+-   Required: No
+
+If passed, it will be used to render the provided button instead of the default one. It should accept and pass through `button` props to a `button` element.

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

@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
 	FormFileUpload,
 	NavigableMenu,
 	MenuItem,
-	ToolbarButton,
 	Dropdown,
 	withFilters,
+	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -60,12 +54,9 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 	popoverProps,
+	renderToggle,
 } ) => {
-	const mediaUpload = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().mediaUpload;
-	}, [] );
-	const canUpload = !! mediaUpload;
-	const editMediaButtonRef = useRef();
+	const { getSettings } = useSelect( blockEditorStore );
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
@@ -107,7 +98,7 @@ const MediaReplaceFlow = ( {
 			return onSelect( files );
 		}
 		onFilesUpload( files );
-		mediaUpload( {
+		getSettings().mediaUpload( {
 			allowedTypes,
 			filesList: files,
 			onFileChange: ( [ media ] ) => {
@@ -141,17 +132,27 @@ const MediaReplaceFlow = ( {
 		<Dropdown
 			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					ref={ editMediaButtonRef }
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					onKeyDown={ openOnArrowDown }
-				>
-					{ name }
-				</ToolbarButton>
-			) }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				if ( renderToggle ) {
+					return renderToggle( {
+						'aria-expanded': isOpen,
+						'aria-haspopup': 'true',
+						onClick: onToggle,
+						onKeyDown: openOnArrowDown,
+						children: name,
+					} );
+				}
+				return (
+					<ToolbarButton
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+						onKeyDown={ openOnArrowDown }
+					>
+						{ name }
+					</ToolbarButton>
+				);
+			} }
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
@@ -188,7 +189,7 @@ const MediaReplaceFlow = ( {
 												openFileDialog();
 											} }
 										>
-											{ __( 'Upload' ) }
+											{ _x( 'Upload', 'verb' ) }
 										</MenuItem>
 									);
 								} }
@@ -219,15 +220,7 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form
-							className={ clsx(
-								'block-editor-media-flow__url-input',
-								{
-									'has-siblings':
-										canUpload || onToggleFeaturedImage,
-								}
-							) }
-						>
+						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>
@@ -238,7 +231,6 @@ const MediaReplaceFlow = ( {
 								showSuggestions={ false }
 								onChange={ ( { url } ) => {
 									onSelectURL( url );
-									editMediaButtonRef.current.focus();
 								} }
 							/>
 						</form>

package/src/components/media-replace-flow/style.scss

@@ -9,17 +9,17 @@
 	margin-left: 4px;
 }
 
+.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
+	border-top: $border-width solid $gray-900;
+	margin-top: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+}
+
 .block-editor-media-flow__url-input {
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
-	&.has-siblings {
-		border-top: $border-width solid $gray-900;
-		margin-top: $grid-unit-10;
-		padding-bottom: $grid-unit-10;
-	}
-
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;

package/src/components/multi-selection-inspector/index.js

@@ -3,9 +3,8 @@
  */
 import { sprintf, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,33 +13,24 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export default function MultiSelectionInspector() {
-	const { blocks } = useSelect( ( select ) => {
-		const { getMultiSelectedBlocks } = select( blockEditorStore );
-		return {
-			blocks: getMultiSelectedBlocks(),
-		};
-	}, [] );
-	const words = wordCount( serialize( blocks ), 'words' );
-
+	const selectedBlockCount = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
+		[]
+	);
 	return (
-		<div className="block-editor-multi-selection-inspector__card">
+		<HStack
+			justify="flex-start"
+			spacing={ 2 }
+			className="block-editor-multi-selection-inspector__card"
+		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-content">
-				<div className="block-editor-multi-selection-inspector__card-title">
-					{ sprintf(
-						/* translators: %d: number of blocks */
-						_n( '%d Block', '%d Blocks', blocks.length ),
-						blocks.length
-					) }
-				</div>
-				<div className="block-editor-multi-selection-inspector__card-description">
-					{ sprintf(
-						/* translators: %d: number of words */
-						_n( '%d word selected.', '%d words selected.', words ),
-						words
-					) }
-				</div>
+			<div className="block-editor-multi-selection-inspector__card-title">
+				{ sprintf(
+					/* translators: %d: number of blocks */
+					_n( '%d Block', '%d Blocks', selectedBlockCount ),
+					selectedBlockCount
+				) }
 			</div>
-		</div>
+		</HStack>
 	);
 }

package/src/components/multi-selection-inspector/style.scss

@@ -1,25 +1,13 @@
 .block-editor-multi-selection-inspector__card {
-	display: flex;
-	align-items: flex-start;
 	padding: $grid-unit-20;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-	flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-	font-size: $default-font-size;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
-	margin-right: 10px;
 	padding: 0 3px;
 	width: $button-size;
 	height: $button-size-small;

package/src/components/plain-text/README.md

@@ -6,11 +6,11 @@ Render an auto-growing textarea allow users to fill any textual content.
 
 ### `value: string`
 
-_Required._ String value of the textarea
+_Required._ String value of the textarea.
 
 ### `onChange( value: string ): Function`
 
-_Required._ Called when the value changes.
+_Required._ Function called when the text value changes.
 
 You can also pass any extra prop to the textarea rendered by this component.
 

package/src/components/plain-text/index.js

@@ -15,7 +15,41 @@ import { forwardRef } from '@wordpress/element';
 import EditableText from '../editable-text';
 
 /**
+ * Render an auto-growing textarea allow users to fill any textual content.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md
+ *
+ * @example
+ * ```jsx
+ * import { registerBlockType } from '@wordpress/blocks';
+ * import { PlainText } from '@wordpress/block-editor';
+ *
+ * registerBlockType( 'my-plugin/example-block', {
+ *   // ...
+ *
+ *   attributes: {
+ *     content: {
+ *       type: 'string',
+ *     },
+ *   },
+ *
+ *   edit( { className, attributes, setAttributes } ) {
+ *     return (
+ *       <PlainText
+ *         className={ className }
+ *         value={ attributes.content }
+ *         onChange={ ( content ) => setAttributes( { content } ) }
+ *       />
+ *     );
+ *   },
+ * } );
+ * ````
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.value    String value of the textarea.
+ * @param {Function} props.onChange Function called when the text value changes.
+ * @param {Object}   [props.ref]    The component forwards the `ref` property to the `TextareaAutosize` component.
+ * @return {Element} Plain text component
  */
 const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	if ( __experimentalVersion === 2 ) {

package/src/components/plain-text/stories/index.story.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PlainText from '..';
+
+const meta = {
+	title: 'BlockEditor/PlainText',
+	component: PlainText,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'PlainText renders an auto-growing textarea that allows users to enter any textual content.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: {
+				type: null,
+			},
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'String value of the textarea.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: {
+				type: null,
+			},
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+			description: 'Function called when the text value changes.',
+		},
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'Additional class name for the PlainText.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<PlainText
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/provider/index.js

@@ -2,8 +2,13 @@
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+//eslint-disable-next-line import/no-extraneous-dependencies -- Experimental package, not published.
+import {
+	MediaUploadProvider,
+	store as uploadStore,
+} from '@wordpress/upload-media';
 
 /**
  * Internal dependencies
@@ -14,12 +19,71 @@ import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import useMediaUploadSettings from './use-media-upload-settings';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
+const noop = () => {};
+
+/**
+ * Upload a media file when the file upload button is activated
+ * or when adding a file to the editor via drag & drop.
+ *
+ * @param {WPDataRegistry} registry
+ * @param {Object}         $3                Parameters object passed to the function.
+ * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param {Object}         $3.additionalData Additional data to include in the request.
+ * @param {Array<File>}    $3.filesList      List of files.
+ * @param {Function}       $3.onError        Function called when an error happens.
+ * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
+ * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
+ * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ */
+function mediaUpload(
+	registry,
+	{
+		allowedTypes,
+		additionalData = {},
+		filesList,
+		onError = noop,
+		onFileChange,
+		onSuccess,
+		onBatchSuccess,
+	}
+) {
+	void registry.dispatch( uploadStore ).addItems( {
+		files: filesList,
+		onChange: onFileChange,
+		onSuccess,
+		onBatchSuccess,
+		onError: ( { message } ) => onError( message ),
+		additionalData,
+		allowedTypes,
+	} );
+}
+
 export const ExperimentalBlockEditorProvider = withRegistryProvider(
 	( props ) => {
-		const { children, settings, stripExperimentalSettings = false } = props;
+		const {
+			settings: _settings,
+			registry,
+			stripExperimentalSettings = false,
+		} = props;
+
+		const mediaUploadSettings = useMediaUploadSettings( _settings );
+
+		let settings = _settings;
+
+		if ( window.__experimentalMediaProcessing && _settings.mediaUpload ) {
+			// Create a new variable so that the original props.settings.mediaUpload is not modified.
+			settings = useMemo(
+				() => ( {
+					..._settings,
+					mediaUpload: mediaUpload.bind( null, registry ),
+				} ),
+				[ _settings, registry ]
+			);
+		}
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )
@@ -44,12 +108,25 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );
 
-		return (
+		const children = (
 			<SlotFillProvider passthrough>
 				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
-				<BlockRefsProvider>{ children }</BlockRefsProvider>
+				<BlockRefsProvider>{ props.children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);
+
+		if ( window.__experimentalMediaProcessing ) {
+			return (
+				<MediaUploadProvider
+					settings={ mediaUploadSettings }
+					useSubRegistry={ false }
+				>
+					{ children }
+				</MediaUploadProvider>
+			);
+		}
+
+		return children;
 	}
 );
 

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * React hook used to compute the media upload settings to use in the post editor.
+ *
+ * @param {Object} settings Media upload settings prop.
+ *
+ * @return {Object} Media upload settings.
+ */
+function useMediaUploadSettings( settings = {} ) {
+	return useMemo(
+		() => ( {
+			mediaUpload: settings.mediaUpload,
+			mediaSideload: settings.mediaSideload,
+			maxUploadFileSize: settings.maxUploadFileSize,
+			allowedMimeTypes: settings.allowedMimeTypes,
+		} ),
+		[ settings ]
+	);
+}
+
+export default useMediaUploadSettings;

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

@@ -33,6 +33,7 @@ export default function ResolutionTool( {
 	options = DEFAULT_SIZE_OPTIONS,
 	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
 	isShownByDefault = true,
+	resetAllFilter,
 } ) {
 	const displayValue = value ?? defaultValue;
 	return (
@@ -42,6 +43,7 @@ export default function ResolutionTool( {
 			onDeselect={ () => onChange( defaultValue ) }
 			isShownByDefault={ isShownByDefault }
 			panelId={ panelId }
+			resetAllFilter={ resetAllFilter }
 		>
 			<SelectControl
 				__nextHasNoMarginBottom