From 1a9c95200c7afd5bd4b5dacc16978257afc8d477 Mon Sep 17 00:00:00 2001
From: Nicolas Langle <nlangle@beapi.fr>
Date: Mon, 29 Jul 2024 16:35:55 +0200
Subject: [PATCH] fix (theme): add missing alert, fix GutenbergBlockWrapper

---
 .../patterns/fr-alert-informations.php        | 32 +++++++++++++++++++
 .../src/js/classes/GutenbergBlockWrapper.js   |  6 ++++
 wp-dsfr-theme/src/js/editor.js                |  1 +
 3 files changed, 39 insertions(+)

diff --git a/wp-dsfr-theme/patterns/fr-alert-informations.php b/wp-dsfr-theme/patterns/fr-alert-informations.php
index 1e0708e..e4c4a06 100644
--- a/wp-dsfr-theme/patterns/fr-alert-informations.php
+++ b/wp-dsfr-theme/patterns/fr-alert-informations.php
@@ -16,6 +16,38 @@
 	<p><?php esc_html_e( 'Quatre types d\'alerte sont disponibles, info, success, error et warning :', 'wp-dsfr-theme' ); ?></p>
 	<!-- /wp:paragraph -->
 
+	<!-- wp:paragraph -->
+	<p><?php esc_html_e( 'Alerte par défaut :', 'wp-dsfr-theme' ); ?></p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:group {"className":"fr-alert","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group fr-alert">
+		<!-- wp:heading {"className":"fr-alert__title","level":3,"placeholder":"<?php esc_attr_e( 'Ajouter un titre', 'wp-dsfr-theme' ); ?>"} -->
+		<h3 class="wp-block-heading fr-alert__title"></h3>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"placeholder":"<?php esc_attr_e( 'Ajouter un texte', 'wp-dsfr-theme' ); ?>"} -->
+		<p></p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:paragraph -->
+	<p><code>fr-icon-lock-fill</code> :</p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:group {"className":"fr-alert fr-icon-lock-fill","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group fr-alert fr-icon-lock-fill">
+		<!-- wp:heading {"className":"fr-alert__title","level":3,"placeholder":"<?php esc_attr_e( 'Ajouter un titre', 'wp-dsfr-theme' ); ?>"} -->
+		<h3 class="wp-block-heading fr-alert__title"></h3>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"placeholder":"<?php esc_attr_e( 'Ajouter un texte', 'wp-dsfr-theme' ); ?>"} -->
+		<p></p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+
 	<?php
 	$available_classes = [
 		'fr-alert--info',
diff --git a/wp-dsfr-theme/src/js/classes/GutenbergBlockWrapper.js b/wp-dsfr-theme/src/js/classes/GutenbergBlockWrapper.js
index 11b3b93..f79db4a 100644
--- a/wp-dsfr-theme/src/js/classes/GutenbergBlockWrapper.js
+++ b/wp-dsfr-theme/src/js/classes/GutenbergBlockWrapper.js
@@ -136,6 +136,12 @@ class GutenbergBlockWrapper {
         {
           value: currentClass,
           onChange: (value) => {
+            // if the user start to edit class in text field, do nothing
+            if (currentClass && !attributes.className.split(' ').includes(currentClass)) {
+              currentClass = ''
+              return
+            }
+
             let className = attributes.className.replace(currentClass, '').replace(/\s+/g, ' ').trim()
 
             if (value !== '') {
diff --git a/wp-dsfr-theme/src/js/editor.js b/wp-dsfr-theme/src/js/editor.js
index 140881d..3db12c1 100644
--- a/wp-dsfr-theme/src/js/editor.js
+++ b/wp-dsfr-theme/src/js/editor.js
@@ -140,6 +140,7 @@ blockGroupFrAlert.addSidebarPanelBody('dsfr-panel', { title: 'DSFR' })
 blockGroupFrAlert.addSidebarClassSelector('dsfr-panel', {
   label: "Classe css du type d'alerte",
   options: [
+    { value: '', label: 'Défaut' },
     { value: 'fr-alert--info', label: 'Information' },
     { value: 'fr-alert--success', label: 'Succès' },
     { value: 'fr-alert--error', label: 'Erreur' },