adding variation class depending on bg color

This commit is contained in:
Antoine M 2023-11-08 10:32:37 +01:00
parent 24e42caddd
commit 18138882f7
5 changed files with 11 additions and 7 deletions

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '57dc7a49cdb30881dfb6'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '64a8b0ab00b3947c6bbc');

View File

@ -41,6 +41,7 @@ function Edit({
bgColor bgColor
}); });
} }
const currentColorName = bgColor === "#F5F5F5" ? "gray" : "white";
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "Couleur de fond" title: "Couleur de fond"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
@ -56,7 +57,7 @@ function Edit({
onChange: onBgColorChange onChange: onBgColorChange
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `homegrade-content-blocks-content-box` className: `homegrade-content-blocks-content-box homegrade-content-blocks-content-box--${currentColorName}`
}), }),
style: { style: {
backgroundColor: bgColor backgroundColor: bgColor
@ -137,9 +138,10 @@ function save({
const { const {
bgColor bgColor
} = attributes; } = attributes;
const currentColorName = bgColor === "#F5F5F5" ? "gray" : "white";
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-content-blocks-content-box` className: `homegrade-content-blocks-content-box homegrade-content-blocks-content-box--${currentColorName}`
}), }),
style: { style: {
backgroundColor: bgColor backgroundColor: bgColor

File diff suppressed because one or more lines are too long

View File

@ -15,7 +15,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
function onBgColorChange(bgColor) { function onBgColorChange(bgColor) {
setAttributes({ bgColor }); setAttributes({ bgColor });
} }
const currentColorName = bgColor === "#F5F5F5" ? "gray" : "white";
return ( return (
<> <>
<InspectorControls> <InspectorControls>
@ -39,7 +39,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
</InspectorControls> </InspectorControls>
<section <section
{...useBlockProps({ {...useBlockProps({
className: `homegrade-content-blocks-content-box`, className: `homegrade-content-blocks-content-box homegrade-content-blocks-content-box--${currentColorName}`,
})} })}
style={{ style={{
backgroundColor: bgColor, backgroundColor: bgColor,

View File

@ -2,10 +2,12 @@ import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { bgColor } = attributes; const { bgColor } = attributes;
const currentColorName = bgColor === "#F5F5F5" ? "gray" : "white";
return ( return (
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `homegrade-content-blocks-content-box`, className: `homegrade-content-blocks-content-box homegrade-content-blocks-content-box--${currentColorName}`,
})} })}
style={{ style={{
backgroundColor: bgColor, backgroundColor: bgColor,