@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
168 lines (167 loc) • 5.71 kB
JavaScript
// packages/editor/src/components/template-actions-panel/block-theme-content.js
import { useSelect, useDispatch } from "@wordpress/data";
import {
useEntityRecord,
useEntityBlockEditor,
store as coreStore
} from "@wordpress/core-data";
import { BlockPreview } from "@wordpress/block-editor";
import {
PanelBody,
Button,
Tooltip,
__experimentalHStack as HStack,
__experimentalVStack as VStack
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { decodeEntities } from "@wordpress/html-entities";
import { store as noticesStore } from "@wordpress/notices";
import { store as preferencesStore } from "@wordpress/preferences";
import { store as editorStore } from "../../store/index.mjs";
import CreateNewTemplateModal from "../post-template/create-new-template-modal.mjs";
import { SwapTemplateModal } from "../post-template/swap-template-button.mjs";
import { useAvailableTemplates } from "../post-template/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function TemplateActionsPanelContent() {
const templateId = useSelect(
(select) => select(editorStore).getCurrentTemplateId(),
[]
);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isSwapModalOpen, setIsSwapModalOpen] = useState(false);
const availableTemplates = useAvailableTemplates();
const hasSwapTargets = !!availableTemplates?.length;
const {
onNavigateToEntityRecord,
canCreateTemplate,
hasGoBack,
getEditorSettings
} = useSelect((select) => {
const { getEditorSettings: _getEditorSettings } = select(editorStore);
const editorSettings = _getEditorSettings();
return {
onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
canCreateTemplate: !!select(coreStore).canUser("create", {
kind: "postType",
name: "wp_template"
}),
hasGoBack: editorSettings.hasOwnProperty(
"onNavigateToPreviousEntityRecord"
),
getEditorSettings: _getEditorSettings
};
}, []);
const { get: getPreference } = useSelect(preferencesStore);
const { createSuccessNotice } = useDispatch(noticesStore);
const { editedRecord: template, hasResolved } = useEntityRecord(
"postType",
"wp_template",
templateId
);
const [blocks] = useEntityBlockEditor("postType", "wp_template", {
id: templateId
});
if (!hasResolved) {
return null;
}
const notificationAction = hasGoBack ? [
{
label: __("Go back"),
onClick: () => getEditorSettings().onNavigateToPreviousEntityRecord()
}
] : void 0;
const mayShowTemplateEditNotice = () => {
if (!getPreference("core/edit-site", "welcomeGuideTemplate")) {
createSuccessNotice(
__(
"Editing template. Changes made here affect all posts and pages that use the template."
),
{ type: "snackbar", actions: notificationAction }
);
}
};
const templateName = decodeEntities(template.title);
const previewContent = !!blocks?.length && /* @__PURE__ */ jsx(BlockPreview.Async, { children: /* @__PURE__ */ jsx(BlockPreview, { blocks }) });
const renderPreview = () => {
if (!previewContent) {
return null;
}
if (hasSwapTargets) {
const tooltipText = __("Change template");
return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: /* @__PURE__ */ jsx(
"div",
{
className: "editor-template-actions-panel__preview",
role: "button",
tabIndex: 0,
"aria-label": tooltipText,
onClick: () => setIsSwapModalOpen(true),
onKeyPress: () => setIsSwapModalOpen(true),
children: previewContent
}
) });
}
return /* @__PURE__ */ jsx("div", { className: "editor-template-actions-panel__preview", children: previewContent });
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
PanelBody,
{
title: sprintf(
/* translators: %s: template name */
__("Template: %s"),
templateName
),
initialOpen: false,
children: /* @__PURE__ */ jsxs(VStack, { children: [
renderPreview(),
/* @__PURE__ */ jsxs(HStack, { children: [
onNavigateToEntityRecord && /* @__PURE__ */ jsx(
Button,
{
className: "editor-template-actions-panel__action",
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => {
onNavigateToEntityRecord({
postId: template.id,
postType: "wp_template"
});
mayShowTemplateEditNotice();
},
children: __("Edit")
}
),
canCreateTemplate && /* @__PURE__ */ jsx(
Button,
{
className: "editor-template-actions-panel__action",
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => setIsCreateModalOpen(true),
children: __("Create new")
}
)
] })
] })
}
),
isCreateModalOpen && /* @__PURE__ */ jsx(
CreateNewTemplateModal,
{
onClose: () => setIsCreateModalOpen(false)
}
),
isSwapModalOpen && /* @__PURE__ */ jsx(
SwapTemplateModal,
{
onRequestClose: () => setIsSwapModalOpen(false)
}
)
] });
}
export {
TemplateActionsPanelContent as default
};
//# sourceMappingURL=block-theme-content.mjs.map