Block editor

.gitignore

@@ -4,5 +4,8 @@
 .project
 /.idea
 
+# Ignore .bak files
+js/widget-settings.min.js.bak
+
 # Ignore system files
 .DS_Store

admin.php

@@ -56,9 +56,9 @@ function emfluence_emailer_admin_enqueue_scripts($hook) {
   );
 
   wp_enqueue_script(
-      'emfluence-emailer-widget'
-      ,plugins_url( '/js/widget-settings.min.js', __FILE__ )
-      ,array('jquery', 'jquery-ui-accordion', 'jquery-ui-datepicker')
+    'emfluence-emailer-widget'
+    ,plugins_url( '/js/widget-settings.min.js', __FILE__ )
+    ,array('jquery', 'jquery-ui-accordion', 'jquery-ui-datepicker')
   );
 
   // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

css/widget-frontend.scss

@@ -6,4 +6,8 @@
   .actions.row {
     padding: 0.5em 0;
   }
+
+  .field.row label {
+    display: block;
+  }
 }

css/widget-settings.scss

@@ -10,6 +10,13 @@
     padding-right: 10px;
     display: inline-block;
   }
+  p.heading label:first-of-type { 
+    font-weight: bold !important; 
+  }
+  p.heading label input.order {
+    display: inline !important;
+    width: 40px !important;
+  }
   label.heading {
     font-weight: 600;
     font-size: 1rem;
@@ -22,4 +29,49 @@
     color: red;
     display: block;
   }
+
+  p {
+    font-size: 12px;
+  }
+
+  div.filter { 
+    display: block; width: 100%; 
+  }
+
+  div.selected { 
+    display: block; 
+    width: 100%; 
+    padding: 0 10px; 
+
+    div { 
+      display: block; 
+    }
+  }
+
+  .basic-fields-adder {
+    p {
+      select {
+        display: inline-block !important; width: 60% !important;
+      }
+
+      button {
+        display: inline-block !important; margin-left: 6px;
+      }
+    }
+  }
+
+  .custom-variable-adder p input { 
+    width: 60% !important; 
+    display: inline-block !important;
+  }
+  .custom-variable-adder p button { 
+    display: inline-block !important;
+    margin-left: 5px;
+  }
+}
+
+.widget-content {
+  p {
+    font-size: 12px;
+  }
 }

emfluence.php

@@ -4,7 +4,7 @@
 Plugin URI: https://github.com/emfluencekc/wp-emfluence
 Description: Easily add forms to your website for contacts to add or update their details in your emfluence Marketing Platform account.
 Author: emfluence Digital Marketing
-Version: 2.13
+Version: 2.14
 Author URI: https://www.emfluence.com
 Text Domain: emfl_form
 */

js/widget-settings.js

@@ -1,5 +1,6 @@
 // Multiple instances of the widget may exist on the widget settings page.
 // This is completely functional programming.
+
 emfluenceEmailerWidget = {
 
   init: function() {
@@ -9,6 +10,7 @@ emfluenceEmailerWidget = {
       collapsible: true,
       active: false
     });
+
     jQuery('.wp-emfluence .type-selector').each(function(index, el) {
       emfluenceEmailerWidget.fields.typeSelected(jQuery(el).parents('.type-section'));
     });
@@ -55,9 +57,12 @@ emfluenceEmailerWidget = {
     add: function(element){
       $widget = jQuery(element).parents('.widget');
       $input = this.getInput($widget);
+
+      $groupIdsContainer = this.getGroupIdsContainer($widget);
 
       // Validate the value
       var values = this.processValue($input.val());
+
       if( !values ){
         return;
       }
@@ -71,14 +76,45 @@ emfluenceEmailerWidget = {
       }
 
       $checkboxesContainer.append( this.createCheckbox($widget, values) );
+
+      if($groupIdsContainer.val().length === 0) {
+        $groupIdsContainer.val( values.id );
+      } else {
+        $groupIdsContainer.val( $groupIdsContainer.val() + ',' + values.id );
+      }
+
       $input.val(null);
     }
+
+    ,removeGroup: function(element) {
+      $widget = jQuery(element).parents('.widget');
+      $groupIdsContainer = this.getGroupIdsContainer($widget);
+      $currentGroupId = jQuery(element).attr("value");
+      $groupIdsArray = $groupIdsContainer.val().split(',');
+
+      if(jQuery(element).is(":checked")) {
+        $groupIdsArray.push($currentGroupId);
+      } else {
+        $groupIdsArray = jQuery.grep( $groupIdsArray, function(value) {
+          return value != $currentGroupId;
+        });
+      }
+
+      $commaString = $groupIdsArray.join(",");
+      $groupIdsContainer.val($commaString);
+    }
+
     ,getInput: function($widget){
       return $widget.find('.groups input[list]');
     }
     ,getCheckboxesContainer: function($widget){
       return $widget.find('.groups .selected');
     }
+
+    ,getGroupIdsContainer: function($widget) {
+      return $widget.find('.begroups');
+    }
+
     ,processValue: function(value){
       // Seperate the name and id
       // It should be in the format of name [##]
@@ -92,8 +128,20 @@ emfluenceEmailerWidget = {
       }
     }
     ,createCheckbox: function($widget, values){
-      var widgetId = $widget.attr('id').slice(-1);
-      var id = 'groups-' + widgetId + '-' + values.id;
+
+      var widgetId = '';
+      var id = '';
+
+      try{
+        widgetId = $widget.attr('id').slice(-1);
+        id = 'groups-' + widgetId + '-' + values.id;
+      }
+      catch {
+        instance_number = jQuery("#emfluence_email_signup_instance").val();
+        widgetId = 'widget-7_emfluence_email_signup-' + instance_number.slice(-1);
+        id = 'groups-' + instance_number + '-' + values.id;
+      }
+
       var html =
         '<div><label for="' + id + '">\
           <input id="' + id + '" type="checkbox" value="' + values.id + '" name="groups[]" checked /> ' + values.name + '\

readme.txt

@@ -1,8 +1,8 @@
 === emfluence Marketing Platform ===
 Tags: email, email marketing, emailmarketing, emfluence, api, marketing automation, widget, email widget, email signup, mailing list, newsletter, form, automation
 Requires at least: 4.0
-Tested up to: 6.0
-Stable tag: 2.13
+Tested up to: 6.3.2
+Stable tag: 2.14
 Requires PHP: 5.6
 Contributors: emfluencekc, mightyturtle
 License: GPLv2 or later
@@ -57,6 +57,10 @@ choose date as your type for your field on your widget too.
 
 == Changelog ==
 
+= 2.14 =
+* Error fixes for block widget editor
+* Two new fields "Form name" and "Form ID" are added
+
 = 2.13 =
 * PHP error fixes