From 28763e048500ceefabb5d9c442f2ebfe66fe084f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 10 Apr 2024 16:57:28 +0300 Subject: [PATCH] Editor: Update post URL component --- .../editor/src/components/post-url/index.js | 226 ++++++++++-------- .../editor/src/components/post-url/panel.js | 18 +- .../editor/src/components/post-url/style.scss | 7 +- 3 files changed, 138 insertions(+), 113 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index 6c58a707ca8749..626e82cc5ec7a8 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -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 (
- - { isEditable && ( - - { __( 'The last part of the URL.' ) }{ ' ' } - - { __( 'Learn more.' ) } - - - } - 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 ); + + +
+ { __( + 'The slug forms the last part of the URL for a page. ' + ) } + + { __( 'Learn more.' ) } + +
+
+ { isEditable && ( + + / + + } + suffix={ +
+
); } diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js index 1a64ae7096df7f..540fe009ffae46 100644 --- a/packages/editor/src/components/post-url/panel.js +++ b/packages/editor/src/components/post-url/panel.js @@ -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 @@ -25,7 +27,7 @@ export default function PostURLPanel() { return ( - + + safeDecodeURIComponent( select( editorStore ).getEditedPostSlug() ), + [] + ); return ( ); } diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index 4a3e8e1b39c9f7..a4a19cfd58fb5b 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -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 */