refining bug on content css property for arrays

css/app.css

@@ -4010,21 +4010,25 @@ article > *:not(.entry-content, .chapter-header-block),
 }
 
 .wp-block-table .table-cell-icon {
+  position: relative;
   margin-left: auto;
   margin-right: auto;
   display: flex;
-  height: 2rem;
+  height: auto;
-  width: 2rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  flex-grow: 0;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
   padding: 0.5rem;
+  aspect-ratio: 1;
 }
 
-.wp-block-table .table-cell-icon:before {
+.wp-block-table .table-cell-icon img {
-  display: flex;
+  height: 1rem;
-  align-items: center;
+  width: 1rem;
-  justify-content: center;
 }
 
 .wp-block-table .table-cell-icon--checked {
@@ -4032,10 +4036,6 @@ article > *:not(.entry-content, .chapter-header-block),
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.wp-block-table .table-cell-icon--checked:before {
-  content: url('../resources/img/graphic-assets/table-cell--check.svg');
-}
-
 .wp-block-table .table-cell-icon--crossed {
   border-width: 2px;
   --tw-border-opacity: 1;
@@ -4044,10 +4044,6 @@ article > *:not(.entry-content, .chapter-header-block),
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.wp-block-table .table-cell-icon--crossed:before {
-  content: url('../resources/img/graphic-assets/table-cell--cross.svg');
-}
-
 .tooltip-word {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;

includes/init.php

@@ -64,11 +64,13 @@ function tailpress_enqueue_scripts()
 	// #PASSING TRANSLATIONS
 	wp_register_script('main-app-js', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
 
-	$translations_main_app_js = array(
+	$main_app_js_dynamic_datas = array(
 		'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'),
 		'no' => __('Non', 'homegrade-theme__texte-fonctionnel'),
+		'template_directory_uri' => get_template_directory_uri(),
+
 	);
-	wp_localize_script('main-app-js', 'textTranslationsMainAppJS', $translations_main_app_js);
+	wp_localize_script('main-app-js', 'mainAppJsDynamicDatas', $main_app_js_dynamic_datas);
 
 	wp_enqueue_script('main-app-js');
 

js/app.js

@@ -8,11 +8,12 @@
     const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((v))"));
     const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((x))"));
     checkedCells.forEach((cell) => {
-      console.log(textTranslationsMainAppJS);
+      cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
-      cell.innerHTML = `<span class="table-cell-icon table-cell-icon--checked"  aria-label="${textTranslationsMainAppJS.yes}"></span>`;
+      alt="${mainAppJsDynamicDatas.yes}"/></div>`;
     });
     crossedCells.forEach((cell) => {
-      cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
+      cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
+      alt="${mainAppJsDynamicDatas.no}"/>`;
     });
   }
 

resources/css/editor-content/gutenberg.css

@@ -86,21 +86,16 @@ article > *:not(.entry-content, .chapter-header-block),
     @apply border border-neutral-200 py-3;
   }
   .table-cell-icon {
-    @apply mx-auto w-8 h-8 p-2 rounded-full flex items-center justify-center;
+    @apply mx-auto p-2 w-fit h-auto  rounded-full flex items-center justify-center relative grow-0;
-    &:before {
+    aspect-ratio: 1;
-      @apply flex justify-center items-center;
+    img {
+      @apply w-4 h-4;
     }
   }
   .table-cell-icon--checked {
     @apply bg-green-600;
-    &:before {
-      content: url('../resources/img/graphic-assets/table-cell--check.svg');
-    }
   }
   .table-cell-icon--crossed {
     @apply bg-white border-2 border-neutral-800;
-    &:before {
-      content: url('../resources/img/graphic-assets/table-cell--cross.svg');
-    }
   }
 }

resources/img/graphic-assets/table-cell--check.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15.111" height="10.886" viewBox="0 0 15.111 10.886">
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="15.111" height="10.886" viewBox="0 0 15.111 10.886">
   <path id="Tracé_3608" data-name="Tracé 3608" d="M-4090.82,6199.981l3.81,3.811,8.472-8.473" transform="translate(4092.234 -6193.905)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 </svg>

resources/img/graphic-assets/table-cell--cross.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="11.673" height="11.647" viewBox="0 0 11.673 11.647">
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="11.673" height="11.647" viewBox="0 0 11.673 11.647">
   <g id="Groupe_5848" data-name="Groupe 5848" transform="translate(-960.782 -6194.834)">
     <path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.772,6207.214l8.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
     <path id="Tracé_3612" data-name="Tracé 3612" d="M-3932.928,6207.214l-7.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>

resources/js/editor.js

@@ -3,17 +3,16 @@ export default function editorInit() {
   function filterCells(element, stringToParse) {
     return element.textContent.trim() === stringToParse;
   }
-
   const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))'));
   const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))'));
 
   checkedCells.forEach((cell) => {
-    console.log(textTranslationsMainAppJS);
+    cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
-
+      alt="${mainAppJsDynamicDatas.yes}"/></div>`;
-    cell.innerHTML = `<span class="table-cell-icon table-cell-icon--checked"  aria-label="${textTranslationsMainAppJS.yes}"></span>`;
   });
   crossedCells.forEach((cell) => {
-    cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
+    cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
+      alt="${mainAppJsDynamicDatas.no}"/>`;
   });
 
   // tables.forEach((table) => {