Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PostLockedModal: Display preview link as part of the text #37852

Merged
merged 2 commits into from
Jan 11, 2022
Merged

PostLockedModal: Display preview link as part of the text #37852

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b681232
PostLockedModal: Display preview link as part of the text
Mamaduka Jan 11, 2022
dc4671e
Avoid code duplication
Mamaduka Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 72 additions & 53 deletions packages/editor/src/components/post-locked-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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() {
Expand All @@ -34,6 +39,7 @@ export default function PostLockedModal() {
postLockUtils,
activePostLock,
postType,
previewLink,
} = useSelect( ( select ) => {
const {
isPostLocked,
Expand All @@ -42,6 +48,7 @@ export default function PostLockedModal() {
getCurrentPostId,
getActivePostLock,
getEditedPostAttribute,
getEditedPostPreviewLink,
getEditorSettings,
} = select( editorStore );
const { getPostType } = select( coreStore );
Expand All @@ -53,6 +60,7 @@ export default function PostLockedModal() {
postLockUtils: getEditorSettings().postLockUtils,
activePostLock: getActivePostLock(),
postType: getPostType( getEditedPostAttribute( 'type' ) ),
previewLink: getEditedPostPreviewLink(),
};
}, [] );

Expand Down Expand Up @@ -179,66 +187,77 @@ export default function PostLockedModal() {
className="editor-post-locked-modal__avatar"
/>
) }
{ !! isTakeover && (
<div>
<div>
{ !! isTakeover && (
<p>
{ 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 */
__(
'<strong>%s</strong> now has editing control of this posts (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
),
userDisplayName
)
: __(
'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
),
{
strong: <strong />,
PreviewLink: (
<ExternalLink href={ previewLink }>
{ __( 'preview' ) }
</ExternalLink>
),
}
) }
</p>

<div className="editor-post-locked-modal__buttons">
<Button variant="primary" href={ allPostsUrl }>
{ allPostsLabel }
</Button>
</div>
</div>
) }
{ ! isTakeover && (
<div>
) }
{ ! isTakeover && (
<p>
{ 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 */
__(
'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
),
userDisplayName
)
: __(
'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
),
{
strong: <strong />,
PreviewLink: (
<ExternalLink href={ previewLink }>
{ __( 'preview' ) }
</ExternalLink>
),
}
) }
</p>
) }

<Flex
className="editor-post-locked-modal__buttons"
justify="flex-end"
expanded={ false }
>
<FlexItem>
<PostPreviewButton />
</FlexItem>
<Flex
className="editor-post-locked-modal__buttons"
justify="flex-end"
expanded={ false }
>
{ ! isTakeover && (
<FlexItem>
<Button variant="tertiary" href={ unlockUrl }>
{ __( 'Take over' ) }
</Button>
</FlexItem>
<FlexItem>
<Button variant="primary" href={ allPostsUrl }>
{ allPostsLabel }
</Button>
</FlexItem>
</Flex>
</div>
) }
) }
<FlexItem>
<Button variant="primary" href={ allPostsUrl }>
{ allPostsLabel }
</Button>
</FlexItem>
</Flex>
</div>
</Modal>
);
}