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

Generic block editor.

// packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
import { useDispatch, useSelect } from "@wordpress/data";
import { switchToBlockType, store as blocksStore } from "@wordpress/blocks";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { group, row, stack, grid } from "@wordpress/icons";
import { _x } from "@wordpress/i18n";
import { useConvertToGroupButtonProps } from "../convert-to-group-buttons";
import { store as blockEditorStore } from "../../store";
import { jsx, jsxs } from "react/jsx-runtime";
var layouts = {
  group: { type: "constrained" },
  row: { type: "flex", flexWrap: "nowrap" },
  stack: { type: "flex", orientation: "vertical" },
  grid: { type: "grid" }
};
function BlockGroupToolbar() {
  const { blocksSelection, clientIds, groupingBlockName, isGroupable } = useConvertToGroupButtonProps();
  const { replaceBlocks } = useDispatch(blockEditorStore);
  const { canRemove, variations } = useSelect(
    (select) => {
      const { canRemoveBlocks } = select(blockEditorStore);
      const { getBlockVariations } = select(blocksStore);
      return {
        canRemove: canRemoveBlocks(clientIds),
        variations: getBlockVariations(
          groupingBlockName,
          "transform"
        )
      };
    },
    [clientIds, groupingBlockName]
  );
  const onConvertToGroup = (layout) => {
    const newBlocks = switchToBlockType(
      blocksSelection,
      groupingBlockName
    );
    if (typeof layout !== "string") {
      layout = "group";
    }
    if (newBlocks && newBlocks.length > 0) {
      newBlocks[0].attributes.layout = layouts[layout];
      replaceBlocks(clientIds, newBlocks);
    }
  };
  const onConvertToRow = () => onConvertToGroup("row");
  const onConvertToStack = () => onConvertToGroup("stack");
  const onConvertToGrid = () => onConvertToGroup("grid");
  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__ */ jsxs(ToolbarGroup, { children: [
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: group,
        label: _x("Group", "action: convert blocks to group"),
        onClick: onConvertToGroup
      }
    ),
    canInsertRow && /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: row,
        label: _x("Row", "action: convert blocks to row"),
        onClick: onConvertToRow
      }
    ),
    canInsertStack && /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: stack,
        label: _x("Stack", "action: convert blocks to stack"),
        onClick: onConvertToStack
      }
    ),
    canInsertGrid && /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: grid,
        label: _x("Grid", "action: convert blocks to grid"),
        onClick: onConvertToGrid
      }
    )
  ] });
}
var toolbar_default = BlockGroupToolbar;
export {
  toolbar_default as default
};
//# sourceMappingURL=toolbar.js.map