@wordpress/editor 11.0.2 → 12.0.3

package/src/components/entities-saved-states/index.js

@@ -19,7 +19,7 @@ import { close as closeIcon } from '@wordpress/icons';
  */
 import EntityTypeList from './entity-type-list';
 
-const TRANSLATED_SITE_PROTPERTIES = {
+const TRANSLATED_SITE_PROPERTIES = {
 	title: __( 'Title' ),
 	description: __( 'Tagline' ),
 	site_logo: __( 'Logo' ),
@@ -27,6 +27,13 @@ const TRANSLATED_SITE_PROTPERTIES = {
 	page_on_front: __( 'Page on front' ),
 };
 
+const PUBLISH_ON_SAVE_ENTITIES = [
+	{
+		kind: 'postType',
+		name: 'wp_navigation',
+	},
+];
+
 export default function EntitiesSavedStates( { close } ) {
 	const saveButtonRef = useRef();
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
@@ -49,7 +56,7 @@ export default function EntitiesSavedStates( { close } ) {
 			siteEditsAsEntities.push( {
 				kind: 'root',
 				name: 'site',
-				title: TRANSLATED_SITE_PROTPERTIES[ property ] || property,
+				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
 				property,
 			} );
 		}
@@ -63,14 +70,27 @@ export default function EntitiesSavedStates( { close } ) {
 		};
 	}, [] );
 	const {
+		editEntityRecord,
 		saveEditedEntityRecord,
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
 	// To group entities by type.
-	const partitionedSavables = Object.values(
-		groupBy( dirtyEntityRecords, 'name' )
-	);
+	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );
+
+	// Sort entity groups.
+	const {
+		site: siteSavables,
+		wp_template: templateSavables,
+		wp_template_part: templatePartSavables,
+		...contentSavables
+	} = partitionedSavables;
+	const sortedPartitionedSavables = [
+		siteSavables,
+		templateSavables,
+		templatePartSavables,
+		...Object.values( contentSavables ),
+	].filter( Array.isArray );
 
 	// Unchecked entities to be ignored by save function.
 	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
@@ -118,6 +138,16 @@ export default function EntitiesSavedStates( { close } ) {
 			if ( 'root' === kind && 'site' === name ) {
 				siteItemsToSave.push( property );
 			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					editEntityRecord( kind, name, key, { status: 'publish' } );
+				}
+
 				saveEditedEntityRecord( kind, name, key );
 			}
 		} );
@@ -160,15 +190,15 @@ export default function EntitiesSavedStates( { close } ) {
 			</div>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong>{ __( 'Select the changes you want to save' ) }</strong>
+				<strong>{ __( 'Are you ready to save?' ) }</strong>
 				<p>
 					{ __(
-						'Some changes may affect other areas of your site.'
+						'The following changes have been made to your site, templates, and content.'
 					) }
 				</p>
 			</div>
 
-			{ partitionedSavables.map( ( list ) => {
+			{ sortedPartitionedSavables.map( ( list ) => {
 				return (
 					<EntityTypeList
 						key={ list[ 0 ].name }

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,15 @@
 	overflow: hidden;
 	white-space: nowrap;
 
+	// The disabled version of the save state should be legible as an indicator.
+	&.is-saving[aria-disabled="true"],
+	&.is-saving[aria-disabled="true"]:hover,
+	&.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 +29,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', () => {