FEATURE Handling content-card border

plugins/carhop-blocks/src/content-card/block.json

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

plugins/carhop-blocks/src/content-card/edit.js

@@ -21,8 +21,13 @@ import {
 
 export default function Edit({ attributes, setAttributes, ...props }) {
 	const colors = useSetting("color.palette.theme");
-	const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
+	const {
-		attributes;
+		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>

plugins/carhop-blocks/src/content-card/save.js

@@ -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 } =
+	const {
-		attributes;
+		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