@wordpress/editor 11.0.2 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "11.0.2",
+	"version": "12.0.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,34 +31,34 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2",
-		"@wordpress/api-fetch": "^5.2.2",
-		"@wordpress/autop": "^3.2.1",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.3",
+		"@wordpress/autop": "^3.2.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.2",
-		"@wordpress/blocks": "^11.1.0",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/core-data": "^4.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/data-controls": "^2.2.3",
-		"@wordpress/date": "^4.2.1",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
+		"@wordpress/block-editor": "^7.0.3",
+		"@wordpress/blocks": "^11.1.1",
+		"@wordpress/components": "^18.0.0",
+		"@wordpress/compose": "^5.0.3",
+		"@wordpress/core-data": "^4.0.3",
+		"@wordpress/data": "^6.1.1",
+		"@wordpress/data-controls": "^2.2.4",
+		"@wordpress/date": "^4.2.2",
+		"@wordpress/deprecated": "^3.2.2",
+		"@wordpress/element": "^4.0.2",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.0.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.2",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/media-utils": "^3.0.1",
-		"@wordpress/notices": "^3.2.3",
-		"@wordpress/reusable-blocks": "^3.0.2",
-		"@wordpress/rich-text": "^5.0.2",
-		"@wordpress/server-side-render": "^3.0.2",
-		"@wordpress/url": "^3.2.2",
-		"@wordpress/wordcount": "^3.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.3",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/media-utils": "^3.0.2",
+		"@wordpress/notices": "^3.2.4",
+		"@wordpress/reusable-blocks": "^3.0.3",
+		"@wordpress/rich-text": "^5.0.3",
+		"@wordpress/server-side-render": "^3.0.3",
+		"@wordpress/url": "^3.2.3",
+		"@wordpress/wordcount": "^3.2.2",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }

package/src/components/character-count/index.js

@@ -10,8 +10,9 @@ import { count as characterCount } from '@wordpress/wordcount';
 import { store as editorStore } from '../../store';
 
 export default function CharacterCount() {
-	const content = useSelect( ( select ) =>
-		select( editorStore ).getEditedPostAttribute( 'content' )
+	const content = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
 	);
 
 	return characterCount( content, 'characters_including_spaces' );

package/src/components/editor-help/help-get-support-button.native.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { Pressable, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpGetSupportButton = ( { onPress, title } ) => {
+	const buttonStyle = usePreferredColorSchemeStyle(
+		styles.button,
+		styles.buttonDark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles.buttonText,
+		styles.buttonTextDark
+	);
+
+	return (
+		<Pressable
+			style={ buttonStyle }
+			onPress={ onPress }
+			accessibilityRole={ 'button' }
+		>
+			<Text style={ textStyle }>{ title }</Text>
+		</Pressable>
+	);
+};
+
+export default HelpGetSupportButton;

package/src/components/editor-help/index.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { Text, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -23,6 +23,11 @@ import {
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import {
+	requestContactCustomerSupport,
+	requestGotoCustomerSupportOptions,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,6 +35,7 @@ import { store as editorStore } from '@wordpress/editor';
 import styles from './style.scss';
 import HelpDetailNavigationScreen from './help-detail-navigation-screen';
 import HelpTopicRow from './help-topic-row';
+import HelpGetSupportButton from './help-get-support-button';
 import IntroToBlocks from './intro-to-blocks';
 import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
@@ -61,6 +67,11 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
+	const sectionTitle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeading,
+		styles.helpDetailSectionHeadingDark
+	);
+
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -73,6 +84,7 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			hideHeader
 			hasNavigation
 			contentStyle={ styles.contentContainer }
+			testID="editor-help-modal"
 		>
 			<BottomSheet.NavigationContainer animate main>
 				<BottomSheet.NavigationScreen
@@ -113,6 +125,9 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 										} }
 									>
 										<PanelBody>
+											<Text style={ sectionTitle }>
+												{ __( 'The basics' ) }
+											</Text>
 											{ /* Print out help topics */ }
 											{ HELP_TOPICS.map(
 												( { label, icon } ) => {
@@ -131,6 +146,31 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 													);
 												}
 											) }
+											{
+												<Text style={ sectionTitle }>
+													{ __( 'Get support' ) }
+												</Text>
+											}
+											{
+												<HelpGetSupportButton
+													title={ __(
+														'Contact support'
+													) }
+													onPress={
+														requestContactCustomerSupport
+													}
+												/>
+											}
+											{
+												<HelpGetSupportButton
+													title={ __(
+														'More support options'
+													) }
+													onPress={
+														requestGotoCustomerSupportOptions
+													}
+												/>
+											}
 										</PanelBody>
 									</ScrollView>
 								);

package/src/components/editor-help/style.android.scss

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 4;
+	padding: $grid-unit-10;
+}

package/src/components/editor-help/style.ios.scss

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 8;
+	padding: $grid-unit-15;
+}

package/src/components/editor-help/style.scss

@@ -1,3 +1,24 @@
+.button {
+	margin: $grid-unit-10 $grid-unit-05;
+	align-items: center;
+	justify-content: center;
+	border: $border-width solid $gray-300;
+}
+
+.buttonDark {
+	border-color: $gray-700;
+}
+
+.buttonText {
+	font-weight: 600;
+	font-size: 16px;
+	color: $light-primary;
+}
+
+.buttonTextDark {
+	color: $dark-primary;
+}
+
 .container {
 	height: 100%;
 }

package/src/components/editor-help/test/index.native.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, waitForElementToBeRemoved } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import EditorHelp from '../index';
+
+it( 'lists help topics', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+
+	expect( helpTopic ).toBeTruthy();
+} );
+
+it( 'navigates to help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	expect(
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	).toBeTruthy();
+} );
+
+it( 'navigates back from help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	const backButton = screen.getAllByA11yLabel( 'Go back' );
+	fireEvent.press( backButton[ backButton.length - 1 ] );
+
+	// Currently logs `act` warning due to https://git.io/JYYGE
+	await waitForElementToBeRemoved( () =>
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	);
+} );
+
+it( 'dismisses when close button is pressed', async () => {
+	const closeMock = jest.fn();
+	const screen = render( <EditorHelp isVisible close={ closeMock } /> );
+	const closeButton = await screen.findByA11yLabel( 'Go back' );
+	fireEvent.press( closeButton );
+
+	expect( closeMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backdropPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is swiped', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'swipeComplete' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when hardware back button is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backButtonPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );

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