@wordpress/block-library/build-module/query/edit/query-placeholder.js

Block library for the WordPress editor.

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

/**
 * WordPress dependencies
 */
import { useSelect, useDispatch } from '@wordpress/data';
import { createBlocksFromInnerBlocksTemplate, store as blocksStore } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { useBlockProps, store as blockEditorStore, __experimentalBlockVariationPicker, __experimentalGetMatchingVariation as getMatchingVariation } from '@wordpress/block-editor';
import { Button, Placeholder } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
export default function QueryPlaceholder(_ref) {
  var _matchingVariation$ic, _blockType$icon;

  let {
    attributes,
    clientId,
    name,
    openPatternSelectionModal,
    setAttributes
  } = _ref;
  const [isStartingBlank, setIsStartingBlank] = useState(false);
  const blockProps = useBlockProps();
  const {
    blockType,
    allVariations,
    hasPatterns
  } = useSelect(select => {
    const {
      getBlockVariations,
      getBlockType
    } = select(blocksStore);
    const {
      getBlockRootClientId,
      __experimentalGetPatternsByBlockTypes
    } = select(blockEditorStore);
    const rootClientId = getBlockRootClientId(clientId);
    return {
      blockType: getBlockType(name),
      allVariations: getBlockVariations(name),
      hasPatterns: !!__experimentalGetPatternsByBlockTypes(name, rootClientId).length
    };
  }, [name, clientId]);
  const matchingVariation = getMatchingVariation(attributes, allVariations);
  const icon = (matchingVariation === null || matchingVariation === void 0 ? void 0 : (_matchingVariation$ic = matchingVariation.icon) === null || _matchingVariation$ic === void 0 ? void 0 : _matchingVariation$ic.src) || (matchingVariation === null || matchingVariation === void 0 ? void 0 : matchingVariation.icon) || (blockType === null || blockType === void 0 ? void 0 : (_blockType$icon = blockType.icon) === null || _blockType$icon === void 0 ? void 0 : _blockType$icon.src);
  const label = (matchingVariation === null || matchingVariation === void 0 ? void 0 : matchingVariation.title) || (blockType === null || blockType === void 0 ? void 0 : blockType.title);

  if (isStartingBlank) {
    return createElement(QueryVariationPicker, {
      clientId: clientId,
      name: name,
      attributes: attributes,
      setAttributes: setAttributes,
      icon: icon,
      label: label
    });
  }

  return createElement("div", blockProps, createElement(Placeholder, {
    icon: icon,
    label: label,
    instructions: __('Choose a pattern for the query loop or start blank.')
  }, !!hasPatterns && createElement(Button, {
    variant: "primary",
    onClick: openPatternSelectionModal
  }, __('Choose')), createElement(Button, {
    variant: "secondary",
    onClick: () => {
      setIsStartingBlank(true);
    }
  }, __('Start blank'))));
}

function QueryVariationPicker(_ref2) {
  let {
    clientId,
    name,
    attributes,
    setAttributes,
    icon,
    label
  } = _ref2;
  const {
    defaultVariation,
    scopeVariations
  } = useSelect(select => {
    const {
      getBlockVariations,
      getBlockType,
      getDefaultBlockVariation
    } = select(blocksStore);
    return {
      blockType: getBlockType(name),
      defaultVariation: getDefaultBlockVariation(name, 'block'),
      scopeVariations: getBlockVariations(name, 'block')
    };
  }, [name]);
  const {
    replaceInnerBlocks
  } = useDispatch(blockEditorStore);
  const blockProps = useBlockProps();
  return createElement("div", blockProps, createElement(__experimentalBlockVariationPicker, {
    icon: icon,
    label: label,
    variations: scopeVariations,
    onSelect: function () {
      let nextVariation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultVariation;

      if (nextVariation.attributes) {
        setAttributes({ ...nextVariation.attributes,
          query: { ...nextVariation.attributes.query,
            postType: attributes.query.postType || nextVariation.attributes.query.postType
          }
        });
      }

      if (nextVariation.innerBlocks) {
        replaceInnerBlocks(clientId, createBlocksFromInnerBlocksTemplate(nextVariation.innerBlocks), false);
      }
    }
  }));
}
//# sourceMappingURL=query-placeholder.js.map