@wordpress/block-editor/build/components/block-tools/block-contextual-toolbar.js

Generic block editor.

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _blocks = require("@wordpress/blocks");

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

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

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

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

var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));

var _blockToolbar = _interopRequireDefault(require("../block-toolbar"));

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

var _blockIcon = _interopRequireDefault(require("../block-icon"));

var _lockUnlock = require("../../lock-unlock");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockContextualToolbar({
  focusOnMount,
  isFixed,
  ...props
}) {
  // When the toolbar is fixed it can be collapsed
  const [isCollapsed, setIsCollapsed] = (0, _element.useState)(false);
  const toolbarButtonRef = (0, _element.useRef)();
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const {
    blockType,
    hasParents,
    showParentSelector,
    selectedBlockClientId
  } = (0, _data.useSelect)(select => {
    const {
      getBlockName,
      getBlockParents,
      getSelectedBlockClientIds,
      getBlockEditingMode
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const {
      getBlockType
    } = select(_blocks.store);
    const selectedBlockClientIds = getSelectedBlockClientIds();
    const _selectedBlockClientId = selectedBlockClientIds[0];
    const parents = getBlockParents(_selectedBlockClientId);
    const firstParentClientId = parents[parents.length - 1];
    const parentBlockName = getBlockName(firstParentClientId);
    const parentBlockType = getBlockType(parentBlockName);
    return {
      selectedBlockClientId: _selectedBlockClientId,
      blockType: _selectedBlockClientId && getBlockType(getBlockName(_selectedBlockClientId)),
      hasParents: parents.length,
      showParentSelector: parentBlockType && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length <= 1 && getBlockEditingMode(_selectedBlockClientId) === 'default'
    };
  }, []);
  (0, _element.useEffect)(() => {
    setIsCollapsed(false);
  }, [selectedBlockClientId]);

  if (blockType && !(0, _blocks.hasBlockSupport)(blockType, '__experimentalToolbar', true)) {
    return null;
  } // Shifts the toolbar to make room for the parent block selector.


  const classes = (0, _classnames.default)('block-editor-block-contextual-toolbar', {
    'has-parent': hasParents && showParentSelector,
    'is-fixed': isFixed,
    'is-collapsed': isCollapsed
  });
  return (0, _element.createElement)(_navigableToolbar.default, (0, _extends2.default)({
    focusOnMount: focusOnMount,
    className: classes
    /* translators: accessibility text for the block toolbar */
    ,
    "aria-label": (0, _i18n.__)('Block tools')
  }, props), isFixed && isLargeViewport && blockType && (0, _element.createElement)(_components.ToolbarGroup, {
    className: isCollapsed ? 'block-editor-block-toolbar__group-expand-fixed-toolbar' : 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
  }, (0, _element.createElement)(_components.ToolbarItem, {
    as: _components.ToolbarButton,
    ref: toolbarButtonRef,
    icon: isCollapsed ? (0, _element.createElement)(_blockIcon.default, {
      icon: blockType.icon
    }) : _icons.levelUp,
    onClick: () => {
      setIsCollapsed(collapsed => !collapsed);
      toolbarButtonRef.current.focus();
    },
    label: isCollapsed ? (0, _i18n.__)('Show block tools') : (0, _i18n.__)('Show document tools')
  })), !isCollapsed && (0, _element.createElement)(_blockToolbar.default, {
    hideDragHandle: isFixed
  }));
}

var _default = BlockContextualToolbar;
exports.default = _default;
//# sourceMappingURL=block-contextual-toolbar.js.map