@wordpress/block-library
Version:
Block library for the WordPress editor.
155 lines (151 loc) • 5.92 kB
JavaScript
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
;