diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index f4c9a50e0e996..631e22db0ca6d 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -58,6 +58,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
) }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 6f08b3fd7f1e0..a180eaba63e78 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -164,11 +164,20 @@
}
.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
.interface-pinned-items .components-button {
- padding-left: $grid-unit-15;
- padding-right: $grid-unit-15;
+ padding-left: $grid-unit;
+ padding-right: $grid-unit;
+
+ @include break-small {
+ padding-left: $grid-unit-15;
+ padding-right: $grid-unit-15;
+ }
}
.components-dropdown-menu__toggle {
- margin-left: $grid-unit-15;
+ margin-left: $grid-unit;
+
+ @include break-small {
+ margin-left: $grid-unit-15;
+ }
}
// The inserter has a custom label, different from its aria-label, so we don't want to display both.
.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle {
@@ -176,6 +185,17 @@
content: none;
}
}
+ // The post saved state button has a custom label only on small breakpoint
+ .editor-post-save-draft.editor-post-save-draft {
+ &::after {
+ content: none;
+ }
+ @include break-small {
+ &::after {
+ content: attr(aria-label);
+ }
+ }
+ }
}
.edit-post-header__dropdown {
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index 14d7b6083032b..bc98454a9767e 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -23,15 +23,19 @@ import PostSwitchToDraftButton from '../post-switch-to-draft-button';
* Component showing whether the post is saved or not and providing save
* buttons.
*
- * @param {Object} props Component props.
+ * @param {Object} props Component props.
* @param {?boolean} props.forceIsDirty Whether to force the post to be marked
- * as dirty.
+ * as dirty.
* @param {?boolean} props.forceIsSaving Whether to force the post to be marked
- * as being saved.
- *
+ * as being saved.
+ * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
* @return {import('@wordpress/element').WPComponent} The component.
*/
-export default function PostSavedState( { forceIsDirty, forceIsSaving } ) {
+export default function PostSavedState( {
+ forceIsDirty,
+ forceIsSaving,
+ showIconLabels = false,
+} ) {
const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
const isLargeViewport = useViewportMatch( 'small' );
@@ -140,6 +144,9 @@ export default function PostSavedState( { forceIsDirty, forceIsSaving } ) {
/* 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 (
);
}