@wordpress/editor 11.0.1-next.253d9b6e21.0 → 12.0.0

package/src/components/global-keyboard-shortcuts/save-shortcut.js

@@ -12,51 +12,43 @@ import { store as editorStore } from '../../store';
 
 function SaveShortcut( { resetBlocksOnSave } ) {
 	const { resetEditorBlocks, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, getPostEdits } = useSelect( ( select ) => {
-		const {
-			isEditedPostDirty: _isEditedPostDirty,
-			getPostEdits: _getPostEdits,
-		} = select( editorStore );
-
-		return {
-			isEditedPostDirty: _isEditedPostDirty,
-			getPostEdits: _getPostEdits,
-		};
-	}, [] );
-
-	useShortcut(
-		'core/editor/save',
-		( event ) => {
-			event.preventDefault();
-
-			// TODO: This should be handled in the `savePost` effect in
-			// considering `isSaveable`. See note on `isEditedPostSaveable`
-			// selector about dirtiness and meta-boxes.
-			//
-			// See: `isEditedPostSaveable`
-			if ( ! isEditedPostDirty() ) {
-				return;
-			}
+	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } = useSelect(
+		editorStore
+	);
 
-			// The text editor requires that editor blocks are updated for a
-			// save to work correctly. Usually this happens when the textarea
-			// for the code editors blurs, but the shortcut can be used without
-			// blurring the textarea.
-			if ( resetBlocksOnSave ) {
-				const postEdits = getPostEdits();
-				if (
-					postEdits.content &&
-					typeof postEdits.content === 'string'
-				) {
-					const blocks = parse( postEdits.content );
-					resetEditorBlocks( blocks );
-				}
+	useShortcut( 'core/editor/save', ( event ) => {
+		event.preventDefault();
+
+		/**
+		 * Do not save the post if post saving is locked.
+		 */
+		if ( isPostSavingLocked() ) {
+			return;
+		}
+
+		// TODO: This should be handled in the `savePost` effect in
+		// considering `isSaveable`. See note on `isEditedPostSaveable`
+		// selector about dirtiness and meta-boxes.
+		//
+		// See: `isEditedPostSaveable`
+		if ( ! isEditedPostDirty() ) {
+			return;
+		}
+
+		// The text editor requires that editor blocks are updated for a
+		// save to work correctly. Usually this happens when the textarea
+		// for the code editors blurs, but the shortcut can be used without
+		// blurring the textarea.
+		if ( resetBlocksOnSave ) {
+			const postEdits = getPostEdits();
+			if ( postEdits.content && typeof postEdits.content === 'string' ) {
+				const blocks = parse( postEdits.content );
+				resetEditorBlocks( blocks );
 			}
+		}
 
-			savePost();
-		},
-		{ bindGlobal: true }
-	);
+		savePost();
+	} );
 
 	return null;
 }

package/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js

@@ -13,23 +13,15 @@ import { store as editorStore } from '../../store';
 function VisualEditorGlobalKeyboardShortcuts() {
 	const { redo, undo } = useDispatch( editorStore );
 
-	useShortcut(
-		'core/editor/undo',
-		( event ) => {
-			undo();
-			event.preventDefault();
-		},
-		{ bindGlobal: true }
-	);
+	useShortcut( 'core/editor/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
 
-	useShortcut(
-		'core/editor/redo',
-		( event ) => {
-			redo();
-			event.preventDefault();
-		},
-		{ bindGlobal: true }
-	);
+	useShortcut( 'core/editor/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
 
 	return <SaveShortcut />;
 }

package/src/components/index.js

@@ -58,6 +58,7 @@ export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
+export { default as ThemeSupportCheck } from './theme-support-check';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 

package/src/components/local-autosave-monitor/index.js

@@ -51,14 +51,12 @@ function useAutosaveNotice() {
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			getEditedPostAttribute: select( editorStore )
-				.getEditedPostAttribute,
 			hasRemoteAutosave: !! select( editorStore ).getEditorSettings()
 				.autosave,
 		} ),
 		[]
 	);
-	const { getEditedPostAttribute } = useSelect( 'core/editor' );
+	const { getEditedPostAttribute } = useSelect( editorStore );
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
 	const { editPost, resetEditorBlocks } = useDispatch( editorStore );

package/src/components/post-format/index.js

@@ -6,7 +6,7 @@ import { find, get, includes, union } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Button, SelectControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
@@ -107,7 +107,11 @@ export default function PostFormat() {
 								onUpdatePostFormat( suggestion.id )
 							}
 						>
-							{ suggestion.caption }
+							{ sprintf(
+								/* translators: %s: post format */
+								__( 'Apply format: %s' ),
+								suggestion.caption
+							) }
 						</Button>
 					</div>
 				) }

package/src/components/post-format/style.scss

@@ -12,6 +12,7 @@
 }
 
 .editor-post-format__suggestion {
+	padding: $grid-unit-15 * 0.5;
 	text-align: right;
 	font-size: $default-font-size;
 }

package/src/components/post-locked-modal/index.js

@@ -54,7 +54,7 @@ export default function PostLockedModal() {
 			activePostLock: getActivePostLock(),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		};
-	} );
+	}, [] );
 
 	useEffect( () => {
 		/**

package/src/components/post-saved-state/index.js

@@ -100,79 +100,65 @@ export default function PostSavedState( {
 		return () => clearTimeout( timeoutId );
 	}, [ isSaving ] );
 
-	if ( isSaving ) {
-		// TODO: Classes generation should be common across all return
-		// paths of this function, including proper naming convention for
-		// the "Save Draft" button.
-		const classes = classnames(
-			'editor-post-saved-state',
-			'is-saving',
-			getAnimateClassName( { type: 'loading' } ),
-			{
-				'is-autosaving': isAutosaving,
-			}
-		);
-
-		return (
-			<span className={ classes }>
-				<Icon icon={ cloud } />
-				{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
-			</span>
-		);
-	}
-
-	if ( isPublished || isScheduled ) {
-		return <PostSwitchToDraftButton />;
-	}
-
-	if ( ! isSaveable ) {
-		return null;
-	}
-
-	if ( forceSavedMessage || ( ! isNew && ! isDirty ) ) {
-		return (
-			<span className="editor-post-saved-state is-saved">
-				<Icon icon={ check } />
-				{ __( 'Saved' ) }
-			</span>
-		);
-	}
-
 	// Once the post has been submitted for review this button
 	// is not needed for the contributor role.
-
 	if ( ! hasPublishAction && isPending ) {
 		return null;
 	}
 
+	if ( isPublished || isScheduled ) {
+		return <PostSwitchToDraftButton />;
+	}
+
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' );
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const shortLabel = __( 'Save' );
 
-	if ( ! isLargeViewport ) {
-		return (
-			<Button
-				className="editor-post-save-draft"
-				label={ label }
-				onClick={ () => savePost() }
-				shortcut={ displayShortcut.primary( 's' ) }
-				icon={ cloudUpload }
-			>
-				{ showIconLabels && shortLabel }
-			</Button>
-		);
+	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
+	const isSavedState = isSaving || isSaved;
+	const isDisabled = isSaving || isSaved || ! isSaveable;
+
+	let text;
+
+	if ( isSaving ) {
+		text = isAutosaving ? __( 'Autosaving' ) : __( 'Saving' );
+	} else if ( isSaved ) {
+		text = __( 'Saved' );
+	} else if ( isLargeViewport ) {
+		text = label;
+	} else if ( showIconLabels ) {
+		text = shortLabel;
 	}
 
+	// Use common Button instance for all saved states so that focus is not
+	// lost.
 	return (
 		<Button
-			className="editor-post-save-draft"
-			onClick={ () => savePost() }
+			className={
+				isSaveable || isSaving
+					? classnames( {
+							'editor-post-save-draft': ! isSavedState,
+							'editor-post-saved-state': isSavedState,
+							'is-saving': isSaving,
+							'is-autosaving': isAutosaving,
+							'is-saved': isSaved,
+							[ getAnimateClassName( {
+								type: 'loading',
+							} ) ]: isSaving,
+					  } )
+					: undefined
+			}
+			onClick={ isDisabled ? undefined : () => savePost() }
 			shortcut={ displayShortcut.primary( 's' ) }
-			variant="tertiary"
+			variant={ isLargeViewport ? 'tertiary' : undefined }
+			icon={ isLargeViewport ? undefined : cloudUpload }
+			label={ label }
+			aria-disabled={ isDisabled }
 		>
-			{ label }
+			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
+			{ text }
 		</Button>
 	);
 }

package/src/components/post-saved-state/style.scss

@@ -7,6 +7,13 @@
 	overflow: hidden;
 	white-space: nowrap;
 
+	// The disabled version of the save state should be legible as an indicator.
+	&.is-saved[aria-disabled="true"],
+	&.is-saved[aria-disabled="true"]:hover {
+		background: transparent;
+		color: $gray-700;
+	}
+
 	svg {
 		display: inline-block;
 		flex: 0 0 auto;
@@ -20,7 +27,7 @@
 		text-indent: inherit;
 
 		svg {
-			margin-right: $grid-unit-05;
+			margin-right: 0;
 		}
 	}
 }

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -1,10 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`PostSavedState returns a disabled button if the post is not saveable 1`] = `
+<ForwardRef(Button)
+  aria-disabled={true}
+  icon={
+    <SVG
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
+      />
+    </SVG>
+  }
+  label="Save draft"
+  shortcut="Ctrl+S"
+/>
+`;
+
 exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `<WithSelect(WithDispatch(PostSwitchToDraftButton)) />`;
 
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <ForwardRef(Button)
+  aria-disabled={false}
   className="editor-post-save-draft"
+  label="Save draft"
   onClick={[Function]}
   shortcut="Ctrl+S"
   variant="tertiary"

package/src/components/post-saved-state/test/index.js

@@ -48,7 +48,7 @@ describe( 'PostSavedState', () => {
 		expect( wrapper.text() ).toContain( 'Saving' );
 	} );
 
-	it( 'returns null if the post is not saveable', () => {
+	it( 'returns a disabled button if the post is not saveable', () => {
 		useSelect.mockImplementation( () => ( {
 			isDirty: false,
 			isNew: true,
@@ -58,7 +58,7 @@ describe( 'PostSavedState', () => {
 
 		const wrapper = shallow( <PostSavedState /> );
 
-		expect( wrapper.type() ).toBeNull();
+		expect( wrapper ).toMatchSnapshot();
 	} );
 
 	it( 'returns a switch to draft link if the post is published', () => {

package/src/components/post-title/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import TextareaAutosize from 'react-autosize-textarea';
 import classnames from 'classnames';
 
 /**
@@ -12,10 +11,10 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __unstableUseRichText as useRichText } from '@wordpress/rich-text';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +28,6 @@ import { store as editorStore } from '../../store';
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
 export default function PostTitle() {
-	const instanceId = useInstanceId( PostTitle );
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
@@ -63,7 +61,7 @@ export default function PostTitle() {
 			isFocusMode: focusMode,
 			hasFixedToolbar: _hasFixedToolbar,
 		};
-	} );
+	}, [] );
 
 	useEffect( () => {
 		if ( ! ref.current ) {
@@ -94,6 +92,8 @@ export default function PostTitle() {
 		editPost( { title: newTitle } );
 	}
 
+	const [ selection, setSelection ] = useState( {} );
+
 	function onSelect() {
 		setIsSelected( true );
 		clearSelectedBlock();
@@ -101,10 +101,11 @@ export default function PostTitle() {
 
 	function onUnselect() {
 		setIsSelected( false );
+		setSelection( {} );
 	}
 
-	function onChange( event ) {
-		onUpdate( event.target.value.replace( REGEXP_NEWLINES, ' ' ) );
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
 	}
 
 	function onKeyDown( event ) {
@@ -167,38 +168,52 @@ export default function PostTitle() {
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
 	const className = classnames(
-		'wp-block editor-post-title editor-post-title__block',
+		'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text',
 		{
 			'is-selected': isSelected,
 			'is-focus-mode': isFocusMode,
 			'has-fixed-toolbar': hasFixedToolbar,
 		}
 	);
-	const decodedPlaceholder = decodeEntities( placeholder );
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+	const { ref: richTextRef } = useRichText( {
+		value: title,
+		onChange,
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: true,
+		preserveWhiteSpace: true,
+	} );
 
+	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
 	return (
 		<PostTypeSupportCheck supportKeys="title">
-			<div className={ className }>
-				<VisuallyHidden
-					as="label"
-					htmlFor={ `post-title-${ instanceId }` }
-				>
-					{ decodedPlaceholder || __( 'Add title' ) }
-				</VisuallyHidden>
-				<TextareaAutosize
-					ref={ ref }
-					id={ `post-title-${ instanceId }` }
-					className="editor-post-title__input"
-					value={ title }
-					onChange={ onChange }
-					placeholder={ decodedPlaceholder || __( 'Add title' ) }
-					onFocus={ onSelect }
-					onBlur={ onUnselect }
-					onKeyDown={ onKeyDown }
-					onKeyPress={ onUnselect }
-					onPaste={ onPaste }
-				/>
-			</div>
+			<h1
+				ref={ useMergeRefs( [ richTextRef, ref ] ) }
+				contentEditable
+				className={ className }
+				aria-label={ decodedPlaceholder }
+				onFocus={ onSelect }
+				onBlur={ onUnselect }
+				onKeyDown={ onKeyDown }
+				onKeyPress={ onUnselect }
+				onPaste={ onPaste }
+			/>
 		</PostTypeSupportCheck>
 	);
+	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
 }

package/src/components/post-title/style.scss

@@ -1,76 +1,7 @@
 .editor-post-title {
 	position: relative;
 
-	.editor-post-title__input {
-		display: block;
-		width: 100%;
-		margin: 0;
-		box-shadow: none;
-		background: transparent;
-		transition: border 0.1s ease-out, box-shadow 0.1s linear;
-		@include reduce-motion("transition");
-		padding: #{ $block-padding + 5px } 0;
-		word-break: keep-all;
-
-		// Inherit the styles set by the theme.
-		font-family: inherit;
-		color: inherit;
-
-		// Stack borders on mobile.
-		border: $border-width solid transparent;
-		border-left-width: 0;
-		border-right-width: 0;
-		border-radius: 0;
-
-		// Include transparent outline for Windows High Contrast mode.
-		outline: $border-width solid transparent;
-
-		@include break-small() {
-			border-width: $border-width;
-		}
-
-		// Match h1 heading.
-		font-size: 2.44em;
-		font-weight: 800;
-		line-height: 1.4;
-
-		&::-webkit-input-placeholder {
-			color: $dark-gray-placeholder;
-		}
-
-		&::-moz-placeholder {
-			color: $dark-gray-placeholder;
-			// Override Firefox default.
-			opacity: 1;
-		}
-
-		&:-ms-input-placeholder {
-			color: $dark-gray-placeholder;
-		}
-
-		.is-dark-theme & {
-			&::-webkit-input-placeholder {
-				color: $light-gray-placeholder;
-			}
-
-			&::-moz-placeholder {
-				opacity: 1; // Necessary because Firefox reduces this from 1.
-				color: $light-gray-placeholder;
-			}
-
-			&:-ms-input-placeholder {
-				color: $light-gray-placeholder;
-			}
-		}
-
-		&:focus {
-			border: $border-width solid transparent;
-			outline: $border-width solid transparent;
-			box-shadow: none;
-		}
-	}
-
-	&.is-focus-mode .editor-post-title__input {
+	&.is-focus-mode {
 		opacity: 0.5;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");

package/src/components/provider/index.native.js

@@ -54,6 +54,7 @@ const postTypeEntities = [
 	mergedEdits: {
 		meta: true,
 	},
+	rawAttributes: [ 'title', 'excerpt', 'content' ],
 } ) );
 import { EditorHelpTopics } from '@wordpress/editor';
 
@@ -89,11 +90,18 @@ class NativeEditorProvider extends Component {
 	}
 
 	componentDidMount() {
-		const { capabilities, updateSettings } = this.props;
+		const {
+			capabilities,
+			locale,
+			updateSettings,
+			galleryWithImageBlocks,
+		} = this.props;
 
 		updateSettings( {
 			...capabilities,
+			...{ __unstableGalleryWithImageBlocks: galleryWithImageBlocks },
 			...this.getThemeColors( this.props ),
+			locale,
 		} );
 
 		this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {
@@ -142,8 +150,13 @@ class NativeEditorProvider extends Component {
 
 		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
 			( editorSettings ) => {
-				const themeColors = this.getThemeColors( editorSettings );
-				updateSettings( themeColors );
+				updateSettings( {
+					...{
+						__unstableGalleryWithImageBlocks:
+							editorSettings.galleryWithImageBlocks,
+					},
+					...this.getThemeColors( editorSettings ),
+				} );
 			}
 		);
 
@@ -160,8 +173,6 @@ class NativeEditorProvider extends Component {
 		);
 
 		this.subscriptionParentShowEditorHelp = subscribeShowEditorHelp( () => {
-			// Temporary: feature hidden from production. This is just here for testing
-			// purposes and will be replaced with actual logic in a later PR.
 			this.setState( { isHelpVisible: true } );
 		} );
 
@@ -333,6 +344,7 @@ class NativeEditorProvider extends Component {
 				<EditorHelpTopics
 					isVisible={ this.state.isHelpVisible }
 					onClose={ () => this.setState( { isHelpVisible: false } ) }
+					close={ () => this.setState( { isHelpVisible: false } ) }
 				/>
 			</>
 		);