@wordpress/block-editor
Version:
105 lines (100 loc) • 3.98 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _useStylesForBlock = _interopRequireDefault(require("../block-styles/use-styles-for-block"));
var _utils = require("../block-styles/utils");
var _store = require("../../store");
var _globalStyles = require("../global-styles");
var _privateKeys = require("../../store/private-keys");
var _blockStyleVariation = require("../../hooks/block-style-variation");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const styleIcon = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
"aria-hidden": "true",
focusable: "false",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
stroke: "currentColor",
strokeWidth: "1.5",
d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
})]
});
function SwitchSectionStyle({
clientId
}) {
var _mergedConfig$setting, _mergedConfig$styles;
const {
stylesToRender,
activeStyle,
className
} = (0, _useStylesForBlock.default)({
clientId
});
const {
updateBlockAttributes
} = (0, _data.useDispatch)(_store.store);
// Get global styles data
const {
merged: mergedConfig
} = (0, _element.useContext)(_globalStyles.GlobalStylesContext);
const {
globalSettings,
globalStyles,
blockName
} = (0, _data.useSelect)(select => {
const settings = select(_store.store).getSettings();
return {
globalSettings: settings.__experimentalFeatures,
globalStyles: settings[_privateKeys.globalStylesDataKey],
blockName: select(_store.store).getBlockName(clientId)
};
}, [clientId]);
// Get the background color for the active style
const activeStyleBackground = activeStyle?.name ? (0, _blockStyleVariation.getVariationStylesWithRefValues)({
settings: (_mergedConfig$setting = mergedConfig?.settings) !== null && _mergedConfig$setting !== void 0 ? _mergedConfig$setting : globalSettings,
styles: (_mergedConfig$styles = mergedConfig?.styles) !== null && _mergedConfig$styles !== void 0 ? _mergedConfig$styles : globalStyles
}, blockName, activeStyle.name)?.color?.background : undefined;
if (!stylesToRender || stylesToRender.length === 0) {
return null;
}
const handleStyleSwitch = () => {
const currentIndex = stylesToRender.findIndex(style => style.name === activeStyle.name);
const nextIndex = (currentIndex + 1) % stylesToRender.length;
const nextStyle = stylesToRender[nextIndex];
const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, nextStyle);
updateBlockAttributes(clientId, {
className: styleClassName
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
onClick: handleStyleSwitch,
label: (0, _i18n.__)('Shuffle styles'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: styleIcon,
style: {
fill: activeStyleBackground || 'transparent'
}
})
})
});
}
var _default = exports.default = SwitchSectionStyle;
//# sourceMappingURL=switch-section-style.js.map