diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index 9ee8283bc5c672..3576dc91dc5dd0 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -7,10 +7,16 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Modal, Button, Flex, FlexItem } from '@wordpress/components'; +import { + Modal, + Button, + ExternalLink, + Flex, + FlexItem, +} from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { addQueryArgs } from '@wordpress/url'; -import { useEffect } from '@wordpress/element'; +import { useEffect, createInterpolateElement } from '@wordpress/element'; import { addAction, removeAction } from '@wordpress/hooks'; import { useInstanceId } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; @@ -19,7 +25,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { getWPAdminURL } from '../../utils/url'; -import PostPreviewButton from '../post-preview-button'; import { store as editorStore } from '../../store'; export default function PostLockedModal() { @@ -34,6 +39,7 @@ export default function PostLockedModal() { postLockUtils, activePostLock, postType, + previewLink, } = useSelect( ( select ) => { const { isPostLocked, @@ -42,6 +48,7 @@ export default function PostLockedModal() { getCurrentPostId, getActivePostLock, getEditedPostAttribute, + getEditedPostPreviewLink, getEditorSettings, } = select( editorStore ); const { getPostType } = select( coreStore ); @@ -53,6 +60,7 @@ export default function PostLockedModal() { postLockUtils: getEditorSettings().postLockUtils, activePostLock: getActivePostLock(), postType: getPostType( getEditedPostAttribute( 'type' ) ), + previewLink: getEditedPostPreviewLink(), }; }, [] ); @@ -179,66 +187,77 @@ export default function PostLockedModal() { className="editor-post-locked-modal__avatar" /> ) } - { !! isTakeover && ( -
+
+ { !! isTakeover && (

- { userDisplayName - ? sprintf( - /* translators: %s: user's display name */ - __( - '%s now has editing control of this post. Don’t worry, your changes up to this moment have been saved.' - ), - userDisplayName - ) - : __( - 'Another user now has editing control of this post. Don’t worry, your changes up to this moment have been saved.' - ) } + { createInterpolateElement( + userDisplayName + ? sprintf( + /* translators: %s: user's display name */ + __( + '%s now has editing control of this posts (). Don’t worry, your changes up to this moment have been saved.' + ), + userDisplayName + ) + : __( + 'Another user now has editing control of this post (). Don’t worry, your changes up to this moment have been saved.' + ), + { + strong: , + PreviewLink: ( + + { __( 'preview' ) } + + ), + } + ) }

- -
- -
-
- ) } - { ! isTakeover && ( -
+ ) } + { ! isTakeover && (

- { userDisplayName - ? sprintf( - /* translators: %s: user's display name */ - __( - '%s is currently working on this post, which means you cannot make changes, unless you take over.' - ), - userDisplayName - ) - : __( - 'Another user is currently working on this post, which means you cannot make changes, unless you take over.' - ) } + { createInterpolateElement( + userDisplayName + ? sprintf( + /* translators: %s: user's display name */ + __( + '%s is currently working on this post (), which means you cannot make changes, unless you take over.' + ), + userDisplayName + ) + : __( + 'Another user is currently working on this post (), which means you cannot make changes, unless you take over.' + ), + { + strong: , + PreviewLink: ( + + { __( 'preview' ) } + + ), + } + ) }

+ ) } - - - - + + { ! isTakeover && ( - - - - -
- ) } + ) } + + + + +
); }