@wordpress/block-editor/build/components/block-list/block-list-item.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _data = require("@wordpress/data");
var _block = _interopRequireDefault(require("./block"));
var _gridItem = _interopRequireDefault(require("./grid-item"));
var _insertionPoint = _interopRequireDefault(require("./insertion-point"));
var _store = require("../../store");
var _useEditorWrapperStyles = require("../../hooks/use-editor-wrapper-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * BlockListItemContent component. Renders a block with an optional insertion point.
 *
 * @param {Object}   props                              Component properties.
 * @param {number}   props.blockWidth                   The width of the block.
 * @param {string}   props.clientId                     The block client ID.
 * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
 * @param {Object}   props.contentStyle                 Styles for the block content
 * @param {Object}   props.index                        Block item index
 * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
 * @param {number}   props.marginHorizontal             The horizontal margin.
 * @param {number}   props.marginVertical               The vertical margin.
 * @param {Function} props.onAddBlock                   On add block callback.
 * @param {Function} props.onDeleteBlock                On delete block callback.
 * @param {number}   props.parentWidth                  The width of the parent block.
 * @param {string}   props.rootClientId                 The root client ID.
 * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
 *
 * @return {Component} The rendered block list item content.
 */function BlockListItemContent({
  blockWidth,
  clientId,
  contentResizeMode,
  contentStyle,
  index,
  isStackedHorizontally,
  marginHorizontal,
  marginVertical,
  onAddBlock,
  onDeleteBlock,
  parentWidth,
  rootClientId,
  shouldShowInnerBlockAppender
}) {
  const {
    blockAlignment,
    blockName,
    hasParents,
    parentBlockAlignment,
    parentBlockName,
    shouldShowInsertionPointAfter,
    shouldShowInsertionPointBefore
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes,
      getBlockInsertionPoint,
      getBlockName,
      getBlockOrder,
      isBlockInsertionPointVisible
    } = select(_store.store);
    const blockClientIds = getBlockOrder(rootClientId);
    const insertionPoint = getBlockInsertionPoint();
    const insertionPointVisibleInCurrentRoot = !isStackedHorizontally && isBlockInsertionPointVisible() && insertionPoint.rootClientId === rootClientId;
    const isListEmpty = blockClientIds.length === 0;
    const isInsertionPointBeforeBlock = blockClientIds[insertionPoint.index] === clientId;
    const isInsertionPointAtEnd = blockClientIds.length === insertionPoint.index;
    const isBlockLastInList = blockClientIds[insertionPoint.index - 1] === clientId;
    const showInsertionPointBefore = insertionPointVisibleInCurrentRoot && (isListEmpty || isInsertionPointBeforeBlock);
    const showInsertionPointAfter = insertionPointVisibleInCurrentRoot && isInsertionPointAtEnd && isBlockLastInList;
    const blockHasParents = !!rootClientId;
    const name = getBlockName(clientId);
    const parentName = getBlockName(rootClientId);
    const {
      align
    } = getBlockAttributes(clientId) || {};
    const {
      textAlign: parentBlockAlign
    } = getBlockAttributes(rootClientId) || {};
    return {
      blockAlignment: align,
      blockName: name,
      hasParents: blockHasParents,
      parentBlockAlignment: parentBlockAlign,
      parentBlockName: parentName,
      shouldShowInsertionPointAfter: showInsertionPointAfter,
      shouldShowInsertionPointBefore: showInsertionPointBefore
    };
  }, [isStackedHorizontally, rootClientId, clientId]);
  const [wrapperStyles, margin] = (0, _useEditorWrapperStyles.useEditorWrapperStyles)({
    align: blockAlignment,
    blockName,
    blockWidth,
    contentResizeMode,
    hasParents,
    marginHorizontal,
    parentBlockAlignment,
    parentBlockName,
    parentWidth
  });
  const shouldShowBlockInsertionPointAfter = !shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: wrapperStyles,
    children: [shouldShowInsertionPointBefore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_insertionPoint.default, {
      testID: `block-insertion-point-before-row-${index + 1}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_block.default, {
      blockWidth: blockWidth,
      clientId: clientId,
      contentStyle: contentStyle,
      isStackedHorizontally: isStackedHorizontally,
      marginHorizontal: margin,
      marginVertical: marginVertical,
      onAddBlock: onAddBlock,
      parentBlockAlignment: parentBlockAlignment,
      onDeleteBlock: onDeleteBlock,
      parentWidth: parentWidth,
      rootClientId: rootClientId
    }), shouldShowBlockInsertionPointAfter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_insertionPoint.default, {
      testID: `block-insertion-point-after-row-${index + 1}`
    })]
  });
}

/**
 * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
 *
 * @param {Object}   props                              Component properties.
 * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
 * @param {number}   props.numOfColumns                 The number of columns for grid layout.
 * @param {number}   props.parentWidth                  The width of the parent block.
 * @param {number}   props.tileCount                    The total number of tiles in the grid.
 * @param {number}   props.tileIndex                    The index of the current tile in the grid.
 * @param {number}   props.blockWidth                   The width of the block.
 * @param {string}   props.clientId                     The block client ID.
 * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
 * @param {Object}   props.contentStyle                 Styles for the block content
 * @param {Object}   props.index                        Block item index
 * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
 * @param {number}   props.marginHorizontal             The horizontal margin.
 * @param {number}   props.marginVertical               The vertical margin.
 * @param {Function} props.onAddBlock                   On add block callback.
 * @param {Function} props.onDeleteBlock                On delete block callback.
 * @param {string}   props.rootClientId                 The root client ID.
 * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
 *
 * @return {Component|null} The rendered block list item or null if the block width is not provided.
 */
function BlockListItem(props) {
  const {
    isGridItem,
    numOfColumns,
    tileCount,
    tileIndex,
    ...restProps
  } = props;
  if (!props?.blockWidth) {
    return null;
  }
  if (isGridItem) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_gridItem.default, {
      maxWidth: props?.parentWidth,
      numOfColumns: numOfColumns,
      tileCount: tileCount,
      index: tileIndex,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockListItemContent, {
        ...restProps
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockListItemContent, {
    ...restProps
  });
}
var _default = exports.default = BlockListItem;
//# sourceMappingURL=block-list-item.native.js.map