FIX handlign a dynamic render.php to avoid wp kses problem when injecting svg background

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

@@ -782,6 +782,7 @@ return array(
 		'editorStyle' => 'file:./index.css',
 		'style' => 'file:./style-index.css',
 		'viewScript' => 'file:./view.js',
+		'render' => 'file:./render.php',
 		'attributes' => array(
 			'hasCover' => array(
 				'type' => 'boolean',

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

@@ -16,6 +16,7 @@
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
   "viewScript": "file:./view.js",
+  "render": "file:./render.php",
   "attributes": {
     "hasCover": {
       "type": "boolean",

plugins/carhop-blocks/build/narrative-card/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' => 'a24dbfb47009d67e742b');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '6ebaef11b3d9c28c17cc');

plugins/carhop-blocks/build/narrative-card/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},"aspectRatio":{"type":"string","default":"auto","enum":["auto","1/1","4/3","3/4","3/2","2/3","16/9","21/9","9/16","9/21"]},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"blackWhiteCoverFilter":{"type":"boolean","default":true}}}');
+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","render":"file:./render.php","attributes":{"hasCover":{"type":"boolean","default":true},"aspectRatio":{"type":"string","default":"auto","enum":["auto","1/1","4/3","3/4","3/2","2/3","16/9","21/9","9/16","9/21"]},"coverPosition":{"type":"string","default":"right","enum":["left","right"]},"coverId":{"type":"number"},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"blackWhiteCoverFilter":{"type":"boolean","default":true}}}');
 
 /***/ }),
 
@@ -369,40 +369,7 @@ function save({
     blackWhiteCoverFilter,
     aspectRatio
   } = attributes;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {});
-    ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: `narrative-card ${hasCover ? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${blackWhiteCoverFilter ? "narrative-card--black-white-cover-filter" : ""}` : ""}`
-    }),
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
-      viewBox: "0 0 1216 407",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      preserveAspectRatio: "none",
-      className: "narrative-card__background",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("path", {
-        d: "M1 11V406H1205L1215 1L1 11Z",
-        fill: "white",
-        stroke: "#136F63",
-        strokeWidth: "2",
-        vectorEffect: "non-scaling-stroke"
-      })
-    }), hasCover && coverPosition === "left" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
-      className: `narrative-card__cover${aspectRatio && aspectRatio !== "auto" ? ` narrative-card__cover--ratio-${String(aspectRatio).replace(/[/:]/g, "-")}` : ""}`,
-      children: hasCover && coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img", {
-        src: coverUrl,
-        alt: coverAlt
-      })
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
-      className: "narrative-card__content",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
-    }), hasCover && coverPosition === "right" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
-      className: `narrative-card__cover${aspectRatio && aspectRatio !== "auto" ? ` narrative-card__cover--ratio-${String(aspectRatio).replace(/[/:]/g, "-")}` : ""}`,
-      children: hasCover && coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img", {
-        src: coverUrl,
-        alt: coverAlt
-      })
-    })]
-  });
 }
 
 /***/ }),

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

@@ -0,0 +1,50 @@
+<?php
+
+$inner_blocks = isset($block) && is_object($block) && ! empty($block->inner_blocks) ? $block->inner_blocks : [];
+$hasCover = $attributes['hasCover'];
+$coverPosition = $attributes['coverPosition'];
+$blackWhiteCoverFilter = $attributes['blackWhiteCoverFilter'];
+$aspectRatio = $attributes['aspectRatio'];
+$coverUrl = $attributes['coverUrl'];
+$coverAlt = $attributes['coverAlt'];
+?>
+
+
+<div <?php echo get_block_wrapper_attributes(array('class' => 'narrative-card ' . ($hasCover ? 'narrative-card--has-cover narrative-card--has-cover--' . $coverPosition . ' ' . ($blackWhiteCoverFilter ? 'narrative-card--black-white-cover-filter' : '') : ''))); ?>>
+
+  <svg
+    viewBox="0 0 1216 407"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="none"
+    class="narrative-card__background">
+    <path
+      d="M1 11V406H1205L1215 1L1 11Z"
+      fill="white"
+      stroke="#136F63"
+      stroke-width="2"
+      vector-effect="non-scaling-stroke" />
+  </svg>
+
+  <?php if ($hasCover && $coverPosition === "left") : ?>
+    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
+      <?php if ($hasCover && $coverUrl) : ?>
+        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
+
+  <div class="narrative-card__content">
+    <?php foreach ($inner_blocks as $inner_block) {
+      echo $inner_block->render();
+    } ?>
+  </div>
+  <?php if ($hasCover && $coverPosition === "right") : ?>
+    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
+      <?php if ($hasCover && $coverUrl) : ?>
+        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
+
+</div>

plugins/carhop-blocks/build/variations.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '4084d7e87e3b70c01e93');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'cb68829c713b83a15dea');

plugins/carhop-blocks/build/variations.js

@@ -190,7 +190,7 @@ __webpack_require__.r(__webpack_exports__);
 // 3. On ajoute des props au HTML sauvegardé pour chaque <li>
 // -----------------------------
 (0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_5__.addFilter)("blocks.getSaveContent.extraProps", "carhop/iconed-list-item-save-props", (extraProps, blockType, attributes) => {
-  if (blockType.name !== "core/list-item") {
+  if (blockType.name !== "core/list-item" || !attributes.icon) {
     return extraProps;
   }
   if (attributes.icon) {

plugins/carhop-blocks/src/core-variants/core-list-variant/editor.js

@@ -124,7 +124,7 @@ addFilter(
 	"blocks.getSaveContent.extraProps",
 	"carhop/iconed-list-item-save-props",
 	(extraProps, blockType, attributes) => {
-		if (blockType.name !== "core/list-item") {
+		if (blockType.name !== "core/list-item" || !attributes.icon) {
 			return extraProps;
 		}
 

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

@@ -16,6 +16,7 @@
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
 	"viewScript": "file:./view.js",
+	"render": "file:./render.php",
 	"attributes": {
 		"hasCover": {
 			"type": "boolean",

plugins/carhop-blocks/src/narrative-card/render.php

@@ -0,0 +1,50 @@
+<?php
+
+$inner_blocks = isset($block) && is_object($block) && ! empty($block->inner_blocks) ? $block->inner_blocks : [];
+$hasCover = $attributes['hasCover'];
+$coverPosition = $attributes['coverPosition'];
+$blackWhiteCoverFilter = $attributes['blackWhiteCoverFilter'];
+$aspectRatio = $attributes['aspectRatio'];
+$coverUrl = $attributes['coverUrl'];
+$coverAlt = $attributes['coverAlt'];
+?>
+
+
+<div <?php echo get_block_wrapper_attributes(array('class' => 'narrative-card ' . ($hasCover ? 'narrative-card--has-cover narrative-card--has-cover--' . $coverPosition . ' ' . ($blackWhiteCoverFilter ? 'narrative-card--black-white-cover-filter' : '') : ''))); ?>>
+
+  <svg
+    viewBox="0 0 1216 407"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="none"
+    class="narrative-card__background">
+    <path
+      d="M1 11V406H1205L1215 1L1 11Z"
+      fill="white"
+      stroke="#136F63"
+      stroke-width="2"
+      vector-effect="non-scaling-stroke" />
+  </svg>
+
+  <?php if ($hasCover && $coverPosition === "left") : ?>
+    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
+      <?php if ($hasCover && $coverUrl) : ?>
+        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
+
+  <div class="narrative-card__content">
+    <?php foreach ($inner_blocks as $inner_block) {
+      echo $inner_block->render();
+    } ?>
+  </div>
+  <?php if ($hasCover && $coverPosition === "right") : ?>
+    <div class="narrative-card__cover<?php echo $aspectRatio && $aspectRatio !== "auto" ? ' narrative-card__cover--ratio-' . str_replace(['/', ':'], '-', $aspectRatio) : ''; ?>">
+      <?php if ($hasCover && $coverUrl) : ?>
+        <img src="<?php echo $coverUrl; ?>" alt="<?php echo $coverAlt; ?>">
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
+
+</div>

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

@@ -11,67 +11,5 @@ export default function save({ attributes }) {
 		aspectRatio,
 	} = attributes;
 
-	return (
+	return <InnerBlocks.Content />;
-		<div
-			{...useBlockProps.save({
-				className: `narrative-card ${
-					hasCover
-						? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
-								blackWhiteCoverFilter
-									? "narrative-card--black-white-cover-filter"
-									: ""
-						  }`
-						: ""
-				}`,
-			})}
-		>
-			<svg
-				viewBox="0 0 1216 407"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				preserveAspectRatio="none"
-				className="narrative-card__background"
-			>
-				<path
-					d="M1 11V406H1205L1215 1L1 11Z"
-					fill="white"
-					stroke="#136F63"
-					strokeWidth="2"
-					vectorEffect="non-scaling-stroke"
-				/>
-			</svg>
-
-			{hasCover && coverPosition === "left" && (
-				<div
-					className={`narrative-card__cover${
-						aspectRatio && aspectRatio !== "auto"
-							? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
-									/[/:]/g,
-									"-"
-							  )}`
-							: ""
-					}`}
-				>
-					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
-				</div>
-			)}
-			<div className="narrative-card__content">
-				<InnerBlocks.Content />
-			</div>
-			{hasCover && coverPosition === "right" && (
-				<div
-					className={`narrative-card__cover${
-						aspectRatio && aspectRatio !== "auto"
-							? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
-									/[/:]/g,
-									"-"
-							  )}`
-							: ""
-					}`}
-				>
-					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
-				</div>
-			)}
-		</div>
-	);
 }