@wordpress/editor 14.23.0 → 14.24.0

package/build-style/style-rtl.css

@@ -1,16 +1,58 @@
 @charset "UTF-8";
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -18,15 +60,91 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -62,6 +180,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -100,6 +221,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -107,9 +231,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -1837,9 +1958,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   flex-wrap: wrap;
   gap: 16px;
 }
-.post-publish-panel__postpublish-buttons .components-button {
+.post-publish-panel__postpublish-buttons .components-button,
+.post-publish-panel__postpublish-buttons .components-button.has-icon {
   justify-content: center;
   flex: 1;
+  min-width: unset;
 }
 .post-publish-panel__postpublish-buttons .components-clipboard-button {
   width: 100%;

package/build-style/style.css

@@ -1,16 +1,58 @@
 @charset "UTF-8";
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -18,15 +60,91 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -62,6 +180,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -100,6 +221,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -107,9 +231,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -1837,9 +1958,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   flex-wrap: wrap;
   gap: 16px;
 }
-.post-publish-panel__postpublish-buttons .components-button {
+.post-publish-panel__postpublish-buttons .components-button,
+.post-publish-panel__postpublish-buttons .components-button.has-icon {
   justify-content: center;
   flex: 1;
+  min-width: unset;
 }
 .post-publish-panel__postpublish-buttons .components-clipboard-button {
   width: 100%;

package/build-types/components/collab-sidebar/comment-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"comment-form.d.ts","sourceRoot":"","sources":["../../../src/components/collab-sidebar/comment-form.js"],"names":[],"mappings":";AAgBA;;;;;;;;;GASG;AACH,+EANG;IAAwB,QAAQ;IACR,QAAQ;IACR,MAAM,EAAtB,MAAM;IACU,gBAAgB,EAAhC,MAAM;CACd,GAAS,KAAK,CAAC,SAAS,CAsC1B"}
+{"version":3,"file":"comment-form.d.ts","sourceRoot":"","sources":["../../../src/components/collab-sidebar/comment-form.js"],"names":[],"mappings":";AAgBA;;;;;;;;;GASG;AACH,+EANG;IAAwB,QAAQ;IACR,QAAQ;IACR,MAAM,EAAtB,MAAM;IACU,gBAAgB,EAAhC,MAAM;CACd,GAAS,KAAK,CAAC,SAAS,CAwC1B"}

package/build-types/components/editor-interface/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editor-interface/index.js"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;;gCA4KC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editor-interface/index.js"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;;gCA8KC"}

package/build-types/components/post-publish-panel/postpublish.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postpublish.d.ts","sourceRoot":"","sources":["../../../src/components/post-publish-panel/postpublish.js"],"names":[],"mappings":"AAuEA;;;gCAoGC"}
+{"version":3,"file":"postpublish.d.ts","sourceRoot":"","sources":["../../../src/components/post-publish-panel/postpublish.js"],"names":[],"mappings":"AA8EA;;;gCA6GC"}

package/build-types/components/template-part-menu-items/convert-to-template-part.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convert-to-template-part.d.ts","sourceRoot":"","sources":["../../../src/components/template-part-menu-items/convert-to-template-part.js"],"names":[],"mappings":"AAiBA;;;uCAyDC"}
+{"version":3,"file":"convert-to-template-part.d.ts","sourceRoot":"","sources":["../../../src/components/template-part-menu-items/convert-to-template-part.js"],"names":[],"mappings":"AAkBA;;;uCA2DC"}

package/build-types/store/private-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-actions.d.ts","sourceRoot":"","sources":["../../src/store/private-actions.js"],"names":[],"mappings":"AAmBA;;;;;;GAMG;AACH,yCAJW,MAAM,GAEL,MAAM,CAOjB;;AAOM,yCAFK,MAAM,OAAA;;;;mBAqChB;AAOK,2CAFI,MAAM,EAAE;;WAoBjB;AAOK,2CAFI,MAAM,EAAE;;WAkBjB;AAWK,0FALJ;IAA2B,MAAM;IACN,kBAAkB;IAClB,cAAc;IACd,KAAK;CAClC;;WAmGC;AAUK,yCALI,MAAM,kBAEd;IAA0B,SAAS;CAErC;;oBA6HC;AAOK;;oBA0HL;AAOK,8CAFI,MAAM;;;WA4Bf"}
+{"version":3,"file":"private-actions.d.ts","sourceRoot":"","sources":["../../src/store/private-actions.js"],"names":[],"mappings":"AAmBA;;;;;;GAMG;AACH,yCAJW,MAAM,GAEL,MAAM,CAOjB;;AAOM,yCAFK,MAAM,OAAA;;;;mBAqChB;AAOK,2CAFI,MAAM,EAAE;;WAoBjB;AAOK,2CAFI,MAAM,EAAE;;WAkBjB;AAWK,0FALJ;IAA2B,MAAM;IACN,kBAAkB;IAClB,cAAc;IACd,KAAK;CAClC;;WAoGC;AAUK,yCALI,MAAM,kBAEd;IAA0B,SAAS;CAErC;;oBA6HC;AAOK;;oBA0HL;AAOK,8CAFI,MAAM;;;WA4Bf"}

package/build-types/store/utils/notice-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notice-builder.d.ts","sourceRoot":"","sources":["../../../src/store/utils/notice-builder.js"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,6DALW,MAAM,SA8DhB;AAED;;;;;;;GAOG;AACH,0DALW,MAAM,SAsChB;AAED;;;;;;GAMG;AACH,2DAJW,MAAM,SAahB"}
+{"version":3,"file":"notice-builder.d.ts","sourceRoot":"","sources":["../../../src/store/utils/notice-builder.js"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,6DALW,MAAM,SA+DhB;AAED;;;;;;;GAOG;AACH,0DALW,MAAM,SAsChB;AAED;;;;;;GAMG;AACH,2DAJW,MAAM,SAahB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.23.0",
+	"version": "14.24.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,41 +34,41 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.23.0",
-		"@wordpress/api-fetch": "^7.23.0",
-		"@wordpress/blob": "^4.23.0",
-		"@wordpress/block-editor": "^14.18.0",
-		"@wordpress/blocks": "^14.12.0",
-		"@wordpress/commands": "^1.23.0",
-		"@wordpress/components": "^29.9.0",
-		"@wordpress/compose": "^7.23.0",
-		"@wordpress/core-data": "^7.23.0",
-		"@wordpress/data": "^10.23.0",
-		"@wordpress/dataviews": "^4.19.0",
-		"@wordpress/date": "^5.23.0",
-		"@wordpress/deprecated": "^4.23.0",
-		"@wordpress/dom": "^4.23.0",
-		"@wordpress/element": "^6.23.0",
-		"@wordpress/fields": "^0.15.0",
-		"@wordpress/hooks": "^4.23.0",
-		"@wordpress/html-entities": "^4.23.0",
-		"@wordpress/i18n": "^5.23.0",
-		"@wordpress/icons": "^10.23.0",
-		"@wordpress/interface": "^9.8.0",
-		"@wordpress/keyboard-shortcuts": "^5.23.0",
-		"@wordpress/keycodes": "^4.23.0",
-		"@wordpress/media-utils": "^5.23.0",
-		"@wordpress/notices": "^5.23.0",
-		"@wordpress/patterns": "^2.23.0",
-		"@wordpress/plugins": "^7.23.0",
-		"@wordpress/preferences": "^4.23.0",
-		"@wordpress/private-apis": "^1.23.0",
-		"@wordpress/reusable-blocks": "^5.23.0",
-		"@wordpress/rich-text": "^7.23.0",
-		"@wordpress/server-side-render": "^5.23.0",
-		"@wordpress/url": "^4.23.0",
-		"@wordpress/warning": "^3.23.0",
-		"@wordpress/wordcount": "^4.23.0",
+		"@wordpress/a11y": "^4.24.0",
+		"@wordpress/api-fetch": "^7.24.0",
+		"@wordpress/blob": "^4.24.0",
+		"@wordpress/block-editor": "^14.19.0",
+		"@wordpress/blocks": "^14.13.0",
+		"@wordpress/commands": "^1.24.0",
+		"@wordpress/components": "^29.10.0",
+		"@wordpress/compose": "^7.24.0",
+		"@wordpress/core-data": "^7.24.0",
+		"@wordpress/data": "^10.24.0",
+		"@wordpress/dataviews": "^4.20.0",
+		"@wordpress/date": "^5.24.0",
+		"@wordpress/deprecated": "^4.24.0",
+		"@wordpress/dom": "^4.24.0",
+		"@wordpress/element": "^6.24.0",
+		"@wordpress/fields": "^0.16.0",
+		"@wordpress/hooks": "^4.24.0",
+		"@wordpress/html-entities": "^4.24.0",
+		"@wordpress/i18n": "^5.24.0",
+		"@wordpress/icons": "^10.24.0",
+		"@wordpress/interface": "^9.9.0",
+		"@wordpress/keyboard-shortcuts": "^5.24.0",
+		"@wordpress/keycodes": "^4.24.0",
+		"@wordpress/media-utils": "^5.24.0",
+		"@wordpress/notices": "^5.24.0",
+		"@wordpress/patterns": "^2.24.0",
+		"@wordpress/plugins": "^7.24.0",
+		"@wordpress/preferences": "^4.24.0",
+		"@wordpress/private-apis": "^1.24.0",
+		"@wordpress/reusable-blocks": "^5.24.0",
+		"@wordpress/rich-text": "^7.24.0",
+		"@wordpress/server-side-render": "^6.0.0",
+		"@wordpress/url": "^4.24.0",
+		"@wordpress/warning": "^3.24.0",
+		"@wordpress/wordcount": "^4.24.0",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
 }

package/src/components/collab-sidebar/comment-form.js

@@ -7,7 +7,7 @@ import {
 	Button,
 	TextareaControl,
 } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -36,6 +36,8 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 				__nextHasNoMarginBottom
 				value={ inputComment ?? '' }
 				onChange={ setInputComment }
+				label={ __( 'Comment' ) }
+				hideLabelFromVision
 			/>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<Button

package/src/components/editor-interface/index.js

@@ -56,7 +56,6 @@ export default function EditorInterface( {
 } ) {
 	const {
 		mode,
-		isRichEditingEnabled,
 		isInserterOpened,
 		isListViewOpened,
 		isDistractionFree,
@@ -69,9 +68,16 @@ export default function EditorInterface( {
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
+		let _mode = select( editorStore ).getEditorMode();
+		if ( ! editorSettings.richEditingEnabled && _mode === 'visual' ) {
+			_mode = 'text';
+		}
+		if ( ! editorSettings.codeEditingEnabled && _mode === 'text' ) {
+			_mode = 'visual';
+		}
+
 		return {
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			mode: _mode,
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
@@ -148,23 +154,20 @@ export default function EditorInterface( {
 								editorCanvasView
 							) : (
 								<>
-									{ ! isPreviewMode &&
-										( mode === 'text' ||
-											! isRichEditingEnabled ) && (
-											<TextEditor
-												// We should auto-focus the canvas (title) on load.
-												// eslint-disable-next-line jsx-a11y/no-autofocus
-												autoFocus={ autoFocus }
-											/>
-										) }
+									{ ! isPreviewMode && mode === 'text' && (
+										<TextEditor
+											// We should auto-focus the canvas (title) on load.
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ autoFocus }
+										/>
+									) }
 									{ ! isPreviewMode &&
 										! isLargeViewport &&
 										mode === 'visual' && (
 											<BlockToolbar hideDragHandle />
 										) }
 									{ ( isPreviewMode ||
-										( isRichEditingEnabled &&
-											mode === 'visual' ) ) && (
+										mode === 'visual' ) && (
 										<VisualEditor
 											styles={ styles }
 											contentRef={ contentRef }
@@ -187,7 +190,6 @@ export default function EditorInterface( {
 				! isDistractionFree &&
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
-				isRichEditingEnabled &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)

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

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, Button, TextControl } from '@wordpress/components';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	ExternalLink,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -9,6 +15,7 @@ import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -118,9 +125,9 @@ export default function PostPublishPanelPostpublish( {
 	return (
 		<div className="post-publish-panel__postpublish">
 			<PanelBody className="post-publish-panel__postpublish-header">
-				<a ref={ postLinkRef } href={ link }>
+				<ExternalLink ref={ postLinkRef } href={ link }>
 					{ decodeEntities( post.title ) || __( '(no title)' ) }
-				</a>{ ' ' }
+				</ExternalLink>{ ' ' }
 				{ postPublishNonLinkHeader }
 			</PanelBody>
 			<PanelBody>
@@ -153,8 +160,17 @@ export default function PostPublishPanelPostpublish( {
 							variant="primary"
 							href={ link }
 							__next40pxDefaultSize
+							icon={ external }
+							iconPosition="right"
+							target="_blank"
 						>
 							{ viewPostLabel }
+							<VisuallyHidden as="span">
+								{
+									/* translators: accessibility text */
+									__( '(opens in a new tab)' )
+								}
+							</VisuallyHidden>
 						</Button>
 					) }
 					<Button

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

@@ -138,9 +138,11 @@
 	flex-wrap: wrap;
 	gap: $grid-unit-20;
 
-	.components-button {
+	.components-button,
+	.components-button.has-icon {
 		justify-content: center;
 		flex: 1;
+		min-width: unset;
 	}
 
 	.components-clipboard-button {