@wordpress/block-editor 9.0.0 → 9.3.0

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/preview-options/style.scss

@@ -11,10 +11,6 @@
 }
 
 .block-editor-post-preview__dropdown-content {
-	.components-popover__content {
-		overflow-y: visible;
-	}
-
 	&.edit-post-post-preview-dropdown {
 		.components-menu-group {
 			&:first-child {

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,39 @@
+/**
+ * WordPress dependencies
+ */
+import { DateTimePicker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * 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
+				__nextRemoveHelpButton
+				__nextRemoveResetButton
+				onChange={ onChange }
+				{ ...additionalProps }
+			/>
+		</div>
+	);
+}
+
+export default forwardRef( PublishDateTimePicker );

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

@@ -97,8 +97,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/format-toolbar-container.js

@@ -14,7 +14,6 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 		// Render in popover.
 		return (
 			<Popover
-				noArrow
 				position="top center"
 				focusOnMount={ false }
 				anchorRef={ anchorRef }

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 );
@@ -338,7 +343,7 @@ function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					anchorRef={ anchorRef.current }
+					anchorRef={ anchorRef }
 				/>
 			) }
 			<TagName

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

@@ -111,6 +111,8 @@ function RichTextWrapper(
 		maxWidth,
 		onBlur,
 		setRef,
+		disableSuggestions,
+		disableAutocorrection,
 		...props
 	},
 	forwardedRef
@@ -635,6 +637,8 @@ function RichTextWrapper(
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
 			setRef={ setRef }
+			disableSuggestions={ disableSuggestions }
+			disableAutocorrection={ disableAutocorrection }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/rich-text/style.scss

@@ -42,17 +42,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		min-width: auto;
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
-
-		// Block UI appearance.
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-		background-color: $white;
+		outline: none;
 	}
 
-	.components-toolbar-group,
 	.components-toolbar {
-		// The popover already provides a border.
-		border: none;
+		border-radius: $radius-block-ui;
 	}
 
 	.components-toolbar__control,

package/src/components/rich-text/use-format-types.js

@@ -69,15 +69,14 @@ export function useFormatTypes( {
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
 				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[
-						type.name
-					] = type.__experimentalGetPropsForEditableTreePreparation(
-						select,
-						{
-							richTextIdentifier: identifier,
-							blockClientId: clientId,
-						}
-					);
+					accumulator[ type.name ] =
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
+						);
 				}
 
 				return accumulator;
@@ -116,13 +115,14 @@ export function useFormatTypes( {
 			let dispatchers = {};
 
 			if ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {
-				dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(
-					dispatch,
-					{
-						richTextIdentifier: identifier,
-						blockClientId: clientId,
-					}
-				);
+				dispatchers =
+					type.__experimentalGetPropsForEditableTreeChangeHandler(
+						dispatch,
+						{
+							richTextIdentifier: identifier,
+							blockClientId: clientId,
+						}
+					);
 			}
 
 			changeHandlers.push(

package/src/components/rich-text/use-mark-persistent.js

@@ -13,9 +13,8 @@ export function useMarkPersistent( { html, value } ) {
 	const previousText = useRef();
 	const hasActiveFormats =
 		value.activeFormats && !! value.activeFormats.length;
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {

package/src/components/skip-to-selected-block/index.js

@@ -33,8 +33,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
  */
 export default withSelect( ( select ) => {
 	return {
-		selectedBlockClientId: select(
-			blockEditorStore
-		).getBlockSelectionStart(),
+		selectedBlockClientId:
+			select( blockEditorStore ).getBlockSelectionStart(),
 	};
 } )( SkipToSelectedBlock );

package/src/components/ungroup-button/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,8 @@ import { compose } from '@wordpress/compose';
 import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
 		return null;
@@ -35,9 +32,8 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const { getGroupingBlockName } = select( blocksStore );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, isFunction } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -27,6 +27,16 @@ import { isURL } from '@wordpress/url';
  */
 import { store as blockEditorStore } from '../../store';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class URLInput extends Component {
 	constructor( props ) {
 		super( props );
@@ -60,10 +70,8 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const {
-			value,
-			__experimentalShowInitialSuggestions = false,
-		} = this.props;
+		const { value, __experimentalShowInitialSuggestions = false } =
+			this.props;
 
 		// Only have to worry about scrolling selected suggestion into view
 		// when already expanded.
@@ -122,10 +130,8 @@ class URLInput extends Component {
 
 	shouldShowInitialSuggestions() {
 		const { suggestions } = this.state;
-		const {
-			__experimentalShowInitialSuggestions = false,
-			value,
-		} = this.props;
+		const { __experimentalShowInitialSuggestions = false, value } =
+			this.props;
 		return (
 			! this.isUpdatingSuggestions &&
 			__experimentalShowInitialSuggestions &&
@@ -257,12 +263,8 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
-		const {
-			showSuggestions,
-			selectedSuggestion,
-			suggestions,
-			loading,
-		} = this.state;
+		const { showSuggestions, selectedSuggestion, suggestions, loading } =
+			this.state;
 
 		// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
 		// We shouldn't preventDefault to allow block arrow keys navigation.
@@ -303,6 +305,7 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
+					event.preventDefault();
 					if ( this.props.onSubmit ) {
 						this.props.onSubmit( null, event );
 					}
@@ -314,9 +317,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		const suggestion = this.state.suggestions[
-			this.state.selectedSuggestion
-		];
+		const suggestion =
+			this.state.suggestions[ this.state.selectedSuggestion ];
 
 		switch ( event.keyCode ) {
 			case UP: {
@@ -350,6 +352,7 @@ class URLInput extends Component {
 				break;
 			}
 			case ENTER: {
+				event.preventDefault();
 				if ( this.state.selectedSuggestion !== null ) {
 					this.selectLink( suggestion );
 
@@ -536,7 +539,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" noArrow focusOnMount={ false }>
+				<Popover position="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(
@@ -588,8 +591,8 @@ export default compose(
 		}
 		const { getSettings } = select( blockEditorStore );
 		return {
-			__experimentalFetchLinkSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			__experimentalFetchLinkSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	} )
 )( URLInput );

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

@@ -41,12 +41,10 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const { getBlockType, getActiveBlockVariation } = select(
-				blocksStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			if ( ! blockType ) return null;

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

@@ -101,9 +101,8 @@ export default function useBlockDropZone( {
 	);
 
 	const { getBlockListSettings } = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 	const throttled = useThrottle(