Merge pull request #133 from disqus/block-theme-compatibility

Configure DISQUS to load on WordPress Block Themes via Plugin

disqus/includes/class-disqus.php

@@ -180,6 +180,7 @@ private function define_public_hooks() {
         $this->loader->add_filter( 'comments_number', $plugin_public, 'dsq_comments_link_template' );
         $this->loader->add_filter( 'comments_template', $plugin_public, 'dsq_comments_template' );
         $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_comment_count' );
+        $this->loader->add_action( 'comment_form_before', $plugin_public, 'hide_block_theme_comment_section' );
         $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_comment_embed' );
         $this->loader->add_action( 'show_user_profile', $plugin_public, 'dsq_close_window_template' );
     }

disqus/public/class-disqus-public.php

@@ -238,6 +238,22 @@ public function enqueue_comment_embed() {
 		}
 	}
 
+    /**
+	 * Hides the comment section block for WP block themes.
+     * This prevents the WP block comment section from appearing briefly before being replaced by Disqus.
+	 *
+	 * @since    3.0
+	 */
+	public function hide_block_theme_comment_section() {
+		?>
+            <style>
+                .wp-block-comments {
+                    display: none;
+                }
+            </style>
+        <?php
+	}
+
 	/**
 	 * Determines if Disqus is configured and can load on a given page.
 	 *

disqus/public/js/comment_embed.js

@@ -23,11 +23,18 @@ var disqus_config = function () {
 };
 
 (function() {
+    // Adds the disqus_thread id to the comment section if site is using a WP block theme
+    var commentsBlock = document.querySelector('.wp-block-comments');
+    if (commentsBlock) {
+        commentsBlock.id = 'disqus_thread';
+    }
     if (document.getElementById(disqus_container_id)) {
         var dsq = document.createElement('script');
         dsq.type = 'text/javascript';
         dsq.async = true;
         dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    } else {
+        console.error("Could not find 'disqus_thread' container to load DISQUS.  This is usually the result of a WordPress theme conflicting with the DISQUS plugin.  Try switching your site to a Classic Theme, or contact DISQUS support for help.");
     }
 })();