@wordpress/block-editor/build-module/components/tool-selector/index.js

Generic block editor.

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

/**
 * WordPress dependencies
 */
import { Dropdown, Button, MenuItemsChoice, SVG, Path, NavigableMenu } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
import { Icon, edit as editIcon } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import { store as blockEditorStore } from '../../store';
const selectIcon = createElement(SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  width: "24",
  height: "24",
  viewBox: "0 0 24 24"
}, createElement(Path, {
  d: "M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z"
}));

function ToolSelector(props, ref) {
  const isNavigationTool = useSelect(select => select(blockEditorStore).isNavigationMode(), []);
  const {
    setNavigationMode
  } = useDispatch(blockEditorStore);

  const onSwitchMode = mode => {
    setNavigationMode(mode === 'edit' ? false : true);
  };

  return createElement(Dropdown, {
    renderToggle: ({
      isOpen,
      onToggle
    }) => createElement(Button, _extends({}, props, {
      ref: ref,
      icon: isNavigationTool ? selectIcon : editIcon,
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: onToggle
      /* translators: button label text should, if possible, be under 16 characters. */
      ,
      label: __('Tools')
    })),
    position: "bottom right",
    renderContent: () => createElement(Fragment, null, createElement(NavigableMenu, {
      role: "menu",
      "aria-label": __('Tools')
    }, createElement(MenuItemsChoice, {
      value: isNavigationTool ? 'select' : 'edit',
      onSelect: onSwitchMode,
      choices: [{
        value: 'edit',
        label: createElement(Fragment, null, createElement(Icon, {
          icon: editIcon
        }), __('Edit'))
      }, {
        value: 'select',
        label: createElement(Fragment, null, selectIcon, __('Select'))
      }]
    })), createElement("div", {
      className: "block-editor-tool-selector__help"
    }, __('Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.')))
  });
}

export default forwardRef(ToolSelector);
//# sourceMappingURL=index.js.map