UNPKG

@wordpress/block-library

Version:
155 lines (151 loc) 5.92 kB
"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