From 369a9d9c8fde7684d0b6d562ec0f1831f33c88b8 Mon Sep 17 00:00:00 2001 From: Rishit Gupta <74411873+Rishit30G@users.noreply.github.com> Date: Thu, 18 Jul 2024 09:08:59 -0400 Subject: [PATCH 1/3] Fix Copy button of the PostURL --- .../editor/src/components/post-url/index.js | 54 +++++++++---------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index c2b2ac8826b205..25272938db9de4 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -36,39 +36,35 @@ import { store as editorStore } from '../../store'; * @return {Component} The rendered PostURL component. */ export default function PostURL( { onClose } ) { - const { - isEditable, - postSlug, - postLink, - permalinkPrefix, - permalinkSuffix, - permalink, - } = 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; + 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, - permalink: safeDecodeURIComponent( - select( editorStore ).getPermalink() - ), - }; - }, [] ); + 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, + permalink: safeDecodeURIComponent( + select( editorStore ).getPermalink() + ), + }; + }, [] ); const { editPost } = useDispatch( editorStore ); const { createNotice } = useDispatch( noticesStore ); const [ forceEmptyField, setForceEmptyField ] = useState( false ); - const copyButtonRef = useCopyToClipboard( permalink, () => { + const copyButtonRef = useCopyToClipboard( '/' + postSlug, () => { createNotice( 'info', __( 'Copied URL to clipboard.' ), { isDismissible: true, type: 'snackbar', From 5be5a19435407388e4d2be8b5edb4e23a3be08dd Mon Sep 17 00:00:00 2001 From: Rishit Gupta <74411873+Rishit30G@users.noreply.github.com> Date: Fri, 19 Jul 2024 11:33:27 -0400 Subject: [PATCH 2/3] Add suffix for Button to ExternalLink component and remove suffix from InputControl component --- .../components/src/external-link/index.tsx | 61 ++++++++++------- .../components/src/external-link/types.ts | 5 ++ .../components/src/input-control/index.tsx | 4 +- .../src/input-control/input-base.tsx | 7 -- .../editor/src/components/post-url/index.js | 68 ++++++++++--------- .../editor/src/components/post-url/style.scss | 6 ++ 6 files changed, 85 insertions(+), 66 deletions(-) diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx index 0927effb3ae672..3002d3a506b242 100644 --- a/packages/components/src/external-link/index.tsx +++ b/packages/components/src/external-link/index.tsx @@ -8,13 +8,14 @@ import type { ForwardedRef } from 'react'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { forwardRef } from '@wordpress/element'; +import { Fragment, forwardRef } from '@wordpress/element'; /** * Internal dependencies */ import type { ExternalLinkProps } from './types'; import type { WordPressComponentProps } from '../context'; +import { Suffix } from '../input-control/styles/input-control-styles'; function UnforwardedExternalLink( props: Omit< @@ -23,7 +24,14 @@ function UnforwardedExternalLink( >, ref: ForwardedRef< HTMLAnchorElement > ) { - const { href, children, className, rel = '', ...additionalProps } = props; + const { + href, + children, + className, + rel = '', + suffix, + ...additionalProps + } = props; const optimizedRel = [ ...new Set( [ @@ -54,28 +62,33 @@ function UnforwardedExternalLink( return ( /* eslint-disable react/jsx-no-target-blank */ - - - { children } - - - ↗ - - + +
+ + + { children } + + + ↗ + + +
{ suffix && { suffix } }
+
+ /* eslint-enable react/jsx-no-target-blank */ ); } diff --git a/packages/components/src/external-link/types.ts b/packages/components/src/external-link/types.ts index a2b5cfb8324ced..9043686a33df49 100644 --- a/packages/components/src/external-link/types.ts +++ b/packages/components/src/external-link/types.ts @@ -12,4 +12,9 @@ export type ExternalLinkProps = { * The URL of the external resource. */ href: string; + /** + * Allows for markup other than icons or shortcuts to be added to the menu item. + * + */ + suffix?: ReactNode; }; diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index a5a9e054bc37d8..1a5ee116434320 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -52,7 +52,6 @@ export function UnforwardedInputControl( prefix, size = 'default', style, - suffix, value, ...restProps } = useDeprecated36pxDefaultSizeProp< InputControlProps >( props ); @@ -88,7 +87,6 @@ export function UnforwardedInputControl( prefix={ prefix } size={ size } style={ style } - suffix={ suffix } > ) } { children } - { suffix && ( - - { suffix } - - ) } diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index 25272938db9de4..14afcc5be65518 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -36,35 +36,39 @@ import { store as editorStore } from '../../store'; * @return {Component} The rendered PostURL component. */ export default function PostURL( { onClose } ) { - 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; + const { + isEditable, + postSlug, + postLink, + permalinkPrefix, + permalinkSuffix, + permalink, + } = 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, - permalink: safeDecodeURIComponent( - select( editorStore ).getPermalink() - ), - }; - }, [] ); + 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, + permalink: safeDecodeURIComponent( + select( editorStore ).getPermalink() + ), + }; + }, [] ); const { editPost } = useDispatch( editorStore ); const { createNotice } = useDispatch( noticesStore ); const [ forceEmptyField, setForceEmptyField ] = useState( false ); - const copyButtonRef = useCopyToClipboard( '/' + postSlug, () => { + const copyButtonRef = useCopyToClipboard( permalink, () => { createNotice( 'info', __( 'Copied URL to clipboard.' ), { isDismissible: true, type: 'snackbar', @@ -98,13 +102,6 @@ export default function PostURL( { onClose } ) { / } - suffix={ -