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

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useMemo } from '@wordpress/element';
import { BlockContextProvider, store as blockEditorStore, __experimentalBlockPatternSetup as BlockPatternSetup } from '@wordpress/block-editor';
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import QueryContent from './query-content';
import QueryPlaceholder from './query-placeholder';
import { useBlockNameForPatterns, getTransformedBlocksFromPattern } from '../utils';

const QueryEdit = props => {
  const {
    clientId,
    attributes
  } = props;
  const [isPatternSelectionModalOpen, setIsPatternSelectionModalOpen] = useState(false);
  const hasInnerBlocks = useSelect(select => !!select(blockEditorStore).getBlocks(clientId).length, [clientId]);
  const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
  return createElement(Fragment, null, createElement(Component, _extends({}, props, {
    openPatternSelectionModal: () => setIsPatternSelectionModalOpen(true)
  })), isPatternSelectionModalOpen && createElement(PatternSelectionModal, {
    clientId: clientId,
    attributes: attributes,
    setIsPatternSelectionModalOpen: setIsPatternSelectionModalOpen
  }));
};

function PatternSelectionModal(_ref) {
  let {
    clientId,
    attributes,
    setIsPatternSelectionModalOpen
  } = _ref;
  const {
    replaceBlock,
    selectBlock
  } = useDispatch(blockEditorStore);

  const onBlockPatternSelect = blocks => {
    const {
      newBlocks,
      queryClientIds
    } = getTransformedBlocksFromPattern(blocks, attributes);
    replaceBlock(clientId, newBlocks);

    if (queryClientIds[0]) {
      selectBlock(queryClientIds[0]);
    }
  }; // When we preview Query Loop blocks we should prefer the current
  // block's postType, which is passed through block context.


  const blockPreviewContext = useMemo(() => ({
    previewPostType: attributes.query.postType
  }), [attributes.query.postType]);
  const blockNameForPatterns = useBlockNameForPatterns(clientId, attributes);
  return createElement(Modal, {
    className: "block-editor-query-pattern__selection-modal",
    title: __('Choose a pattern'),
    closeLabel: __('Cancel'),
    onRequestClose: () => setIsPatternSelectionModalOpen(false)
  }, createElement(BlockContextProvider, {
    value: blockPreviewContext
  }, createElement(BlockPatternSetup, {
    blockName: blockNameForPatterns,
    clientId: clientId,
    onBlockPatternSelect: onBlockPatternSelect
  })));
}

export default QueryEdit;
//# sourceMappingURL=index.js.map