introducing component cover size attribute

blocks/content-page-header/build/block.json

@@ -53,6 +53,10 @@
     },
     "anchor": {
       "type": "string"
+    },
+    "coverSize": {
+      "type": "string",
+      "default": "medium"
     }
   }
 }

blocks/content-page-header/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '707cbf4f5eee20e6f5ce');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '00a2ba43b23fe2f7862c');

blocks/content-page-header/build/index.js

@@ -45,7 +45,8 @@ function Edit({
     hasCustomImage,
     imageId,
     imageAlt,
-    imageUrl
+    imageUrl,
+    coverSize
   } = attributes;
   const pageTitle = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
     const {
@@ -131,6 +132,11 @@ function Edit({
       }
     });
   }
+  function onCoverSizeChange(coverSize) {
+    setAttributes({
+      coverSize
+    });
+  }
   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_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
     className: "homegrade-blocks-content-page-header__panel-cta",
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Titre du bloc", "homegrade-blocks")
@@ -163,7 +169,22 @@ function Edit({
     icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
     label: "Supprimer",
     onClick: removeImageAttributes
-  }))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
+  })))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControl, {
+    className: "homegrade-blocks-highlight__variant",
+    isBlock: true,
+    label: "Taille de la couverture",
+    onChange: onCoverSizeChange,
+    value: coverSize
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
+    label: "S",
+    value: "small"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
+    label: "M",
+    value: "medium"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, {
+    label: "L",
+    value: "large"
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
     className: "homegrade-blocks-content-page-header__panel-cta",
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Call to action", "homegrade-blocks")
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
@@ -216,7 +237,7 @@ function Edit({
   }), hasCustomImage && imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: imageUrl,
     alt: imageAlt,
-    className: "block-content-page-header__page-icon"
+    className: `block-content-page-header__page-icon block-content-page-header__page-icon--${coverSize}`
   }), hasCustomImage && !imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.MediaPlaceholder, {
     accept: "image/*",
     allowedTypes: ["image"],
@@ -434,7 +455,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/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"},"hasCustomImage":{"type":"boolean","default":false},"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"anchor":{"type":"string"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"},"hasCustomImage":{"type":"boolean","default":false},"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"anchor":{"type":"string"},"coverSize":{"type":"string","default":"medium"}}}');
 
 /***/ })
 

blocks/content-page-header/build/render.php

@@ -7,6 +7,7 @@ $pageIllustration = get_field('page_illustration');
 $hasCustomImage = $attributes['hasCustomImage'] ?? null;
 $customImageUrl = $attributes['imageUrl'] ?? null;
 $customImageAlt = $attributes['imageAlt'] ?? null;
+$coverSize = $attributes['coverSize'] ?? null;
 
 $customTitle = $attributes['blockCustomTitle'] ?? null;
 $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
@@ -32,10 +33,10 @@ $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
 	</div>
 
 	<?php if ($pageIllustration && !$hasCustomImage) : ?>
-		<img class="block-content-page-header__page-icon" src="<?php echo $pageIllustration['url'] ?>" alt="">
+		<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : ""  ?> " src="<?php echo $pageIllustration['url'] ?>" alt="">
 	<?php endif; ?>
 	<?php if ($hasCustomImage && $customImageUrl) : ?>
-		<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
+		<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : ""  ?>" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
 	<?php endif; ?>
-
+		
 </section>

blocks/content-page-header/build/style-index.css

@@ -1,11 +0,0 @@
-/*!***************************************************************************************************************************************************************************************************************************************!*\
-  !*** 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 ***!
-  \***************************************************************************************************************************************************************************************************************************************/
-.block-content-page-header p {
-  display: none;
-}
-.block-content-page-header .innerblocks p {
-  display: block;
-}
-
-/*# sourceMappingURL=style-index.css.map*/

blocks/content-page-header/build/style-index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAEC;EACC;AADF;AAGC;EACC;AADF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["// Styled by the theme\r\n.block-content-page-header {\r\n\tp {\r\n\t\tdisplay: none;\r\n\t}\r\n\t.innerblocks p {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

blocks/content-page-header/src/block.json

@@ -53,6 +53,10 @@
 		},
 		"anchor": {
 			"type": "string"
+		},
+		"coverSize": {
+			"type": "string",
+			"default": "medium"
 		}
 	}
 }

blocks/content-page-header/src/edit.js

@@ -14,9 +14,11 @@ import {
 import {
 	PanelBody,
 	TextControl,
-	ToggleControl,
 	Button,
 	Tip,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from "@wordpress/components";
 
 import { trash } from "@wordpress/icons";
@@ -33,6 +35,7 @@ export default function Edit({ attributes, setAttributes }) {
 		imageId,
 		imageAlt,
 		imageUrl,
+		coverSize,
 	} = attributes;
 
 	const pageTitle = useSelect((select) => {
@@ -105,6 +108,9 @@ export default function Edit({ attributes, setAttributes }) {
 			},
 		});
 	}
+	function onCoverSizeChange(coverSize) {
+		setAttributes({ coverSize });
+	}
 	return (
 		<>
 			<InspectorControls>
@@ -171,6 +177,17 @@ export default function Edit({ attributes, setAttributes }) {
 							</div>
 						</>
 					)}
+					<ToggleGroupControl
+						className="homegrade-blocks-highlight__variant"
+						isBlock
+						label="Taille de la couverture"
+						onChange={onCoverSizeChange}
+						value={coverSize}
+					>
+						<ToggleGroupControlOption label="S" value="small" />
+						<ToggleGroupControlOption label="M" value="medium" />
+						<ToggleGroupControlOption label="L" value="large" />
+					</ToggleGroupControl>
 				</PanelBody>
 
 				<PanelBody
@@ -262,7 +279,7 @@ export default function Edit({ attributes, setAttributes }) {
 					<img
 						src={imageUrl}
 						alt={imageAlt}
-						className="block-content-page-header__page-icon"
+						className={`block-content-page-header__page-icon block-content-page-header__page-icon--${coverSize}`}
 					/>
 				)}
 				{hasCustomImage && !imageUrl && (

blocks/content-page-header/src/render.php

@@ -7,6 +7,7 @@ $pageIllustration = get_field('page_illustration');
 $hasCustomImage = $attributes['hasCustomImage'] ?? null;
 $customImageUrl = $attributes['imageUrl'] ?? null;
 $customImageAlt = $attributes['imageAlt'] ?? null;
+$coverSize = $attributes['coverSize'] ?? null;
 
 $customTitle = $attributes['blockCustomTitle'] ?? null;
 $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
@@ -32,10 +33,10 @@ $anchor = isset($attributes['anchor']) ? esc_html($attributes['anchor']) : null;
 	</div>
 
 	<?php if ($pageIllustration && !$hasCustomImage) : ?>
-		<img class="block-content-page-header__page-icon" src="<?php echo $pageIllustration['url'] ?>" alt="">
+		<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : ""  ?> " src="<?php echo $pageIllustration['url'] ?>" alt="">
 	<?php endif; ?>
 	<?php if ($hasCustomImage && $customImageUrl) : ?>
-		<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
+		<img class="block-content-page-header__page-icon <?php echo $coverSize ? "block-content-page-header__page-icon--" . $coverSize : ""  ?>" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
 	<?php endif; ?>
-
+		
 </section>