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

Editor: Update post URL component #60632

Merged
merged 5 commits into from
Apr 11, 2024
Merged

Editor: Update post URL component #60632

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28763e0
Editor: Update post URL component
ntsekouras Apr 10, 2024
f56888a
feedback
ntsekouras Apr 11, 2024
af9b2cd
change copy to 'link'
ntsekouras Apr 11, 2024
a2e6ecd
No 🐌
jameskoster Apr 11, 2024
476774a
feedback
ntsekouras Apr 11, 2024
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
226 changes: 125 additions & 101 deletions packages/editor/src/components/post-url/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,122 +6,146 @@ import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
import { useState } from '@wordpress/element';
import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { TextControl, ExternalLink } from '@wordpress/components';
import {
ExternalLink,
Button,
__experimentalInputControl as InputControl,
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';
import { copySmall } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
import { useCopyToClipboard } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { usePostURLLabel } from './label';
import { store as editorStore } from '../../store';

export default function PostURL( { onClose } ) {
const {
isEditable,
postSlug,
viewPostLabel,
postLink,
permalinkPrefix,
permalinkSuffix,
} = useSelect( ( select ) => {
const post = select( editorStore ).getCurrentPost();
const postTypeSlug = select( editorStore ).getCurrentPostType();
const postType = select( coreStore ).getPostType( postTypeSlug );
const permalinkParts = select( editorStore ).getPermalinkParts();
const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;

return {
isEditable:
select( editorStore ).isPermalinkEditable() && hasPublishAction,
postSlug: safeDecodeURIComponent(
select( editorStore ).getEditedPostSlug()
),
viewPostLabel: postType?.labels.view_item,
postLink: post.link,
permalinkPrefix: permalinkParts?.prefix,
permalinkSuffix: permalinkParts?.suffix,
};
}, [] );
const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
useSelect( ( select ) => {
const post = select( editorStore ).getCurrentPost();
const postTypeSlug = select( editorStore ).getCurrentPostType();
const postType = select( coreStore ).getPostType( postTypeSlug );
const permalinkParts = select( editorStore ).getPermalinkParts();
const hasPublishAction =
post?._links?.[ 'wp:action-publish' ] ?? false;

return {
isEditable:
select( editorStore ).isPermalinkEditable() &&
hasPublishAction,
postSlug: safeDecodeURIComponent(
select( editorStore ).getEditedPostSlug()
),
viewPostLabel: postType?.labels.view_item,
postLink: post.link,
permalinkPrefix: permalinkParts?.prefix,
permalinkSuffix: permalinkParts?.suffix,
};
}, [] );
const { editPost } = useDispatch( editorStore );

const { createNotice } = useDispatch( noticesStore );
const [ forceEmptyField, setForceEmptyField ] = useState( false );

const postUrlLabel = usePostURLLabel();
const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
createNotice( 'info', __( 'Copied URL to clipboard.' ), {
isDismissible: true,
type: 'snackbar',
} );
} );
return (
<div className="editor-post-url">
<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
{ isEditable && (
<TextControl
__nextHasNoMarginBottom
label={ __( 'Permalink' ) }
value={ forceEmptyField ? '' : postSlug }
autoComplete="off"
spellCheck="false"
help={
<>
{ __( 'The last part of the URL.' ) }{ ' ' }
<ExternalLink
href={ __(
'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
) }
>
{ __( 'Learn more.' ) }
</ExternalLink>
</>
}
onChange={ ( newValue ) => {
editPost( { slug: newValue } );
// When we delete the field the permalink gets
// reverted to the original value.
// The forceEmptyField logic allows the user to have
// the field temporarily empty while typing.
if ( ! newValue ) {
if ( ! forceEmptyField ) {
setForceEmptyField( true );
<InspectorPopoverHeader
title={ __( 'Slug' ) }
onClose={ onClose }
/>
<VStack spacing={ 3 }>
<div>
{ __(
'The slug forms the last part of the URL for a page. '
) }
<ExternalLink
href={ __(
'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
) }
>
{ __( 'Learn more.' ) }
</ExternalLink>
</div>
<div>
{ isEditable && (
<InputControl
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is probably the most noticeable difference. I replaced TextControl with InputControl. This way we also have the prefix/suffix support.

prefix={
<InputControlPrefixWrapper>
/
</InputControlPrefixWrapper>
}
suffix={
<Button
icon={ copySmall }
ref={ copyButtonRef }
/>
}
return;
}
if ( forceEmptyField ) {
setForceEmptyField( false );
}
} }
onBlur={ ( event ) => {
editPost( {
slug: cleanForSlug( event.target.value ),
} );
if ( forceEmptyField ) {
setForceEmptyField( false );
}
} }
/>
) }
{ isEditable && (
<h3 className="editor-post-url__link-label">
{ viewPostLabel ?? __( 'View post' ) }
</h3>
) }
<p>
<ExternalLink
className="editor-post-url__link"
href={ postLink }
target="_blank"
>
{ isEditable ? (
<>
<span className="editor-post-url__link-prefix">
{ permalinkPrefix }
</span>
<span className="editor-post-url__link-slug">
{ postSlug }
</span>
<span className="editor-post-url__link-suffix">
{ permalinkSuffix }
</span>
</>
) : (
postLink
label={ __( 'Slug' ) }
hideLabelFromVision
value={ forceEmptyField ? '' : postSlug }
autoComplete="off"
spellCheck="false"
type="text"
onChange={ ( newValue ) => {
editPost( { slug: newValue } );
// When we delete the field the permalink gets
// reverted to the original value.
// The forceEmptyField logic allows the user to have
// the field temporarily empty while typing.
if ( ! newValue ) {
if ( ! forceEmptyField ) {
setForceEmptyField( true );
}
return;
}
if ( forceEmptyField ) {
setForceEmptyField( false );
}
} }
onBlur={ ( event ) => {
editPost( {
slug: cleanForSlug( event.target.value ),
} );
if ( forceEmptyField ) {
setForceEmptyField( false );
}
} }
/>
) }
</ExternalLink>
</p>
<ExternalLink
className="editor-post-url__link"
href={ postLink }
target="_blank"
>
{ isEditable ? (
<>
<span className="editor-post-url__link-prefix">
{ permalinkPrefix }
</span>
<span className="editor-post-url__link-slug">
{ postSlug }
</span>
<span className="editor-post-url__link-suffix">
{ permalinkSuffix }
</span>
</>
) : (
postLink
) }
</ExternalLink>
</div>
</VStack>
</div>
);
}
18 changes: 12 additions & 6 deletions packages/editor/src/components/post-url/panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
* WordPress dependencies
*/
import { useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Dropdown, Button } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { safeDecodeURIComponent } from '@wordpress/url';

/**
* Internal dependencies
*/
import PostURLCheck from './check';
import PostURL from './index';
import { usePostURLLabel } from './label';
import PostPanelRow from '../post-panel-row';
import { store as editorStore } from '../../store';

export default function PostURLPanel() {
// Use internal state instead of a ref to make sure that the component
Expand All @@ -25,7 +27,7 @@ export default function PostURLPanel() {

return (
<PostURLCheck>
<PostPanelRow label={ __( 'URL' ) } ref={ setPopoverAnchor }>
<PostPanelRow label={ __( 'Slug' ) } ref={ setPopoverAnchor }>
<Dropdown
popoverProps={ popoverProps }
className="editor-post-url__panel-dropdown"
Expand All @@ -44,18 +46,22 @@ export default function PostURLPanel() {
}

function PostURLToggle( { isOpen, onClick } ) {
const label = usePostURLLabel();
const slug = useSelect(
( select ) =>
safeDecodeURIComponent( select( editorStore ).getEditedPostSlug() ),
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
[]
);
return (
<Button
__next40pxDefaultSize
className="editor-post-url__panel-toggle"
variant="tertiary"
aria-expanded={ isOpen }
// translators: %s: Current post URL.
aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
// translators: %s: Current post slug.
aria-label={ sprintf( __( 'Change slug: %s' ), slug ) }
onClick={ onClick }
>
{ label }
{ slug }
</Button>
);
}
7 changes: 1 addition & 6 deletions packages/editor/src/components/post-url/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,11 @@
margin: $grid-unit-10;
}

.editor-post-url__link-label {
font-size: $default-font-size;
font-weight: 400;
margin: 0;
}

/* rtl:begin:ignore */
.editor-post-url__link {
direction: ltr;
word-break: break-word;
margin-top: $grid-unit-05;
}
/* rtl:end:ignore */

Expand Down
Loading