@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
178 lines (175 loc) • 7.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PostURL;
var _data = require("@wordpress/data");
var _url = require("@wordpress/url");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _notices = require("@wordpress/notices");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _compose = require("@wordpress/compose");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* 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.
*/function PostURL({
onClose
}) {
const {
isEditable,
postSlug,
postLink,
permalinkPrefix,
permalinkSuffix,
permalink
} = (0, _data.useSelect)(select => {
var _post$_links$wpActio;
const post = select(_store.store).getCurrentPost();
const postTypeSlug = select(_store.store).getCurrentPostType();
const postType = select(_coreData.store).getPostType(postTypeSlug);
const permalinkParts = select(_store.store).getPermalinkParts();
const hasPublishAction = (_post$_links$wpActio = post?._links?.['wp:action-publish']) !== null && _post$_links$wpActio !== void 0 ? _post$_links$wpActio : false;
return {
isEditable: select(_store.store).isPermalinkEditable() && hasPublishAction,
postSlug: (0, _url.safeDecodeURIComponent)(select(_store.store).getEditedPostSlug()),
viewPostLabel: postType?.labels.view_item,
postLink: post.link,
permalinkPrefix: permalinkParts?.prefix,
permalinkSuffix: permalinkParts?.suffix,
permalink: (0, _url.safeDecodeURIComponent)(select(_store.store).getPermalink())
};
}, []);
const {
editPost
} = (0, _data.useDispatch)(_store.store);
const {
createNotice
} = (0, _data.useDispatch)(_notices.store);
const [forceEmptyField, setForceEmptyField] = (0, _element.useState)(false);
const copyButtonRef = (0, _compose.useCopyToClipboard)(permalink, () => {
createNotice('info', (0, _i18n.__)('Copied Permalink to clipboard.'), {
isDismissible: true,
type: 'snackbar'
});
});
const postUrlSlugDescriptionId = 'editor-post-url__slug-description-' + (0, _compose.useInstanceId)(PostURL);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "editor-post-url",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
title: (0, _i18n.__)('Slug'),
onClose: onClose
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 3,
children: [isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "editor-post-url__intro",
children: (0, _element.createInterpolateElement)((0, _i18n.__)('<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'), {
span: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
id: postUrlSlugDescriptionId
}),
a: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
href: (0, _i18n.__)('https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink')
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [isEditable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
__next40pxDefaultSize: true,
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
children: "/"
}),
suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
icon: _icons.copySmall,
ref: copyButtonRef,
size: "small",
label: "Copy"
})
}),
label: (0, _i18n.__)('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: (0, _url.cleanForSlug)(event.target.value)
});
if (forceEmptyField) {
setForceEmptyField(false);
}
},
"aria-describedby": postUrlSlugDescriptionId
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
className: "editor-post-url__permalink",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-post-url__permalink-visual-label",
children: (0, _i18n.__)('Permalink:')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ExternalLink, {
className: "editor-post-url__link",
href: postLink,
target: "_blank",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-post-url__link-prefix",
children: permalinkPrefix
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-post-url__link-slug",
children: postSlug
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-post-url__link-suffix",
children: permalinkSuffix
})]
})]
})]
}), !isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
className: "editor-post-url__link",
href: postLink,
target: "_blank",
children: postLink
})]
})]
})]
});
}
//# sourceMappingURL=index.js.map