feat: Enable HTML for notification/alert content.

functions.php

@@ -13,6 +13,7 @@
   "inc/lib/assets.php",
   "inc/lib/helpers.php",
   "inc/lib/clean.php",
+  "inc/lib/CustomizrTextEditor.php",
   "inc/shortcodes/copyright.php",
   "inc/shortcodes/social-icons.php",
   "inc/shortcodes/svg.php",

inc/lib/CustomizrTextEditor.php

@@ -0,0 +1,75 @@
+<?php
+if (!class_exists('WP_Customize_Control'))
+	return null;
+
+class Text_Editor_Custom_Control extends WP_Customize_Control {
+    public $type = 'textarea';
+    /**
+    ** Render the content on the theme customizer page
+    */
+    public function render_content() { ?>
+      <label>
+        <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
+        <?php
+          $settings = array(
+            'media_buttons' => false,
+            'quicktags' => true,
+            'teeny' => true,
+            'wpautop' => false
+          );
+
+          $this->filter_editor_setting_link();
+
+          wp_editor($this->value(), $this->id, $settings);
+        ?>
+      </label>
+      <script>
+      (function($) {
+        wp.customizerCtrlEditor = {
+          init: function() {
+            $(window).load(function() {
+              $('textarea.wp-editor-area').each(function() {
+                var tArea = $(this),
+                  id = tArea.attr('id'),
+                  editor = tinyMCE.get(id),
+                  setChange,
+                  content;
+
+                if (editor) {
+                  editor.onChange.add(function (ed, e) {
+                    ed.save();
+                    content = editor.getContent();
+                    clearTimeout(setChange);
+                    setChange = setTimeout(function() {
+                        tArea.val(content).trigger('change');
+                    },500);
+                  });
+                }
+
+                tArea.css({
+                  visibility: 'visible'
+                }).on('keyup', function() {
+                  content = tArea.val();
+                  clearTimeout(setChange);
+                  setChange = setTimeout(function(){
+                      content.trigger('change');
+                  },500);
+                });
+              });
+            });
+          }
+        };
+
+        wp.customizerCtrlEditor.init();
+      })(jQuery);
+      </script><?php
+    do_action('admin_footer');
+    do_action('admin_print_footer_scripts');
+  }
+
+  private function filter_editor_setting_link() {
+    add_filter('the_editor', function($output) {
+      return preg_replace( '/<textarea/', '<textarea ' . $this->get_link(), $output, 1 );
+    });
+  }
+}

inc/theme-options/notifications.php

@@ -23,16 +23,16 @@ function notification_settings($wp_customize) {
 
   // Notification text
   $wp_customize->add_setting('notification_text', [
-    'default'           => '',
-    'sanitize_callback' => 'sanitize_text_field',
+    'default' => ''
   ]);
 
-  $wp_customize->add_control('notification_text', [
+  $wp_customize->add_control(new \Text_Editor_Custom_Control($wp_customize, 'notification_text', [
     'label'       => __('Notification Text', 'tofino'),
     'description' => __('Notification is shown until dismissed (at which point a cookie is set).', 'tofino'),
+    'settings'    => 'notification_text',
     'section'     => 'tofino_notification_settings',
-    'type'        => 'textarea'
-  ]);
+    'priority'    => 10
+  ]));
 
   // Notification expires
   $wp_customize->add_setting('notification_expires', [
@@ -91,7 +91,7 @@ function notification($position) {
       <!-- Notifcation <?php echo $position; ?> -->
       <div class="flex items-center bg-blue-400 text-white text-sm font-bold px-4 py-3 alert notification <?php echo $position; ?>" role="alert"  id="tofino-notification">
         <div class="container flex justify-between">
-          <p><?php echo nl2br(get_theme_mod('notification_text')); ?></p>
+          <span><?php echo nl2br(get_theme_mod('notification_text')); ?></span>
 
           <button type="button" class="w-5 h-5 js-close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true" class="text-white"><?php echo svg(['sprite' => 'icon-close', 'class' => 'w-full current-color h-full']); ?></span>