@wordpress/block-editor/build/components/convert-to-group-buttons/toolbar.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _convertToGroupButtons = require("../convert-to-group-buttons");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const layouts = {
  group: {
    type: 'constrained'
  },
  row: {
    type: 'flex',
    flexWrap: 'nowrap'
  },
  stack: {
    type: 'flex',
    orientation: 'vertical'
  },
  grid: {
    type: 'grid'
  }
};
function BlockGroupToolbar() {
  const {
    blocksSelection,
    clientIds,
    groupingBlockName,
    isGroupable
  } = (0, _convertToGroupButtons.useConvertToGroupButtonProps)();
  const {
    replaceBlocks
  } = (0, _data.useDispatch)(_store.store);
  const {
    canRemove,
    variations
  } = (0, _data.useSelect)(select => {
    const {
      canRemoveBlocks
    } = select(_store.store);
    const {
      getBlockVariations
    } = select(_blocks.store);
    return {
      canRemove: canRemoveBlocks(clientIds),
      variations: getBlockVariations(groupingBlockName, 'transform')
    };
  }, [clientIds, groupingBlockName]);
  const onConvertToGroup = layout => {
    const newBlocks = (0, _blocks.switchToBlockType)(blocksSelection, groupingBlockName);
    if (typeof layout !== 'string') {
      layout = 'group';
    }
    if (newBlocks && newBlocks.length > 0) {
      // Because the block is not in the store yet we can't use
      // updateBlockAttributes so need to manually update attributes.
      newBlocks[0].attributes.layout = layouts[layout];
      replaceBlocks(clientIds, newBlocks);
    }
  };
  const onConvertToRow = () => onConvertToGroup('row');
  const onConvertToStack = () => onConvertToGroup('stack');
  const onConvertToGrid = () => onConvertToGroup('grid');

  // Don't render the button if the current selection cannot be grouped.
  // A good example is selecting multiple button blocks within a Buttons block:
  // The group block is not a valid child of Buttons, so we should not show the button.
  // Any blocks that are locked against removal also cannot be grouped.
  if (!isGroupable || !canRemove) {
    return null;
  }
  const canInsertRow = !!variations.find(({
    name
  }) => name === 'group-row');
  const canInsertStack = !!variations.find(({
    name
  }) => name === 'group-stack');
  const canInsertGrid = !!variations.find(({
    name
  }) => name === 'group-grid');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: _icons.group,
      label: (0, _i18n._x)('Group', 'action: convert blocks to group'),
      onClick: onConvertToGroup
    }), canInsertRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: _icons.row,
      label: (0, _i18n._x)('Row', 'action: convert blocks to row'),
      onClick: onConvertToRow
    }), canInsertStack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: _icons.stack,
      label: (0, _i18n._x)('Stack', 'action: convert blocks to stack'),
      onClick: onConvertToStack
    }), canInsertGrid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: _icons.grid,
      label: (0, _i18n._x)('Grid', 'action: convert blocks to grid'),
      onClick: onConvertToGrid
    })]
  });
}
var _default = exports.default = BlockGroupToolbar;
//# sourceMappingURL=toolbar.js.map