working v1

blocks/labelled-picture/build/block.json

@@ -3,7 +3,7 @@
   "apiVersion": 2,
   "name": "homegrade-content-blocks/labelled-picture",
   "version": "0.1.0",
-  "title": "Image Sticker-Légende",
+  "title": "Image + Légende Autocollante",
   "category": "homegrade-blocks",
   "icon": "smiley",
   "description": "Bloc image contenant une légende autocollante",

blocks/labelled-picture/build/index.asset.php

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

blocks/labelled-picture/build/index.css

@@ -1,13 +1,4 @@
 /*!****************************************************************************************************************************************************************************************************************************************!*\
   !*** 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 ***!
   \****************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  border: 1px dotted #f00;
-}
 
-/*# sourceMappingURL=index.css.map*/

blocks/labelled-picture/build/index.js

@@ -21,6 +21,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+
 
 
 
@@ -63,34 +65,31 @@ function Edit({
     noticeOperations.createErrorNotice(message);
   }
   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: "Source de l'image"
+    title: "Source de l'image",
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "homegrade-blocks-components-image__panel-body "
+  }, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: pictureUrl,
+    alt: pictureAlt
+  }), (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: pictureUrlId,
+    mediaId: pictureId,
     mediaUrl: pictureUrl,
     allowedTypes: ["image"],
     accept: "image/*",
     onSelect: updatePictureImg,
     name: !pictureUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
-  }), pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Button, {
+  }), pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
     className: "custom-flow-button",
     variant: "primary",
-    icon: trash,
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
     label: "Supprimer",
-    onClick: removeLateralCoverAttributes
+    onClick: removePictureImg
-  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.FocalPointPicker, {
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Le texte de votre L\xE9gende est automatiquement attribu\xE9 depuis le champ \"L\xE9gende\" de votre image dans la gallerie des m\xE9dias")))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
-    label: "position",
-    url: pictureUrl,
-    dimensions: {
-      width: 400,
-      height: 100
-    }
-  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
       className: `homegrade-blocks-labelled-picture`
     })
-  }, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: pictureUrl,
     alt: pictureAlt
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption)), !pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
@@ -171,11 +170,20 @@ __webpack_require__.r(__webpack_exports__);
 function save({
   attributes
 }) {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
+  const {
+    pictureUrl,
+    pictureAlt,
+    pictureId,
+    pictureCaption
+  } = attributes;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-starter`
+      className: `homegrade-blocks-labelled-picture`
     })
-  }, "Multiblocks – salut from the saved content!");
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: pictureUrl,
+    alt: pictureAlt
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption)));
 }
 
 /***/ }),
@@ -202,6 +210,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":
@@ -254,13 +293,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/labelled-picture","version":"0.1.0","title":"Image Sticker-Légende","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"pictureUrl":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image + Légende Autocollante","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"pictureUrl":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
 
 /***/ })
 

blocks/labelled-picture/build/style-index.css

@@ -1,16 +1,4 @@
 /*!***************************************************************************************************************************************************************************************************************************************!*\
   !*** 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/style.scss ***!
   \***************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  background-color: #21759b;
-  color: #fff;
-  padding: 2px;
-}
 
-/*# sourceMappingURL=style-index.css.map*/

blocks/labelled-picture/src/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"name": "homegrade-content-blocks/labelled-picture",
 	"version": "0.1.0",
-	"title": "Image Sticker-Légende",
+	"title": "Image + Légende Autocollante",
 	"category": "homegrade-blocks",
 	"icon": "smiley",
 	"description": "Bloc image contenant une légende autocollante",

blocks/labelled-picture/src/edit.js

@@ -9,16 +9,19 @@ import {
 } from "@wordpress/block-editor";
 
 import {
+	Button,
 	ToolbarGroup,
 	ToolbarButton,
 	Spinner,
 	withNotices,
 	FocalPointPicker,
 	PanelBody,
+	Tip,
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from "@wordpress/components";
+import { trash } from "@wordpress/icons";
 
 export default function Edit({
 	attributes,
@@ -56,10 +59,14 @@ export default function Edit({
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title="Source de l'image">
+				<PanelBody
+					title="Source de l'image"
+					className="homegrade-blocks-components-image__panel-body "
+				>
+					{pictureUrl && <img src={pictureUrl} alt={pictureAlt} />}
 					<div className="media-replace-container">
 						<MediaReplaceFlow
-							mediaId={pictureUrlId}
+							mediaId={pictureId}
 							mediaUrl={pictureUrl}
 							allowedTypes={["image"]}
 							accept="image/*"
@@ -77,28 +84,26 @@ export default function Edit({
 									variant="primary"
 									icon={trash}
 									label="Supprimer"
-									onClick={removeLateralCoverAttributes}
+									onClick={removePictureImg}
 								/>
 							</div>
 						)}
 					</div>
-					<FocalPointPicker
+					<Tip>
-						label="position"
+						<p>
-						url={pictureUrl}
+							Le texte de votre Légende est automatiquement attribué depuis le
-						dimensions={{
+							champ "Légende" de votre image dans la gallerie des médias
-							width: 400,
+						</p>
-							height: 100,
+					</Tip>
-						}}
-					/>
 				</PanelBody>
 			</InspectorControls>
-			<section
+			<div>
-				{...useBlockProps({
-					className: `homegrade-blocks-labelled-picture`,
-				})}
-			>
 				{pictureUrl && (
-					<figure>
+					<figure
+						{...useBlockProps({
+							className: `homegrade-blocks-labelled-picture`,
+						})}
+					>
 						<img src={pictureUrl} alt={pictureAlt} />
 						<figcaption>{pictureCaption}</figcaption>
 					</figure>
@@ -115,7 +120,7 @@ export default function Edit({
 						onError={onUploadError}
 					/>
 				)}
-			</section>
+			</div>
 		</>
 	);
 }

blocks/labelled-picture/src/editor.scss

@@ -1,9 +0,0 @@
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-multiblocks {
-	border: 1px dotted #f00;
-}

blocks/labelled-picture/src/save.js

@@ -1,13 +1,20 @@
 import { useBlockProps } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
+	const { pictureUrl, pictureAlt, pictureId, pictureCaption } = attributes;
+
 	return (
-		<p
+		<>
-			{...useBlockProps.save({
+			{pictureUrl && (
-				className: `homegrade-blocks-starter`,
+				<figure
-			})}
+					{...useBlockProps.save({
-		>
+						className: `homegrade-blocks-labelled-picture`,
-			{"Multiblocks – salut from the saved content!"}
+					})}
-		</p>
+				>
+					<img src={pictureUrl} alt={pictureAlt} />
+					<figcaption>{pictureCaption}</figcaption>
+				</figure>
+			)}
+		</>
 	);
 }

blocks/labelled-picture/src/style.scss

@@ -1,12 +0,0 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-multiblocks {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
-}