@wordpress/block-editor
Version:
119 lines (115 loc) • 4.33 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ChangeDesign;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _store = require("../../store");
var _blockPatternsList = _interopRequireDefault(require("../block-patterns-list"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_ARRAY = [];
const MAX_PATTERNS_TO_SHOW = 6;
const POPOVER_PROPS = {
placement: 'bottom-start'
};
function ChangeDesign({
clientId
}) {
const {
categories,
currentPatternName,
patterns
} = (0, _data.useSelect)(select => {
const {
getBlockAttributes,
getBlockRootClientId,
__experimentalGetAllowedPatterns
} = select(_store.store);
const attributes = getBlockAttributes(clientId);
const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
const rootBlock = getBlockRootClientId(clientId);
// Calling `__experimentalGetAllowedPatterns` is expensive.
// Checking if the block can be changed prevents unnecessary selector calls.
// See: https://github.com/WordPress/gutenberg/pull/64736.
const _patterns = _categories.length > 0 ? __experimentalGetAllowedPatterns(rootBlock) : EMPTY_ARRAY;
return {
categories: _categories,
currentPatternName: attributes?.metadata?.patternName,
patterns: _patterns
};
}, [clientId]);
const {
replaceBlocks
} = (0, _data.useDispatch)(_store.store);
const sameCategoryPatternsWithSingleWrapper = (0, _element.useMemo)(() => {
if (categories.length === 0 || !patterns || patterns.length === 0) {
return EMPTY_ARRAY;
}
return patterns.filter(pattern => {
const isCorePattern = pattern.source === 'core' || pattern.source?.startsWith('pattern-directory') && pattern.source !== 'pattern-directory/theme';
return (
// Check if the pattern has only one top level block,
// otherwise we may switch to a pattern that doesn't have replacement suggestions.
pattern.blocks.length === 1 &&
// We exclude the core patterns and pattern directory patterns that are not theme patterns.
!isCorePattern &&
// Exclude current pattern.
currentPatternName !== pattern.name && pattern.categories?.some(category => {
return categories.includes(category);
}) && (
// Check if the pattern is not a synced pattern.
pattern.syncStatus === 'unsynced' || !pattern.id)
);
}).slice(0, MAX_PATTERNS_TO_SHOW);
}, [categories, currentPatternName, patterns]);
if (sameCategoryPatternsWithSingleWrapper.length < 2) {
return null;
}
const onClickPattern = pattern => {
var _pattern$blocks;
const newBlocks = ((_pattern$blocks = pattern.blocks) !== null && _pattern$blocks !== void 0 ? _pattern$blocks : []).map(block => {
return (0, _blocks.cloneBlock)(block);
});
newBlocks[0].attributes.metadata = {
...newBlocks[0].attributes.metadata,
categories
};
replaceBlocks(clientId, newBlocks);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: POPOVER_PROPS,
renderToggle: ({
onToggle,
isOpen
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
onClick: () => onToggle(!isOpen),
"aria-expanded": isOpen,
children: (0, _i18n.__)('Change design')
})
});
},
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
className: "block-editor-block-toolbar-change-design-content-wrapper",
paddingSize: "none",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsList.default, {
blockPatterns: sameCategoryPatternsWithSingleWrapper,
onClickPattern: onClickPattern,
showTitlesAsTooltip: true
})
})
});
}
//# sourceMappingURL=change-design.js.map