@wordpress/block-editor/build-module/components/block-navigation/block-slot.js

Generic block editor.

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

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

import { getBlockType } from '@wordpress/blocks';
import { Fill, Slot, VisuallyHidden } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { Children, cloneElement, forwardRef, useContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import BlockIcon from '../block-icon';
import { BlockListBlockContext } from '../block-list/block';
import BlockNavigationBlockSelectButton from './block-select-button';
import { getBlockPositionDescription } from './utils';
import { store as blockEditorStore } from '../../store';

const getSlotName = clientId => `BlockNavigationBlock-${clientId}`;

function BlockNavigationBlockSlot(props, ref) {
  const {
    clientId
  } = props.block;
  const {
    name
  } = useSelect(select => select(blockEditorStore).getBlockName(clientId), [clientId]);
  const instanceId = useInstanceId(BlockNavigationBlockSlot);
  return createElement(Slot, {
    name: getSlotName(clientId)
  }, fills => {
    if (!fills.length) {
      return createElement(BlockNavigationBlockSelectButton, _extends({
        ref: ref
      }, props));
    }

    const {
      className,
      isSelected,
      position,
      siblingBlockCount,
      level,
      tabIndex,
      onFocus
    } = props;
    const blockType = getBlockType(name);
    const descriptionId = `block-navigation-block-slot__${instanceId}`;
    const blockPositionDescription = getBlockPositionDescription(position, siblingBlockCount, level);
    const forwardedFillProps = {
      // Ensure that the component in the slot can receive
      // keyboard navigation.
      tabIndex,
      onFocus,
      ref,
      // Give the element rendered in the slot a description
      // that describes its position.
      'aria-describedby': descriptionId
    };
    return createElement(Fragment, null, createElement("div", {
      className: classnames('block-editor-block-navigation-block-slot', className)
    }, createElement(BlockIcon, {
      icon: blockType.icon,
      showColors: true
    }), Children.map(fills, fill => cloneElement(fill, { ...fill.props,
      ...forwardedFillProps
    })), isSelected && createElement(VisuallyHidden, null, __('(selected block)')), createElement("div", {
      className: "block-editor-block-navigation-block-slot__description",
      id: descriptionId
    }, blockPositionDescription)));
  });
}

export default forwardRef(BlockNavigationBlockSlot);
export const BlockNavigationBlockFill = props => {
  const {
    clientId
  } = useContext(BlockListBlockContext);
  return createElement(Fill, _extends({}, props, {
    name: getSlotName(clientId)
  }));
};
//# sourceMappingURL=block-slot.js.map