@wordpress/block-editor/build/components/convert-to-group-buttons/use-convert-to-group-button-props.js

Generic block editor.

"use strict";

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

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

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

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Contains the properties `ConvertToGroupButton` component needs.
 *
 * @typedef {Object} ConvertToGroupButtonProps
 * @property {string[]}  clientIds         An array of the selected client ids.
 * @property {boolean}   isGroupable       Indicates if the selected blocks can be grouped.
 * @property {boolean}   isUngroupable     Indicates if the selected blocks can be ungrouped.
 * @property {WPBlock[]} blocksSelection   An array of the selected blocks.
 * @property {string}    groupingBlockName The name of block used for handling grouping interactions.
 */

/**
 * Returns the properties `ConvertToGroupButton` component needs to work properly.
 * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
 * should be rendered, to avoid ending up with an empty MenuGroup.
 *
 * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
 *                                      from the block editor store are used if this is not provided.
 *
 * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
 */
function useConvertToGroupButtonProps(selectedClientIds) {
  return (0, _data.useSelect)(select => {
    const {
      getBlockRootClientId,
      getBlocksByClientId,
      canInsertBlockType,
      getSelectedBlockClientIds
    } = select(_store.store);
    const {
      getGroupingBlockName,
      getBlockType
    } = select(_blocks.store);
    const clientIds = selectedClientIds?.length ? selectedClientIds : getSelectedBlockClientIds();
    const groupingBlockName = getGroupingBlockName();
    const rootClientId = clientIds?.length ? getBlockRootClientId(clientIds[0]) : undefined;
    const groupingBlockAvailable = canInsertBlockType(groupingBlockName, rootClientId);
    const blocksSelection = getBlocksByClientId(clientIds);
    const isSingleBlockSelected = blocksSelection.length === 1;
    const [firstSelectedBlock] = blocksSelection; // A block is ungroupable if it is a single grouping block with inner blocks.
    // If a block has an `ungroup` transform, it is also ungroupable, without the
    // requirement of being the default grouping block.
    // Do we have a single grouping Block selected and does that group have inner blocks?

    const isUngroupable = isSingleBlockSelected && (firstSelectedBlock.name === groupingBlockName || getBlockType(firstSelectedBlock.name)?.transforms?.ungroup) && !!firstSelectedBlock.innerBlocks.length; // Do we have
    // 1. Grouping block available to be inserted?
    // 2. One or more blocks selected

    const isGroupable = groupingBlockAvailable && blocksSelection.length;
    return {
      clientIds,
      isGroupable,
      isUngroupable,
      blocksSelection,
      groupingBlockName,
      onUngroup: isUngroupable && getBlockType(firstSelectedBlock.name)?.transforms?.ungroup
    };
  }, [selectedClientIds]);
}
//# sourceMappingURL=use-convert-to-group-button-props.js.map