refining editor js for arrays shortcode + refining plus loin

css/app.css

@@ -652,6 +652,10 @@ video {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
 .h-1 {
   height: 0.25rem;
 }
@@ -3955,6 +3959,95 @@ article > *:not(.entry-content, .chapter-header-block),
   margin-top: 9px;
 }
 
+.wp-block-table thead {
+  border-radius: 0.75rem;
+  border-bottom-width: 0px;
+  background-color: rgb(239, 239, 239, 0.6);
+}
+
+.wp-block-table thead th {
+  border-style: none !important;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.wp-block-table thead th:first-child {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+
+.wp-block-table thead th:last-child {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
+.wp-block-table tr {
+  margin-top: 2rem;
+}
+
+.wp-block-table tr td:first-child {
+  border-left-width: 0px;
+}
+
+.wp-block-table tr td:last-child {
+  border-right-width: 0px;
+}
+
+.wp-block-table tr:first-child td {
+  border-top-width: 0px;
+}
+
+.wp-block-table tr:last-child td {
+  border-bottom-width: 0px;
+}
+
+.wp-block-table td {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 229 229 / var(--tw-border-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.wp-block-table .table-cell-icon {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  padding: 0.5rem;
+}
+
+.wp-block-table .table-cell-icon:before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wp-block-table .table-cell-icon--checked {
+  --tw-bg-opacity: 1;
+  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;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  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;
@@ -4602,9 +4695,11 @@ article > *:not(.entry-content, .chapter-header-block),
   margin-top: 0px !important;
   font-size: 2.25rem !important;
   line-height: 2.5rem !important;
+  font-weight: 700 !important;
 }
 
 .homegrade-blocks-plus-loin p, 
+  .homegrade-blocks-plus-loin h2, 
   .homegrade-blocks-plus-loin h3, 
   .homegrade-blocks-plus-loin h4, 
   .homegrade-blocks-plus-loin h5, 

css/editor-style.css

@@ -99,6 +99,10 @@
   display: flex
 }
 
+.table {
+  display: table
+}
+
 .h-1 {
   height: 0.25rem
 }

includes/init.php

@@ -7,6 +7,7 @@
 function tailpress_setup()
 {
 
+
 	// ##### Setup 🡒 Navigation
 
 	register_nav_menus(
@@ -57,9 +58,23 @@ function tailpress_enqueue_scripts()
 	wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version'));
 	wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
 	wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
-	wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
+	// wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
 	// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
 
+	// #PASSING TRANSLATIONS
+	wp_register_script('main-app-js', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
+
+	$translations_main_app_js = array(
+		'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'),
+		'no' => __('Non', 'homegrade-theme__texte-fonctionnel'),
+	);
+	wp_localize_script('main-app-js', 'textTranslationsMainAppJS', $translations_main_app_js);
+
+	wp_enqueue_script('main-app-js');
+
+
+
+
 
 	// SHOW THEMATIQUE 
 	wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));

js/app.js

@@ -1,4 +1,21 @@
 (() => {
+  // resources/js/editor.js
+  function editorInit() {
+    const tablesCells = document.querySelectorAll(".wp-block-table td");
+    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 = `<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>`;
+    });
+  }
+
   // resources/js/menus.js
   function menuInit() {
     const header = document.querySelector("#main-header");
@@ -279,7 +296,6 @@
     const questionsContainerBlocks = document.querySelectorAll(".questions-container-block");
     const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary");
     const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
-    console.log(vocabulaireSummaryBlock);
     allBlocks.forEach((el) => {
       io.observe(el);
     });
@@ -289,5 +305,6 @@
   window.addEventListener("DOMContentLoaded", (event) => {
     menuInit();
     singleConseil();
+    editorInit();
   });
 })();

resources/css/blocks/plus-loin.css

@@ -1,9 +1,10 @@
 .homegrade-blocks-plus-loin {
   @apply bg-primary p-12 rounding-radius my-8;
   &__block-title {
-    @apply !mt-0 !text-4xl;
+    @apply !mt-0 !text-4xl !font-bold;
   }
   p,
+  h2,
   h3,
   h4,
   h5,

resources/css/editor-content/gutenberg.css

@@ -49,3 +49,58 @@ article > *:not(.entry-content, .chapter-header-block),
     margin-top: 9px;
   }
 }
+
+.wp-block-table {
+  thead {
+    @apply bg-gray rounded-xl border-b-0;
+    th {
+      @apply !border-none py-8;
+    }
+    th:first-child {
+      @apply rounded-tl-xl rounded-bl-xl;
+    }
+    th:last-child {
+      @apply rounded-tr-xl rounded-br-xl;
+    }
+  }
+  tr {
+    @apply mt-8;
+    td:first-child {
+      @apply border-l-0;
+    }
+    td:last-child {
+      @apply border-r-0;
+    }
+  }
+  tr:first-child {
+    td {
+      @apply border-t-0;
+    }
+  }
+  tr:last-child {
+    td {
+      @apply border-b-0;
+    }
+  }
+  td {
+    @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;
+    &:before {
+      @apply flex justify-center items-center;
+    }
+  }
+  .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

@@ -0,0 +1,3 @@
+<svg 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

@@ -0,0 +1,6 @@
+<svg 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"/>
+  </g>
+</svg>

resources/js/app.js

@@ -1,3 +1,4 @@
+import editorInit from './editor';
 import menuInit from './menus';
 import singleConseil from './single-conseil';
 
@@ -6,4 +7,5 @@ import singleConseil from './single-conseil';
 window.addEventListener('DOMContentLoaded', (event) => {
   menuInit();
   singleConseil();
+  editorInit();
 });

resources/js/editor.js

@@ -0,0 +1,26 @@
+export default function editorInit() {
+  const tablesCells = document.querySelectorAll('.wp-block-table td');
+  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 = `<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>`;
+  });
+
+  // tables.forEach((table) => {
+  //   const tableCells = contains('td', '((v))');
+  //   console.log(tableRows);
+  //   tableRows.forEach((row) => {
+  //     console.log(row);
+  //   });
+  // });
+}

resources/js/single-conseil.js

@@ -69,7 +69,6 @@ export default function singleConseil() {
   const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
   const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
 
-  console.log(vocabulaireSummaryBlock);
   allBlocks.forEach((el) => {
     io.observe(el);
   });