@wordpress/block-editor 14.9.0 → 14.10.1

package/src/components/line-height-control/stories/index.story.js

@@ -22,6 +22,7 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__unstableInputWidth: '100px',
 };
 

package/src/components/line-height-control/test/index.js

@@ -19,7 +19,13 @@ const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return <LineHeightControl value={ value } onChange={ setValue } />;
+	return (
+		<LineHeightControl
+			value={ value }
+			onChange={ setValue }
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'LineHeightControl', () => {

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/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

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
@@ -13,30 +13,56 @@ import {
 import ResolutionTool from '..';
 
 export default {
-	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	title: 'BlockEditor/ResolutionControl',
 	component: ResolutionTool,
+	tags: [ 'status-private' ],
 	argTypes: {
 		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };
 
-export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
-	const [ resolution, setResolution ] = useState( undefined );
-	const resetAll = () => {
-		setResolution( undefined );
+export const Default = ( {
+	label,
+	panelId,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ attributes, setAttributes ] = useReducer(
+		( prevState, nextState ) => ( { ...prevState, ...nextState } ),
+		{}
+	);
+	const { resolution } = attributes;
+	const resetAll = ( resetFilters = [] ) => {
+		let newAttributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
 		onChangeProp( undefined );
 	};
 	return (
 		<Panel>
-			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+			<ToolsPanel
+				label={ label }
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
 				<ResolutionTool
 					panelId={ panelId }
 					onChange={ ( newValue ) => {
-						setResolution( newValue );
+						setAttributes( { resolution: newValue } );
 						onChangeProp( newValue );
 					} }
 					value={ resolution }
+					resetAllFilter={ () => ( {
+						resolution: undefined,
+					} ) }
 					{ ...props }
 				/>
 			</ToolsPanel>
@@ -44,5 +70,7 @@ export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
 	);
 };
 Default.args = {
+	label: 'Settings',
+	defaultValue: 'full',
 	panelId: 'panel-id',
 };

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

@@ -57,7 +57,7 @@ function ResponsiveBlockControl( props ) {
 		);
 
 	const toggleHelpText = __(
-		'Toggle between using the same value for all screen sizes or using a unique value per screen size.'
+		'Choose whether to use the same value for all screen sizes or a unique value for each screen size.'
 	);
 
 	const defaultControl = renderDefaultControl(

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

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode } = event;
+		const { keyCode, shiftKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,6 +30,11 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
+			// Exclude shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey ) {
+				return;
+			}
+
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}

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

@@ -39,7 +39,7 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../utils/block-bindings';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();