@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
139 lines (138 loc) • 4.99 kB
JavaScript
// packages/editor/src/components/template-actions-panel/classic-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,
__experimentalText as Text,
__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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ClassicThemeContent() {
const templateId = useSelect(
(select) => select(editorStore).getCurrentTemplateId(),
[]
);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
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"
}) && editorSettings.supportsTemplateMode,
hasGoBack: editorSettings.hasOwnProperty(
"onNavigateToPreviousEntityRecord"
),
getEditorSettings: _getEditorSettings
};
}, []);
const { get: getPreference } = useSelect(preferencesStore);
const { createSuccessNotice } = useDispatch(noticesStore);
const { editedRecord: template } = useEntityRecord(
"postType",
"wp_template",
templateId
);
const [blocks] = useEntityBlockEditor("postType", "wp_template", {
id: templateId
});
if (!templateId && !canCreateTemplate) {
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 = template ? decodeEntities(template.title) : void 0;
const previewContent = !!blocks?.length && /* @__PURE__ */ jsx(BlockPreview.Async, { children: /* @__PURE__ */ jsx(BlockPreview, { blocks }) });
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
PanelBody,
{
title: template ? sprintf(
/* translators: %s: template name */
__("Template: %s"),
templateName
) : __("Template"),
initialOpen: false,
children: /* @__PURE__ */ jsxs(VStack, { children: [
!templateId && /* @__PURE__ */ jsx(Text, { children: __(
"This page uses a classic template. To edit this template with blocks, create a block template."
) }),
template && previewContent && /* @__PURE__ */ jsx("div", { className: "editor-template-actions-panel__preview", children: previewContent }),
/* @__PURE__ */ jsxs(HStack, { children: [
template && 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: !templateId ? __("Create block template") : __("Create new")
}
)
] })
] })
}
),
isCreateModalOpen && /* @__PURE__ */ jsx(
CreateNewTemplateModal,
{
onClose: () => setIsCreateModalOpen(false)
}
)
] });
}
export {
ClassicThemeContent as default
};
//# sourceMappingURL=classic-theme-content.mjs.map