@wordpress/block-editor/build/components/html-element-control/index.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = HTMLElementControl;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _store = require("../../store");
var _messages = require("./messages");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders a SelectControl for choosing HTML elements with validation
 * to prevent duplicate <main> elements.
 *
 * @param {Object}   props          Component props.
 * @param {string}   props.tagName  The current HTML tag name.
 * @param {Function} props.onChange Function to call when the tag is changed.
 * @param {string}   props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.
 * @param {Array}    props.options  SelectControl options (optional).
 *
 * @return {Component} The HTML element select control with validation.
 */function HTMLElementControl({
  tagName,
  onChange,
  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'
  }]
}) {
  const checkForMainTag = !!clientId && options.some(option => option.value === 'main');
  const hasMainElementElsewhere = (0, _data.useSelect)(select => {
    if (!checkForMainTag) {
      return false;
    }
    const {
      getClientIdsWithDescendants,
      getBlockAttributes
    } = select(_store.store);
    return getClientIdsWithDescendants().some(id => {
      // Skip the current block.
      if (id === clientId) {
        return false;
      }
      return getBlockAttributes(id)?.tagName === 'main';
    });
  }, [clientId, checkForMainTag]);

  // Create a modified options array that disables the main option if needed.
  const modifiedOptions = options.map(option => {
    if (option.value === 'main' && hasMainElementElsewhere && tagName !== 'main') {
      return {
        ...option,
        disabled: true,
        label: (0, _i18n.sprintf)(/* translators: %s: HTML element name */
        (0, _i18n.__)('%s (Already in use)'), option.label)
      };
    }
    return option;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 2,
    className: "block-editor-html-element-control",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
      label: (0, _i18n.__)('HTML element'),
      options: modifiedOptions,
      value: tagName,
      onChange: onChange,
      help: _messages.htmlElementMessages[tagName]
    }), tagName === 'main' && hasMainElementElsewhere && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
      status: "warning",
      isDismissible: false,
      children: (0, _i18n.__)('Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.')
    })]
  });
}
//# sourceMappingURL=index.js.map