@wordpress/block-library
Version:
Block library for the WordPress editor.
225 lines (224 loc) • 7.19 kB
JavaScript
// packages/block-library/src/post-title/edit.js
import clsx from "clsx";
import {
AlignmentControl,
BlockControls,
InspectorControls,
useBlockProps,
PlainText,
HeadingLevelDropdown,
useBlockEditingMode
} from "@wordpress/block-editor";
import {
ToggleControl,
TextControl,
ExternalLink,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { createBlock, getDefaultBlockName } from "@wordpress/blocks";
import { useEntityProp, store as coreStore } from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { createInterpolateElement } from "@wordpress/element";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function PostTitleEdit({
attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
setAttributes,
context: { postType, postId, queryId },
insertBlocksAfter
}) {
const TagName = level === 0 ? "p" : `h${level}`;
const isDescendentOfQueryLoop = Number.isFinite(queryId);
const userCanEdit = useSelect(
(select) => {
if (isDescendentOfQueryLoop) {
return false;
}
return select(coreStore).canUser("update", {
kind: "postType",
name: postType,
id: postId
});
},
[isDescendentOfQueryLoop, postType, postId]
);
const [rawTitle = "", setTitle, fullTitle] = useEntityProp(
"postType",
postType,
"title",
postId
);
const [link] = useEntityProp("postType", postType, "link", postId);
const onSplitAtEnd = () => {
insertBlocksAfter(createBlock(getDefaultBlockName()));
};
const blockProps = useBlockProps({
className: clsx({
[`has-text-align-${textAlign}`]: textAlign
})
});
const blockEditingMode = useBlockEditingMode();
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
let titleElement = /* @__PURE__ */ jsx(TagName, { ...blockProps, children: __("Title") });
if (postType && postId) {
titleElement = userCanEdit ? /* @__PURE__ */ jsx(
PlainText,
{
tagName: TagName,
placeholder: __("(no title)"),
value: rawTitle,
onChange: setTitle,
__experimentalVersion: 2,
__unstableOnSplitAtEnd: onSplitAtEnd,
...blockProps
}
) : /* @__PURE__ */ jsx(
TagName,
{
...blockProps,
dangerouslySetInnerHTML: {
__html: fullTitle?.rendered || __("(no title)")
}
}
);
}
if (isLink && postType && postId) {
titleElement = userCanEdit ? /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(
PlainText,
{
tagName: "a",
href: link,
target: linkTarget,
rel,
placeholder: !rawTitle.length ? __("(no title)") : null,
value: rawTitle,
onChange: setTitle,
__experimentalVersion: 2,
__unstableOnSplitAtEnd: onSplitAtEnd
}
) }) : /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(
"a",
{
href: link,
target: linkTarget,
rel,
onClick: (event) => event.preventDefault(),
dangerouslySetInnerHTML: {
__html: fullTitle?.rendered || __("(no title)")
}
}
) });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
blockEditingMode === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(BlockControls, { group: "block", children: [
/* @__PURE__ */ jsx(
HeadingLevelDropdown,
{
value: level,
options: levelOptions,
onChange: (newLevel) => setAttributes({ level: newLevel })
}
),
/* @__PURE__ */ jsx(
AlignmentControl,
{
value: textAlign,
onChange: (nextAlign) => {
setAttributes({ textAlign: nextAlign });
}
}
)
] }),
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({
rel: "",
linkTarget: "_self",
isLink: false
});
},
dropdownMenuProps,
children: [
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Make title a link"),
isShownByDefault: true,
hasValue: () => isLink,
onDeselect: () => setAttributes({ isLink: false }),
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Make title a link"),
onChange: () => setAttributes({ isLink: !isLink }),
checked: isLink
}
)
}
),
isLink && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Open in new tab"),
isShownByDefault: true,
hasValue: () => linkTarget === "_blank",
onDeselect: () => setAttributes({
linkTarget: "_self"
}),
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Open in new tab"),
onChange: (value) => setAttributes({
linkTarget: value ? "_blank" : "_self"
}),
checked: linkTarget === "_blank"
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Link relation"),
isShownByDefault: true,
hasValue: () => !!rel,
onDeselect: () => setAttributes({ rel: "" }),
children: /* @__PURE__ */ jsx(
TextControl,
{
__next40pxDefaultSize: true,
label: __("Link relation"),
help: createInterpolateElement(
__(
"The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document."
),
{
a: /* @__PURE__ */ jsx(ExternalLink, { href: "https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" })
}
),
value: rel,
onChange: (newRel) => setAttributes({ rel: newRel })
}
)
}
)
] })
]
}
) })
] }),
titleElement
] });
}
export {
PostTitleEdit as default
};
//# sourceMappingURL=edit.mjs.map