adding variation class depending on bg color
This commit is contained in:
parent
24e42caddd
commit
18138882f7
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user