Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR FIX Handling fallback colors with text ang bg colors

Browse Source
This commit is contained in:
Antoine M 2025-07-15 10:42:18 +02:00
parent d73c7d259b
commit 845b7b56f6
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/carhop-blocks/blocks/content-box/src/edit.js
View File

@ -21,12 +21,17 @@ import {
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme"); const colors = useSetting("color.palette.theme");
const { hasBackgroundColor, backgroundColor, textColor } = attributes; const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
attributes;
const isLightBackgroundColor = isColorLight(backgroundColor);
console.log(isLightBackgroundColor);
function onBackgroundColorChange(value) { function onBackgroundColorChange(value) {
if (value === undefined) {
setAttributes({ hasBackgroundColor: false });
setAttributes({ backgroundColor: "transparent" });
}
const isLightBackgroundColor = isColorLight(backgroundColor);
setAttributes({ hasLightBackground: isLightBackgroundColor });
setAttributes({ backgroundColor: value }); setAttributes({ backgroundColor: value });
} }
function onHasBackgroundColorChange(value) { function onHasBackgroundColorChange(value) {
@ -78,13 +83,15 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<section <section
{...useBlockProps({ {...useBlockProps({
className: `content-box ${ className: `content-box ${
isLightBackgroundColor hasLightBackground
? "content-box--bg-light" ? "content-box--bg-light"
: "content-box--bg-dark" : "content-box--bg-dark"
}`, }`,
style: { style: {
"--content-box-background-color": backgroundColor, "--content-box-text-color": textColor ?? "inherit",
"--content-box-text-color": textColor, "--content-box-background-color": hasBackgroundColor
? backgroundColor
: "transparent",
}, },
})} })}
> >
@ -96,6 +103,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
allowedBlocks={[ allowedBlocks={[
"core/heading", "core/heading",
"core/paragraph", "core/paragraph",
"core/group",
"core/list", "core/list",
"core/button", "core/button",
"core/buttons", "core/buttons",

14
plugins/carhop-blocks/blocks/content-box/src/save.js
View File

@ -2,19 +2,19 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { isColorLight } from "../../_utilities/utilities"; import { isColorLight } from "../../_utilities/utilities";
export default function save({ attributes }) { export default function save({ attributes }) {
const { hasBackgroundColor, backgroundColor, textColor } = attributes; const { backgroundColor, textColor, hasLightBackground, hasBackgroundColor } =
const isLightBackgroundColor = isColorLight(backgroundColor); attributes;
return ( return (
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `content-box ${ className: `content-box ${
isLightBackgroundColor hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
? "content-box--bg-light"
: "content-box--bg-dark"
}`, }`,
style: { style: {
"--content-box-background-color": backgroundColor, "--content-box-text-color": textColor ?? "inherit",
"--content-box-text-color": textColor, "--content-box-background-color": hasBackgroundColor
? backgroundColor
: "transparent",
}, },
})} })}
> >