Merge pull request #158 from alleyinteractive/feature/LEDE-2617/post-…

…list-block

LEDE-2617 Latest Posts Block

README.md

@@ -4,7 +4,7 @@ Contributors: alleyinteractive
 
 Tags: alleyinteractive, wp-newsletter-builder
 
-Stable tag: 0.3.29
+Stable tag: 0.3.30
 
 Requires at least: 6.2
 

block-filters/latest-posts/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Core latest posts block modifications.
+ *
+ * @package wp-newsletter-builder
+ */
+
+namespace WP_Newsletter_Builder;
+
+/**
+ * Registers assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+function register_latest_posts_scripts(): void {
+	wp_register_script(
+		'plugin-newsletter-latest-posts',
+		get_entry_asset_url( 'wp-newsletter-builder-latest-posts' ),
+		get_asset_dependency_array( 'wp-newsletter-builder-latest-posts' ),
+		get_asset_version( 'wp-newsletter-builder-latest-posts' ),
+		true
+	);
+	wp_set_script_translations( 'plugin-newsletter-latest-posts' );
+}
+add_action( 'init', __NAMESPACE__ . '\register_latest_posts_scripts' );
+
+/**
+ * Enqueue block editor assets for latest-postss.
+ */
+function action_enqueue_latest_posts_assets(): void {
+	$post_type = get_edit_post_type();
+	if ( ( 'nb_newsletter' !== $post_type ) && ( 'nb_template' !== $post_type ) ) {
+		return;
+	}
+	wp_enqueue_script( 'plugin-newsletter-latest-posts' );
+}
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\action_enqueue_latest_posts_assets' );

block-filters/latest-posts/index.tsx

@@ -0,0 +1,56 @@
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Modifies supports for Latest Posts block.
+ *
+ * @param {Object} settings - The original block settings.
+ * @param {string} name - The name of the block.
+ *
+ * @returns {Object} The modified block settings.
+ */
+// @ts-ignore
+function modifyLatestPostsSupports(settings, name) {
+  // Bail early if the block does not have supports.
+  if (!settings?.supports) {
+    return settings;
+  }
+  // Only apply to Latest Posts blocks.
+  if (
+    name === 'core/latest-posts'
+  ) {
+    return {
+      ...settings,
+      attributes: Object.assign(settings.attributes, {
+        excerptLength: {
+          default: 20,
+        },
+      }),
+      supports: Object.assign(settings.supports, {
+        align: [],
+        anchor: false,
+        color: {
+          background: false,
+          text: false,
+        },
+        customClassName: false,
+        spacing: false,
+        typography: {
+          __experimentalFontSize: false,
+          __experimentalLineHeight: false,
+          __experimentalLetterSpacing: false,
+          __experimentalFontFamily: false,
+          __experimentalFontWeight: false,
+          __experimentalFontStyle: false,
+          __experimentalTextTransform: false,
+        },
+      }),
+    };
+  }
+  return settings;
+}
+
+addFilter(
+  'blocks.registerBlockType',
+  'wp-newsletter-builder/latest-posts',
+  modifyLatestPostsSupports,
+);

entries/blocks/index.js

@@ -7,3 +7,4 @@ import '@/scss/core-blocks/button.scss';
 import '@/scss/core-blocks/separator.scss';
 import '@/scss/core-blocks/list.scss';
 import '@/scss/core-blocks/typography.scss';
+import '@/scss/core-blocks/latest-posts.scss';

plugin.php

@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.29
+ * Version: 0.3.30
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2
@@ -52,6 +52,7 @@ function () {
 require_once __DIR__ . '/block-filters/button/index.php';
 require_once __DIR__ . '/block-filters/heading/index.php';
 require_once __DIR__ . '/block-filters/image/index.php';
+require_once __DIR__ . '/block-filters/latest-posts/index.php';
 require_once __DIR__ . '/block-filters/list/index.php';
 require_once __DIR__ . '/block-filters/paragraph/index.php';
 require_once __DIR__ . '/block-filters/separator/index.php';

scss/core-blocks/latest-posts.scss

@@ -0,0 +1,89 @@
+.wp-block-latest-posts {
+  border-collapse: collapse;
+  display: table;
+  list-style-type: none;
+  padding: 0;
+  width: 100%;
+
+  li {
+    border-bottom: 1px solid #ccc;
+    box-sizing: border-box;
+    clear: both;
+    display: table-row;
+    width: 100%;
+
+    > * {
+      margin: 16px;
+    }
+  }
+
+  img {
+    max-width: 250px;
+  }
+
+  .wp-block-latest-posts__post-title {
+    color: currentColor;
+    display: block;
+    font-weight: bold;
+    margin-bottom: 8px;
+    text-decoration: none;
+  }
+
+  .wp-block-latest-posts__featured-image {
+    display: table-cell;
+
+    &.aligncenter {
+      display: block;
+      margin-bottom: 8px;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: none;
+      padding-left: 0;
+      padding-right: 0;
+      width: 100%;
+
+      img {
+        max-width: 90%;
+        width: 100%;
+      }
+    }
+
+    &.alignleft {
+      float: left;
+      margin-right: 16px;
+    }
+
+    &.alignright {
+      float: right;
+      margin-left: 16px;
+    }
+  }
+
+  .wp-block-latest-posts__post-author,
+  .wp-block-latest-posts__post-date {
+    display: block;
+    font-size: 13px;
+  }
+
+  .wp-block-latest-posts__post-excerpt {
+    font-size: 14px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+
+    > a {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    li {
+      display: block;
+      width: 100%;
+    }
+
+    img {
+      max-width: none;
+      width: 100%;
+    }
+  }
+}

scss/editor/editor.scss

@@ -34,5 +34,6 @@
     @import '@/scss/core-blocks/separator';
     @import '@/scss/core-blocks/list';
     @import '@/scss/core-blocks/typography';
+    @import '@/scss/core-blocks/latest-posts';
   }
 }

webpack.config.js

@@ -27,6 +27,7 @@ module.exports = (env, { mode }) => ({
           'wp-newsletter-builder-button/index': './block-filters/button',
           'wp-newsletter-builder-heading/index': './block-filters/heading',
           'wp-newsletter-builder-image/index': './block-filters/image',
+          'wp-newsletter-builder-latest-posts/index': './block-filters/latest-posts',
           'wp-newsletter-builder-list/index': './block-filters/list',
           'wp-newsletter-builder-paragraph/index': './block-filters/paragraph',
           'wp-newsletter-builder-separator/index': './block-filters/separator',