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

FEATURE Handling content-card border

Browse Source
This commit is contained in:
Antoine M 2026-05-05 14:56:56 +02:00
parent e12ccb8581
commit 7bb9b66b5f
3 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/carhop-blocks/src/content-card/block.json
View File

@ -17,6 +17,10 @@
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"attributes": {
"hasBorder": {
"type": "boolean",
"default": true
},
"hasBackgroundColor": {
"type": "boolean",
"default": false

24
plugins/carhop-blocks/src/content-card/edit.js
View File

@ -21,8 +21,13 @@ import {
export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme");
const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
attributes;
const {
hasBackgroundColor,
backgroundColor,
textColor,
hasLightBackground,
hasBorder,
} = attributes;
function onBackgroundColorChange(value) {
if (value === undefined) {
@ -47,6 +52,16 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<>
<InspectorControls>
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Options", "carhop-blocks")}
>
<CheckboxControl
label="Bordure"
checked={hasBorder}
onChange={(value) => setAttributes({ hasBorder: value })}
/>
</PanelBody>
{/* <PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Arrière plan", "deligraph-blocks")}
>
@ -78,7 +93,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
/>
</>
)}
</PanelBody>
</PanelBody> */}
</InspectorControls>
<div
{...useBlockProps({
@ -86,7 +101,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
hasLightBackground
? "content-card--bg-light"
: "content-card--bg-dark"
}`,
} ${hasBorder ? "content-card--has-border" : ""}`,
style: {
"--content-card-text-color": textColor ?? "inherit",
"--content-card-background-color": hasBackgroundColor
@ -109,6 +124,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
"core/buttons",
"carhop-blocks/heading",
"carhop-blocks/cta-group",
"carhop-blocks/cta",
]}
/>
</div>

11
plugins/carhop-blocks/src/content-card/save.js
View File

@ -2,8 +2,13 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { isColorLight } from "../../_utilities/utilities";
export default function save({ attributes }) {
const { backgroundColor, textColor, hasLightBackground, hasBackgroundColor } =
attributes;
const {
backgroundColor,
textColor,
hasLightBackground,
hasBackgroundColor,
hasBorder,
} = attributes;
return (
<div
{...useBlockProps.save({
@ -11,7 +16,7 @@ export default function save({ attributes }) {
hasLightBackground
? "content-card--bg-light"
: "content-card--bg-dark"
}`,
} ${hasBorder ? "content-card--has-border" : ""}`,
style: {
"--content-card-text-color": textColor ?? "inherit",
"--content-card-background-color": hasBackgroundColor