adding contentDisposition feature

blocks/text-image/build/block.json

@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "title": "Texte + Image",
   "category": "homegrade-blocks",
-  "description": "Bloc de texte + image latérale",
+  "description": "Bloc de texte & image latérale",
   "supports": {
     "html": false
   },
@@ -26,6 +26,10 @@
     "imageProportion": {
       "type": "string",
       "default": "original"
+    },
+    "contentDisposition": {
+      "type": "string",
+      "default": "left"
     }
   }
 }

blocks/text-image/build/index.asset.php

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

blocks/text-image/build/index.js

@@ -59,7 +59,6 @@ function ImageMediaPlaceholder({
     });
   }
   function removeImageAttributes() {
-    console.log("removeImageAttributes");
     setAttributes({
       imageId: null,
       imageAlt: null,
@@ -130,7 +129,7 @@ function ImagePanelBody({
   }
   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_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
     className: "homegrade-blocks-components-image__panel-body",
-    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice")
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks")
   }, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: imageUrl,
     alt: imageAlt
@@ -142,7 +141,7 @@ function ImagePanelBody({
     allowedTypes: ["image"],
     accept: "image/*",
     onSelect: setImageAttributes,
-    name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
+    name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks")
   }), imageUrl && (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_2__.Button, {
     className: "custom-flow-button",
     variant: "primary",
@@ -192,6 +191,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../_components/ImagePanelBody */ "../_components/ImagePanelBody.jsx");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__);
+
 
 
 
@@ -208,9 +210,31 @@ function Edit({
     imageId,
     imageAlt,
     imageUrl,
-    imageProportion
+    imageProportion,
+    contentDisposition
   } = attributes;
-  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_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__["default"], {
+  function changeContentDisposition(newContentDisposition) {
+    console.log(newContentDisposition);
+    setAttributes({
+      contentDisposition: newContentDisposition
+    });
+  }
+  console.log(typeof contentDisposition);
+  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_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelBody, {
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Disposition", "homegrade"),
+    className: "homegrade-panel-body"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControl, {
+    className: "homegrade-blocks-highlight__variant",
+    isBlock: true,
+    onChange: changeContentDisposition,
+    value: contentDisposition
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControlOption, {
+    label: "Gauche",
+    value: "left"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.__experimentalToggleGroupControlOption, {
+    label: "Droite",
+    value: "right"
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_5__["default"], {
     imageUrl: imageUrl,
     imageId: imageId,
     imageAlt: imageAlt,
@@ -220,13 +244,15 @@ function Edit({
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
       className: `homegrade-blocks-text-image`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }, contentDisposition === "left" && (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", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
-    template: [["core/paragraph", {
+    template: [["homegrade-content-blocks/content-heading", {
+      placeholder: "Demain, et demain, et demain!"
+    }], ["core/paragraph", {
       placeholder: "Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée."
     }]],
-    allowedBlocks: ["core/paragraph"]
+    allowedBlocks: ["core/paragraph", "core/list", "core/button", "core/buttons", "homegrade-content-blocks/content-heading"]
   })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], {
@@ -239,7 +265,26 @@ function Edit({
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  }))));
+  }))), contentDisposition === "right" && (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", {
+    className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    imageAlt: imageAlt,
+    imageId: imageId,
+    imageUrl: imageUrl,
+    setAttributes: setAttributes,
+    imageProportion: imageProportion
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Image__WEBPACK_IMPORTED_MODULE_4__["default"], {
+    imageAlt: imageAlt,
+    imageUrl: imageUrl,
+    imageProportion: imageProportion
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
+    template: [["core/paragraph", {
+      placeholder: "Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée."
+    }]],
+    allowedBlocks: ["core/paragraph", "homegrade-content-blocks/content-heading"]
+  })))));
 }
 
 /***/ }),
@@ -308,13 +353,14 @@ function save({
   let {
     imageAlt,
     imageUrl,
-    imageProportion
+    imageProportion,
+    contentDisposition
   } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
       className: `homegrade-blocks-text-image`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }, contentDisposition === "left" && (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", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
@@ -322,7 +368,15 @@ function save({
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  })));
+  }))), contentDisposition === "right" && (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", {
+    className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    imageAlt: imageAlt,
+    imageUrl: imageUrl,
+    imageProportion: imageProportion
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
 }
 
 /***/ }),
@@ -448,7 +502,7 @@ module.exports = window["wp"]["primitives"];
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte + image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte & image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"contentDisposition":{"type":"string","default":"left"}}}');
 
 /***/ })
 

blocks/text-image/src/block.json

@@ -5,7 +5,7 @@
 	"version": "0.1.0",
 	"title": "Texte + Image",
 	"category": "homegrade-blocks",
-	"description": "Bloc de texte + image latérale",
+	"description": "Bloc de texte & image latérale",
 	"supports": {
 		"html": false
 	},
@@ -26,6 +26,10 @@
 		"imageProportion": {
 			"type": "string",
 			"default": "original"
+		},
+		"contentDisposition": {
+			"type": "string",
+			"default": "left"
 		}
 	}
 }

blocks/text-image/src/edit.js

@@ -10,12 +10,41 @@ import {
 	InnerBlocks,
 	MediaPlaceholder,
 } from "@wordpress/block-editor";
+import {
+	Button,
+	ToolbarButton,
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from "@wordpress/components";
 export default function Edit({ attributes, setAttributes, ...props }) {
-	let { imageId, imageAlt, imageUrl, imageProportion } = attributes;
+	let { imageId, imageAlt, imageUrl, imageProportion, contentDisposition } =
+		attributes;
 
+	function changeContentDisposition(newContentDisposition) {
+		console.log(newContentDisposition);
+		setAttributes({ contentDisposition: newContentDisposition });
+	}
+
+	console.log(typeof contentDisposition);
 	return (
 		<>
 			<InspectorControls>
+				<PanelBody
+					title={__("Disposition", "homegrade")}
+					className="homegrade-panel-body"
+				>
+					<ToggleGroupControl
+						className="homegrade-blocks-highlight__variant"
+						isBlock
+						onChange={changeContentDisposition}
+						value={contentDisposition}
+					>
+						<ToggleGroupControlOption label="Gauche" value="left" />
+						<ToggleGroupControlOption label="Droite" value="right" />
+					</ToggleGroupControl>
+				</PanelBody>
 				<ImagePanelBody
 					imageUrl={imageUrl}
 					imageId={imageId}
@@ -29,9 +58,17 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					className: `homegrade-blocks-text-image`,
 				})}
 			>
+				{contentDisposition === "left" && (
+					<>
 						<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
 							<InnerBlocks
 								template={[
+									[
+										"homegrade-content-blocks/content-heading",
+										{
+											placeholder: "Demain, et demain, et demain!",
+										},
+									],
 									[
 										"core/paragraph",
 										{
@@ -40,7 +77,13 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 										},
 									],
 								]}
-						allowedBlocks={["core/paragraph"]}
+								allowedBlocks={[
+									"core/paragraph",
+									"core/list",
+									"core/button",
+									"core/buttons",
+									"homegrade-content-blocks/content-heading",
+								]}
 							/>
 							{}
 						</div>
@@ -59,6 +102,44 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 								imageProportion={imageProportion}
 							/>
 						</div>
+					</>
+				)}
+				{contentDisposition === "right" && (
+					<>
+						<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
+							<ImageMediaPlaceholder
+								imageAlt={imageAlt}
+								imageId={imageId}
+								imageUrl={imageUrl}
+								setAttributes={setAttributes}
+								imageProportion={imageProportion}
+							/>
+							<Image
+								imageAlt={imageAlt}
+								imageUrl={imageUrl}
+								imageProportion={imageProportion}
+							/>
+						</div>
+						<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
+							<InnerBlocks
+								template={[
+									[
+										"core/paragraph",
+										{
+											placeholder:
+												"Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée.",
+										},
+									],
+								]}
+								allowedBlocks={[
+									"core/paragraph",
+									"homegrade-content-blocks/content-heading",
+								]}
+							/>
+							{}
+						</div>
+					</>
+				)}
 			</div>
 		</>
 	);

blocks/text-image/src/save.js

@@ -1,7 +1,7 @@
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 import Image from "../../_components/Image";
 export default function save({ attributes }) {
-	let { imageAlt, imageUrl, imageProportion } = attributes;
+	let { imageAlt, imageUrl, imageProportion, contentDisposition } = attributes;
 
 	return (
 		<div
@@ -9,9 +9,12 @@ export default function save({ attributes }) {
 				className: `homegrade-blocks-text-image`,
 			})}
 		>
+			{contentDisposition === "left" && (
+				<>
 					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
 						<InnerBlocks.Content />
 					</div>
+
 					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
 						<Image
 							imageAlt={imageAlt}
@@ -19,6 +22,22 @@ export default function save({ attributes }) {
 							imageProportion={imageProportion}
 						/>
 					</div>
+				</>
+			)}
+			{contentDisposition === "right" && (
+				<>
+					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
+						<Image
+							imageAlt={imageAlt}
+							imageUrl={imageUrl}
+							imageProportion={imageProportion}
+						/>
+					</div>
+					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
+						<InnerBlocks.Content />
+					</div>
+				</>
+			)}
 		</div>
 	);
 }