Merge pull request #149 from alleyinteractive/feature/LEDE-2648/nb-image

LEDE-2648 Filter Image Block

README.md

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

block-filters/image/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Core image 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_image_scripts(): void {
+	wp_register_script(
+		'plugin-newsletter-image',
+		get_entry_asset_url( 'wp-newsletter-builder-image' ),
+		get_asset_dependency_array( 'wp-newsletter-builder-image' ),
+		get_asset_version( 'wp-newsletter-builder-image' ),
+		true
+	);
+	wp_set_script_translations( 'plugin-newsletter-image' );
+}
+add_action( 'init', __NAMESPACE__ . '\register_image_scripts' );
+
+/**
+ * Enqueue block editor assets for image.
+ */
+function action_enqueue_image_assets(): void {
+	$post_type = get_edit_post_type();
+	if ( ( 'nb_newsletter' !== $post_type ) && ( 'nb_template' !== $post_type ) ) {
+		return;
+	}
+	wp_enqueue_script( 'plugin-newsletter-image' );
+}
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\action_enqueue_image_assets' );

block-filters/image/index.tsx

@@ -0,0 +1,61 @@
+import { addFilter } from '@wordpress/hooks';
+import domReady from '@wordpress/dom-ready';
+import { unregisterBlockStyle } from '@wordpress/blocks';
+
+/**
+ * Modifies supports for Image 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 modifyImageSupports(settings, name) {
+  // Bail early if the block does not have supports.
+  if (!settings?.supports) {
+    return settings;
+  }
+  // Only apply to Image blocks.
+  if (
+    name === 'core/image'
+  ) {
+    return {
+      ...settings,
+      attributes: Object.assign(settings.attributes, {
+        allowResize: { type: 'boolean', default: false },
+      }),
+      supports: Object.assign(settings.supports, {
+        anchor: false,
+        align: false,
+        alignWide: false,
+        customClassName: false,
+        filter: {
+          duotone: false,
+        },
+        __experimentalBorder: {
+          color: false,
+          radius: true,
+          width: false,
+          __experimentalSkipSerialization: true,
+          __experimentalDefaultControls: {
+            color: false,
+            radius: true,
+            width: false,
+          },
+        },
+        shadow: false,
+      }),
+    };
+  }
+  return settings;
+}
+
+addFilter(
+  'blocks.registerBlockType',
+  'wp-newsletter-builder/image',
+  modifyImageSupports,
+);
+
+// @ts-ignore
+domReady(() => { unregisterBlockStyle('core/image', ['default', 'rounded']); });

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.23
+ * Version: 0.3.24
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2
@@ -51,6 +51,7 @@ function () {
 require_once __DIR__ . '/src/utils.php';
 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/list/index.php';
 require_once __DIR__ . '/block-filters/paragraph/index.php';
 require_once __DIR__ . '/block-filters/separator/index.php';

webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env, { mode }) => ({
           // All other custom entry points can be included here.
           '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-list/index': './block-filters/list',
           'wp-newsletter-builder-paragraph/index': './block-filters/paragraph',
           'wp-newsletter-builder-separator/index': './block-filters/separator',