adding bloc height control in the input control

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f073dc5f029a71961853');
+<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '796584d0ce5be6b0516b');

blocks/picture-banner/build/index.js

@@ -72,6 +72,11 @@ function Edit({
       coverAlt: image.alt
     });
   }
+  function onHeightFixedChange(heightFixed) {
+    setAttributes({
+      heightFixed
+    });
+  }
 
   // Si l'upload s'est mal passé -> reset
   (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -82,8 +87,6 @@ function Edit({
       });
     }
   }, []);
-
-  // Gestion de l'url temporaire
   (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     // Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
     if ((0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) {
@@ -95,9 +98,23 @@ function Edit({
       setBlobUrl();
     }
   }, [coverUrl]);
+  console.log(heightFixed);
   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_2__.InspectorControls, null, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
-    title: "Position de l'image de couverture"
+    title: "Image de couverture"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.FocalPointPicker, {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControl, {
+    label: "Hauteur",
+    className: "homegrade-blocks-highlight__variant",
+    isBlock: true,
+    onChange: onHeightFixedChange,
+    value: heightFixed
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControlOption, {
+    label: "Fixe",
+    value: true
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalToggleGroupControlOption, {
+    label: "Enti\xE8re",
+    value: false
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.FocalPointPicker, {
+    label: "position",
     url: coverUrl,
     dimensions: {
       width: 400,
@@ -113,16 +130,12 @@ function Edit({
     icon: "fullscreen-exit-alt",
     label: "Hauteur Fixe",
     isActive: heightFixed,
-    onClick: () => setAttributes({
+    onClick: () => onHeightFixedChange(true)
-      heightFixed: true
-    })
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
     icon: "editor-expand",
     label: "Hauteur Pleine",
     isActive: !heightFixed,
-    onClick: () => setAttributes({
+    onClick: () => onHeightFixedChange(false)
-      heightFixed: false
-    })
   })), coverUrl && (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_2__.MediaReplaceFlow, {
     group: "inline",
     name: "Remplacer l'image",

blocks/picture-banner/src/edit.js

@@ -14,6 +14,9 @@ import {
 	withNotices,
 	FocalPointPicker,
 	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from "@wordpress/components";
 import "./editor.scss";
 import { isBlobURL, revokeBlobURL } from "@wordpress/blob";
@@ -58,6 +61,10 @@ function Edit({
 		});
 	}
 
+	function onHeightFixedChange(heightFixed) {
+		setAttributes({ heightFixed });
+	}
+
 	// Si l'upload s'est mal passé -> reset
 	useEffect(() => {
 		if (!coverId && isBlobURL(coverUrl)) {
@@ -65,7 +72,6 @@ function Edit({
 		}
 	}, []);
 
-	// Gestion de l'url temporaire
 	useEffect(() => {
 		// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
 		if (isBlobURL(coverUrl)) {
@@ -77,13 +83,24 @@ function Edit({
 			setBlobUrl();
 		}
 	}, [coverUrl]);
-
+	console.log(heightFixed);
 	return (
 		<>
 			<InspectorControls>
 				{coverUrl && (
-					<PanelBody title="Position de l'image de couverture">
+					<PanelBody title="Image de couverture">
+						<ToggleGroupControl
+							label="Hauteur"
+							className="homegrade-blocks-highlight__variant"
+							isBlock
+							onChange={onHeightFixedChange}
+							value={heightFixed}
+						>
+							<ToggleGroupControlOption label="Fixe" value={true} />
+							<ToggleGroupControlOption label="Entière" value={false} />
+						</ToggleGroupControl>
 						<FocalPointPicker
+							label="position"
 							url={coverUrl}
 							dimensions={{
 								width: 400,
@@ -103,13 +120,13 @@ function Edit({
 						icon={"fullscreen-exit-alt"}
 						label="Hauteur Fixe"
 						isActive={heightFixed}
-						onClick={() => setAttributes({ heightFixed: true })}
+						onClick={() => onHeightFixedChange(true)}
 					/>
 					<ToolbarButton
 						icon={"editor-expand"}
 						label="Hauteur Pleine"
 						isActive={!heightFixed}
-						onClick={() => setAttributes({ heightFixed: false })}
+						onClick={() => onHeightFixedChange(false)}
 					/>
 				</ToolbarGroup>
 				{coverUrl && (