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

Generic block editor.

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

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

import { __ } from '@wordpress/i18n';
import { useEffect, useRef, useState } from '@wordpress/element';
import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { ToolbarItem, ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { levelUp } from '@wordpress/icons';
import { useViewportMatch } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import NavigableToolbar from '../navigable-toolbar';
import BlockToolbar from '../block-toolbar';
import { store as blockEditorStore } from '../../store';
import BlockIcon from '../block-icon';
import { unlock } from '../../lock-unlock';

function BlockContextualToolbar({
  focusOnMount,
  isFixed,
  ...props
}) {
  // When the toolbar is fixed it can be collapsed
  const [isCollapsed, setIsCollapsed] = useState(false);
  const toolbarButtonRef = useRef();
  const isLargeViewport = useViewportMatch('medium');
  const {
    blockType,
    hasParents,
    showParentSelector,
    selectedBlockClientId
  } = useSelect(select => {
    const {
      getBlockName,
      getBlockParents,
      getSelectedBlockClientIds,
      getBlockEditingMode
    } = unlock(select(blockEditorStore));
    const {
      getBlockType
    } = select(blocksStore);
    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 && hasBlockSupport(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length <= 1 && getBlockEditingMode(_selectedBlockClientId) === 'default'
    };
  }, []);
  useEffect(() => {
    setIsCollapsed(false);
  }, [selectedBlockClientId]);

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


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

export default BlockContextualToolbar;
//# sourceMappingURL=block-contextual-toolbar.js.map