Editor: Ensure Copy button in sidebar copies whole permalink, *with* …

…URL protocol (WordPress#61876)

* PostURL: Copy whole permalink, *with* protocol

`usePostURLLabel` is meant to be used in labels and intentionally strips
the protocol of a URL. As a result, the copy button in the `PostURL`
component wrote something like "example.org/foobar" to the clipboard,
instead of "https://example.org/foobar".

As a fix, just grab the permalink directly.

* Docs: Fix grammar

* Fold permalink selection into existing useSelect call

* Filter through safeDecodeURIComponent -- you never know

docs/reference-guides/data/data-core-editor.md

@@ -485,7 +485,7 @@ _Returns_
 
 ### getPermalinkParts
 
-Returns the permalink for a post, split into it's three parts: the prefix, the postName, and the suffix.
+Returns the permalink for a post, split into its three parts: the prefix, the postName, and the suffix.
 
 _Parameters_
 

packages/editor/src/components/post-url/index.js

@@ -21,7 +21,6 @@ import { useCopyToClipboard } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
 /**
@@ -37,33 +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,
-			};
-		}, [] );
+		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 postUrlLabel = usePostURLLabel();
-	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
 		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',

packages/editor/src/store/selectors.js

@@ -983,7 +983,7 @@ export function getEditedPostSlug( state ) {
 }
 
 /**
- * Returns the permalink for a post, split into it's three parts: the prefix,
+ * Returns the permalink for a post, split into its three parts: the prefix,
  * the postName, and the suffix.
  *
  * @param {Object} state Editor state.