added variables in create_html with compact

plugins/fipf_wp_plugin/fipf_wp_hooks.php

@@ -43,10 +43,21 @@ function main_shortcode() {
 		"myvar_2",
 	));
 
-	return create_html( array(
-		"index.html",
-		"index2.html",
-	));
+
+	$names = ["hugo", "camille"];
+	$ages = ["13", "34", "56"];
+	$html_front = create_html(
+		array(
+			"index.html",
+			"index2.html",
+		),
+		compact(
+			"names",
+			"ages",
+		)
+	);
+
+	return $html_front;
 }
 add_shortcode('fipf_wp_plugin', 'main_shortcode');
 

plugins/fipf_wp_plugin/html/index.html

@@ -1,4 +1,5 @@
 <p>i am a new p</p>
+<p class="first_el_to_change">to change</p>
 <?php
 	foreach($names as $name) {
 		include($template_dir."presentation.html");

plugins/fipf_wp_plugin/html/index2.html

@@ -1 +1,9 @@
+<?php
+	foreach($ages as $age) {
+		?>
+		<p>age <?php echo esc_html($age); ?></p>
+		<?php
+	}
+?>
+<p class="third_el_to_change">to change</p>
 <p>aaaaaand this is the end</p>

plugins/fipf_wp_plugin/html/templates/presentation.html

@@ -1 +1,2 @@
 <p>hello <?php echo esc_html($name); ?></p>
+<p class="second_el_to_change">to change</p>

plugins/fipf_wp_plugin/scripts/myscript.js

@@ -1,5 +1,5 @@
 
-const title = document.querySelector(".has-text-align-center.wp-block-post-title");
-title.innerHTML = "coucou ;)";
+const title = document.querySelector(".first_el_to_change");
+title.innerHTML = "--- coucou ;)";
 
 console.log("myvar_1: " + myvar_1);

plugins/fipf_wp_plugin/scripts/myscript2.js

@@ -1,4 +1,4 @@
 
-const title2 = document.querySelector(".wp-block-quote");
-title2.innerHTML = "ho boy !";
+const title2 = document.querySelector(".second_el_to_change");
+title2.innerHTML = "--- ho boy !";
 

plugins/fipf_wp_plugin/scripts/myscript3.js

@@ -1,5 +1,5 @@
 
-const title3 = document.querySelector(".has-text-align-center.wp-block-post-title");
-title3.innerHTML = "bye bye";
+const title3 = document.querySelector(".third_el_to_change");
+title3.innerHTML = "--- bye bye";
 console.log("myvar_2: " + myvar_2);
 

plugins/fipf_wp_plugin/styles/mystyle.css

@@ -1,3 +1,3 @@
-.has-text-align-center.wp-block-post-title {
+.first_el_to_change {
 	border: 1px solid red;
 }

plugins/fipf_wp_plugin/utils/create_html.php

@@ -6,11 +6,13 @@
 #
 # https://stackoverflow.com/a/4402045/9497573
 
-function create_html($files) {
+# takes two arguments :
+# a list of the html files to include in front
+# a list of variables to make available to this files
+function create_html($files, $vars) {
 	$html_dir = plugin_dir_path(__DIR__).'html/';
 	$template_dir = plugin_dir_path(__DIR__).'html/templates/';
-
-	$names = ["hugo", "camille"];
+	extract($vars);
 
 	ob_start();
 	foreach($files as $file) {