FEATURE Handling size variation

plugins/carhop-blocks/blocks/decorative-shapes/src/block.json

@@ -15,5 +15,11 @@
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js"
+	"viewScript": "file:./view.js",
+	"attributes": {
+		"variant": {
+			"type": "string",
+			"default": "medium"
+		}
+	}
 }

plugins/carhop-blocks/blocks/decorative-shapes/src/edit.js

@@ -1,13 +1,37 @@
 import { __ } from "@wordpress/i18n";
-import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import {
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+} from "@wordpress/block-editor";
 import "./editor.scss";
 import Shapes from "./Shapes";
-export default function Edit() {
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	PanelBody,
+} from "@wordpress/components";
+export default function Edit({ attributes, setAttributes }) {
+	const { variant } = attributes;
 	return (
 		<>
+			<InspectorControls>
+				<PanelBody title={__("Shapes", "carhop-blocks")}>
+					<ToggleGroupControl
+						className="deligraph-blocks__variant"
+						isBlock
+						label="Variante"
+						onChange={(value) => setAttributes({ variant: value })}
+						value={variant}
+					>
+						<ToggleGroupControlOption label="Medium" value="medium" />
+						<ToggleGroupControlOption label="Big" value="big" />
+					</ToggleGroupControl>
+				</PanelBody>
+			</InspectorControls>
 			<div
 				{...useBlockProps({
-					className: "carhop-decorative-shapes decorative-shapes",
+					className: `carhop-decorative-shapes decorative-shapes decorative-shapes--${variant}`,
 				})}
 			>
 				<Shapes />

plugins/carhop-blocks/blocks/decorative-shapes/src/save.js

@@ -1,11 +1,14 @@
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 import Shapes from "./Shapes";
 
-export default function save() {
+export default function save({ attributes }) {
+	const { variant } = attributes;
 	return (
 		<div
 			{...useBlockProps.save({
-				className: "carhop-decorative-shapes decorative-shapes",
+				className: `carhop-decorative-shapes decorative-shapes decorative-shapes--${variant} ${
+					variant === "big" ? "alignfull" : ""
+				}`,
 			})}
 		>
 			<Shapes />

plugins/carhop-blocks/blocks/decorative-shapes/src/style.scss

@@ -6,9 +6,9 @@
 
 	&__shape {
 		// background-color: red;
-		display: flex;
+		// display: flex;
-		align-items: center;
+		// align-items: center;
-		justify-content: center;
+		// justify-content: center;
 		svg {
 			// background-color: blue;
 			width: 100%;
@@ -18,4 +18,22 @@
 			object-fit: contain;
 		}
 	}
+
+	&--big {
+		padding: 0rem 2rem;
+		display: flex !important;
+		align-items: center;
+		justify-content: center;
+		gap: 6rem;
+
+		.decorative-shapes__shape {
+			display: block;
+			width: 100vw;
+			max-width: 400px;
+			svg {
+				max-width: 800px;
+				max-height: 800px;
+			}
+		}
+	}
 }