Merge pull request #139 from alleyinteractive/feature/LEDE-2642/custo…

…m-divider-block

LEDE-2642 Custom Divider Block

blocks/divider/block.json

@@ -0,0 +1,27 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "wp-newsletter-builder/divider",
+	"version": "0.1.0",
+	"title": "Divider",
+	"category": "design",
+	"icon": "editor-insertmore",
+	"description": "Divider with configurable height",
+	"textdomain": "divider",
+	"editorScript": "file:index.ts",
+	"editorStyle": "file:index.css",
+	"style": [
+		"file:style-index.css"
+	],
+	"render": "file:render.php",
+	"attributes": {
+		"elHeight": {
+			"type": "number",
+			"default": 8
+    },
+		"elColor": {
+			"type": "string",
+			"default": "#000"
+		}
+	}
+}

blocks/divider/edit.tsx

@@ -0,0 +1,83 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+import {
+  ColorPicker,
+  PanelBody,
+  RangeControl,
+} from '@wordpress/components';
+
+/**
+ * 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 } from '@wordpress/block-editor';
+
+/**
+ * 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 the following line if styles are added.
+// import './index.scss';
+
+interface EditProps {
+  attributes: {
+    elHeight: number;
+    elColor: string;
+  },
+  setAttributes: (attributes: {}) => void;
+}
+
+/**
+ * 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.
+ */
+export default function Edit({
+  attributes: {
+    elHeight = 8,
+    elColor = '#000',
+  },
+  setAttributes,
+}: EditProps) {
+  return (
+    <>
+      <div {...useBlockProps()}>
+        <div style={{ backgroundColor: elColor, height: `${elHeight}px` }} />
+      </div>
+      <InspectorControls>
+        {/* @ts-ignore */}
+        <PanelBody
+          title={__('Settings', 'wp-newsletter-builder')}
+          initialOpen
+        >
+          <RangeControl
+            label={__('Height (in pixels)', 'wp-newsletter-builder')}
+            help={__('Minimum value: 1px. Maximum value: 24px.', 'wp-newsletter-builder')}
+            value={elHeight}
+            onChange={(newValue) => setAttributes({ elHeight: newValue })}
+            min={1}
+            max={24}
+            resetFallbackValue={8}
+            allowReset
+          />
+          <h3>{__('Divider color', 'wp-newsletter-builder')}</h3>
+          <ColorPicker
+            color={elColor}
+            onChange={(color) => setAttributes({ elColor: color })}
+          />
+        </PanelBody>
+      </InspectorControls>
+    </>
+  );
+}

blocks/divider/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Block Name: Divider.
+ *
+ * @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_divider_block_init() {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+}
+add_action( 'init', 'wp_newsletter_builder_divider_block_init' );

blocks/divider/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// Uncomment the following line if styles are added.
+// import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(
+  /* @ts-expect-error Provided types are inaccurate to the actual plugin API. */
+  metadata,
+  {
+    apiVersion: 2,
+    edit,
+    title: metadata.title,
+  },
+);

blocks/divider/render.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @param array    $attributes     The array of attributes for this block.
+ * @param string   $content        Rendered block output. ie. <InnerBlocks.Content />.
+ * @param WP_Block $block         The instance of the WP_Block class that represents the block being rendered.
+ *
+ * @package wp-newsletter-builder
+ */
+
+$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>

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.16
+ * Version: 0.3.17
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2