@wordpress/editor/build/components/document-tools/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _preferences = require("@wordpress/preferences");
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _redo = _interopRequireDefault(require("../editor-history/redo"));
var _undo = _interopRequireDefault(require("../editor-history/undo"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function DocumentTools({
  className,
  disableBlockTools = false
}) {
  const {
    setIsInserterOpened,
    setIsListViewOpened
  } = (0, _data.useDispatch)(_store.store);
  const {
    isDistractionFree,
    isInserterOpened,
    isListViewOpen,
    listViewShortcut,
    inserterSidebarToggleRef,
    listViewToggleRef,
    hasFixedToolbar,
    showIconLabels
  } = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    const {
      get
    } = select(_preferences.store);
    const {
      isListViewOpened,
      getEditorMode,
      getInserterSidebarToggleRef,
      getListViewToggleRef
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const {
      getShortcutRepresentation
    } = select(_keyboardShortcuts.store);
    const {
      __unstableGetEditorMode
    } = select(_blockEditor.store);
    return {
      isInserterOpened: select(_store.store).isInserterOpened(),
      isListViewOpen: isListViewOpened(),
      listViewShortcut: getShortcutRepresentation('core/editor/toggle-list-view'),
      inserterSidebarToggleRef: getInserterSidebarToggleRef(),
      listViewToggleRef: getListViewToggleRef(),
      hasFixedToolbar: getSettings().hasFixedToolbar,
      showIconLabels: get('core', 'showIconLabels'),
      isDistractionFree: get('core', 'distractionFree'),
      isVisualMode: getEditorMode() === 'visual',
      isZoomedOutView: __unstableGetEditorMode() === 'zoom-out'
    };
  }, []);
  const preventDefault = event => {
    // Because the inserter behaves like a dialog,
    // if the inserter is opened already then when we click on the toggle button
    // then the initial click event will close the inserter and then be propagated
    // to the inserter toggle and it will open it again.
    // To prevent this we need to stop the propagation of the event.
    // This won't be necessary when the inserter no longer behaves like a dialog.

    if (isInserterOpened) {
      event.preventDefault();
    }
  };
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const isWideViewport = (0, _compose.useViewportMatch)('wide');

  /* translators: accessibility text for the editor toolbar */
  const toolbarAriaLabel = (0, _i18n.__)('Document tools');
  const toggleListView = (0, _element.useCallback)(() => setIsListViewOpened(!isListViewOpen), [setIsListViewOpened, isListViewOpen]);
  const toggleInserter = (0, _element.useCallback)(() => setIsInserterOpened(!isInserterOpened), [isInserterOpened, setIsInserterOpened]);

  /* translators: button label text should, if possible, be under 16 characters. */
  const longLabel = (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button');
  const shortLabel = !isInserterOpened ? (0, _i18n.__)('Add') : (0, _i18n.__)('Close');
  return (
    /*#__PURE__*/
    // Some plugins expect and use the `edit-post-header-toolbar` CSS class to
    // find the toolbar and inject UI elements into it. This is not officially
    // supported, but we're keeping it in the list of class names for backwards
    // compatibility.
    (0, _jsxRuntime.jsx)(_blockEditor.NavigableToolbar, {
      className: (0, _clsx.default)('editor-document-tools', 'edit-post-header-toolbar', className),
      "aria-label": toolbarAriaLabel,
      variant: "unstyled",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "editor-document-tools__left",
        children: [!isDistractionFree && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
          ref: inserterSidebarToggleRef,
          as: _components.Button,
          className: "editor-document-tools__inserter-toggle",
          variant: "primary",
          isPressed: isInserterOpened,
          onMouseDown: preventDefault,
          onClick: toggleInserter,
          disabled: disableBlockTools,
          icon: _icons.plus,
          label: showIconLabels ? shortLabel : longLabel,
          showTooltip: !showIconLabels,
          "aria-expanded": isInserterOpened
        }), (isWideViewport || !showIconLabels) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [isLargeViewport && !hasFixedToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
            as: _blockEditor.ToolSelector,
            showTooltip: !showIconLabels,
            variant: showIconLabels ? 'tertiary' : undefined,
            disabled: disableBlockTools,
            size: "compact"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
            as: _undo.default,
            showTooltip: !showIconLabels,
            variant: showIconLabels ? 'tertiary' : undefined,
            size: "compact"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
            as: _redo.default,
            showTooltip: !showIconLabels,
            variant: showIconLabels ? 'tertiary' : undefined,
            size: "compact"
          }), !isDistractionFree && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
            as: _components.Button,
            className: "editor-document-tools__document-overview-toggle",
            icon: _icons.listView,
            disabled: disableBlockTools,
            isPressed: isListViewOpen
            /* translators: button label text should, if possible, be under 16 characters. */,
            label: (0, _i18n.__)('Document Overview'),
            onClick: toggleListView,
            shortcut: listViewShortcut,
            showTooltip: !showIconLabels,
            variant: showIconLabels ? 'tertiary' : undefined,
            "aria-expanded": isListViewOpen,
            ref: listViewToggleRef,
            size: "compact"
          })]
        })]
      })
    })
  );
}
var _default = exports.default = DocumentTools;
//# sourceMappingURL=index.js.map