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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.useShouldShowPlaceHolder = useShouldShowPlaceHolder;
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Returns a custom variation icon.
 *
 * @param {string} name The block variation name.
 *
 * @return {JSX.Element} The SVG element.
 */const getGroupPlaceholderIcons = (name = 'group') => {
  const icons = {
    group: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
      xmlns: "http://www.w3.org/2000/svg",
      width: "48",
      height: "48",
      viewBox: "0 0 48 48",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
        d: "M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z"
      })
    }),
    'group-row': /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
      xmlns: "http://www.w3.org/2000/svg",
      width: "48",
      height: "48",
      viewBox: "0 0 48 48",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
        d: "M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z"
      })
    }),
    'group-stack': /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
      xmlns: "http://www.w3.org/2000/svg",
      width: "48",
      height: "48",
      viewBox: "0 0 48 48",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
        d: "M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z"
      })
    }),
    'group-grid': /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
      xmlns: "http://www.w3.org/2000/svg",
      width: "48",
      height: "48",
      viewBox: "0 0 48 48",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
        d: "M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z"
      })
    })
  };
  return icons?.[name];
};

/**
 * A custom hook to tell the Group block whether to show the variation placeholder.
 *
 * @param {Object}  props                  Arguments to pass to hook.
 * @param {Object}  [props.attributes]     The block's attributes.
 * @param {string}  [props.usedLayoutType] The block's current layout type.
 * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.
 *
 * @return {[boolean, Function]} A state value and setter function.
 */
function useShouldShowPlaceHolder({
  attributes = {
    style: undefined,
    backgroundColor: undefined,
    textColor: undefined,
    fontSize: undefined
  },
  usedLayoutType = '',
  hasInnerBlocks = false
}) {
  const {
    style,
    backgroundColor,
    textColor,
    fontSize
  } = attributes;
  /*
   * Shows the placeholder when no known styles are set,
   * or when a non-default layout has been selected.
   * Should the Group block support more style presets in the
   * future, e.g., attributes.spacingSize, we can add them to the
   * condition.
   */
  const [showPlaceholder, setShowPlaceholder] = (0, _element.useState)(!hasInnerBlocks && !backgroundColor && !fontSize && !textColor && !style && usedLayoutType !== 'flex' && usedLayoutType !== 'grid');
  (0, _element.useEffect)(() => {
    if (!!hasInnerBlocks || !!backgroundColor || !!fontSize || !!textColor || !!style || usedLayoutType === 'flex') {
      setShowPlaceholder(false);
    }
  }, [backgroundColor, fontSize, textColor, style, usedLayoutType, hasInnerBlocks]);
  return [showPlaceholder, setShowPlaceholder];
}

/**
 * Display group variations if none is selected.
 *
 * @param {Object}   props          Component props.
 * @param {string}   props.name     The block's name.
 * @param {Function} props.onSelect Function to set block's attributes.
 *
 * @return {JSX.Element}                The placeholder.
 */
function GroupPlaceHolder({
  name,
  onSelect
}) {
  const variations = (0, _data.useSelect)(select => select(_blocks.store).getBlockVariations(name, 'block'), [name]);
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: 'wp-block-group__placeholder'
  });
  (0, _element.useEffect)(() => {
    if (variations && variations.length === 1) {
      onSelect(variations[0]);
    }
  }, [onSelect, variations]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ...blockProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
      instructions: (0, _i18n.__)('Group blocks together. Select a layout:'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
        role: "list",
        className: "wp-block-group-placeholder__variations",
        "aria-label": (0, _i18n.__)('Block variations'),
        children: variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            icon: getGroupPlaceholderIcons(variation.name),
            iconSize: 48,
            onClick: () => onSelect(variation),
            className: "wp-block-group-placeholder__variation-button",
            label: `${variation.title}: ${variation.description}`
          })
        }, variation.name))
      })
    })
  });
}
var _default = exports.default = GroupPlaceHolder;
//# sourceMappingURL=placeholder.js.map