@wordpress/block-editor/build/components/inner-blocks/index.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.useInnerBlocksProps = useInnerBlocksProps;
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _buttonBlockAppender = _interopRequireDefault(require("./button-block-appender"));
var _defaultBlockAppender = _interopRequireDefault(require("./default-block-appender"));
var _useNestedSettingsUpdate = _interopRequireDefault(require("./use-nested-settings-update"));
var _useInnerBlockTemplateSync = _interopRequireDefault(require("./use-inner-block-template-sync"));
var _useBlockContext = _interopRequireDefault(require("./use-block-context"));
var _blockList = _interopRequireDefault(require("../block-list"));
var _context = require("../block-edit/context");
var _useBlockSync = _interopRequireDefault(require("../provider/use-block-sync"));
var _blockContext = require("../block-context");
var _layout = require("../block-list/layout");
var _store = require("../../store");
var _warningMaxDepthExceeded = _interopRequireDefault(require("./warning-max-depth-exceeded"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Internal dependencies
 */

/**
 * This hook is used to lightly mark an element as an inner blocks wrapper
 * element. Call this hook and pass the returned props to the element to mark as
 * an inner blocks wrapper, automatically rendering inner blocks as children. If
 * you define a ref for the element, it is important to pass the ref to this
 * hook, which the hook in turn will pass to the component through the props it
 * returns. Optionally, you can also pass any other props through this hook, and
 * they will be merged and returned.
 *
 * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
 *
 * @param {Object} props   Optional. Props to pass to the element. Must contain
 *                         the ref if one is defined.
 * @param {Object} options Optional. Inner blocks options.
 */
function useInnerBlocksProps(props = {}, options = {}) {
  const fallbackRef = (0, _element.useRef)();
  const {
    clientId
  } = (0, _context.useBlockEditContext)();
  const ref = props.ref || fallbackRef;
  const InnerBlocks = options.value && options.onChange ? ControlledInnerBlocks : UncontrolledInnerBlocks;
  return {
    ...props,
    ref,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerBlocks, {
      ...options,
      clientId: clientId,
      wrapperRef: ref
    })
  };
}

/**
 * InnerBlocks is a component which allows a single block to have multiple blocks
 * as children. The UncontrolledInnerBlocks component is used whenever the inner
 * blocks are not controlled by another entity. In other words, it is normally
 * used for inner blocks in the post editor
 *
 * @param {Object} props The component props.
 */
function UncontrolledInnerBlocks(props) {
  const {
    clientId,
    allowedBlocks,
    prioritizedInserterBlocks,
    defaultBlock,
    directInsert,
    __experimentalDefaultBlock,
    __experimentalDirectInsert,
    template,
    templateLock,
    templateInsertUpdatesSelection,
    __experimentalCaptureToolbars: captureToolbars,
    orientation,
    renderAppender,
    renderFooterAppender,
    parentWidth,
    horizontal,
    contentResizeMode,
    contentStyle,
    onAddBlock,
    onDeleteBlock,
    marginVertical,
    marginHorizontal,
    horizontalAlignment,
    filterInnerBlocks,
    blockWidth,
    layout = _layout.defaultLayout,
    gridProperties
  } = props;
  const context = (0, _useBlockContext.default)(clientId);
  const {
    nestingLevel,
    parentLock
  } = (0, _data.useSelect)(select => {
    const {
      getBlockParents,
      getTemplateLock,
      getBlockRootClientId
    } = select(_store.store);
    return {
      nestingLevel: getBlockParents(clientId)?.length,
      parentLock: getTemplateLock(getBlockRootClientId(clientId))
    };
  }, [clientId]);
  (0, _useNestedSettingsUpdate.default)(clientId, parentLock, allowedBlocks, prioritizedInserterBlocks, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, layout);
  (0, _useInnerBlockTemplateSync.default)(clientId, template, templateLock, templateInsertUpdatesSelection);
  if (nestingLevel >= _constants.MAX_NESTING_DEPTH) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningMaxDepthExceeded.default, {
      clientId: clientId
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.LayoutProvider, {
    value: layout,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockContext.BlockContextProvider, {
      value: context,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockList.default, {
        marginVertical: marginVertical,
        marginHorizontal: marginHorizontal,
        rootClientId: clientId,
        renderAppender: renderAppender,
        renderFooterAppender: renderFooterAppender,
        withFooter: false,
        orientation: orientation,
        parentWidth: parentWidth,
        horizontalAlignment: horizontalAlignment,
        horizontal: horizontal,
        contentResizeMode: contentResizeMode,
        contentStyle: contentStyle,
        onAddBlock: onAddBlock,
        onDeleteBlock: onDeleteBlock,
        filterInnerBlocks: filterInnerBlocks,
        gridProperties: gridProperties,
        blockWidth: blockWidth
      })
    })
  });
}

/**
 * The controlled inner blocks component wraps the uncontrolled inner blocks
 * component with the blockSync hook. This keeps the innerBlocks of the block in
 * the block-editor store in sync with the blocks of the controlling entity. An
 * example of an inner block controller is a template part block, which provides
 * its own blocks from the template part entity data source.
 *
 * @param {Object} props The component props.
 */
function ControlledInnerBlocks(props) {
  (0, _useBlockSync.default)(props);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(UncontrolledInnerBlocks, {
    ...props
  });
}

/**
 * Wrapped InnerBlocks component which detects whether to use the controlled or
 * uncontrolled variations of the InnerBlocks component. This is the component
 * which should be used throughout the application.
 *
 * @param {Object} props The component props.
 */
const InnerBlocks = props => {
  const {
    clientId
  } = (0, _context.useBlockEditContext)();
  const allProps = {
    clientId,
    ...props
  };

  // Detects if the InnerBlocks should be controlled by an incoming value.
  return props.value && props.onChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlledInnerBlocks, {
    ...allProps
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(UncontrolledInnerBlocks, {
    ...allProps
  });
};

// Expose default appender placeholders as components.
InnerBlocks.DefaultBlockAppender = _defaultBlockAppender.default;
InnerBlocks.ButtonBlockAppender = _buttonBlockAppender.default;
useInnerBlocksProps.save = _blocks.__unstableGetInnerBlocksProps;
InnerBlocks.Content = () => useInnerBlocksProps.save().children;

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