@wordpress/block-library/build/group/edit.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _primitives = require("@wordpress/primitives");
var _placeholder = _interopRequireWildcard(require("./placeholder"));
var _lockUnlock = require("../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  HTMLElementControl
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);

/**
 * Render inspector controls for the Group block.
 *
 * @param {Object}   props                 Component props.
 * @param {string}   props.tagName         The HTML tag name.
 * @param {Function} props.onSelectTagName onChange function for the SelectControl.
 * @param {string}   props.clientId        The client ID of the current block.
 *
 * @return {JSX.Element}                The control group.
 */
function GroupEditControls({
  tagName,
  onSelectTagName,
  clientId
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    group: "advanced",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLElementControl, {
      tagName: tagName,
      onChange: onSelectTagName,
      clientId: clientId,
      options: [{
        label: (0, _i18n.__)('Default (<div>)'),
        value: 'div'
      }, {
        label: '<header>',
        value: 'header'
      }, {
        label: '<main>',
        value: 'main'
      }, {
        label: '<section>',
        value: 'section'
      }, {
        label: '<article>',
        value: 'article'
      }, {
        label: '<aside>',
        value: 'aside'
      }, {
        label: '<footer>',
        value: 'footer'
      }]
    })
  });
}
function GroupEdit({
  attributes,
  name,
  setAttributes,
  clientId
}) {
  const {
    hasInnerBlocks,
    themeSupportsLayout
  } = (0, _data.useSelect)(select => {
    const {
      getBlock,
      getSettings
    } = select(_blockEditor.store);
    const block = getBlock(clientId);
    return {
      hasInnerBlocks: !!(block && block.innerBlocks.length),
      themeSupportsLayout: getSettings()?.supportsLayout
    };
  }, [clientId]);
  const {
    tagName: TagName = 'div',
    templateLock,
    allowedBlocks,
    layout = {}
  } = attributes;

  // Layout settings.
  const {
    type = 'default'
  } = layout;
  const layoutSupportEnabled = themeSupportsLayout || type === 'flex' || type === 'grid';

  // Hooks.
  const ref = (0, _element.useRef)();
  const blockProps = (0, _blockEditor.useBlockProps)({
    ref
  });
  const [showPlaceholder, setShowPlaceholder] = (0, _placeholder.useShouldShowPlaceHolder)({
    attributes,
    usedLayoutType: type,
    hasInnerBlocks
  });

  // Default to the regular appender being rendered.
  let renderAppender;
  if (showPlaceholder) {
    // In the placeholder state, ensure the appender is not rendered.
    // This is needed because `...innerBlocksProps` is used in the placeholder
    // state so that blocks can dragged onto the placeholder area
    // from both the list view and in the editor canvas.
    renderAppender = false;
  } else if (!hasInnerBlocks) {
    // When there is no placeholder, but the block is also empty,
    // use the larger button appender.
    renderAppender = _blockEditor.InnerBlocks.ButtonBlockAppender;
  }
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(layoutSupportEnabled ? blockProps : {
    className: 'wp-block-group__inner-container'
  }, {
    dropZoneElement: ref.current,
    templateLock,
    allowedBlocks,
    renderAppender
  });
  const {
    selectBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  const selectVariation = nextVariation => {
    setAttributes(nextVariation.attributes);
    selectBlock(clientId, -1);
    setShowPlaceholder(false);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GroupEditControls, {
      tagName: TagName,
      onSelectTagName: value => setAttributes({
        tagName: value
      }),
      clientId: clientId
    }), showPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.View, {
      children: [innerBlocksProps.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_placeholder.default, {
        name: name,
        onSelect: selectVariation
      })]
    }), layoutSupportEnabled && !showPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
      ...innerBlocksProps
    }), !layoutSupportEnabled && !showPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
      ...blockProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ...innerBlocksProps
      })
    })]
  });
}
var _default = exports.default = GroupEdit;
//# sourceMappingURL=edit.js.map