@wordpress/editor 14.8.1 → 14.8.3

package/src/components/post-publish-panel/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import {
 	Button,
 	Spinner,
@@ -27,6 +27,20 @@ export class PostPublishPanel extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onSubmit = this.onSubmit.bind( this );
+		this.cancelButtonNode = createRef();
+	}
+
+	componentDidMount() {
+		// This timeout is necessary to make sure the `useEffect` hook of
+		// `useFocusReturn` gets the correct element (the button that opens the
+		// PostPublishPanel) otherwise it will get this button.
+		this.timeoutID = setTimeout( () => {
+			this.cancelButtonNode.current.focus();
+		}, 0 );
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -85,15 +99,9 @@ export class PostPublishPanel extends Component {
 						/>
 					) : (
 						<>
-							<div className="editor-post-publish-panel__header-publish-button">
-								<PostPublishButton
-									focusOnMount
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-								/>
-							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									ref={ this.cancelButtonNode }
 									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
@@ -103,6 +111,12 @@ export class PostPublishPanel extends Component {
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
+							<div className="editor-post-publish-panel__header-publish-button">
+								<PostPublishButton
+									onSubmit={ this.onSubmit }
+									forceIsDirty={ forceIsDirty }
+								/>
+							</div>
 						</>
 					) }
 				</div>

package/src/components/post-publish-panel/style.scss

@@ -68,12 +68,12 @@
 }
 
 .editor-post-publish-panel__header-publish-button {
-	padding-right: $grid-unit-05;
+	padding-left: $grid-unit-05;
 	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
-	padding-left: $grid-unit-05;
+	padding-right: $grid-unit-05;
 }
 
 .editor-post-publish-panel__header-published {

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -433,24 +433,24 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -586,24 +586,24 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -783,24 +783,24 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>