New block

Fixes #22

README.md

@@ -31,6 +31,7 @@ The plugin tracks the pages, posts and custom post types that visitors click thr
 ### Key features
 
 * __Automatic__: The plugin will start displaying visited posts on your posts and pages automatically after the content when you activate the plugin
+* __Block editor support__: Easy to use block for the block editor. Find it under widgets or using "followed posts" or "where did they go from here"
 * __Shortcode__: Use `[wherego]` to display the followed posts
 * __Multi-Widget support__: Find the __Followed posts__ widget to display the posts in your theme's sidebar or any other area that supports widgets. You can use the widget multiple times with different settings for each
 * __Manual install__: Want more control over placement? Check the [FAQ](https://wordpress.org/plugins/where-did-they-go-from-here/#faq) on which functions are available for manual install

includes/admin/class-admin.php

@@ -124,7 +124,7 @@ public function admin_enqueue_scripts() {
 			'wherego-admin-columns',
 			false,
 			array(),
-			WZP_VERSION
+			WFP_VERSION
 		);
 	}
 

includes/class-main.php

@@ -60,6 +60,15 @@ final class Main {
 	 */
 	public $tracker;
 
+	/**
+	 * Blocks.
+	 *
+	 * @since 3.1.0
+	 *
+	 * @var object Blocks.
+	 */
+	public $blocks;
+
 	/**
 	 * Styles.
 	 *
@@ -103,6 +112,7 @@ private function init() {
 		$this->language   = new Frontend\Language_Handler();
 		$this->tracker    = new Tracker();
 		$this->shortcodes = new Frontend\Shortcodes();
+		$this->blocks     = new Frontend\Blocks\Blocks();
 		$this->styles     = new Frontend\Styles_Handler();
 
 		$this->hooks();

includes/css/grid.css

@@ -1,15 +1,15 @@
-.wherego_related {
+.wz-followed-posts.wz-followed-posts-grid {
   clear: both;
   margin: 10px 0;
   width: 100%;
 }
 
-.wherego_related h3 {
+.wz-followed-posts.wz-followed-posts-grid h3 {
   margin: 0;
   clear: both;
 }
 
-.wherego_related ul {
+.wz-followed-posts.wz-followed-posts-grid ul {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -18,7 +18,7 @@
   grid-gap: 10px;
 }
 
-.wherego_related ul li {
+.wz-followed-posts.wz-followed-posts-grid ul li {
   text-align: center;
   line-height: 120%;
   border: 1px solid #ddd;
@@ -27,20 +27,20 @@
   transition: ease 0.3s;
 }
 
-.wherego_related ul li a {
+.wz-followed-posts.wz-followed-posts-grid ul li a {
   display: flex;
   flex-direction: column;
   height: 100%;
   text-decoration: none !important;
   color: #fff;
 }
 
-.wherego_related ul li a img {
+.wz-followed-posts.wz-followed-posts-grid ul li a img {
   margin: 0 auto;
   max-width: 100%;
 }
 
-.wherego_related ul li a span.wherego_title {
+.wz-followed-posts.wz-followed-posts-grid ul li a span.wherego_title {
   background-color: rgba(0, 0, 0, 0.5);
   padding: 5px;
   color: #fff;
@@ -53,11 +53,11 @@
   word-break: break-word;
 }
 
-.wherego_related ul li a span.wherego_title:hover {
+.wz-followed-posts.wz-followed-posts-grid ul li a span.wherego_title:hover {
   background-color: #333;
 }
 
-.wherego_related ul li:hover {
+.wz-followed-posts.wz-followed-posts-grid ul li:hover {
   background-color: #ccc;
 }
 

includes/frontend/blocks/class-blocks.php

@@ -0,0 +1,122 @@
+<?php
+/**
+ * Functions to register client-side assets (scripts and stylesheets) for the
+ * Gutenberg block.
+ *
+ * @package WebberZone\WFP
+ */
+
+namespace WebberZone\WFP\Frontend\Blocks;
+
+if ( ! defined( 'WPINC' ) ) {
+	die;
+}
+
+/**
+ * Widget to display the overall count.
+ *
+ * @since 3.1.0
+ */
+class Blocks {
+
+	/**
+	 * Register widget with WordPress.
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'register_blocks' ) );
+		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
+	}
+
+	/**
+	 * Registers the block using the metadata loaded from the `block.json` file.
+	 * Behind the scenes, it registers also all assets so they can be enqueued
+	 * through the block editor in the corresponding context.
+	 *
+	 * @since 3.1.0
+	 */
+	public function register_blocks() {
+		// Register Popular Posts block.
+		register_block_type_from_metadata(
+			WHEREGO_PLUGIN_DIR . 'includes/frontend/blocks/followed-posts/',
+			array(
+				'render_callback' => array( __CLASS__, 'render_block' ),
+			)
+		);
+	}
+
+
+	/**
+	 * Renders the `webberzone/followed-posts` block on server.
+	 *
+	 * @since 3.1.0
+	 * @param array $attributes The block attributes.
+	 *
+	 * @return string Returns the post content with followed posts added.
+	 */
+	public static function render_block( $attributes ) {
+
+		$attributes['extra_class'] = esc_attr( $attributes['className'] );
+
+		$arguments = array_merge(
+			$attributes,
+			array(
+				'is_block' => 1,
+			)
+		);
+
+		$arguments = wp_parse_args( $attributes['other_attributes'], $arguments );
+
+		/**
+		 * Filters arguments passed to get_wfp for the block.
+		 *
+		 * @since 3.1.0
+		 *
+		 * @param array $arguments  WebberZone Followed Posts arguments.
+		 * @param array $attributes Block attributes array.
+		 */
+		$arguments = apply_filters( 'whergo_block_options', $arguments, $attributes );
+
+		// Enqueue the stylesheet for the selected style for this block.
+		$style_array = \WebberZone\WFP\Frontend\Styles_Handler::get_style( $arguments['wherego_styles'] );
+
+		if ( ! empty( $style_array['name'] ) ) {
+			$style     = $style_array['name'];
+			$extra_css = $style_array['extra_css'];
+
+			wp_register_style(
+				"whergo-style-{$style}",
+				plugins_url( "css/{$style}.min.css", WHEREGO_PLUGIN_FILE ),
+				array(),
+				WFP_VERSION
+			);
+			wp_enqueue_style( "whergo-style-{$style}" );
+			wp_add_inline_style( "whergo-style-{$style}", $extra_css );
+		}
+
+		return \WebberZone\WFP\Frontend\Display::followed_posts( $arguments );
+	}
+
+	/**
+	 * Enqueue scripts and styles for the block editor.
+	 *
+	 * @since 3.1.0
+	 */
+	public static function enqueue_block_editor_assets() {
+
+		$style_array = \WebberZone\WFP\Frontend\Styles_Handler::get_style();
+		$file_prefix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
+
+		if ( ! empty( $style_array['name'] ) ) {
+			$style     = $style_array['name'];
+			$extra_css = $style_array['extra_css'];
+
+			wp_enqueue_style(
+				'followed-posts-block-editor',
+				plugins_url( "css/{$style}{$file_prefix}.css", WHEREGO_PLUGIN_FILE ),
+				array( 'wp-edit-blocks' ),
+				filemtime( WHEREGO_PLUGIN_DIR . "css/{$style}{$file_prefix}.css" )
+			);
+			wp_add_inline_style( 'followed-posts-block-editor', $extra_css );
+		}
+	}
+}

includes/frontend/blocks/followed-posts/block.json

@@ -0,0 +1,58 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "webberzone/followed-posts",
+	"version": "1.0.0",
+	"title": "WebberZone Followed Posts",
+	"category": "widgets",
+	"icon": "editor-ul",
+	"keywords": ["followed posts", "posts", "where did they go from here"],
+	"description": "Display the Followed Posts",
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"heading": {
+			"type": "boolean",
+			"default": false
+		},
+		"title": {
+			"type": "string",
+			"default": "<h3>Followed Posts</h3>"
+		},
+		"limit": {
+			"type": "string",
+			"default": 6
+		},
+		"show_excerpt": {
+			"type": "boolean",
+			"default": false
+		},
+		"show_author": {
+			"type": "boolean",
+			"default": false
+		},
+		"show_date": {
+			"type": "boolean",
+			"default": false
+		},
+		"wherego_styles": {
+			"type": "string",
+			"default": "no_style"
+		},
+		"post_thumb_op": {
+			"type": "string",
+			"default": "inline"
+		},
+		"other_attributes": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"textdomain": "where-did-they-go-from-here",
+	"editorScript": "file:./build/index.js"
+}

includes/frontend/blocks/followed-posts/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-server-side-render'), 'version' => 'd763022e25787b52c39f');