@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 _element = require("@wordpress/element");

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

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

/**
 * WordPress dependencies
 */
const htmlElementMessages = {
  header: (0, _i18n.__)('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
  main: (0, _i18n.__)('The <main> element should be used for the primary content of your document only. '),
  section: (0, _i18n.__)("The <section> element should represent a standalone portion of the document that can't be better represented by another element."),
  article: (0, _i18n.__)('The <article> element should represent a self contained, syndicatable portion of the document.'),
  aside: (0, _i18n.__)("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
  footer: (0, _i18n.__)('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).')
};

function GroupEdit(_ref) {
  let {
    attributes,
    setAttributes,
    clientId
  } = _ref;
  const {
    hasInnerBlocks,
    themeSupportsLayout
  } = (0, _data.useSelect)(select => {
    var _getSettings;

    const {
      getBlock,
      getSettings
    } = select(_blockEditor.store);
    const block = getBlock(clientId);
    return {
      hasInnerBlocks: !!(block && block.innerBlocks.length),
      themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
    };
  }, [clientId]);
  const defaultLayout = (0, _blockEditor.useSetting)('layout') || {};
  const {
    tagName: TagName = 'div',
    templateLock,
    layout = {}
  } = attributes;
  const usedLayout = !(layout !== null && layout !== void 0 && layout.type) ? { ...defaultLayout,
    ...layout,
    type: 'default'
  } : { ...defaultLayout,
    ...layout
  };
  const {
    type = 'default'
  } = usedLayout;
  const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
  const blockProps = (0, _blockEditor.useBlockProps)();
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(layoutSupportEnabled ? blockProps : {
    className: 'wp-block-group__inner-container'
  }, {
    templateLock,
    renderAppender: hasInnerBlocks ? undefined : _blockEditor.InnerBlocks.ButtonBlockAppender,
    __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined
  });
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.InspectorControls, {
    __experimentalGroup: "advanced"
  }, (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n.__)('HTML element'),
    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'
    }],
    value: TagName,
    onChange: value => setAttributes({
      tagName: value
    }),
    help: htmlElementMessages[TagName]
  })), layoutSupportEnabled && (0, _element.createElement)(TagName, innerBlocksProps), !layoutSupportEnabled && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)("div", innerBlocksProps)));
}

var _default = GroupEdit;
exports.default = _default;
//# sourceMappingURL=edit.js.map