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

Block library for the WordPress editor.

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

/**
 * WordPress dependencies
 */
import { ToolbarGroup, Dropdown, ToolbarButton, BaseControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { settings, list, grid } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
export default function QueryToolbar(_ref) {
  let {
    attributes: {
      query,
      displayLayout
    },
    setQuery,
    setDisplayLayout,
    openPatternSelectionModal,
    name,
    clientId
  } = _ref;
  const hasPatterns = useSelect(select => {
    const {
      getBlockRootClientId,
      __experimentalGetPatternsByBlockTypes
    } = select(blockEditorStore);
    const rootClientId = getBlockRootClientId(clientId);
    return !!__experimentalGetPatternsByBlockTypes(name, rootClientId).length;
  }, [name, clientId]);
  const maxPageInputId = useInstanceId(QueryToolbar, 'blocks-query-pagination-max-page-input');
  const displayLayoutControls = [{
    icon: list,
    title: __('List view'),
    onClick: () => setDisplayLayout({
      type: 'list'
    }),
    isActive: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.type) === 'list'
  }, {
    icon: grid,
    title: __('Grid view'),
    onClick: () => setDisplayLayout({
      type: 'flex',
      columns: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.columns) || 3
    }),
    isActive: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.type) === 'flex'
  }];
  return createElement(Fragment, null, !query.inherit && createElement(ToolbarGroup, null, createElement(Dropdown, {
    contentClassName: "block-library-query-toolbar__popover",
    renderToggle: _ref2 => {
      let {
        onToggle
      } = _ref2;
      return createElement(ToolbarButton, {
        icon: settings,
        label: __('Display settings'),
        onClick: onToggle
      });
    },
    renderContent: () => createElement(Fragment, null, createElement(BaseControl, null, createElement(NumberControl, {
      __unstableInputWidth: "60px",
      label: __('Items per Page'),
      labelPosition: "edge",
      min: 1,
      max: 100,
      onChange: value => {
        if (isNaN(value) || value < 1 || value > 100) {
          return;
        }

        setQuery({
          perPage: value
        });
      },
      step: "1",
      value: query.perPage,
      isDragEnabled: false
    })), createElement(BaseControl, null, createElement(NumberControl, {
      __unstableInputWidth: "60px",
      label: __('Offset'),
      labelPosition: "edge",
      min: 0,
      max: 100,
      onChange: value => {
        if (isNaN(value) || value < 0 || value > 100) {
          return;
        }

        setQuery({
          offset: value
        });
      },
      step: "1",
      value: query.offset,
      isDragEnabled: false
    })), createElement(BaseControl, {
      id: maxPageInputId,
      help: __('Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).')
    }, createElement(NumberControl, {
      id: maxPageInputId,
      __unstableInputWidth: "60px",
      label: __('Max page to show'),
      labelPosition: "edge",
      min: 0,
      onChange: value => {
        if (isNaN(value) || value < 0) {
          return;
        }

        setQuery({
          pages: value
        });
      },
      step: "1",
      value: query.pages,
      isDragEnabled: false
    })))
  })), hasPatterns && createElement(ToolbarGroup, {
    className: "wp-block-template-part__block-control-group"
  }, createElement(ToolbarButton, {
    onClick: openPatternSelectionModal
  }, __('Replace'))), createElement(ToolbarGroup, {
    controls: displayLayoutControls
  }));
}
//# sourceMappingURL=query-toolbar.js.map