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