@wordpress/block-library
Version:
Block library for the WordPress editor.
289 lines (287 loc) • 11.6 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-library/src/template-part/edit/index.js
var edit_exports = {};
__export(edit_exports, {
default: () => TemplatePartEdit
});
module.exports = __toCommonJS(edit_exports);
var import_blocks = require("@wordpress/blocks");
var import_data = require("@wordpress/data");
var import_block_editor = require("@wordpress/block-editor");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_core_data = require("@wordpress/core-data");
var import_element = require("@wordpress/element");
var import_notices = require("@wordpress/notices");
var import_placeholder = __toESM(require("./placeholder"));
var import_selection_modal = __toESM(require("./selection-modal"));
var import_advanced_controls = require("./advanced-controls");
var import_inner_blocks = __toESM(require("./inner-blocks"));
var import_create_template_part_id = require("./utils/create-template-part-id");
var import_hooks = require("./utils/hooks");
var import_jsx_runtime = require("react/jsx-runtime");
function ReplaceButton({
isEntityAvailable,
area,
templatePartId,
isTemplatePartSelectionOpen,
setIsTemplatePartSelectionOpen
}) {
const { templateParts } = (0, import_hooks.useAlternativeTemplateParts)(
area,
templatePartId
);
const hasReplacements = !!templateParts.length;
const canReplace = isEntityAvailable && hasReplacements && (area === "header" || area === "footer");
if (!canReplace) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.MenuItem,
{
onClick: () => {
setIsTemplatePartSelectionOpen(true);
},
"aria-expanded": isTemplatePartSelectionOpen,
"aria-haspopup": "dialog",
children: (0, import_i18n.__)("Replace")
}
);
}
function TemplatesList({ area, clientId, isEntityAvailable, onSelect }) {
const blockPatterns = (0, import_hooks.useAlternativeBlockPatterns)(area, clientId);
const canReplace = isEntityAvailable && !!blockPatterns.length && (area === "header" || area === "footer");
if (!canReplace) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.PanelBody, { title: (0, import_i18n.__)("Design"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.__experimentalBlockPatternsList,
{
label: (0, import_i18n.__)("Templates"),
blockPatterns,
onClickPattern: onSelect,
showTitlesAsTooltip: true
}
) });
}
function TemplatePartEdit({
attributes,
setAttributes,
clientId
}) {
const { createSuccessNotice } = (0, import_data.useDispatch)(import_notices.store);
const { editEntityRecord } = (0, import_data.useDispatch)(import_core_data.store);
const currentTheme = (0, import_data.useSelect)(
(select) => select(import_core_data.store).getCurrentTheme()?.stylesheet,
[]
);
const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
const templatePartId = (0, import_create_template_part_id.createTemplatePartId)(theme, slug);
const hasAlreadyRendered = (0, import_block_editor.useHasRecursion)(templatePartId);
const [isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen] = (0, import_element.useState)(false);
const {
isResolved,
hasInnerBlocks,
isMissing,
area,
onNavigateToEntityRecord,
title,
canUserEdit
} = (0, import_data.useSelect)(
(select) => {
const { getEditedEntityRecord, hasFinishedResolution } = select(import_core_data.store);
const { getBlockCount, getSettings } = select(import_block_editor.store);
const getEntityArgs = [
"postType",
"wp_template_part",
templatePartId
];
const entityRecord = templatePartId ? getEditedEntityRecord(...getEntityArgs) : null;
const _area = entityRecord?.area || attributes.area;
const hasResolvedEntity = templatePartId ? hasFinishedResolution(
"getEditedEntityRecord",
getEntityArgs
) : false;
const _canUserEdit = hasResolvedEntity ? select(import_core_data.store).canUser("update", {
kind: "postType",
name: "wp_template_part",
id: templatePartId
}) : false;
return {
hasInnerBlocks: getBlockCount(clientId) > 0,
isResolved: hasResolvedEntity,
isMissing: hasResolvedEntity && (!entityRecord || Object.keys(entityRecord).length === 0),
area: _area,
onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord,
title: entityRecord?.title,
canUserEdit: !!_canUserEdit
};
},
[templatePartId, attributes.area, clientId]
);
const areaObject = (0, import_hooks.useTemplatePartArea)(area);
const blockProps = (0, import_block_editor.useBlockProps)();
const isPlaceholder = !slug;
const isEntityAvailable = !isPlaceholder && !isMissing && isResolved;
const TagName = tagName || areaObject.tagName;
const onPatternSelect = async (pattern) => {
await editEntityRecord(
"postType",
"wp_template_part",
templatePartId,
{
blocks: pattern.blocks,
content: (0, import_blocks.serialize)(pattern.blocks)
}
);
createSuccessNotice(
(0, import_i18n.sprintf)(
/* translators: %s: template part title. */
(0, import_i18n.__)('Template Part "%s" updated.'),
title || slug
),
{
type: "snackbar"
}
);
};
if (!hasInnerBlocks && (slug && !theme || slug && isMissing)) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.Warning, { children: (0, import_i18n.sprintf)(
/* translators: %s: Template part slug. */
(0, import_i18n.__)(
"Template part has been deleted or is unavailable: %s"
),
slug
) }) });
}
if (isEntityAvailable && hasAlreadyRendered) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.Warning, { children: (0, import_i18n.__)("Block cannot be rendered inside itself.") }) });
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.RecursionProvider, { uniqueId: templatePartId, children: [
isEntityAvailable && onNavigateToEntityRecord && canUserEdit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToolbarButton,
{
onClick: () => {
onNavigateToEntityRecord({
postId: templatePartId,
postType: "wp_template_part"
});
},
children: window?.__experimentalContentOnlyPatternInsertion ? (0, import_i18n.__)("Edit section") : (0, import_i18n.__)("Edit")
}
) }),
canUserEdit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_advanced_controls.TemplatePartAdvancedControls,
{
tagName,
setAttributes,
isEntityAvailable,
templatePartId,
defaultWrapper: areaObject.tagName,
hasInnerBlocks,
clientId
}
) }),
isPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_placeholder.default,
{
area: attributes.area,
templatePartId,
clientId,
setAttributes,
onOpenSelectionModal: () => setIsTemplatePartSelectionOpen(true)
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockSettingsMenuControls, { children: ({ selectedClientIds }) => {
if (!(selectedClientIds.length === 1 && clientId === selectedClientIds[0])) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ReplaceButton,
{
...{
isEntityAvailable,
area,
clientId,
templatePartId,
isTemplatePartSelectionOpen,
setIsTemplatePartSelectionOpen
}
}
);
} }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
TemplatesList,
{
area,
clientId,
isEntityAvailable,
onSelect: (pattern) => onPatternSelect(pattern)
}
) }),
isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_inner_blocks.default,
{
tagName: TagName,
blockProps,
postId: templatePartId,
hasInnerBlocks,
layout
}
),
!isPlaceholder && !isResolved && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
] }),
isTemplatePartSelectionOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Modal,
{
overlayClassName: "block-editor-template-part__selection-modal",
title: (0, import_i18n.sprintf)(
// Translators: %s as template part area title ("Header", "Footer", etc.).
(0, import_i18n.__)("Choose a %s"),
areaObject.label.toLowerCase()
),
onRequestClose: () => setIsTemplatePartSelectionOpen(false),
isFullScreen: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_selection_modal.default,
{
templatePartId,
clientId,
area,
setAttributes,
onClose: () => setIsTemplatePartSelectionOpen(false)
}
)
}
)
] });
}
//# sourceMappingURL=index.js.map