@wordpress/block-library/build-module/post-terms/edit.js

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { unescape } from 'lodash';
/**
 * WordPress dependencies
 */

import { AlignmentToolbar, InspectorControls, BlockControls, useBlockProps, useBlockDisplayInformation, RichText } from '@wordpress/block-editor';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { Spinner, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as coreStore } from '@wordpress/core-data';
/**
 * Internal dependencies
 */

import usePostTerms from './use-post-terms'; // Allowed formats for the prefix and suffix fields.

const ALLOWED_FORMATS = ['core/bold', 'core/image', 'core/italic', 'core/link', 'core/strikethrough', 'core/text-color'];
export default function PostTermsEdit(_ref) {
  var _selectedTerm$labels;

  let {
    attributes,
    clientId,
    context,
    isSelected,
    setAttributes,
    insertBlocksAfter
  } = _ref;
  const {
    term,
    textAlign,
    separator,
    prefix,
    suffix
  } = attributes;
  const {
    postId,
    postType
  } = context;
  const selectedTerm = useSelect(select => {
    var _taxonomy$visibility;

    if (!term) return {};
    const {
      getTaxonomy
    } = select(coreStore);
    const taxonomy = getTaxonomy(term);
    return taxonomy !== null && taxonomy !== void 0 && (_taxonomy$visibility = taxonomy.visibility) !== null && _taxonomy$visibility !== void 0 && _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: classnames({
      [`has-text-align-${textAlign}`]: textAlign,
      [`taxonomy-${term}`]: term
    })
  });

  if (!hasPost || !term) {
    return createElement("div", blockProps, blockInformation.title);
  }

  return createElement(Fragment, null, createElement(BlockControls, null, createElement(AlignmentToolbar, {
    value: textAlign,
    onChange: nextAlign => {
      setAttributes({
        textAlign: nextAlign
      });
    }
  })), createElement(InspectorControls, {
    __experimentalGroup: "advanced"
  }, createElement(TextControl, {
    autoComplete: "off",
    label: __('Separator'),
    value: separator || '',
    onChange: nextValue => {
      setAttributes({
        separator: nextValue
      });
    },
    help: __('Enter character(s) used to separate terms.')
  })), createElement("div", blockProps, isLoading && createElement(Spinner, null), !isLoading && hasPostTerms && (isSelected || prefix) && createElement(RichText, {
    allowedFormats: ALLOWED_FORMATS,
    className: "wp-block-post-terms__prefix",
    multiline: false,
    "aria-label": __('Prefix'),
    placeholder: __('Prefix') + ' ',
    value: prefix,
    onChange: value => setAttributes({
      prefix: value
    }),
    tagName: "span"
  }), !isLoading && hasPostTerms && postTerms.map(postTerm => createElement("a", {
    key: postTerm.id,
    href: postTerm.link,
    onClick: event => event.preventDefault()
  }, unescape(postTerm.name))).reduce((prev, curr) => createElement(Fragment, null, prev, createElement("span", {
    className: "wp-block-post-terms__separator"
  }, separator || ' '), curr)), !isLoading && !hasPostTerms && ((selectedTerm === null || selectedTerm === void 0 ? void 0 : (_selectedTerm$labels = selectedTerm.labels) === null || _selectedTerm$labels === void 0 ? void 0 : _selectedTerm$labels.no_terms) || __('Term items not found.')), !isLoading && hasPostTerms && (isSelected || suffix) && createElement(RichText, {
    allowedFormats: ALLOWED_FORMATS,
    className: "wp-block-post-terms__suffix",
    multiline: false,
    "aria-label": __('Suffix'),
    placeholder: ' ' + __('Suffix'),
    value: suffix,
    onChange: value => setAttributes({
      suffix: value
    }),
    tagName: "span",
    __unstableOnSplitAtEnd: () => insertBlocksAfter(createBlock(getDefaultBlockName()))
  })));
}
//# sourceMappingURL=edit.js.map