From 28763e048500ceefabb5d9c442f2ebfe66fe084f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 10 Apr 2024 16:57:28 +0300 Subject: [PATCH 1/5] 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 */ From f56888acfe97a3db32b5129fb4044b7eecc2b183 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 11 Apr 2024 09:39:46 +0300 Subject: [PATCH 2/5] feedback --- .../editor/src/components/post-url/index.js | 48 +++++++++++-------- .../editor/src/components/post-url/style.scss | 7 +++ .../editor/various/sidebar-permalink.spec.js | 6 +-- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index 626e82cc5ec7a8..c1f7cd1c8c76f9 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -97,6 +97,7 @@ export default function PostURL( { onClose } ) { autoComplete="off" spellCheck="false" type="text" + className="editor-post-url__input" onChange={ ( newValue ) => { editPost( { slug: newValue } ); // When we delete the field the permalink gets @@ -121,29 +122,34 @@ export default function PostURL( { onClose } ) { setForceEmptyField( false ); } } } + help={ + + + { permalinkPrefix } + + + { postSlug } + + + { permalinkSuffix } + + + } /> ) } - - { isEditable ? ( - <> - - { permalinkPrefix } - - - { postSlug } - - - { permalinkSuffix } - - - ) : ( - postLink - ) } - + { ! isEditable && ( + + { postLink } + + ) } diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index a4a19cfd58fb5b..c622cfce33f90e 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -22,9 +22,16 @@ direction: ltr; word-break: break-word; margin-top: $grid-unit-05; + color: $gray-700; } /* rtl:end:ignore */ .editor-post-url__link-slug { font-weight: 600; } + +// TODO: This might indicate a need to update the InputControl itself, as +// there is no way currently to control the padding when adding prefix/suffix. +.editor-post-url__input input.components-input-control__input { + padding-inline-start: 0 !important; +} diff --git a/test/e2e/specs/editor/various/sidebar-permalink.spec.js b/test/e2e/specs/editor/various/sidebar-permalink.spec.js index 96283e4b6b15f9..528c77082109be 100644 --- a/test/e2e/specs/editor/various/sidebar-permalink.spec.js +++ b/test/e2e/specs/editor/various/sidebar-permalink.spec.js @@ -34,7 +34,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change URL' } ) + page.getByRole( 'button', { name: 'Change slug' } ) ).toBeHidden(); } ); @@ -54,7 +54,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change URL' } ) + page.getByRole( 'button', { name: 'Change slug' } ) ).toBeHidden(); } ); @@ -75,7 +75,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change URL' } ) + page.getByRole( 'button', { name: 'Change slug' } ) ).toBeVisible(); } ); } ); From af9b2cd1503457b43db7949bcd446b82602c3ec2 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 11 Apr 2024 12:06:05 +0300 Subject: [PATCH 3/5] change copy to 'link' --- packages/editor/src/components/post-url/index.js | 4 ++-- packages/editor/src/components/post-url/panel.js | 6 +++--- test/e2e/specs/editor/various/sidebar-permalink.spec.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index c1f7cd1c8c76f9..e22942b14fb853 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -60,7 +60,7 @@ export default function PostURL( { onClose } ) { return (
@@ -91,7 +91,7 @@ export default function PostURL( { onClose } ) { ref={ copyButtonRef } /> } - label={ __( 'Slug' ) } + label={ __( 'Link' ) } hideLabelFromVision value={ forceEmptyField ? '' : postSlug } autoComplete="off" diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js index 540fe009ffae46..4d718ee5f62f4e 100644 --- a/packages/editor/src/components/post-url/panel.js +++ b/packages/editor/src/components/post-url/panel.js @@ -27,7 +27,7 @@ export default function PostURLPanel() { return ( - + { slug } diff --git a/test/e2e/specs/editor/various/sidebar-permalink.spec.js b/test/e2e/specs/editor/various/sidebar-permalink.spec.js index 528c77082109be..a21cc13ea5c2e2 100644 --- a/test/e2e/specs/editor/various/sidebar-permalink.spec.js +++ b/test/e2e/specs/editor/various/sidebar-permalink.spec.js @@ -34,7 +34,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change slug' } ) + page.getByRole( 'button', { name: 'Change link' } ) ).toBeHidden(); } ); @@ -54,7 +54,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change slug' } ) + page.getByRole( 'button', { name: 'Change link' } ) ).toBeHidden(); } ); @@ -75,7 +75,7 @@ test.describe( 'Sidebar Permalink', () => { .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'aaaa (Updated)' ); await expect( - page.getByRole( 'button', { name: 'Change slug' } ) + page.getByRole( 'button', { name: 'Change link' } ) ).toBeVisible(); } ); } ); From a2e6ecd083363d28e6888764be699618163cf1e3 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 11 Apr 2024 11:03:20 +0100 Subject: [PATCH 4/5] =?UTF-8?q?No=20=F0=9F=90=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/components/post-url/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index e22942b14fb853..da3ffd088ffb0e 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -65,9 +65,7 @@ export default function PostURL( { onClose } ) { />
- { __( - 'The slug forms the last part of the URL for a page. ' - ) } + { __( 'Customize the last part of the URL. ' ) } Date: Thu, 11 Apr 2024 13:15:25 +0300 Subject: [PATCH 5/5] feedback --- .../editor/src/components/post-url/index.js | 22 ++++++++++--------- .../editor/src/components/post-url/panel.js | 17 +++++++++----- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index da3ffd088ffb0e..2c10206e9b20e4 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -64,16 +64,18 @@ export default function PostURL( { onClose } ) { onClose={ onClose } /> -
- { __( 'Customize the last part of the URL. ' ) } - - { __( 'Learn more.' ) } - -
+ { isEditable && ( +
+ { __( 'Customize the last part of the URL. ' ) } + + { __( 'Learn more.' ) } + +
+ ) }
{ isEditable && ( ( { anchor: popoverAnchor, placement: 'bottom-end' } ), + () => ( { + // Anchor the popover to the middle of the entire row so that it doesn't + // move around when the label changes. + anchor: popoverAnchor, + placement: 'left-start', + offset: 36, + shift: true, + } ), [ popoverAnchor ] ); @@ -47,10 +54,10 @@ export default function PostURLPanel() { function PostURLToggle( { isOpen, onClick } ) { const slug = useSelect( - ( select ) => - safeDecodeURIComponent( select( editorStore ).getEditedPostSlug() ), + ( select ) => select( editorStore ).getEditedPostSlug(), [] ); + const decodedSlug = safeDecodeURIComponent( slug ); return ( ); }