extending the features

blocks/monoblock/build/block.json

@@ -10,10 +10,25 @@
     "html": false
   },
   "parent": [
-    "homegrade-content-blocks/grey-box"
+    "homegrade-content-blocks/content-box"
   ],
   "textdomain": "homegrade-blocks",
   "editorScript": "file:./index.js",
   "editorStyle": "file:./index.css",
-  "style": "file:./style-index.css"
+  "style": "file:./style-index.css",
+  "attributes": {
+    "hasIllustration": {
+      "type": "boolean",
+      "default": false
+    },
+    "illustrationUrl": {
+      "type": "string"
+    },
+    "illustrationId": {
+      "type": "string"
+    },
+    "illustrationAlt": {
+      "type": "string"
+    }
+  }
 }

blocks/monoblock/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => 'e5f461877af67f8ad376');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'c0251f51b5196af21e3e');

blocks/monoblock/build/index.css

@@ -1,13 +1,27 @@
 /*!****************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
   \****************************************************************************************************************************************************************************************************************************************/
-/**
+.homegrade-blocks-box-monoblock__superior-illustration {
- * The following styles get applied inside the editor only.
+  max-width: 200px !important;
- *
+}
- * Replace them with your own styles or remove the file completely.
+
- */
+.homegrade-blocks-box-monoblock__panel-body .components-dropdown .components-toolbar__control {
-.wp-block-create-block-multiblocks {
+  background-color: #e04d42;
-  border: 1px dotted #f00;
+  color: white;
+}
+.homegrade-blocks-box-monoblock__panel-body img {
+  display: block;
+}
+.homegrade-blocks-box-monoblock__panel-body .components-dropdown {
+  display: block;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.homegrade-blocks-box-monoblock__panel-body .media-replace-container {
+  padding: 10px 0;
+  display: flex;
+  gap: 10px;
+  align-items: center;
 }
 
 /*# sourceMappingURL=index.css.map*/

blocks/monoblock/build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;AACD;;AAEC;EACC;EACA;AACF;AACC;EACC;AACF;AACC;EACC;EACA;EAAA;AACF;AACC;EACC;EACA;EACA;EACA;AACF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-box-monoblock__superior-illustration {\n\tmax-width: 200px !important;\n}\n.homegrade-blocks-box-monoblock__panel-body {\n\t.components-dropdown .components-toolbar__control {\n\t\tbackground-color: #e04d42;\n\t\tcolor: white;\n\t}\n\timg {\n\t\tdisplay: block;\n\t}\n\t.components-dropdown {\n\t\tdisplay: block;\n\t\twidth: fit-content;\n\t}\n\t.media-replace-container {\n\t\tpadding: 10px 0;\n\t\tdisplay: flex;\n\t\tgap: 10px;\n\t\talign-items: center;\n\t\t// margin-top: 10px;\n\t}\n}\n"],"names":[],"sourceRoot":""}

blocks/monoblock/build/index.js

@@ -19,6 +19,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
+
+
+
+
 
 
 
@@ -29,12 +36,74 @@ function Edit({
   setAttributes,
   ...props
 }) {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  let {
+    hasIllustration,
+    illustrationId,
+    illustrationUrl,
+    illustrationAlt
+  } = attributes;
+  function onHasIllustrationChange() {
+    setAttributes({
+      hasIllustration: !hasIllustration
+    });
+    if (!hasIllustration) {
+      setAttributes({
+        illustrationUrl: null,
+        illustrationId: null,
+        illustrationAlt: null
+      });
+    }
+  }
+  function setIllustrationAttributes(media) {
+    setAttributes({
+      illustrationUrl: media.url,
+      illustrationId: media.id,
+      illustrationAlt: media?.alt
+    });
+  }
+  function removeIllustrationAttributes() {
+    setAttributes({
+      illustrationUrl: null,
+      illustrationId: null,
+      illustrationAlt: null
+    });
+  }
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
+    title: "Illustration",
+    className: "homegrade-blocks-box-monoblock__panel-body"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
+    help: hasIllustration ? "Afficher une illustration" : "Pas d'illustration",
+    label: "Illustration sup\xE9rieure",
+    checked: hasIllustration,
+    onChange: onHasIllustrationChange
+  }), illustrationUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: illustrationUrl,
+    alt: illustrationAlt
+  }), hasIllustration && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "media-replace-container "
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
+    mediaId: illustrationId,
+    mediaUrl: illustrationUrl,
+    allowedTypes: ["image"],
+    accept: "image/*",
+    onSelect: setIllustrationAttributes,
+    name: !illustrationUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
+  }), illustrationUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
+    className: "custom-flow-button",
+    variant: "primary",
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
+    label: "Supprimer",
+    onClick: removeIllustrationAttributes
+  }))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
-      className: `box-monoblock card-large-content`
+      className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${hasIllustration ? "homegrade-blocks-box-monoblock--has-illustration " : ""}`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
+  }, hasIllustration && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
-    allowedBlocks: ["core/paragraph"]
+    className: " homegrade-blocks-box-monoblock__superior-illustration",
+    src: illustrationUrl,
+    alt: illustrationAlt
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
+    allowedBlocks: ["core/paragraph", "homegrade-content-blocks/section-titling"]
   })));
 }
 
@@ -99,12 +168,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
 
 
-function save() {
+function save({
+  attributes
+}) {
+  const {
+    hasIllustration,
+    illustrationUrl,
+    illustrationAlt
+  } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `box-monoblock card-large-content`
+      className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${hasIllustration ? "homegrade-blocks-box-monoblock--has-illustration" : ""}`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
+  }, hasIllustration && illustrationUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    className: " homegrade-blocks-box-monoblock__superior-illustration",
+    src: illustrationUrl,
+    alt: illustrationAlt
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
 }
 
 /***/ }),
@@ -131,6 +211,37 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/trash.js":
+/*!*************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/trash.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const trash = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M20 5h-5.7c0-1.3-1-2.3-2.3-2.3S9.7 3.7 9.7 5H4v2h1.5v.3l1.7 11.1c.1 1 1 1.7 2 1.7h5.7c1 0 1.8-.7 2-1.7l1.7-11.1V7H20V5zm-3.2 2l-1.7 11.1c0 .1-.1.2-.3.2H9.1c-.1 0-.3-.1-.3-.2L7.2 7h9.6z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (trash);
+//# sourceMappingURL=trash.js.map
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -153,6 +264,16 @@ module.exports = window["wp"]["blocks"];
 
 /***/ }),
 
+/***/ "@wordpress/components":
+/*!************************************!*\
+  !*** external ["wp","components"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["components"];
+
+/***/ }),
+
 /***/ "@wordpress/element":
 /*!*********************************!*\
   !*** external ["wp","element"] ***!
@@ -173,13 +294,23 @@ module.exports = window["wp"]["i18n"];
 
 /***/ }),
 
+/***/ "@wordpress/primitives":
+/*!************************************!*\
+  !*** external ["wp","primitives"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["primitives"];
+
+/***/ }),
+
 /***/ "./src/block.json":
 /*!************************!*\
   !*** ./src/block.json ***!
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/box-monoblock","version":"0.1.0","title":"Monobloc","category":"homegrade-blocks","description":"Bloc conteneur d\'une seule colonne","supports":{"html":false},"parent":["homegrade-content-blocks/grey-box"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/box-monoblock","version":"0.1.0","title":"Monobloc","category":"homegrade-blocks","description":"Bloc conteneur d\'une seule colonne","supports":{"html":false},"parent":["homegrade-content-blocks/content-box"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasIllustration":{"type":"boolean","default":false},"illustrationUrl":{"type":"string"},"illustrationId":{"type":"string"},"illustrationAlt":{"type":"string"}}}');
 
 /***/ })
 

blocks/monoblock/src/block.json

@@ -10,10 +10,25 @@
 		"html": false
 	},
 	"parent": [
-		"homegrade-content-blocks/grey-box"
+		"homegrade-content-blocks/content-box"
 	],
 	"textdomain": "homegrade-blocks",
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css"
+	"style": "file:./style-index.css",
+	"attributes": {
+		"hasIllustration": {
+			"type": "boolean",
+			"default": false
+		},
+		"illustrationUrl": {
+			"type": "string"
+		},
+		"illustrationId": {
+			"type": "string"
+		},
+		"illustrationAlt": {
+			"type": "string"
+		}
+	}
 }

blocks/monoblock/src/edit.js

@@ -3,16 +3,109 @@ import "./editor.scss";
 
 import { useBlockProps, RichText } from "@wordpress/block-editor";
 import { InnerBlocks } from "@wordpress/block-editor";
+import { PanelBody, ToggleControl, Button } from "@wordpress/components";
+import { InspectorControls } from "@wordpress/block-editor";
+
+import { trash } from "@wordpress/icons";
+
+import { MediaReplaceFlow } from "@wordpress/block-editor";
 
 export default function Edit({ attributes, setAttributes, ...props }) {
+	let { hasIllustration, illustrationId, illustrationUrl, illustrationAlt } =
+		attributes;
+	function onHasIllustrationChange() {
+		setAttributes({ hasIllustration: !hasIllustration });
+		if (!hasIllustration) {
+			removeIllustrationAttributes();
+		}
+	}
+
+	function setIllustrationAttributes(media) {
+		setAttributes({
+			illustrationUrl: media.url,
+			illustrationId: media.id,
+			illustrationAlt: media?.alt,
+		});
+	}
+	function removeIllustrationAttributes() {
+		setAttributes({
+			illustrationUrl: null,
+			illustrationId: null,
+			illustrationAlt: null,
+		});
+	}
+
 	return (
 		<>
+			<InspectorControls>
+				<PanelBody
+					title="Illustration"
+					className="homegrade-blocks-box-monoblock__panel-body"
+				>
+					<ToggleControl
+						help={
+							hasIllustration
+								? "Afficher une illustration"
+								: "Pas d'illustration"
+						}
+						label="Illustration supérieure"
+						checked={hasIllustration}
+						onChange={onHasIllustrationChange}
+					/>
+					{illustrationUrl && (
+						<img src={illustrationUrl} alt={illustrationAlt} />
+					)}
+					{hasIllustration && (
+						<div className="media-replace-container ">
+							<MediaReplaceFlow
+								mediaId={illustrationId}
+								mediaUrl={illustrationUrl}
+								allowedTypes={["image"]}
+								accept="image/*"
+								onSelect={setIllustrationAttributes}
+								name={
+									!illustrationUrl
+										? __("Ajouter", "homegrade-blocks__texte-backoffice")
+										: __("Remplacer", "homegrade-blocks__texte-backoffice")
+								}
+							/>
+							{illustrationUrl && (
+								<>
+									<Button
+										className="custom-flow-button"
+										variant="primary"
+										icon={trash}
+										label="Supprimer"
+										onClick={removeIllustrationAttributes}
+									/>
+								</>
+							)}
+						</div>
+					)}
+				</PanelBody>
+			</InspectorControls>
 			<div
 				{...useBlockProps({
-					className: `box-monoblock card-large-content`,
+					className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
+						hasIllustration
+							? "homegrade-blocks-box-monoblock--has-illustration "
+							: ""
+					}`,
 				})}
 			>
-				<InnerBlocks allowedBlocks={["core/paragraph"]} />
+				{hasIllustration && (
+					<img
+						className=" homegrade-blocks-box-monoblock__superior-illustration"
+						src={illustrationUrl}
+						alt={illustrationAlt}
+					/>
+				)}
+				<InnerBlocks
+					allowedBlocks={[
+						"core/paragraph",
+						"homegrade-content-blocks/section-titling",
+					]}
+				/>
 			</div>
 		</>
 	);

blocks/monoblock/src/editor.scss

@@ -1,9 +1,23 @@
-/**
+.homegrade-blocks-box-monoblock__superior-illustration {
- * The following styles get applied inside the editor only.
+	max-width: 200px !important;
- *
+}
- * Replace them with your own styles or remove the file completely.
+.homegrade-blocks-box-monoblock__panel-body {
- */
+	.components-dropdown .components-toolbar__control {
-
+		background-color: #e04d42;
-.wp-block-create-block-multiblocks {
+		color: white;
-	border: 1px dotted #f00;
+	}
+	img {
+		display: block;
+	}
+	.components-dropdown {
+		display: block;
+		width: fit-content;
+	}
+	.media-replace-container {
+		padding: 10px 0;
+		display: flex;
+		gap: 10px;
+		align-items: center;
+		// margin-top: 10px;
+	}
 }

blocks/monoblock/src/save.js

@@ -1,12 +1,26 @@
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 
-export default function save() {
+export default function save({ attributes }) {
+	const { hasIllustration, illustrationUrl, illustrationAlt } = attributes;
+
 	return (
 		<div
 			{...useBlockProps.save({
-				className: `box-monoblock card-large-content`,
+				className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
+					hasIllustration
+						? "homegrade-blocks-box-monoblock--has-illustration"
+						: ""
+				}`,
 			})}
 		>
+			{hasIllustration && illustrationUrl && (
+				<img
+					className=" homegrade-blocks-box-monoblock__superior-illustration"
+					src={illustrationUrl}
+					alt={illustrationAlt}
+				/>
+			)}
+
 			<InnerBlocks.Content />
 		</div>
 	);