refinin the acessibility of the lightbox component

acf-blocks/google-map/google-map.css

@@ -1,17 +0,0 @@
-.section_latest_news {
-  @apply py-24;
-  .section_titling {
-    @apply max-w-md mx-auto;
-  }
-  .articles_container {
-    @apply grid 
-		grid-cols-1 
-		sm:grid-cols-2 
-		xl:grid-cols-4 
-		max-w-screen-2xl 
-		px-8
-		py-16
-		gap-8
-		mx-auto;
-  }
-}

acf-blocks/lightbox-gallery/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "acf/lightbox-gallery",
+	"title": "Gallerie d'images Lightbox",
+	"category": "homegrade-blocks",
+	"multiple": false,
+	"icon": {
+		"foreground": "#DF1E1E",
+		"src": "location-alt"
+	},
+	"supports": {
+		"anchor": true
+	},
+	"keywords": [
+		"lightbox",
+		"gallerie",
+		"gallery"
+	],
+	"viewScript": [
+		"file:./lightbox.js",
+		"example-shared-view-script"
+	],
+	"acf": {
+		"mode": "auto",
+		"renderTemplate": "lightbox-gallery.php"
+	}
+}

acf-blocks/lightbox-gallery/lightbox-gallery.php

@@ -0,0 +1,31 @@
+<?php
+$galleryDatas = get_field('gallery');
+// echo '<pre>';
+// print_r($galleryDatas);
+// echo '</pre>';
+?>
+
+<div class="lightbox-gallery">
+	<?php foreach ($galleryDatas as $picture): ?>
+		<button class="lightbox-gallery__trigger">
+			<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" alt="<?php echo $picture['alt'] ?>" />
+		</button>
+	<?php endforeach; ?>
+</div>
+
+<div class="lightbox lightbox--inactive" aria-hidden="true">
+	<div class="lightbox__container">
+		<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
+			Fermer
+		</button>
+		<button class="lightbox__prev">
+			<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg'	?>' alt='<?php echo __("Image Précédente", "homegrade-theme__texte-fonctionnel") ?>'>
+		</button>
+		<div class="lightbox__current-picture">
+			<img src="" alt="" />
+		</div>
+		<button class="lightbox__next">
+			<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg'	?>' alt='<?php echo __("Image Suivante", "homegrade-theme__texte-fonctionnel") ?>'>
+		</button>
+	</div>
+</div>

acf-blocks/lightbox-gallery/lightbox.js

@@ -0,0 +1,101 @@
+class Lightbox {
+	constructor() {
+		this.lightbox = document.querySelector(".lightbox");
+		this.closeButton = this.lightbox.querySelector(".lightbox__close");
+		this.prevButton = this.lightbox.querySelector(".lightbox__prev");
+		this.nextButton = this.lightbox.querySelector(".lightbox__next");
+		this.gallery = document.querySelector(".lightbox-gallery");
+		this.currentPictureIndex = 0;
+
+		if (this.gallery) {
+			this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
+			this.lightboxTriggers = this.gallery.querySelectorAll(".lightbox-gallery__trigger");
+			this.init();
+		}
+	}
+
+	init() {
+		this.setCurrentPicture(this.pictures);
+
+		this.lightboxTriggers.forEach((button, index) => {
+			button.addEventListener("click", () => {
+				this.showLightbox();
+				this.setCurrentPicture(this.pictures[index]);
+				this.setCurrentPictureIndex(index);
+			});
+		});
+
+		this.closeButton.addEventListener("click", () => {
+			this.hideLightbox();
+		});
+
+		this.prevButton.addEventListener("click", () => {
+			this.showPreviousPicture();
+		});
+
+		this.nextButton.addEventListener("click", () => {
+			this.showNextPicture();
+		});
+
+		document.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				this.hideLightbox();
+			}
+
+			if (event.key === "ArrowLeft") {
+				this.showPreviousPicture();
+			}
+
+			if (event.key === "ArrowRight") {
+				this.showNextPicture();
+			}
+			if (event.key === "TaEnter") {
+				this.showNextPicture();
+			}
+		});
+	}
+
+	showLightbox() {
+		this.lightbox.classList.remove("lightbox--inactive");
+		this.lightbox.classList.add("lightbox--active");
+		this.closeButton.focus();
+		this.lightbox.setAttribute("aria-hidden", "false");
+	}
+
+	hideLightbox() {
+		this.lightbox.classList.remove("lightbox--active");
+		this.lightbox.classList.add("lightbox--inactive");
+		this.lightbox.setAttribute("aria-hidden", "true");
+		this.lightboxTriggers[this.currentPictureIndex].focus();
+	}
+
+	setCurrentPicture(picture) {
+		const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
+		viewedPicture.src = picture.src;
+	}
+
+	setCurrentPictureIndex(index) {
+		this.currentPictureIndex = index;
+	}
+	showPreviousPicture() {
+		if (this.currentPictureIndex > 0) {
+			this.currentPictureIndex--;
+		} else {
+			this.currentPictureIndex = this.pictures.length - 1;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+
+	showNextPicture() {
+		if (this.currentPictureIndex < this.pictures.length - 1) {
+			this.currentPictureIndex++;
+		} else {
+			this.currentPictureIndex = 0;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	new Lightbox();
+});

acf-blocks/lightbox-gallery/lightbox_old.js

@@ -0,0 +1,95 @@
+class Lightbox {
+	constructor() {
+		this.lightbox = document.querySelector(".lightbox");
+		this.closeButton = this.lightbox.querySelector(".lightbox__close");
+		this.prevButton = this.lightbox.querySelector(".lightbox__prev");
+		this.nextButton = this.lightbox.querySelector(".lightbox__next");
+		this.gallery = document.querySelector(".lightbox-gallery");
+		this.currentPictureIndex = 0;
+
+		if (this.gallery) {
+			this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
+			this.init();
+		}
+	}
+
+	init() {
+		this.pictures.forEach((picture, index) => {
+			picture.addEventListener("click", () => {
+				this.showLightbox();
+				this.setCurrentPicture(picture);
+				this.setCurrentPictureIndex(index);
+			});
+		});
+
+		this.closeButton.addEventListener("click", () => {
+			this.hideLightbox();
+		});
+
+		this.prevButton.addEventListener("click", () => {
+			this.showPreviousPicture();
+		});
+
+		this.nextButton.addEventListener("click", () => {
+			this.showNextPicture();
+		});
+
+		document.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				this.hideLightbox();
+			}
+
+			if (event.key === "ArrowLeft") {
+				this.showPreviousPicture();
+			}
+
+			if (event.key === "ArrowRight") {
+				this.showNextPicture();
+			}
+		});
+	}
+
+	showLightbox() {
+		this.lightbox.classList.remove("lightbox--inactive");
+		this.lightbox.classList.add("lightbox--active");
+		this.closeButton.focus();
+		this.lightbox.setAttribute("aria-hidden", "false");
+	}
+
+	hideLightbox() {
+		this.lightbox.classList.remove("lightbox--active");
+		this.lightbox.classList.add("lightbox--inactive");
+		this.lightbox.setAttribute("aria-hidden", "true");
+	}
+
+	setCurrentPicture(picture) {
+		const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
+		viewedPicture.src = picture.src;
+	}
+
+	setCurrentPictureIndex(index) {
+		this.currentPictureIndex = index;
+	}
+
+	showPreviousPicture() {
+		if (this.currentPictureIndex > 0) {
+			this.currentPictureIndex--;
+		} else {
+			this.currentPictureIndex = this.pictures.length - 1;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+
+	showNextPicture() {
+		if (this.currentPictureIndex < this.pictures.length - 1) {
+			this.currentPictureIndex++;
+		} else {
+			this.currentPictureIndex = 0;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	new Lightbox();
+});

blocks/page-card/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '741e30b111a2465ca4f5');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '8dae7dbfee819c50d1b8');

blocks/page-card/build/index.css

@@ -0,0 +1,13 @@
+/*!****************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
+  \****************************************************************************************************************************************************************************************************************************************************/
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+.wp-block-create-block-test {
+  border: 1px dotted #f00;
+}
+
+/*# sourceMappingURL=index.css.map*/

blocks/page-card/build/index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://test/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-test {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}

blocks/page-card/build/index.js

@@ -304,7 +304,7 @@ function getThematiqueFamilySlug(thematique_slug) {
     case "urbanisme":
       return "energies-urbanisme";
     case "acoustique":
-    case "petites-coproprietes":
+    case "coproprietes":
       return "acoustique-coproprietes";
     case "isolation":
     case "au-quotidien":

blocks/page-card/build/render.php

@@ -8,7 +8,7 @@ $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 $excerpt = get_the_excerpt($relatedPostId) ?? null;
 
 ?>
-<a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
+<a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>">
 	<img class="homegrade-blocks-page-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">
 	<h3 class="homegrade-blocks-page-card__title"><?php echo $relatedPost->post_title; ?></h3>
 	<p class="homegrade-blocks-page-card__excerpt"><?php echo $excerpt ?></p>

blocks/page-card/build/style-index.css

@@ -0,0 +1,16 @@
+/*!***************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
+  \***************************************************************************************************************************************************************************************************************************************************/
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+.wp-block-create-block-test {
+  background-color: #21759b;
+  color: #fff;
+  padding: 2px;
+}
+
+/*# sourceMappingURL=style-index.css.map*/

blocks/page-card/build/style-index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://test/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-test {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

blocks/page-card/src/render.php

@@ -8,7 +8,7 @@ $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 $excerpt = get_the_excerpt($relatedPostId) ?? null;
 
 ?>
-<a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
+<a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>">
 	<img class="homegrade-blocks-page-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">
 	<h3 class="homegrade-blocks-page-card__title"><?php echo $relatedPost->post_title; ?></h3>
 	<p class="homegrade-blocks-page-card__excerpt"><?php echo $excerpt ?></p>

blocks/parcours-step/build/render.php

@@ -1,15 +1,13 @@
 <?php
 $relatedPostId = $attributes['relatedPostId'] ?? null;
-
 $relatedPost = get_post($relatedPostId) ?? null;
 $relatedPostUrl = get_permalink($relatedPostId) ?? null;
 
 $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 
 
-
 ?>
-<a class="parcours-step-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
+<a class="parcours-step-card" href="<?php echo $relatedPostUrl ?>">
 	<img class="parcours-step-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">
 	<h3 class="parcours-step-card__title"><?php echo $relatedPost->post_title; ?></h3>
 </a>

blocks/parcours-step/src/render.php

@@ -1,15 +1,13 @@
 <?php
 $relatedPostId = $attributes['relatedPostId'] ?? null;
-
 $relatedPost = get_post($relatedPostId) ?? null;
 $relatedPostUrl = get_permalink($relatedPostId) ?? null;
 
 $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 
 
-
 ?>
-<a class="parcours-step-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
+<a class="parcours-step-card" href="<?php echo $relatedPostUrl ?>">
 	<img class="parcours-step-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">
 	<h3 class="parcours-step-card__title"><?php echo $relatedPost->post_title; ?></h3>
 </a>

blocks/post-card/src/render.php

@@ -16,7 +16,7 @@ $thematique_icon = get_field('taxonomy_pictures', 'thematiques' . '_' . $mainThe
 $coverUrl = $postType->name === 'videos-webinaires' && $postThumbnail  ? $postThumbnail : ($thematique_icon ? $thematique_icon['url'] : null);
 
 ?>
-<a class="post-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
+<a class="post-card" href="<?php echo $relatedPostUrl ?>">
 
 	<img class="post-card__cover post-card__cover--<?php echo $postType->name ?>" src="<?php echo $coverUrl ?>" alt="">
 

homegrade-blocks.php

@@ -105,6 +105,7 @@ function create_block_multiblocks_block_init()
 
 	// ACF
 	register_block_type(__DIR__ . '/acf-blocks/google-map');
+	register_block_type(__DIR__ . '/acf-blocks/lightbox-gallery');
 	register_block_type(__DIR__ . '/acf-blocks/sitemap');
 	register_block_type(__DIR__ . '/acf-blocks/photos-archives');
 	register_block_type(__DIR__ . '/acf-blocks/dates-seminaire');