FEATURE Add iconId and iconUrl attributes to tab block; update edit and save components for new attributes

plugins/carhop-blocks/src/tab/block.json

@@ -25,6 +25,14 @@
 		"title": {
 			"type": "string",
 			"default": ""
+		},
+		"iconId": {
+			"type": "number",
+			"default": 0
+		},
+		"iconUrl": {
+			"type": "string",
+			"default": ""
 		}
 	}
 }

plugins/carhop-blocks/src/tab/edit.js

@@ -17,6 +17,7 @@ export default function Edit({ attributes, setAttributes }) {
 		className: "block-chapo",
 	});
 
+	console.log(attributes);
 	return (
 		<>
 			<InspectorControls>
@@ -42,9 +43,17 @@ export default function Edit({ attributes, setAttributes }) {
 								<>
 									{iconUrl ? (
 										<div className="tab__icon-preview">
-											<img src={iconUrl} alt="" style={{ maxWidth: 48, height: "auto" }} />
+											<img
+												src={iconUrl}
+												alt=""
+												style={{ maxWidth: 48, height: "auto" }}
+											/>
 											<div style={{ marginTop: 8 }}>
-												<Button variant="secondary" onClick={open} style={{ marginRight: 8 }}>
+												<Button
+													variant="secondary"
+													onClick={open}
+													style={{ marginRight: 8 }}
+												>
 													{__("Remplacer", "carhop-blocks")}
 												</Button>
 												<Button
@@ -70,13 +79,6 @@ export default function Edit({ attributes, setAttributes }) {
 				</PanelBody>
 			</InspectorControls>
 			<div {...blockProps}>
-				<RichText
-					tagName="h2"
-					className="tab__title"
-					placeholder="Titre"
-					value={title}
-					onChange={(value) => setAttributes({ title: value })}
-				/>
 				<InnerBlocks
 					allowedBlocks={[
 						"core/heading",
@@ -98,10 +100,14 @@ export default function Edit({ attributes, setAttributes }) {
 						"carhop-blocks/cta-group",
 						"carhop-blocks/audio-player",
 						"carhop-blocks/content-box",
+						"carhop-blocks/content-card",
 						"carhop-blocks/notice-panel",
 						"shortcode",
 					]}
-					template={[["core/paragraph", { content: "Contenu" }]]}
+					template={[
+						["core/heading", { content: "Titre", level: 3 }],
+						["core/paragraph", { content: "Contenu" }],
+					]}
 				/>
 			</div>
 		</>

plugins/carhop-blocks/src/tab/index.js

@@ -21,6 +21,10 @@ registerBlockType(metadata.name, {
 			</svg>
 		),
 	},
+	__experimentalLabel: (attributes) => {
+		const label = attributes?.title?.trim();
+		return label || metadata.title;
+	},
 	edit: Edit,
 	save,
 });

plugins/carhop-blocks/src/tab/save.js

@@ -10,7 +10,6 @@ export default function save({ attributes }) {
 
 	return (
 		<>
-			<RichText.Content value={title} tagName="h2" className="tab__title" />
 			<InnerBlocks.Content />
 		</>
 	);