@wordpress/block-library
Version:
Block library for the WordPress editor.
105 lines (104 loc) • 3.02 kB
JavaScript
// packages/block-library/src/term-name/edit.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
useBlockProps,
BlockControls,
AlignmentControl,
InspectorControls,
HeadingLevelDropdown
} from "@wordpress/block-editor";
import {
ToggleControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { decodeEntities } from "@wordpress/html-entities";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { useTermName } from "./use-term-name";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function TermNameEdit({
attributes,
setAttributes,
context: { termId, taxonomy }
}) {
const { textAlign, level = 0, isLink, levelOptions } = attributes;
const { term } = useTermName(termId, taxonomy);
const termName = term?.name ? decodeEntities(term.name) : __("Term Name");
const blockProps = useBlockProps({
className: clsx({
[`has-text-align-${textAlign}`]: textAlign
})
});
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const TagName = level === 0 ? "p" : `h${level}`;
let termNameDisplay = termName;
if (isLink) {
termNameDisplay = /* @__PURE__ */ jsx(
"a",
{
href: "#term-name-pseudo-link",
onClick: (e) => e.preventDefault(),
children: termName
}
);
}
return /* @__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__ */ jsx(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({
isLink: false
});
},
dropdownMenuProps,
children: /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!isLink,
label: __("Make term name a link"),
onDeselect: () => setAttributes({ isLink: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Make term name a link"),
onChange: () => setAttributes({ isLink: !isLink }),
checked: isLink
}
)
}
)
}
) }),
/* @__PURE__ */ jsx(TagName, { ...blockProps, children: termNameDisplay })
] });
}
export {
TermNameEdit as default
};
//# sourceMappingURL=edit.js.map