@wordpress/edit-post/build/components/header/header-toolbar/index.js

Edit Post module for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _i18n = require("@wordpress/i18n");

var _blockEditor = require("@wordpress/block-editor");

var _editor = require("@wordpress/editor");

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

var _templateTitle = _interopRequireDefault(require("../template-title"));

var _store = require("../../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function HeaderToolbar() {
  const inserterButton = (0, _element.useRef)();
  const {
    setIsInserterOpened
  } = (0, _data.useDispatch)(_store.store);
  const {
    hasFixedToolbar,
    isInserterEnabled,
    isInserterOpened,
    isTextModeEnabled,
    previewDeviceType,
    showIconLabels,
    isTemplateMode
  } = (0, _data.useSelect)(select => {
    const {
      hasInserterItems,
      getBlockRootClientId,
      getBlockSelectionEnd
    } = select(_blockEditor.store);
    return {
      hasFixedToolbar: select(_store.store).isFeatureActive('fixedToolbar'),
      // This setting (richEditingEnabled) should not live in the block editor's setting.
      isInserterEnabled: select(_store.store).getEditorMode() === 'visual' && select('core/editor').getEditorSettings().richEditingEnabled && hasInserterItems(getBlockRootClientId(getBlockSelectionEnd())),
      isInserterOpened: select(_store.store).isInserterOpened(),
      isTextModeEnabled: select(_store.store).getEditorMode() === 'text',
      previewDeviceType: select(_store.store).__experimentalGetPreviewDeviceType(),
      showIconLabels: select(_store.store).isFeatureActive('showIconLabels'),
      isTemplateMode: select(_store.store).isEditingTemplate()
    };
  }, []);
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const isWideViewport = (0, _compose.useViewportMatch)('wide');
  const displayBlockToolbar = !isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
  const toolbarAriaLabel = displayBlockToolbar ?
  /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
  (0, _i18n.__)('Document and block tools') :
  /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
  (0, _i18n.__)('Document tools');
  const overflowItems = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarItem, {
    as: _editor.TableOfContents,
    hasOutlineItemsDisabled: isTextModeEnabled,
    repositionDropdown: showIconLabels && !isWideViewport,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), (0, _element.createElement)(_components.ToolbarItem, {
    as: _blockEditor.BlockNavigationDropdown,
    isDisabled: isTextModeEnabled,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }));
  return (0, _element.createElement)(_blockEditor.NavigableToolbar, {
    className: "edit-post-header-toolbar",
    "aria-label": toolbarAriaLabel
  }, (0, _element.createElement)("div", {
    className: "edit-post-header-toolbar__left"
  }, (0, _element.createElement)(_components.ToolbarItem, {
    ref: inserterButton,
    as: _components.Button,
    className: "edit-post-header-toolbar__inserter-toggle",
    isPrimary: true,
    isPressed: isInserterOpened,
    onMouseDown: event => {
      event.preventDefault();
    },
    onClick: () => {
      if (isInserterOpened) {
        // Focusing the inserter button closes the inserter popover
        inserterButton.current.focus();
      } else {
        setIsInserterOpened(true);
      }
    },
    disabled: !isInserterEnabled,
    icon: _icons.plus
    /* translators: button label text should, if possible, be under 16
    characters. */
    ,
    label: (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button'),
    showTooltip: !showIconLabels
  }, showIconLabels && (0, _i18n.__)('Add')), (isWideViewport || !showIconLabels) && (0, _element.createElement)(_element.Fragment, null, isLargeViewport && (0, _element.createElement)(_components.ToolbarItem, {
    as: _blockEditor.ToolSelector,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels,
    disabled: isTextModeEnabled
  }), (0, _element.createElement)(_components.ToolbarItem, {
    as: _editor.EditorHistoryUndo,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), (0, _element.createElement)(_components.ToolbarItem, {
    as: _editor.EditorHistoryRedo,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), overflowItems)), (0, _element.createElement)(_templateTitle.default, null), displayBlockToolbar && (0, _element.createElement)("div", {
    className: (0, _classnames.default)('edit-post-header-toolbar__block-toolbar', {
      'is-pushed-down': isTemplateMode
    })
  }, (0, _element.createElement)(_blockEditor.BlockToolbar, {
    hideDragHandle: true
  })));
}

var _default = HeaderToolbar;
exports.default = _default;
//# sourceMappingURL=index.js.map