@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 10 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/post-url/index.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tExternalLink,\n\tButton,\n\t__experimentalInputControl as InputControl,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { copySmall } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useCopyToClipboard, useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * Renders the `PostURL` component.\n *\n * @example\n * ```jsx\n * <PostURL />\n * ```\n *\n * @param {{ onClose: () => void }} props The props for the component.\n * @param {() => void} props.onClose Callback function to be executed when the popover is closed.\n *\n * @return {React.ReactNode} The rendered PostURL component.\n */\nexport default function PostURL( { onClose } ) {\n\tconst {\n\t\tisEditable,\n\t\tpostSlug,\n\t\tpostLink,\n\t\tpermalinkPrefix,\n\t\tpermalinkSuffix,\n\t\tpermalink,\n\t} = useSelect( ( select ) => {\n\t\tconst post = select( editorStore ).getCurrentPost();\n\t\tconst postTypeSlug = select( editorStore ).getCurrentPostType();\n\t\tconst postType = select( coreStore ).getPostType( postTypeSlug );\n\t\tconst permalinkParts = select( editorStore ).getPermalinkParts();\n\t\tconst hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;\n\n\t\treturn {\n\t\t\tisEditable:\n\t\t\t\tselect( editorStore ).isPermalinkEditable() && hasPublishAction,\n\t\t\tpostSlug: safeDecodeURIComponent(\n\t\t\t\tselect( editorStore ).getEditedPostSlug()\n\t\t\t),\n\t\t\tviewPostLabel: postType?.labels.view_item,\n\t\t\tpostLink: post.link,\n\t\t\tpermalinkPrefix: permalinkParts?.prefix,\n\t\t\tpermalinkSuffix: permalinkParts?.suffix,\n\t\t\tpermalink: safeDecodeURIComponent(\n\t\t\t\tselect( editorStore ).getPermalink()\n\t\t\t),\n\t\t};\n\t}, [] );\n\tconst { editPost } = useDispatch( editorStore );\n\tconst { createNotice } = useDispatch( noticesStore );\n\tconst [ forceEmptyField, setForceEmptyField ] = useState( false );\n\tconst copyButtonRef = useCopyToClipboard( permalink, () => {\n\t\tcreateNotice( 'info', __( 'Copied Permalink to clipboard.' ), {\n\t\t\tisDismissible: true,\n\t\t\ttype: 'snackbar',\n\t\t} );\n\t} );\n\tconst postUrlSlugDescriptionId =\n\t\t'editor-post-url__slug-description-' + useInstanceId( PostURL );\n\n\treturn (\n\t\t<div className=\"editor-post-url\">\n\t\t\t<InspectorPopoverHeader\n\t\t\t\ttitle={ __( 'Slug' ) }\n\t\t\t\tonClose={ onClose }\n\t\t\t/>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t{ isEditable && (\n\t\t\t\t\t<p className=\"editor-post-url__intro\">\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tspan: <span id={ postUrlSlugDescriptionId } />,\n\t\t\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t\t<div>\n\t\t\t\t\t{ isEditable && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\ticon={ copySmall }\n\t\t\t\t\t\t\t\t\t\t\tref={ copyButtonRef }\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\tlabel=\"Copy\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tlabel={ __( 'Slug' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ forceEmptyField ? '' : postSlug }\n\t\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\t\tspellCheck=\"false\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tclassName=\"editor-post-url__input\"\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\teditPost( { slug: newValue } );\n\t\t\t\t\t\t\t\t\t// When we delete the field the permalink gets\n\t\t\t\t\t\t\t\t\t// reverted to the original value.\n\t\t\t\t\t\t\t\t\t// The forceEmptyField logic allows the user to have\n\t\t\t\t\t\t\t\t\t// the field temporarily empty while typing.\n\t\t\t\t\t\t\t\t\tif ( ! newValue ) {\n\t\t\t\t\t\t\t\t\t\tif ( ! forceEmptyField ) {\n\t\t\t\t\t\t\t\t\t\t\tsetForceEmptyField( true );\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( forceEmptyField ) {\n\t\t\t\t\t\t\t\t\t\tsetForceEmptyField( false );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonBlur={ ( event ) => {\n\t\t\t\t\t\t\t\t\teditPost( {\n\t\t\t\t\t\t\t\t\t\tslug: cleanForSlug(\n\t\t\t\t\t\t\t\t\t\t\tevent.target.value\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\tif ( forceEmptyField ) {\n\t\t\t\t\t\t\t\t\t\tsetForceEmptyField( false );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taria-describedby={ postUrlSlugDescriptionId }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<p className=\"editor-post-url__permalink\">\n\t\t\t\t\t\t\t\t<span className=\"editor-post-url__permalink-visual-label\">\n\t\t\t\t\t\t\t\t\t{ __( 'Permalink:' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\tclassName=\"editor-post-url__link\"\n\t\t\t\t\t\t\t\t\thref={ postLink }\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"editor-post-url__link-prefix\">\n\t\t\t\t\t\t\t\t\t\t{ permalinkPrefix }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"editor-post-url__link-slug\">\n\t\t\t\t\t\t\t\t\t\t{ postSlug }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"editor-post-url__link-suffix\">\n\t\t\t\t\t\t\t\t\t\t{ permalinkSuffix }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditable && (\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\tclassName=\"editor-post-url__link\"\n\t\t\t\t\t\t\thref={ postLink }\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ postLink }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],
"mappings": "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",
"names": []
}