FEATURE Introducing component

plugins/carhop-blocks/blocks/content-card/.editorconfig

@@ -0,0 +1,18 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2

plugins/carhop-blocks/blocks/content-card/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "front-header",
+	"version": "0.1.0",
+	"description": "Example block scaffolded with Create Block tool.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"scripts": {
+		"build": "wp-scripts build",
+		"format": "wp-scripts format",
+		"lint:css": "wp-scripts lint-style",
+		"lint:js": "wp-scripts lint-js",
+		"packages-update": "wp-scripts packages-update",
+		"plugin-zip": "wp-scripts plugin-zip",
+		"start": "wp-scripts start"
+	},
+	"devDependencies": {
+		"@wordpress/scripts": "^30.12.0"
+	},
+	"packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
+}

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

@@ -0,0 +1,37 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "carhop-blocks/content-card",
+	"version": "0.1.0",
+	"title": "Content Card",
+	"category": "carhop-blocks",
+	"icon": "smiley",
+	"description": "Carte de contenu pour la mise en forme d'éléments de contenu",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "carhop-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./view.js",
+	"attributes": {
+		"hasBackgroundColor": {
+			"type": "boolean",
+			"default": false
+		},
+		"backgroundColor": {
+			"type": "string",
+			"default": "#136f63"
+		},
+		"hasLightBackground": {
+			"type": "boolean",
+			"default": true
+		},
+		"textColor": {
+			"type": "string",
+			"default": "#136f63"
+		}
+	}
+}

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

@@ -0,0 +1,118 @@
+import { __ } from "@wordpress/i18n";
+import {
+	useBlockProps,
+	InnerBlocks,
+	useSetting,
+	InspectorControls,
+	MediaReplaceFlow,
+	MediaPlaceholder,
+} from "@wordpress/block-editor";
+import "./editor.scss";
+import { isColorLight } from "../../_utilities/utilities";
+
+import {
+	PanelBody,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	Button,
+	CheckboxControl,
+	ColorPalette,
+} from "@wordpress/components";
+
+export default function Edit({ attributes, setAttributes, ...props }) {
+	const colors = useSetting("color.palette.theme");
+	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) {
+		setAttributes({ hasBackgroundColor: value });
+		if (!value) {
+			setAttributes({ backgroundColor: null });
+		}
+	}
+	function onTextColorChange(value) {
+		setAttributes({ textColor: value });
+	}
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody
+					className="deligraph-blocks-components-image__panel-body"
+					title={__("Arrière plan", "deligraph-blocks")}
+				>
+					<CheckboxControl
+						label="Arrière plan coloré"
+						checked={hasBackgroundColor}
+						onChange={onHasBackgroundColorChange}
+					/>
+					{hasBackgroundColor && (
+						<>
+							<ColorPalette
+								colors={colors}
+								value={backgroundColor}
+								onChange={onBackgroundColorChange}
+							/>
+						</>
+					)}
+				</PanelBody>
+				<PanelBody
+					className="deligraph-blocks-components-image__panel-body"
+					title={__("Couleur du texte", "deligraph-blocks")}
+				>
+					{hasBackgroundColor && (
+						<>
+							<ColorPalette
+								colors={colors}
+								value={textColor}
+								onChange={onTextColorChange}
+							/>
+						</>
+					)}
+				</PanelBody>
+			</InspectorControls>
+			<div
+				{...useBlockProps({
+					className: `content-card ${
+						hasLightBackground
+							? "content-card--bg-light"
+							: "content-card--bg-dark"
+					}`,
+					style: {
+						"--content-card-text-color": textColor ?? "inherit",
+						"--content-card-background-color": hasBackgroundColor
+							? backgroundColor
+							: "transparent",
+					},
+				})}
+			>
+				<div className="content-card__innerblocks">
+					<InnerBlocks
+						template={[
+							["core/paragraph", { placeholder: "Ajouter ici le texte" }],
+						]}
+						allowedBlocks={[
+							"core/heading",
+							"core/paragraph",
+							"core/group",
+							"core/list",
+							"core/button",
+							"core/buttons",
+							"carhop-blocks/heading",
+							"carhop-blocks/cta-group",
+						]}
+					/>
+				</div>
+			</div>
+		</>
+	);
+}

plugins/carhop-blocks/blocks/content-card/src/editor.scss

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,21 @@
+import { registerBlockType } from "@wordpress/blocks";
+import "./style.scss";
+
+import Edit from "./edit";
+import save from "./save";
+import metadata from "./block.json";
+
+registerBlockType(metadata.name, {
+	icon: {
+		foreground: "#136f63",
+		src: (
+			<svg width="18" height="18" viewBox="0 0 18 18">
+				<g>
+					<path d="M1,5c-.6,0-1,.4-1,1v2c0,.6.4,1,1,1s1-.4,1-1v-2c0-.6-.4-1-1-1ZM3,0H1C.4,0,0,.4,0,1v2c0,.6.4,1,1,1s1-.4,1-1v-1h1c.6,0,1-.4,1-1s-.4-1-1-1ZM6,2h2c.6,0,1-.4,1-1s-.4-1-1-1h-2c-.6,0-1,.4-1,1s.4,1,1,1ZM1,10c-.6,0-1,.4-1,1v2c0,.6.4,1,1,1s1-.4,1-1v-2c0-.6-.4-1-1-1ZM6,7v4c0,.6.4,1,1,1h4c.6,0,1-.4,1-1v-4c0-.6-.4-1-1-1h-4c-.6,0-1,.4-1,1ZM12,16h-2c-.6,0-1,.4-1,1s.4,1,1,1h2c.6,0,1-.4,1-1s-.4-1-1-1ZM17,9c-.6,0-1,.4-1,1v2c0,.6.4,1,1,1s1-.4,1-1v-2c0-.6-.4-1-1-1ZM17,4c-.6,0-1,.4-1,1v2c0,.6.4,1,1,1s1-.4,1-1v-2c0-.6-.4-1-1-1ZM17,14c-.6,0-1,.4-1,1v1h-1c-.6,0-1,.4-1,1s.4,1,1,1h2c.6,0,1-.4,1-1v-2c0-.6-.4-1-1-1ZM7,16h-2c-.6,0-1,.4-1,1s.4,1,1,1h2c.6,0,1-.4,1-1s-.4-1-1-1ZM13,0h-2c-.6,0-1,.4-1,1s.4,1,1,1h2c.6,0,1-.4,1-1s-.4-1-1-1Z" />
+				</g>
+			</svg>
+		),
+	},
+	edit: Edit,
+	save,
+});

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

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

plugins/carhop-blocks/blocks/content-card/src/style.scss

@@ -0,0 +1,28 @@
+.content-card {
+	word-break: break-word;
+
+	h1.wp-block-heading,
+	h2.wp-block-heading,
+	h3.wp-block-heading,
+	h4.wp-block-heading,
+	h5.wp-block-heading,
+	h6.wp-block-heading {
+		margin-top: 0;
+		margin-bottom: 0;
+		font-size: 1.25rem;
+		text-transform: uppercase;
+		font-weight: 700;
+		color: var(--content-card-text-color);
+	}
+	*,
+	p {
+		color: var(--content-card-text-color);
+	}
+
+	li {
+		list-style: disc;
+		margin-left: 1rem;
+		margin-bottom: 0.5rem;
+		font-weight: 300;
+	}
+}