FEATURE Refactoring block to handle render.php to be executed as template part by the theme

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

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

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

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

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '66d7a6d613074de1e159');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '75ed85d80e2bf481c1fc');

plugins/carhop-blocks/blocks/cta/build/cta/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/cta","version":"0.1.0","title":"Cta","category":"carhop-blocks","icon":"smiley","description":"Un bouton de lien","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":{"text":{"type":"string","default":"Call to action"},"link":{"type":"object"},"align":{"type":"string","default":"left"},"color":{"type":"string","default":"#136F63"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/cta","version":"0.1.0","title":"Cta","category":"carhop-blocks","icon":"smiley","description":"Un bouton de lien","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":{"text":{"type":"string","default":"Call to action"},"link":{"type":"object"},"align":{"type":"string","default":"left"},"color":{"type":"string","default":"#136F63"}}}');
 
 /***/ }),
 
@@ -213,24 +213,23 @@ function save({
     text,
     color
   } = attributes;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("a", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {})
-    href: link?.url,
+  // <a
-    ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
+  // 	href={link?.url}
-      className: `align--${align}`,
+  // 	{...useBlockProps.save({
-      style: {
+  // 		className: `align--${align}`,
-        color: color,
+  // 		style: {
-        "--cta-current-color": color
+  // 			color: color,
-      }
+  // 			"--cta-current-color": color,
-    }),
+  // 		},
-    children: [text, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
+  // 	})}
-      className: "icon",
+  // >
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_img_carhop_fleche_lien_externe_full_svg__WEBPACK_IMPORTED_MODULE_1__.ReactComponent, {
+  // 	{text}
-        style: {
+  // 	<div className="icon">
-          "--cta-current-color": color
+  // 		<ArrowIcon style={{ "--cta-current-color": color }} />
-        }
+  // 	</div>
-      })
+  // </a>
-    })]
+  ;
-  });
 }
 
 /***/ }),

plugins/carhop-blocks/blocks/cta/build/cta/render.php

@@ -0,0 +1,35 @@
+<?php
+$align = isset($attributes['align']) ? $attributes['align'] : '';
+$link = isset($attributes['link']) ? $attributes['link'] : [];
+$text = isset($attributes['text']) ? $attributes['text'] : '';
+$color = isset($attributes['color']) ? $attributes['color'] : 'red';
+
+
+$svg_arrow_path = get_template_directory() . '/resources/img/carhop-fleche-lien-externe-full.svg';
+
+
+$wrapper_attributes = get_block_wrapper_attributes([
+	'class' => 'align--' . esc_attr($align),
+	'style' => sprintf(
+		'color: %s; --cta-current-color: %s;',
+		esc_attr($color),
+		esc_attr($color)
+	)
+]);
+
+$link_url = isset($link['url']) ? esc_url($link['url']) : '#';
+?>
+
+<a href="<?php echo $link_url; ?>" <?php echo $wrapper_attributes; ?>>
+	<?php echo esc_html($text); ?>
+	<div class="icon">
+
+		<svg id="fleche-lien-externe-full" viewBox="0 0 32 32" style="--cta-current-color: <?php echo esc_attr($color); ?>">
+			<g>
+				<path class="cls-1" d="M21.15,10.59l-9.38,10.02" />
+				<path class="cls-1" d="M21.15,21.4v-10.81h-10.32" />
+			</g>
+			<circle class="cls-1" cx="16" cy="16" r="15" />
+		</svg>
+	</div>
+</a>

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

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

plugins/carhop-blocks/blocks/cta/src/cta/render.php

@@ -0,0 +1,35 @@
+<?php
+$align = isset($attributes['align']) ? $attributes['align'] : '';
+$link = isset($attributes['link']) ? $attributes['link'] : [];
+$text = isset($attributes['text']) ? $attributes['text'] : '';
+$color = isset($attributes['color']) ? $attributes['color'] : 'red';
+
+
+$svg_arrow_path = get_template_directory() . '/resources/img/carhop-fleche-lien-externe-full.svg';
+
+
+$wrapper_attributes = get_block_wrapper_attributes([
+	'class' => 'align--' . esc_attr($align),
+	'style' => sprintf(
+		'color: %s; --cta-current-color: %s;',
+		esc_attr($color),
+		esc_attr($color)
+	)
+]);
+
+$link_url = isset($link['url']) ? esc_url($link['url']) : '#';
+?>
+
+<a href="<?php echo $link_url; ?>" <?php echo $wrapper_attributes; ?>>
+	<?php echo esc_html($text); ?>
+	<div class="icon">
+
+		<svg id="fleche-lien-externe-full" viewBox="0 0 32 32" style="--cta-current-color: <?php echo esc_attr($color); ?>">
+			<g>
+				<path class="cls-1" d="M21.15,10.59l-9.38,10.02" />
+				<path class="cls-1" d="M21.15,21.4v-10.81h-10.32" />
+			</g>
+			<circle class="cls-1" cx="16" cy="16" r="15" />
+		</svg>
+	</div>
+</a>

plugins/carhop-blocks/blocks/cta/src/cta/save.js

@@ -4,20 +4,21 @@ import { ReactComponent as ArrowIcon } from "../img/carhop-fleche-lien-externe-f
 export default function save({ attributes }) {
 	const { align, link, text, color } = attributes;
 	return (
-		<a
+		<></>
-			href={link?.url}
+		// <a
-			{...useBlockProps.save({
+		// 	href={link?.url}
-				className: `align--${align}`,
+		// 	{...useBlockProps.save({
-				style: {
+		// 		className: `align--${align}`,
-					color: color,
+		// 		style: {
-					"--cta-current-color": color,
+		// 			color: color,
-				},
+		// 			"--cta-current-color": color,
-			})}
+		// 		},
-		>
+		// 	})}
-			{text}
+		// >
-			<div className="icon">
+		// 	{text}
-				<ArrowIcon style={{ "--cta-current-color": color }} />
+		// 	<div className="icon">
-			</div>
+		// 		<ArrowIcon style={{ "--cta-current-color": color }} />
-		</a>
+		// 	</div>
+		// </a>
 	);
 }