@wordpress/block-editor 9.1.0 → 9.4.0

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop, uniqueId } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,10 +11,15 @@ import {
 	ToolbarButton,
 	Dropdown,
 	withFilters,
+	Tooltip,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
-import { upload, media as mediaIcon } from '@wordpress/icons';
+import {
+	postFeaturedImage,
+	upload,
+	media as mediaIcon,
+} from '@wordpress/icons';
 import { compose } from '@wordpress/compose';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
@@ -32,6 +32,9 @@ import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+let uniqueId = 0;
+
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
@@ -41,8 +44,9 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onToggleFeaturedImage,
+	useFeaturedImage,
 	onFilesUpload = noop,
-	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -56,9 +60,7 @@ const MediaReplaceFlow = ( {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const editMediaButtonRef = useRef();
-	const errorNoticeID = uniqueId(
-		'block-editor/media-replace-flow/error-notice/'
-	);
+	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
 		const safeMessage = stripHTML( message );
@@ -82,6 +84,9 @@ const MediaReplaceFlow = ( {
 	};
 
 	const selectMedia = ( media, closeMenu ) => {
+		if ( useFeaturedImage && onToggleFeaturedImage ) {
+			onToggleFeaturedImage();
+		}
 		closeMenu();
 		setMediaURLValue( media?.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
@@ -149,43 +154,56 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<MediaUpload
-							gallery={ gallery }
-							addToGallery={ addToGallery }
-							multiple={ multiple }
-							value={ multiple ? mediaIds : mediaId }
-							onSelect={ ( media ) =>
-								selectMedia( media, onClose )
-							}
-							allowedTypes={ allowedTypes }
-							onClose={ onCloseModal }
-							render={ ( { open } ) => (
-								<MenuItem icon={ mediaIcon } onClick={ open }>
-									{ __( 'Open Media Library' ) }
-								</MenuItem>
-							) }
-						/>
-						<MediaUploadCheck>
-							<FormFileUpload
-								onChange={ ( event ) => {
-									uploadFiles( event, onClose );
-								} }
-								accept={ accept }
+						<>
+							<MediaUpload
+								gallery={ gallery }
+								addToGallery={ addToGallery }
 								multiple={ multiple }
-								render={ ( { openFileDialog } ) => {
-									return (
-										<MenuItem
-											icon={ upload }
-											onClick={ () => {
-												openFileDialog();
-											} }
-										>
-											{ __( 'Upload' ) }
-										</MenuItem>
-									);
-								} }
+								value={ multiple ? mediaIds : mediaId }
+								onSelect={ ( media ) =>
+									selectMedia( media, onClose )
+								}
+								allowedTypes={ allowedTypes }
+								render={ ( { open } ) => (
+									<MenuItem
+										icon={ mediaIcon }
+										onClick={ open }
+									>
+										{ __( 'Open Media Library' ) }
+									</MenuItem>
+								) }
 							/>
-						</MediaUploadCheck>
+							<MediaUploadCheck>
+								<FormFileUpload
+									onChange={ ( event ) => {
+										uploadFiles( event, onClose );
+									} }
+									accept={ accept }
+									multiple={ multiple }
+									render={ ( { openFileDialog } ) => {
+										return (
+											<MenuItem
+												icon={ upload }
+												onClick={ () => {
+													openFileDialog();
+												} }
+											>
+												{ __( 'Upload' ) }
+											</MenuItem>
+										);
+									} }
+								/>
+							</MediaUploadCheck>
+						</>
+						{ onToggleFeaturedImage && (
+							<MenuItem
+								icon={ postFeaturedImage }
+								onClick={ onToggleFeaturedImage }
+								isPressed={ useFeaturedImage }
+							>
+								{ __( 'Use featured image' ) }
+							</MenuItem>
+						) }
 						{ children }
 					</NavigableMenu>
 					{ onSelectURL && (
@@ -194,16 +212,21 @@ const MediaReplaceFlow = ( {
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>
-							<LinkControl
-								value={ { url: mediaURLValue } }
-								settings={ [] }
-								showSuggestions={ false }
-								onChange={ ( { url } ) => {
-									setMediaURLValue( url );
-									onSelectURL( url );
-									editMediaButtonRef.current.focus();
-								} }
-							/>
+
+							<Tooltip text={ mediaURLValue } position="bottom">
+								<div>
+									<LinkControl
+										value={ { url: mediaURLValue } }
+										settings={ [] }
+										showSuggestions={ false }
+										onChange={ ( { url } ) => {
+											setMediaURLValue( url );
+											onSelectURL( url );
+											editMediaButtonRef.current.focus();
+										} }
+									/>
+								</div>
+							</Tooltip>
 						</form>
 					) }
 				</>

package/src/components/media-upload/README.md

@@ -64,6 +64,14 @@ If allowedTypes is unset all mime types should be allowed.
 -   Required: No
 -   Platform: Web | Mobile
 
+### mode
+
+Value of Frame content default mode like 'browse', 'upload' etc.
+
+-   Type: `String`
+-   Required: No
+-   Default: false
+-   Platform: Web
 ### multiple
 
 Whether to allow multiple selections or not.

package/src/components/media-upload/index.native.js

@@ -39,6 +39,7 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -78,6 +79,8 @@ export class MediaUpload extends Component {
 	}
 
 	getAllSources() {
+		const { onSelectURL } = this.props;
+
 		const cameraImageSource = {
 			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
@@ -124,16 +127,17 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
 
+		// Only include `urlSource` option if `onSelectURL` prop is present, in order to match the web behavior.
 		const internalSources = [
 			deviceLibrarySource,
 			cameraImageSource,
 			cameraVideoSource,
 			siteLibrarySource,
-			urlSource,
+			...( onSelectURL ? [ urlSource ] : [] ),
 		];
 
 		return internalSources.concat( this.state.otherMediaOptions );

package/src/components/media-upload/test/index.native.js

@@ -20,6 +20,7 @@ import {
 	OPTION_TAKE_VIDEO,
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
+	OPTION_WORDPRESS_MEDIA_LIBRARY,
 } from '../index';
 
 const MEDIA_URL = 'http://host.media.type';
@@ -33,8 +34,11 @@ describe( 'MediaUpload component', () => {
 		expect( wrapper ).toBeTruthy();
 	} );
 
-	it( 'shows right media capture option for media type', () => {
-		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
+	describe( 'Media capture options for different media block types', () => {
+		const expectOptionForMediaType = async (
+			mediaType,
+			expectedOptions
+		) => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
@@ -52,11 +56,32 @@ describe( 'MediaUpload component', () => {
 			);
 			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
 
-			wrapper.getByText( expectedOption );
+			expectedOptions.forEach( ( item ) => {
+				const option = wrapper.getByText( item );
+				expect( option ).toBeVisible();
+			} );
 		};
-		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
-		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
-		expectOptionForMediaType( MEDIA_TYPE_AUDIO, OPTION_INSERT_FROM_URL );
+
+		it( 'shows the correct media capture options for the Image block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_IMAGE, [
+				OPTION_TAKE_PHOTO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Video block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_VIDEO, [
+				OPTION_TAKE_VIDEO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Audio block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_AUDIO, [
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
 	} );
 
 	const expectMediaPickerForOption = (

package/src/components/navigable-toolbar/index.js

@@ -69,8 +69,7 @@ function useIsAccessibleToolbar( ref ) {
 				since: '5.6',
 				alternative:
 					'ToolbarItem, ToolbarButton or ToolbarDropdownMenu components',
-				link:
-					'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols',
+				link: 'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols',
 			} );
 		}
 		setIsAccessibleToolbar( onlyToolbarItem );

package/src/components/panel-color-settings/test/index.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import PanelColorSettings from '../';
 
+const noop = () => {};
+
 describe( 'PanelColorSettings', () => {
 	it( 'should not render anything if there are no colors to choose', async () => {
 		const { container } = render(

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

@@ -7,7 +7,7 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,6 +18,9 @@ export default class PlainText extends Component {
 	constructor() {
 		super( ...arguments );
 		this.isAndroid = Platform.OS === 'android';
+
+		this.onChangeTextInput = this.onChangeTextInput.bind( this );
+		this.onChangeRichText = this.onChangeRichText.bind( this );
 	}
 
 	componentDidMount() {
@@ -44,7 +47,7 @@ export default class PlainText extends Component {
 
 	componentDidUpdate( prevProps ) {
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
-			this._input.blur();
+			this._input?.blur();
 		}
 	}
 
@@ -55,11 +58,11 @@ export default class PlainText extends Component {
 	}
 
 	focus() {
-		this._input.focus();
+		this._input?.focus();
 	}
 
 	blur() {
-		this._input.blur();
+		this._input?.blur();
 	}
 
 	getFontSize() {
@@ -79,20 +82,69 @@ export default class PlainText extends Component {
 		};
 	}
 
+	replaceLineBreakTags( value ) {
+		return value?.replace( RegExp( '<br>', 'gim' ), '\n' );
+	}
+
+	onChangeTextInput( event ) {
+		const { onChange } = this.props;
+		onChange( event.nativeEvent.text );
+	}
+
+	onChangeRichText( value ) {
+		const { onChange } = this.props;
+		// The <br> tags have to be replaced with new line characters
+		// as the content of plain text shouldn't contain HTML tags.
+		onChange( this.replaceLineBreakTags( value ) );
+	}
+
 	render() {
-		const { style } = this.props;
+		const { style, __experimentalVersion, onFocus, ...otherProps } =
+			this.props;
 		const textStyles = [
 			style || styles[ 'block-editor-plain-text' ],
 			this.getFontSize(),
 		];
 
+		if ( __experimentalVersion === 2 ) {
+			const disableFormattingProps = {
+				withoutInteractiveFormatting: true,
+				disableEditingMenu: true,
+				__unstableDisableFormats: true,
+				disableSuggestions: true,
+			};
+
+			const forcePlainTextProps = {
+				preserveWhiteSpace: true,
+				__unstablePastePlainText: true,
+				multiline: false,
+			};
+
+			const fontProps = {
+				fontFamily: style?.fontFamily,
+				fontSize: style?.fontSize,
+				fontWeight: style?.fontWeight,
+			};
+
+			return (
+				<RichText
+					{ ...otherProps }
+					{ ...disableFormattingProps }
+					{ ...forcePlainTextProps }
+					{ ...fontProps }
+					identifier="content"
+					style={ style }
+					onChange={ this.onChangeRichText }
+					unstableOnFocus={ onFocus }
+				/>
+			);
+		}
+
 		return (
 			<TextInput
 				{ ...this.props }
 				ref={ ( x ) => ( this._input = x ) }
-				onChange={ ( event ) => {
-					this.props.onChange( event.nativeEvent.text );
-				} }
+				onChange={ this.onChangeTextInput }
 				onFocus={ this.props.onFocus } // Always assign onFocus as a props.
 				onBlur={ this.props.onBlur } // Always assign onBlur as a props.
 				fontFamily={

package/src/components/preview-options/index.js

@@ -35,11 +35,15 @@ export default function PreviewOptions( {
 		/* translators: button label text should, if possible, be under 16 characters. */
 		children: __( 'Preview' ),
 	};
+	const menuProps = {
+		'aria-label': __( 'Preview options' ),
+	};
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
+			menuProps={ menuProps }
 			icon={ null }
 		>
 			{ () => (

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, noop } from 'lodash';
+import { last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,8 @@ import { cloneBlock } from '@wordpress/blocks';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 /**
  * A function to call when the block value has been updated in the block-editor
  * store.
@@ -258,7 +260,8 @@ export default function useBlockSync( {
 					selection: {
 						selectionStart: getSelectionStart(),
 						selectionEnd: getSelectionEnd(),
-						initialPosition: getSelectedBlocksInitialCaretPosition(),
+						initialPosition:
+							getSelectedBlocksInitialCaretPosition(),
 					},
 				} );
 			}

package/src/components/publish-date-time-picker/README.md

@@ -0,0 +1,52 @@
+# `PublishDateTimePicker`
+
+`<PublishDateTimePicker />` is a component used to select the date and time that
+a post will be published. It wraps the `<DateTimePicker />` component found in
+`@wordpress/components` and adds additional post-specific controls.
+
+See [the documentation for DateTimePicker](/packages/components/src/date-time)
+for more information.
+
+## Usage
+
+```jsx
+import { Dropdown, Button } from '@wordpress/components';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+const MyDateTimePicker = () => {
+	const [ date, setDate ] = useState( new Date() );
+
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				>
+					Select post date
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<PublishDateTimePicker
+					currentDate={ date }
+					onChange={ ( newDate ) => setDate( newDate ) }
+					onClose={ onClose }
+				/>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+`PublishDateTimePicker` supports all of the props that
+[`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
+
+### onClose
+
+Called when the user presses the close button.
+
+- Type: `Function`
+- Required: No

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { DateTimePicker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+import { __experimentalGetSettings as getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import InspectorPopoverHeader from '../inspector-popover-header';
+
+function PublishDateTimePicker(
+	{ onClose, onChange, ...additionalProps },
+	ref
+) {
+	return (
+		<div ref={ ref } className="block-editor-publish-date-time-picker">
+			<InspectorPopoverHeader
+				title={ __( 'Publish' ) }
+				actions={ [
+					{
+						label: __( 'Now' ),
+						onClick: () => onChange?.( null ),
+					},
+				] }
+				onClose={ onClose }
+			/>
+			<DateTimePicker
+				startOfWeek={ getSettings().l10n.startOfWeek }
+				__nextRemoveHelpButton
+				__nextRemoveResetButton
+				onChange={ onChange }
+				{ ...additionalProps }
+			/>
+		</div>
+	);
+}
+
+export default forwardRef( PublishDateTimePicker );

package/src/components/responsive-block-control/README.md

@@ -171,8 +171,10 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 An optional render function (prop) used to render the controls for the _responsive_ settings. If not provided, by default, responsive controls will be _automatically_ rendered using the component returned by the `renderDefaultControl` prop. For _complete_ control over the output of the responsive controls, you may return a component here and it will be rendered when the control group is in "responsive" mode.
 
 ```jsx
+let uniqueId = 0;
+
 const renderResponsiveControls = ( viewports ) => {
-	const inputId = uniqueId(); // lodash
+	const inputId = ++uniqueId;
 
 	return viewports.map( ( { id, label } ) => {
 		return (

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

@@ -3,7 +3,6 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ afterEach( () => {
 	container = null;
 } );
 
-const inputId = uniqueId();
+const inputId = 'input-12345678';
 
 const sizeOptions = [
 	{
@@ -97,8 +96,9 @@ describe( 'Basic rendering', () => {
 			)
 		);
 
-		const toggleState = container.querySelector( 'input[type="checkbox"]' )
-			.checked;
+		const toggleState = container.querySelector(
+			'input[type="checkbox"]'
+		).checked;
 
 		const defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'

package/src/components/rich-text/embed-handler-picker.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,6 +11,8 @@ import {
 import { Picker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const noop = () => {};
+
 const DEFAULT_PICKER_OPTIONS = [
 	{
 		id: 'createEmbed',

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

@@ -76,6 +76,8 @@ function removeNativeProps( props ) {
 		'minWidth',
 		'maxWidth',
 		'setRef',
+		'disableSuggestions',
+		'disableAutocorrection',
 	] );
 }
 
@@ -120,9 +122,8 @@ function RichTextWrapper(
 	const anchorRef = useRef();
 	const { clientId } = useBlockEditContext();
 	const selector = ( select ) => {
-		const { getSelectionStart, getSelectionEnd } = select(
-			blockEditorStore
-		);
+		const { getSelectionStart, getSelectionEnd } =
+			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -239,7 +240,11 @@ function RichTextWrapper(
 		);
 	}
 
-	const { value, onChange, ref: richTextRef } = useRichText( {
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
 			adjustedOnChange( html );