From 003f1ef1e87cb9f73875c8388bfa7e865b8a126c Mon Sep 17 00:00:00 2001 From: cahdeemer Date: Mon, 3 Jun 2024 18:02:36 -0400 Subject: [PATCH 1/5] add custom divider block --- blocks/divider/block.json | 23 ++++++++++++ blocks/divider/edit.tsx | 75 +++++++++++++++++++++++++++++++++++++++ blocks/divider/index.php | 22 ++++++++++++ blocks/divider/index.ts | 37 +++++++++++++++++++ blocks/divider/render.php | 14 ++++++++ 5 files changed, 171 insertions(+) create mode 100644 blocks/divider/block.json create mode 100644 blocks/divider/edit.tsx create mode 100644 blocks/divider/index.php create mode 100644 blocks/divider/index.ts create mode 100644 blocks/divider/render.php diff --git a/blocks/divider/block.json b/blocks/divider/block.json new file mode 100644 index 00000000..8042b061 --- /dev/null +++ b/blocks/divider/block.json @@ -0,0 +1,23 @@ +{ + "$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 + } + } +} \ No newline at end of file diff --git a/blocks/divider/edit.tsx b/blocks/divider/edit.tsx new file mode 100644 index 00000000..beba926e --- /dev/null +++ b/blocks/divider/edit.tsx @@ -0,0 +1,75 @@ +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; +import { + 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; + }, + 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, + }, + setAttributes, +}: EditProps) { + return ( + <> +
+
+
+ + {/* @ts-ignore */} + + setAttributes({ elHeight: newValue })} + min={1} + max={24} + resetFallbackValue={8} + allowReset + /> + + + + ); +} diff --git a/blocks/divider/index.php b/blocks/divider/index.php new file mode 100644 index 00000000..a246709f --- /dev/null +++ b/blocks/divider/index.php @@ -0,0 +1,22 @@ +. + * @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; +?> +
From f30674e6500aefff93bd8da642636a919bf1d27f Mon Sep 17 00:00:00 2001 From: cahdeemer Date: Tue, 4 Jun 2024 09:09:11 -0400 Subject: [PATCH 2/5] version bump --- plugin.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin.php b/plugin.php index 182c5c69..269b86d2 100644 --- a/plugin.php +++ b/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 From 432cd4cad664d08572fc2a2a9b7c55e9255ab3b3 Mon Sep 17 00:00:00 2001 From: cahdeemer Date: Tue, 4 Jun 2024 09:28:01 -0400 Subject: [PATCH 3/5] lint --- blocks/divider/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/divider/block.json b/blocks/divider/block.json index 8042b061..b48bec25 100644 --- a/blocks/divider/block.json +++ b/blocks/divider/block.json @@ -20,4 +20,4 @@ "default": 8 } } -} \ No newline at end of file +} From d6b05e83c754de1e101a8bce4cda97234de59b52 Mon Sep 17 00:00:00 2001 From: cahdeemer Date: Tue, 4 Jun 2024 09:40:32 -0400 Subject: [PATCH 4/5] lint --- blocks/divider/index.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/blocks/divider/index.php b/blocks/divider/index.php index a246709f..1a37156d 100644 --- a/blocks/divider/index.php +++ b/blocks/divider/index.php @@ -12,11 +12,10 @@ * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ -function divider_divider_block_init() { +function wp_newsletter_builder_divider_block_init() { // Register the block by passing the location of block.json. register_block_type( __DIR__ ); - } -add_action( 'init', 'divider_divider_block_init' ); +add_action( 'init', 'wp_newsletter_builder_divider_block_init' ); From a0cc73186f2140adb841681cf110c51d9456d865 Mon Sep 17 00:00:00 2001 From: cahdeemer Date: Wed, 5 Jun 2024 09:33:30 -0400 Subject: [PATCH 5/5] add background color --- blocks/divider/block.json | 6 +++++- blocks/divider/edit.tsx | 10 +++++++++- blocks/divider/render.php | 3 ++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/blocks/divider/block.json b/blocks/divider/block.json index b48bec25..258e9894 100644 --- a/blocks/divider/block.json +++ b/blocks/divider/block.json @@ -18,6 +18,10 @@ "elHeight": { "type": "number", "default": 8 - } + }, + "elColor": { + "type": "string", + "default": "#000" + } } } diff --git a/blocks/divider/edit.tsx b/blocks/divider/edit.tsx index beba926e..ef494780 100644 --- a/blocks/divider/edit.tsx +++ b/blocks/divider/edit.tsx @@ -5,6 +5,7 @@ */ import { __ } from '@wordpress/i18n'; import { + ColorPicker, PanelBody, RangeControl, } from '@wordpress/components'; @@ -29,6 +30,7 @@ import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; interface EditProps { attributes: { elHeight: number; + elColor: string; }, setAttributes: (attributes: {}) => void; } @@ -44,13 +46,14 @@ interface EditProps { export default function Edit({ attributes: { elHeight = 8, + elColor = '#000', }, setAttributes, }: EditProps) { return ( <>
-
+
{/* @ts-ignore */} @@ -68,6 +71,11 @@ export default function Edit({ resetFallbackValue={8} allowReset /> +

{__('Divider color', 'wp-newsletter-builder')}

+ setAttributes({ elColor: color })} + /> diff --git a/blocks/divider/render.php b/blocks/divider/render.php index 6f8f95f1..21c20995 100644 --- a/blocks/divider/render.php +++ b/blocks/divider/render.php @@ -10,5 +10,6 @@ */ $wp_newsletter_builder_divider_height = $attributes['elHeight'] ?? null; +$wp_newsletter_builder_divider_color = $attributes['elColor'] ?? null; ?> -
+