UNPKG

@wordpress/block-library

Version:
140 lines (139 loc) 4.5 kB
import { Fragment, jsx, jsxs } from "react/jsx-runtime"; import clsx from "clsx"; import { AlignmentToolbar, InspectorControls, BlockControls, useBlockProps, useBlockDisplayInformation, RichText, useBlockEditingMode } from "@wordpress/block-editor"; import { createBlock, getDefaultBlockName } from "@wordpress/blocks"; import { Spinner, TextControl } from "@wordpress/components"; import { useSelect } from "@wordpress/data"; import { decodeEntities } from "@wordpress/html-entities"; import { __ } from "@wordpress/i18n"; import { store as coreStore } from "@wordpress/core-data"; import usePostTerms from "./use-post-terms"; const ALLOWED_FORMATS = [ "core/bold", "core/image", "core/italic", "core/link", "core/strikethrough", "core/text-color" ]; function PostTermsEdit({ attributes, clientId, context, isSelected, setAttributes, insertBlocksAfter }) { const { term, textAlign, separator, prefix, suffix } = attributes; const { postId, postType } = context; const blockEditingMode = useBlockEditingMode(); const showControls = blockEditingMode === "default"; const selectedTerm = useSelect( (select) => { if (!term) { return {}; } const { getTaxonomy } = select(coreStore); const taxonomy = getTaxonomy(term); return taxonomy?.visibility?.publicly_queryable ? taxonomy : {}; }, [term] ); const { postTerms, hasPostTerms, isLoading } = usePostTerms({ postId, term: selectedTerm }); const hasPost = postId && postType; const blockInformation = useBlockDisplayInformation(clientId); const blockProps = useBlockProps({ className: clsx({ [`has-text-align-${textAlign}`]: textAlign, [`taxonomy-${term}`]: term }) }); return /* @__PURE__ */ jsxs(Fragment, { children: [ showControls && /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx( AlignmentToolbar, { value: textAlign, onChange: (nextAlign) => { setAttributes({ textAlign: nextAlign }); } } ) }), /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx( TextControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, autoComplete: "off", label: __("Separator"), value: separator || "", onChange: (nextValue) => { setAttributes({ separator: nextValue }); }, help: __("Enter character(s) used to separate terms.") } ) }), /* @__PURE__ */ jsxs("div", { ...blockProps, children: [ isLoading && hasPost && /* @__PURE__ */ jsx(Spinner, {}), !isLoading && (isSelected || prefix) && /* @__PURE__ */ jsx( RichText, { identifier: "prefix", allowedFormats: ALLOWED_FORMATS, className: "wp-block-post-terms__prefix", "aria-label": __("Prefix"), placeholder: __("Prefix") + " ", value: prefix, onChange: (value) => setAttributes({ prefix: value }), tagName: "span" } ), (!hasPost || !term) && /* @__PURE__ */ jsx("span", { children: blockInformation.title }), hasPost && !isLoading && hasPostTerms && postTerms.map((postTerm) => /* @__PURE__ */ jsx( "a", { href: postTerm.link, onClick: (event) => event.preventDefault(), rel: "tag", children: decodeEntities(postTerm.name) }, postTerm.id )).reduce((prev, curr) => /* @__PURE__ */ jsxs(Fragment, { children: [ prev, /* @__PURE__ */ jsx("span", { className: "wp-block-post-terms__separator", children: separator || " " }), curr ] })), hasPost && !isLoading && !hasPostTerms && (selectedTerm?.labels?.no_terms || __("Term items not found.")), !isLoading && (isSelected || suffix) && /* @__PURE__ */ jsx( RichText, { identifier: "suffix", allowedFormats: ALLOWED_FORMATS, className: "wp-block-post-terms__suffix", "aria-label": __("Suffix"), placeholder: " " + __("Suffix"), value: suffix, onChange: (value) => setAttributes({ suffix: value }), tagName: "span", __unstableOnSplitAtEnd: () => insertBlocksAfter( createBlock(getDefaultBlockName()) ) } ) ] }) ] }); } export { PostTermsEdit as default }; //# sourceMappingURL=edit.js.map