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

Generic block editor.

"use strict";

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

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

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

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

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

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

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

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

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

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

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

var _block = require("../block-list/block");

var _blockSelectButton = _interopRequireDefault(require("./block-select-button"));

var _utils = require("./utils");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const getSlotName = clientId => `BlockNavigationBlock-${clientId}`;

function BlockNavigationBlockSlot(props, ref) {
  const {
    clientId
  } = props.block;
  const {
    name
  } = (0, _data.useSelect)(select => select(_store.store).getBlockName(clientId), [clientId]);
  const instanceId = (0, _compose.useInstanceId)(BlockNavigationBlockSlot);
  return (0, _element.createElement)(_components.Slot, {
    name: getSlotName(clientId)
  }, fills => {
    if (!fills.length) {
      return (0, _element.createElement)(_blockSelectButton.default, (0, _extends2.default)({
        ref: ref
      }, props));
    }

    const {
      className,
      isSelected,
      position,
      siblingBlockCount,
      level,
      tabIndex,
      onFocus
    } = props;
    const blockType = (0, _blocks.getBlockType)(name);
    const descriptionId = `block-navigation-block-slot__${instanceId}`;
    const blockPositionDescription = (0, _utils.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 (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
      className: (0, _classnames.default)('block-editor-block-navigation-block-slot', className)
    }, (0, _element.createElement)(_blockIcon.default, {
      icon: blockType.icon,
      showColors: true
    }), _element.Children.map(fills, fill => (0, _element.cloneElement)(fill, { ...fill.props,
      ...forwardedFillProps
    })), isSelected && (0, _element.createElement)(_components.VisuallyHidden, null, (0, _i18n.__)('(selected block)')), (0, _element.createElement)("div", {
      className: "block-editor-block-navigation-block-slot__description",
      id: descriptionId
    }, blockPositionDescription)));
  });
}

var _default = (0, _element.forwardRef)(BlockNavigationBlockSlot);

exports.default = _default;

const BlockNavigationBlockFill = props => {
  const {
    clientId
  } = (0, _element.useContext)(_block.BlockListBlockContext);
  return (0, _element.createElement)(_components.Fill, (0, _extends2.default)({}, props, {
    name: getSlotName(clientId)
  }));
};

exports.BlockNavigationBlockFill = BlockNavigationBlockFill;
//# sourceMappingURL=block-slot.js.map