FEATURE Handling a black and white version

plugins/carhop-blocks/blocks/narrative-card/build/block.json

@@ -37,6 +37,10 @@
     },
     "coverAlt": {
       "type": "string"
+    },
+    "blackWhiteCoverFilter": {
+      "type": "boolean",
+      "default": true
     }
   }
 }

plugins/carhop-blocks/blocks/narrative-card/build/blocks-manifest.php

@@ -42,6 +42,10 @@ return array(
 			),
 			'coverAlt' => array(
 				'type' => 'string'
+			),
+			'blackWhiteCoverFilter' => array(
+				'type' => 'boolean',
+				'default' => true
 			)
 		)
 	)

plugins/carhop-blocks/blocks/narrative-card/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '5e9d2c0b3f418fe8c996');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => 'f9b21b66fbfc32799aca');

plugins/carhop-blocks/blocks/narrative-card/build/index.js

@@ -79,7 +79,7 @@ function Cover({
   \************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/narrative-card","version":"0.1.0","title":"Carte narrative","category":"carhop-blocks","icon":"smiley","description":"Une carte narrative","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasCover":{"type":"boolean","default":true},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/narrative-card","version":"0.1.0","title":"Carte narrative","category":"carhop-blocks","icon":"smiley","description":"Une carte narrative","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasCover":{"type":"boolean","default":true},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"blackWhiteCoverFilter":{"type":"boolean","default":true}}}');
 
 /***/ }),
 
@@ -120,9 +120,11 @@ function Edit({
     coverUrl,
     coverAlt,
     coverPosition,
-    hasCover
+    hasCover,
+    blackWhiteCoverFilter
   } = attributes;
   const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
+  console.log(blackWhiteCoverFilter);
   function setCoverAttributes(cover) {
     setAttributes({
       coverId: cover.id,
@@ -187,12 +189,30 @@ function Edit({
               label: "Droite",
               value: "right"
             })]
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
+            className: "deligraph-blocks__variant",
+            isBlock: true,
+            label: "Filtre",
+            onChange: value => {
+              console.log(value);
+              setAttributes({
+                blackWhiteCoverFilter: value === "true"
+              });
+            },
+            value: blackWhiteCoverFilter ? "true" : "false",
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+              label: "Noir et blanc",
+              value: "true"
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+              label: "Aucun",
+              value: "false"
+            })]
           })]
         })]
       })
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
-        className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}` : ""}`
+        className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
       }),
       children: [shouldShowCoverLeft && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Cover__WEBPACK_IMPORTED_MODULE_4__["default"], {
         coverUrl: coverUrl,
@@ -293,11 +313,12 @@ function save({
     hasCover,
     coverUrl,
     coverAlt,
-    coverPosition
+    coverPosition,
+    blackWhiteCoverFilter
   } = attributes;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}` : ""}`
+      className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
     }),
     children: [hasCover && coverPosition === "left" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
       className: "narrative-card__cover",

plugins/carhop-blocks/blocks/narrative-card/src/block.json

@@ -37,6 +37,10 @@
 		},
 		"coverAlt": {
 			"type": "string"
+		},
+		"blackWhiteCoverFilter": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }

plugins/carhop-blocks/blocks/narrative-card/src/edit.js

@@ -21,8 +21,16 @@ import { lock, trash } from "@wordpress/icons";
 import CoverImage from "./Cover";
 
 export default function Edit({ attributes, setAttributes }) {
-	const { coverId, coverUrl, coverAlt, coverPosition, hasCover } = attributes;
+	const {
+		coverId,
+		coverUrl,
+		coverAlt,
+		coverPosition,
+		hasCover,
+		blackWhiteCoverFilter,
+	} = attributes;
 	const colors = useSetting("color.palette.theme");
+	console.log(blackWhiteCoverFilter);
 
 	function setCoverAttributes(cover) {
 		setAttributes({
@@ -93,6 +101,20 @@ export default function Edit({ attributes, setAttributes }) {
 								<ToggleGroupControlOption label="Gauche" value="left" />
 								<ToggleGroupControlOption label="Droite" value="right" />
 							</ToggleGroupControl>
+
+							<ToggleGroupControl
+								className="deligraph-blocks__variant"
+								isBlock
+								label="Filtre"
+								onChange={(value) => {
+									console.log(value);
+									setAttributes({ blackWhiteCoverFilter: value === "true" });
+								}}
+								value={blackWhiteCoverFilter ? "true" : "false"}
+							>
+								<ToggleGroupControlOption label="Noir et blanc" value="true" />
+								<ToggleGroupControlOption label="Aucun" value="false" />
+							</ToggleGroupControl>
 						</div>
 					)}
 				</PanelBody>
@@ -101,7 +123,11 @@ export default function Edit({ attributes, setAttributes }) {
 				{...useBlockProps({
 					className: `narrative-card ${
 						hasCover
-							? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}`
+							? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
+									blackWhiteCoverFilter
+										? "narrative-card--black-white-cover-filter"
+										: ""
+							  }`
 							: ""
 					}`,
 				})}

plugins/carhop-blocks/blocks/narrative-card/src/save.js

@@ -2,14 +2,19 @@ import { useBlockProps } from "@wordpress/block-editor";
 import { InnerBlocks } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
-	const { hasCover, coverUrl, coverAlt, coverPosition } = attributes;
+	const { hasCover, coverUrl, coverAlt, coverPosition, blackWhiteCoverFilter } =
+		attributes;
 
 	return (
 		<div
 			{...useBlockProps.save({
 				className: `narrative-card ${
 					hasCover
-						? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}`
+						? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
+								blackWhiteCoverFilter
+									? "narrative-card--black-white-cover-filter"
+									: ""
+						  }`
 						: ""
 				}`,
 			})}