@wordpress/block-editor/build/components/block-mover/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _blockDraggable = _interopRequireDefault(require("../block-draggable"));
var _button = require("./button");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function BlockMover({
  clientIds,
  hideDragHandle,
  isBlockMoverUpButtonDisabled,
  isBlockMoverDownButtonDisabled
}) {
  const {
    canMove,
    rootClientId,
    isFirst,
    isLast,
    orientation,
    isManualGrid
  } = (0, _data.useSelect)(select => {
    var _getBlockAttributes;
    const {
      getBlockIndex,
      getBlockListSettings,
      canMoveBlocks,
      getBlockOrder,
      getBlockRootClientId,
      getBlockAttributes
    } = select(_store.store);
    const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
    const firstClientId = normalizedClientIds[0];
    const _rootClientId = getBlockRootClientId(firstClientId);
    const firstIndex = getBlockIndex(firstClientId);
    const lastIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]);
    const blockOrder = getBlockOrder(_rootClientId);
    const {
      layout = {}
    } = (_getBlockAttributes = getBlockAttributes(_rootClientId)) !== null && _getBlockAttributes !== void 0 ? _getBlockAttributes : {};
    return {
      canMove: canMoveBlocks(clientIds),
      rootClientId: _rootClientId,
      isFirst: firstIndex === 0,
      isLast: lastIndex === blockOrder.length - 1,
      orientation: getBlockListSettings(_rootClientId)?.orientation,
      isManualGrid: layout.type === 'grid' && layout.isManualPlacement && window.__experimentalEnableGridInteractivity
    };
  }, [clientIds]);
  if (!canMove || isFirst && isLast && !rootClientId || hideDragHandle && isManualGrid) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
    className: (0, _clsx.default)('block-editor-block-mover', {
      'is-horizontal': orientation === 'horizontal'
    }),
    children: [!hideDragHandle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockDraggable.default, {
      clientIds: clientIds,
      fadeWhenDisabled: true,
      children: draggableProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        icon: _icons.dragHandle,
        className: "block-editor-block-mover__drag-handle",
        label: (0, _i18n.__)('Drag')
        // Should not be able to tab to drag handle as this
        // button can only be used with a pointer device.
        ,
        tabIndex: "-1",
        ...draggableProps
      })
    }), !isManualGrid && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-block-mover__move-button-container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
        children: itemProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.BlockMoverUpButton, {
          disabled: isBlockMoverUpButtonDisabled,
          clientIds: clientIds,
          ...itemProps
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
        children: itemProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.BlockMoverDownButton, {
          disabled: isBlockMoverDownButtonDisabled,
          clientIds: clientIds,
          ...itemProps
        })
      })]
    })]
  });
}

/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
 */
var _default = exports.default = BlockMover;
//# sourceMappingURL=index.js.map