Change HTML template import to support more than a file

This change allows the template to be imported from a raw
HTML string, meaning a developer can render form templates
with Twig or similar instead of relying on simple .html files.

Author: rask

README.md

@@ -209,7 +209,7 @@ The attribute will render as is on the `<form>` element
 <form class="libre-form libre-form-1" data-custom-attr="contactme">
 ```
 
-## Importing forms from a static HTML template
+## Importing forms from a predefined HTML template
 
 Sometimes a project might require static forms which are not supposed to
 be editable in the admin panel.
@@ -219,12 +219,8 @@ and import them into the form admin for specific forms.
 
 ### Creating a static HTML template
 
-Importable forms are defined using standard HTML5 templates, meaning
-files ending in `.html`. The template can contain anything the regular
-WPLF form edit view can.
-
-You can create your templates in a theme, a plugin, or anywhere where
-the plugin can read files.
+The simplest way is to create a HTML5 file and read its contents. Other
+options include using Twig to render HTML templates.
 
 ### Importing a template into WPLF
 
@@ -239,19 +235,21 @@ add_filter( 'wplf_import_html_template', function ($template, $form_id) {
     $some_form_id = 123;
 
     if ($form_id === $some_form_id) {
-        return '/path/to/template/file.html';
+        // You can also render Twig templates and similar here
+        return file_get_contents('/path/to/template/file.html');
     }
 
     return $template;
 } );
 ```
 
-Now the plugin knows there is a template file which can be used for a
-form.
+The `$template` variable should be a raw HTML string. If it is set to
+`null` no template will be imported.
 
 After a template is imported for a certain form the form's editview will
 be set to read only mode, meaning you must make changes to the static
-HTML file instead of editing the form inside the admin panel.
+HTML template in code instead of editing the form inside the admin
+panel.
 
 Otherwise the form should function normally, meaning you can use WPLF
 features as always.

assets/styles/wplf-admin-form.css

@@ -0,0 +1,11 @@
+/**
+ * wp-libre-form admin styles
+ */
+
+.wplf-template-override-notice {
+    line-height: 20px;
+    padding: 1ex 0;
+    margin-top: 1em;
+    color: #666;
+    font-style: italic;
+}

classes/class-cpt-wplf-form.php

@@ -132,7 +132,7 @@ function disable_tinymce( $default ) {
   }
 
   /**
-   * Include custom JS on the edit screen
+   * Include custom JS and CSS on the edit screen
    */
   function admin_post_scripts_cpt( $hook ) {
     global $post;
@@ -147,8 +147,13 @@ function admin_post_scripts_cpt( $hook ) {
       return;
     }
 
+    $assets_url = plugins_url( 'assets', dirname( __FILE__ ) );
+
     // enqueue the custom JS for this view
-    wp_enqueue_script( 'wplf-form-edit-js', plugins_url( 'assets/scripts/wplf-admin-form.js', dirname( __FILE__ ) ) );
+    wp_enqueue_script( 'wplf-form-edit-js', $assets_url . '/scripts/wplf-admin-form.js' );
+
+    // enqueue the custom CSS for this view
+    wp_enqueue_style( 'wplf-form-edit-css', $assets_url . '/styles/wplf-admin-form.css' );
   }
 
 
@@ -483,38 +488,27 @@ function maybe_load_imported_template( $post_type, $post ) {
      *
      * If the template returned is `null` then no template is loaded.
      *
-     * @param string|null $template_path Absolute path to a HTML file to import.
+     * @param string|null $template_content Raw HTML to import for a form.
      * @param int $form_id Form ID (WP_Post ID) to import template for.
      */
-    $template_path = apply_filters( 'wplf_import_html_template', null, $form_id );
+    $template_content = apply_filters( 'wplf_import_html_template', null, $form_id );
 
-    if ( $template_path === null ) {
+    if ( $template_content === null ) {
       return;
     }
 
-    $this->override_form_template( $template_path, $form_id );
+    $this->override_form_template( $template_content, $form_id );
   }
 
   /**
    * Override a form's template with an imported template file.
    *
-   * @param string $template_path Absolute path to template HTML file.
+   * @param string $template_content Raw HTML content to use for the form content.
    * @param int $form_id ID of form we're overriding the template for.
    *
    * @return void
    */
-  protected function override_form_template( $template_path, $form_id ) {
-    $contents = file_get_contents( $template_path );
-
-    /**
-     * Allows parsing the imported HTML form contents before we use it as the actual
-     * form content.
-     *
-     * @param string $contents The form HTML.
-     * @param int $form_id ID of form we are importing a template for.
-     */
-    $template_contents = apply_filters( 'wplf_imported_html_template_contents', $contents, $form_id );
-
+  protected function override_form_template( $template_content ) {
     // Make the editor textarea uneditable. Also remove TinyMCE.
     add_filter( 'the_editor', function ( $editor ) {
         if ( ! preg_match( '%id="wp-content-editor-container"%', $editor ) ) {
@@ -523,42 +517,33 @@ protected function override_form_template( $template_path, $form_id ) {
 
         $editor = preg_replace( '%\<textarea %', '<textarea readonly="readonly" ', $editor );
 
-        $editor = preg_replace(
-          '%<div [^<>]*? class="quicktags-toolbar">.*?</div><textarea%imux',
-          '<textarea',
-          $editor
+        $notice = _x(
+            'This form template is being overridden by code, you must edit it in your project code',
+            'Template override notice in form edit admin view',
+            'wp-libre-form'
         );
 
-        return $editor;
-    } );
+        $notice = sprintf( '<div class="wplf-template-override-notice">%s</div>', $notice );
 
-    // Replace all editor content with template content.
-    add_filter( 'the_editor_content', function ( $content ) use ( $template_contents ) {
-        return $template_contents;
+        return $notice . $editor;
     } );
 
-    // Add a notice about the override.
-    add_action( 'edit_form_after_title', function () use ( $template_path ) {
-      $printable_path = explode( DIRECTORY_SEPARATOR, $template_path );
+    // Custom settings for the form editor.
+      add_filter( 'wp_editor_settings', function ( $settings, $editor_id ) {
+          if ( $editor_id !== 'content' ) {
+              return $settings;
+          }
 
-      // We may not want the full system path to be shown, 4 parent directories oughta suffice.
-      if ( count( $printable_path ) < 4 ) {
-        $printable_path = implode( DIRECTORY_SEPARATOR, $printable_path );
-      } else {
-        $printable_path = array_reverse( array_slice( array_reverse( $printable_path ), 0, 4 ) );
-        $printable_path = '..' . DIRECTORY_SEPARATOR . implode( DIRECTORY_SEPARATOR, $printable_path );
-      }
+          $settings['tinymce'] = false;
+          $settings['quicktags'] = false;
+          $settings['media_buttons'] = false;
 
-      $notice = sprintf(
-        _x(
-          'This form template is being overridden by code, the template being used is<br> <code>%s</code>',
-          'Template override notice in form edit admin view',
-          'wp-libre-form'
-        ),
-        $printable_path
-      );
+          return $settings;
+      }, 10, 2 );
 
-      printf( '<p>%s</p>', $notice );
+    // Replace all editor content with template content.
+    add_filter( 'the_editor_content', function ( $content ) use ( $template_content ) {
+        return $template_content;
     } );
   }