Merge pull request #141 from alleyinteractive/feature/LEDE-2664/nb-he…

…ading-block

LEDE-2663, LEDE-2664, LEDE-2649 Modify Block Supports

block-filters/heading/index.php

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

block-filters/heading/index.tsx

@@ -0,0 +1,52 @@
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Modifies supports for Heading 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 modifyHeadingSupports(settings, name) {
+  // Bail early if the block does not have supports.
+  if (!settings?.supports) {
+    return settings;
+  }
+  // Only apply to Heading blocks.
+  if (
+    name === 'core/heading'
+  ) {
+    return {
+      ...settings,
+      supports: Object.assign(settings.supports, {
+        align: [],
+        anchor: false,
+        color: {
+          background: false,
+          text: false,
+        },
+        customClassName: false,
+        inserter: false,
+        spacing: false,
+        typography: {
+          __experimentalFontSize: false,
+          __experimentalLineHeight: false,
+          __experimentalLetterSpacing: true,
+          __experimentalFontFamily: false,
+          __experimentalFontWeight: false,
+          __experimentalFontStyle: false,
+          __experimentalTextTransform: true,
+        },
+      }),
+    };
+  }
+  return settings;
+}
+
+addFilter(
+  'blocks.registerBlockType',
+  'wp-newsletter-builder/heading',
+  modifyHeadingSupports,
+);

block-filters/list/index.php

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

block-filters/list/index.tsx

@@ -0,0 +1,54 @@
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Modifies supports for List 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 modifyListSupports(settings, name) {
+  // Bail early if the block does not have supports.
+  if (!settings?.supports) {
+    return settings;
+  }
+  // Only apply to list and list item blocks.
+  if (
+    name === 'core/list'
+    || name === 'core/list-item'
+  ) {
+    return {
+      ...settings,
+      supports: Object.assign(settings.supports, {
+        align: [],
+        anchor: false,
+        color: {
+          background: false,
+          text: false,
+        },
+        customClassName: false,
+        inserter: false,
+        spacing: false,
+        typography: {
+          __experimentalFontSize: false,
+          __experimentalLineHeight: false,
+          __experimentalLetterSpacing: true,
+          __experimentalFontFamily: false,
+          __experimentalFontWeight: false,
+          __experimentalFontStyle: false,
+          __experimentalTextTransform: true,
+        },
+      }),
+    };
+  }
+
+  return settings;
+}
+
+addFilter(
+  'blocks.registerBlockType',
+  'wp-newsletter-builder/list',
+  modifyListSupports,
+);

block-filters/paragraph/index.php

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

block-filters/paragraph/index.tsx

@@ -0,0 +1,53 @@
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Modifies supports for Paragraph 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 modifyParagraphSupports(settings, name) {
+  // Bail early if the block does not have supports.
+  if (!settings?.supports) {
+    return settings;
+  }
+  // Only apply to paragraph blocks.
+  if (
+    name === 'core/paragraph'
+  ) {
+    return {
+      ...settings,
+      supports: Object.assign(settings.supports, {
+        align: [],
+        anchor: false,
+        color: {
+          background: false,
+          text: false,
+        },
+        customClassName: false,
+        inserter: false,
+        spacing: false,
+        typography: {
+          __experimentalFontSize: false,
+          __experimentalLineHeight: false,
+          __experimentalLetterSpacing: true,
+          __experimentalFontFamily: false,
+          __experimentalFontWeight: false,
+          __experimentalFontStyle: false,
+          __experimentalTextTransform: true,
+        },
+      }),
+    };
+  }
+
+  return settings;
+}
+
+addFilter(
+  'blocks.registerBlockType',
+  'wp-newsletter-builder/paragraph',
+  modifyParagraphSupports,
+);

blocks/divider/render.php

@@ -12,4 +12,5 @@
 $wp_newsletter_builder_divider_height = $attributes['elHeight'] ?? null;
 $wp_newsletter_builder_divider_color  = $attributes['elColor'] ?? null; 
 ?>
+
 <div style="height: <?php echo esc_attr( $wp_newsletter_builder_divider_height ); ?>px;background-color: <?php echo esc_attr( $wp_newsletter_builder_divider_color ); ?>;"></div>

blocks/heading/block.json

@@ -0,0 +1,23 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "wp-newsletter-builder/heading",
+	"version": "0.1.0",
+	"title": "Newsletter Heading",
+	"category": "text",
+	"icon": "heading",
+	"description": "Heading wrapper that provides email-friendly enhancements",
+	"textdomain": "heading",
+	"editorScript": "file:index.ts",
+	"editorStyle": "file:index.css",
+	"style": [
+		"file:style-index.css"
+	],
+	"render": "file:render.php",
+	"attributes": {
+		"elColor": {
+			"type": "string",
+			"default": "#000"
+		}
+	}
+}

blocks/heading/edit.tsx

@@ -0,0 +1,73 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps, InspectorControls, InnerBlocks } from '@wordpress/block-editor';
+import { ColorPicker, PanelBody } from '@wordpress/components';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// Uncomment this line if you want to import a CSS file for this block.
+// import './index.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+interface EditProps {
+  attributes: {
+    elColor?: string;
+  };
+  setAttributes: (attributes: {}) => void;
+}
+
+export default function Edit({
+  attributes: {
+    elColor = '#000',
+  },
+  setAttributes,
+}: EditProps) {
+  const TEMPLATE = [['core/heading']];
+  const headingStyles = {
+    color: elColor,
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Heading Color">
+          <h3>{__('Text color', 'wp-newsletter-builder')}</h3>
+          {/* Using ColorPicker instead of ColorPalette to ensure email-friendly values. */}
+          <ColorPicker
+            color={elColor}
+            onChange={(color) => setAttributes({ elColor: color })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div {...useBlockProps({ className: 'newsletter-heading', style: headingStyles })}>
+        <InnerBlocks
+          // @ts-ignore
+          template={TEMPLATE}
+          templateLock="all"
+        />
+      </div>
+    </>
+  );
+}

blocks/heading/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Block Name: Newsletter Heading.
+ *
+ * @package wp-newsletter-builder
+ */
+
+/**
+ * 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.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function wp_newsletter_builder_heading_block_init() {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+}
+add_action( 'init', 'wp_newsletter_builder_heading_block_init' );