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

Edit Post module for WordPress.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useViewportMatch } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { __, _x } from '@wordpress/i18n';
import { BlockToolbar, NavigableToolbar, BlockNavigationDropdown, ToolSelector, store as blockEditorStore } from '@wordpress/block-editor';
import { TableOfContents, EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
import { Button, ToolbarItem } from '@wordpress/components';
import { plus } from '@wordpress/icons';
import { useRef } from '@wordpress/element';
/**
 * Internal dependencies
 */

import TemplateTitle from '../template-title';
import { store as editPostStore } from '../../../store';

function HeaderToolbar() {
  const inserterButton = useRef();
  const {
    setIsInserterOpened
  } = useDispatch(editPostStore);
  const {
    hasFixedToolbar,
    isInserterEnabled,
    isInserterOpened,
    isTextModeEnabled,
    previewDeviceType,
    showIconLabels,
    isTemplateMode
  } = useSelect(select => {
    const {
      hasInserterItems,
      getBlockRootClientId,
      getBlockSelectionEnd
    } = select(blockEditorStore);
    return {
      hasFixedToolbar: select(editPostStore).isFeatureActive('fixedToolbar'),
      // This setting (richEditingEnabled) should not live in the block editor's setting.
      isInserterEnabled: select(editPostStore).getEditorMode() === 'visual' && select('core/editor').getEditorSettings().richEditingEnabled && hasInserterItems(getBlockRootClientId(getBlockSelectionEnd())),
      isInserterOpened: select(editPostStore).isInserterOpened(),
      isTextModeEnabled: select(editPostStore).getEditorMode() === 'text',
      previewDeviceType: select(editPostStore).__experimentalGetPreviewDeviceType(),
      showIconLabels: select(editPostStore).isFeatureActive('showIconLabels'),
      isTemplateMode: select(editPostStore).isEditingTemplate()
    };
  }, []);
  const isLargeViewport = useViewportMatch('medium');
  const isWideViewport = useViewportMatch('wide');
  const displayBlockToolbar = !isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
  const toolbarAriaLabel = displayBlockToolbar ?
  /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
  __('Document and block tools') :
  /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
  __('Document tools');
  const overflowItems = createElement(Fragment, null, createElement(ToolbarItem, {
    as: TableOfContents,
    hasOutlineItemsDisabled: isTextModeEnabled,
    repositionDropdown: showIconLabels && !isWideViewport,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), createElement(ToolbarItem, {
    as: BlockNavigationDropdown,
    isDisabled: isTextModeEnabled,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }));
  return createElement(NavigableToolbar, {
    className: "edit-post-header-toolbar",
    "aria-label": toolbarAriaLabel
  }, createElement("div", {
    className: "edit-post-header-toolbar__left"
  }, createElement(ToolbarItem, {
    ref: inserterButton,
    as: 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: plus
    /* translators: button label text should, if possible, be under 16
    characters. */
    ,
    label: _x('Toggle block inserter', 'Generic label for block inserter button'),
    showTooltip: !showIconLabels
  }, showIconLabels && __('Add')), (isWideViewport || !showIconLabels) && createElement(Fragment, null, isLargeViewport && createElement(ToolbarItem, {
    as: ToolSelector,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels,
    disabled: isTextModeEnabled
  }), createElement(ToolbarItem, {
    as: EditorHistoryUndo,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), createElement(ToolbarItem, {
    as: EditorHistoryRedo,
    showTooltip: !showIconLabels,
    isTertiary: showIconLabels
  }), overflowItems)), createElement(TemplateTitle, null), displayBlockToolbar && createElement("div", {
    className: classnames('edit-post-header-toolbar__block-toolbar', {
      'is-pushed-down': isTemplateMode
    })
  }, createElement(BlockToolbar, {
    hideDragHandle: true
  })));
}

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