@wordpress/block-library
Version:
Block library for the WordPress editor.
103 lines (100 loc) • 3.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = QueryPlaceholder;
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _utils = require("../utils");
var _patternSelection = require("./pattern-selection");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function QueryPlaceholder({
attributes,
clientId,
name,
openPatternSelectionModal
}) {
const [isStartingBlank, setIsStartingBlank] = (0, _element.useState)(false);
const blockProps = (0, _blockEditor.useBlockProps)();
const {
blockType,
activeBlockVariation
} = (0, _data.useSelect)(select => {
const {
getActiveBlockVariation,
getBlockType
} = select(_blocks.store);
return {
blockType: getBlockType(name),
activeBlockVariation: getActiveBlockVariation(name, attributes)
};
}, [name, attributes]);
const hasPatterns = !!(0, _patternSelection.useBlockPatterns)(clientId, attributes).length;
const icon = activeBlockVariation?.icon?.src || activeBlockVariation?.icon || blockType?.icon?.src;
const label = activeBlockVariation?.title || blockType?.title;
if (isStartingBlank) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryVariationPicker, {
clientId: clientId,
attributes: attributes,
icon: icon,
label: label
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...blockProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Placeholder, {
icon: icon,
label: label,
instructions: (0, _i18n.__)('Choose a pattern for the query loop or start blank.'),
children: [!!hasPatterns && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "primary",
onClick: openPatternSelectionModal,
children: (0, _i18n.__)('Choose')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "secondary",
onClick: () => {
setIsStartingBlank(true);
},
children: (0, _i18n.__)('Start blank')
})]
})
});
}
function QueryVariationPicker({
clientId,
attributes,
icon,
label
}) {
const scopeVariations = (0, _utils.useScopedBlockVariations)(attributes);
const {
replaceInnerBlocks
} = (0, _data.useDispatch)(_blockEditor.store);
const blockProps = (0, _blockEditor.useBlockProps)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...blockProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockVariationPicker, {
icon: icon,
label: label,
variations: scopeVariations,
onSelect: variation => {
if (variation.innerBlocks) {
replaceInnerBlocks(clientId, (0, _blocks.createBlocksFromInnerBlocksTemplate)(variation.innerBlocks), false);
}
}
})
});
}
//# sourceMappingURL=query-placeholder.js.map