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

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useSelect } from '@wordpress/data';
import { InnerBlocks, useBlockProps, InspectorControls, useInnerBlocksProps, useSetting, store as blockEditorStore } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const htmlElementMessages = {
  header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
  main: __('The <main> element should be used for the primary content of your document only. '),
  section: __("The <section> element should represent a standalone portion of the document that can't be better represented by another element."),
  article: __('The <article> element should represent a self contained, syndicatable portion of the document.'),
  aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
  footer: __('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
  } = useSelect(select => {
    var _getSettings;

    const {
      getBlock,
      getSettings
    } = select(blockEditorStore);
    const block = getBlock(clientId);
    return {
      hasInnerBlocks: !!(block && block.innerBlocks.length),
      themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
    };
  }, [clientId]);
  const defaultLayout = 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 = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps(layoutSupportEnabled ? blockProps : {
    className: 'wp-block-group__inner-container'
  }, {
    templateLock,
    renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender,
    __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined
  });
  return createElement(Fragment, null, createElement(InspectorControls, {
    __experimentalGroup: "advanced"
  }, createElement(SelectControl, {
    label: __('HTML element'),
    options: [{
      label: __('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 && createElement(TagName, innerBlocksProps), !layoutSupportEnabled && createElement(TagName, blockProps, createElement("div", innerBlocksProps)));
}

export default GroupEdit;
//# sourceMappingURL=edit.js.map