FEATURE Adding a stroked after block style

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

@@ -283,6 +283,14 @@ return array(
 			'blockVariant' => array(
 				'type' => 'string',
 				'default' => 'framed'
+			),
+			'blockWidth' => array(
+				'type' => 'string',
+				'default' => 'full',
+				'enum' => array(
+					'full',
+					'contained'
+				)
 			)
 		)
 	),
@@ -503,6 +511,12 @@ return array(
 		'editorStyle' => 'file:./index.css',
 		'style' => 'file:./style-index.css',
 		'viewScript' => 'file:./view.js',
+		'styles' => array(
+			array(
+				'name' => 'stroked-after',
+				'label' => 'Titre + trait '
+			)
+		),
 		'attributes' => array(
 			'hierarchy' => array(
 				'type' => 'string',

plugins/carhop-blocks/build/chapter-section/index.asset.php

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

plugins/carhop-blocks/build/chapter-section/index.js

@@ -183,8 +183,6 @@ function Edit({
       hasLightBackground: isLightBackgroundColor
     });
   }
-  console.log(backgroundColor);
-  console.log((0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_7__.isColorLight)(backgroundColor));
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment, {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {

plugins/carhop-blocks/build/content-box/block.json

@@ -37,6 +37,14 @@
     "blockVariant": {
       "type": "string",
       "default": "framed"
+    },
+    "blockWidth": {
+      "type": "string",
+      "default": "full",
+      "enum": [
+        "full",
+        "contained"
+      ]
     }
   }
 }

plugins/carhop-blocks/build/content-box/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'c3dee79056580a73a99f');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '45f49839a2c1b3f6bfdc');

plugins/carhop-blocks/build/content-box/index.js

@@ -41,7 +41,7 @@ function isColorLight(color) {
   \************************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"blockVariant":{"type":"string","default":"framed"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"blockVariant":{"type":"string","default":"framed"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]}}}');
 
 /***/ }),
 
@@ -88,9 +88,10 @@ function Edit({
     backgroundColor,
     textColor,
     hasLightBackground,
-    blockVariant
+    blockVariant,
+    blockWidth
   } = attributes;
-
+  console.log(blockWidth);
   // Détecter le type de post actuel
   const postType = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
     return select("core/editor").getCurrentPostType();
@@ -142,6 +143,14 @@ function Edit({
     setAttributes({
       blockVariant: value
     });
+    if (value === "framed" || value === "nude") {
+      setAttributes({
+        backgroundColor: "#fff"
+      });
+      setAttributes({
+        hasLightBackground: true
+      });
+    }
   }
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
@@ -155,12 +164,31 @@ function Edit({
           __nextHasNoMarginBottom: true,
           __next40pxDefaultSize: true,
           children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            value: "nude",
+            label: "Nu"
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
             value: "framed",
             label: "Encadr\xE9"
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
             value: "backgrounded",
             label: "Fond color\xE9"
           })]
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
+          label: "Largeur du bloc",
+          value: blockWidth,
+          onChange: value => setAttributes({
+            blockWidth: value
+          }),
+          isBlock: true,
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            value: "full",
+            label: "Pleine largeur"
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            value: "contained",
+            label: "Contenue"
+          })]
         }), blockVariant === "backgrounded" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Card, {
           children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CardHeader, {
             children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("h1", {
@@ -191,7 +219,8 @@ function Edit({
       })
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("section", {
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
-        className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
+        className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}
+					${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
         style: {
           "--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
           "--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"
@@ -293,11 +322,13 @@ function save({
     textColor,
     hasLightBackground,
     hasBackgroundColor,
-    blockVariant
+    blockVariant,
+    blockWidth
   } = attributes;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: `content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
+      className: `content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}
+				${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
       style: {
         "--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
         "--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"

plugins/carhop-blocks/build/heading/block.json

@@ -16,6 +16,12 @@
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
   "viewScript": "file:./view.js",
+  "styles": [
+    {
+      "name": "stroked-after",
+      "label": "Titre + trait "
+    }
+  ],
   "attributes": {
     "hierarchy": {
       "type": "string",

plugins/carhop-blocks/build/heading/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '63c97536bc9b836b7ef7');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'd4e1ebabc5dcdc5cce1d');

plugins/carhop-blocks/build/heading/index.js

@@ -8,7 +8,7 @@
   \********************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/heading","version":"0.1.0","title":"Titrage","category":"carhop-blocks","icon":"smiley","description":"Boite de titrage pour la mise en forme d\'éléments de contenu","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":{"hierarchy":{"type":"string","enum":["classic","inverted"],"default":"classic"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/heading","version":"0.1.0","title":"Titrage","category":"carhop-blocks","icon":"smiley","description":"Boite de titrage pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","styles":[{"name":"stroked-after","label":"Titre + trait "}],"attributes":{"hierarchy":{"type":"string","enum":["classic","inverted"],"default":"classic"}}}');
 
 /***/ }),
 

plugins/carhop-blocks/carhop-blocks.php

@@ -100,3 +100,28 @@ function carhop_register_blocks()
 	);
 }
 add_action('init', 'carhop_register_blocks');
+
+/* ----------------------------------------------------------------
+	##### EDITOR EXTENSIONS
+ ------------------------------------------------------------------*/
+/**
+ * Étend le bloc Titre (core/heading) avec un attribut "carhopVariant"
+ * et ajoute une interface pour choisir une variante (ajoute une classe CSS).
+ */
+function carhop_enqueue_editor_assets()
+{
+	$script_path = __DIR__ . '/src/core-heading-variant/editor.js';
+	if (!file_exists($script_path)) {
+		return;
+	}
+
+
+	wp_enqueue_script(
+		'carhop-heading-variant',
+		plugins_url('src/core-heading-variant/editor.js', __FILE__),
+		array('wp-blocks', 'wp-element', 'wp-dom-ready', 'wp-components', 'wp-compose', 'wp-data', 'wp-hooks', 'wp-i18n', 'wp-block-editor', 'wp-edit-post'),
+		filemtime($script_path),
+		true
+	);
+}
+add_action('enqueue_block_editor_assets', 'carhop_enqueue_editor_assets');

plugins/carhop-blocks/src/chapter-section/edit.js

@@ -86,8 +86,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		const isLightBackgroundColor = isColorLight(backgroundColor);
 		setAttributes({ hasLightBackground: isLightBackgroundColor });
 	}
-	console.log(backgroundColor);
-	console.log(isColorLight(backgroundColor));
 
 	return (
 		<>

plugins/carhop-blocks/src/content-box/block.json

@@ -37,6 +37,14 @@
 		"blockVariant": {
 			"type": "string",
 			"default": "framed"
+		},
+		"blockWidth": {
+			"type": "string",
+			"default": "full",
+			"enum": [
+				"full",
+				"contained"
+			]
 		}
 	}
 }

plugins/carhop-blocks/src/content-box/edit.js

@@ -37,6 +37,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		textColor,
 		hasLightBackground,
 		blockVariant,
+		blockWidth,
 	} = attributes;
 
 	// Détecter le type de post actuel
@@ -77,6 +78,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 	}
 	function onBlockVariantChange(value) {
 		setAttributes({ blockVariant: value });
+
+		if (value === "framed" || value === "nude") {
+			setAttributes({ backgroundColor: "#fff" });
+			setAttributes({ hasLightBackground: true });
+		}
 	}
 	return (
 		<>
@@ -90,12 +96,24 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 					>
+						<ToggleGroupControlOption value="nude" label="Nu" />
 						<ToggleGroupControlOption value="framed" label="Encadré" />
 						<ToggleGroupControlOption
 							value="backgrounded"
 							label="Fond coloré"
 						/>
 					</ToggleGroupControl>
+					<ToggleGroupControl
+						label="Largeur du bloc"
+						value={blockWidth}
+						onChange={(value) => setAttributes({ blockWidth: value })}
+						isBlock
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					>
+						<ToggleGroupControlOption value="full" label="Pleine largeur" />
+						<ToggleGroupControlOption value="contained" label="Contenue" />
+					</ToggleGroupControl>
 
 					{blockVariant === "backgrounded" && (
 						<Card>
@@ -138,7 +156,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
-					}`,
+					}
+					${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
 					style: {
 						"--content-box-text-color": textColor ?? "inherit",
 						"--content-box-background-color":

plugins/carhop-blocks/src/content-box/save.js

@@ -8,13 +8,15 @@ export default function save({ attributes }) {
 		hasLightBackground,
 		hasBackgroundColor,
 		blockVariant,
+		blockWidth,
 	} = attributes;
 	return (
 		<section
 			{...useBlockProps.save({
 				className: `content-box content-box--variant-${blockVariant} ${
 					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
-				}`,
+				}
+				${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
 				style: {
 					"--content-box-text-color": textColor ?? "inherit",
 					"--content-box-background-color":

plugins/carhop-blocks/src/core-heading-variant/editor.js

@@ -0,0 +1,19 @@
+// wp.blocks.registerBlockVariation("core/heading", {
+// 	name: "heading-variant",
+// 	title: "Titre + trait ",
+
+// 	attributes: {
+// 		className: "is-styled-stroked-after",
+// 	},
+// 	scope: ["inserter", "block", "transform"],
+// });
+
+wp.blocks.registerBlockStyle("core/heading", {
+	name: "stroked-after",
+	label: "Titre + trait ",
+});
+
+// wp.blocks.registerBlockStyle("carhop-blocks/heading", {
+// 	name: "stroked-after",
+// 	label: "Titre + trait ",
+// });

plugins/carhop-blocks/src/heading/block.json

@@ -16,6 +16,12 @@
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
 	"viewScript": "file:./view.js",
+	"styles": [
+		{
+			"name": "stroked-after",
+			"label": "Titre + trait "
+		}
+	],
 	"attributes": {
 		"hierarchy": {
 			"type": "string",