@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
173 lines (171 loc) • 6.68 kB
JavaScript
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
import { useState, createInterpolateElement } from '@wordpress/element';
import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { ExternalLink, Button, __experimentalInputControl as InputControl, __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, __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, useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
/**
* Renders the `PostURL` component.
*
* @example
* ```jsx
* <PostURL />
* ```
*
* @param {{ onClose: () => void }} props The props for the component.
* @param {() => void} props.onClose Callback function to be executed when the popover is closed.
*
* @return {React.ReactNode} The rendered PostURL component.
*/
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function PostURL({
onClose
}) {
const {
isEditable,
postSlug,
postLink,
permalinkPrefix,
permalinkSuffix,
permalink
} = useSelect(select => {
var _post$_links$wpActio;
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$wpActio = post?._links?.['wp:action-publish']) !== null && _post$_links$wpActio !== void 0 ? _post$_links$wpActio : 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())
};
}, []);
const {
editPost
} = useDispatch(editorStore);
const {
createNotice
} = useDispatch(noticesStore);
const [forceEmptyField, setForceEmptyField] = useState(false);
const copyButtonRef = useCopyToClipboard(permalink, () => {
createNotice('info', __('Copied Permalink to clipboard.'), {
isDismissible: true,
type: 'snackbar'
});
});
const postUrlSlugDescriptionId = 'editor-post-url__slug-description-' + useInstanceId(PostURL);
return /*#__PURE__*/_jsxs("div", {
className: "editor-post-url",
children: [/*#__PURE__*/_jsx(InspectorPopoverHeader, {
title: __('Slug'),
onClose: onClose
}), /*#__PURE__*/_jsxs(VStack, {
spacing: 3,
children: [isEditable && /*#__PURE__*/_jsx("p", {
className: "editor-post-url__intro",
children: createInterpolateElement(__('<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'), {
span: /*#__PURE__*/_jsx("span", {
id: postUrlSlugDescriptionId
}),
a: /*#__PURE__*/_jsx(ExternalLink, {
href: __('https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink')
})
})
}), /*#__PURE__*/_jsxs("div", {
children: [isEditable && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(InputControl, {
__next40pxDefaultSize: true,
prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {
children: "/"
}),
suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/_jsx(Button, {
icon: copySmall,
ref: copyButtonRef,
size: "small",
label: "Copy"
})
}),
label: __('Slug'),
hideLabelFromVision: true,
value: forceEmptyField ? '' : postSlug,
autoComplete: "off",
spellCheck: "false",
type: "text",
className: "editor-post-url__input",
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);
}
return;
}
if (forceEmptyField) {
setForceEmptyField(false);
}
},
onBlur: event => {
editPost({
slug: cleanForSlug(event.target.value)
});
if (forceEmptyField) {
setForceEmptyField(false);
}
},
"aria-describedby": postUrlSlugDescriptionId
}), /*#__PURE__*/_jsxs("p", {
className: "editor-post-url__permalink",
children: [/*#__PURE__*/_jsx("span", {
className: "editor-post-url__permalink-visual-label",
children: __('Permalink:')
}), /*#__PURE__*/_jsxs(ExternalLink, {
className: "editor-post-url__link",
href: postLink,
target: "_blank",
children: [/*#__PURE__*/_jsx("span", {
className: "editor-post-url__link-prefix",
children: permalinkPrefix
}), /*#__PURE__*/_jsx("span", {
className: "editor-post-url__link-slug",
children: postSlug
}), /*#__PURE__*/_jsx("span", {
className: "editor-post-url__link-suffix",
children: permalinkSuffix
})]
})]
})]
}), !isEditable && /*#__PURE__*/_jsx(ExternalLink, {
className: "editor-post-url__link",
href: postLink,
target: "_blank",
children: postLink
})]
})]
})]
});
}
//# sourceMappingURL=index.js.map