@wordpress/block-editor
Version:
97 lines (94 loc) • 3.59 kB
JavaScript
/**
* WordPress dependencies
*/
import { ToolbarButton, ToolbarGroup, Icon, Path, SVG } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import useStylesForBlocks from '../block-styles/use-styles-for-block';
import { replaceActiveStyle } from '../block-styles/utils';
import { store as blockEditorStore } from '../../store';
import { GlobalStylesContext } from '../global-styles';
import { globalStylesDataKey } from '../../store/private-keys';
import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styleIcon = /*#__PURE__*/_jsxs(SVG, {
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
"aria-hidden": "true",
focusable: "false",
children: [/*#__PURE__*/_jsx(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__*/_jsx(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
} = useStylesForBlocks({
clientId
});
const {
updateBlockAttributes
} = useDispatch(blockEditorStore);
// Get global styles data
const {
merged: mergedConfig
} = useContext(GlobalStylesContext);
const {
globalSettings,
globalStyles,
blockName
} = useSelect(select => {
const settings = select(blockEditorStore).getSettings();
return {
globalSettings: settings.__experimentalFeatures,
globalStyles: settings[globalStylesDataKey],
blockName: select(blockEditorStore).getBlockName(clientId)
};
}, [clientId]);
// Get the background color for the active style
const activeStyleBackground = activeStyle?.name ? 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 = replaceActiveStyle(className, activeStyle, nextStyle);
updateBlockAttributes(clientId, {
className: styleClassName
});
};
return /*#__PURE__*/_jsx(ToolbarGroup, {
children: /*#__PURE__*/_jsx(ToolbarButton, {
onClick: handleStyleSwitch,
label: __('Shuffle styles'),
children: /*#__PURE__*/_jsx(Icon, {
icon: styleIcon,
style: {
fill: activeStyleBackground || 'transparent'
}
})
})
});
}
export default SwitchSectionStyle;
//# sourceMappingURL=switch-section-style.js.map