diff --git a/blocks/divider/block.json b/blocks/divider/block.json new file mode 100644 index 00000000..258e9894 --- /dev/null +++ b/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" + } + } +} diff --git a/blocks/divider/edit.tsx b/blocks/divider/edit.tsx new file mode 100644 index 00000000..ef494780 --- /dev/null +++ b/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 ( + <> +
+
+
+ + {/* @ts-ignore */} + + setAttributes({ elHeight: newValue })} + min={1} + max={24} + resetFallbackValue={8} + allowReset + /> +

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

+ setAttributes({ elColor: color })} + /> +
+
+ + ); +} diff --git a/blocks/divider/index.php b/blocks/divider/index.php new file mode 100644 index 00000000..1a37156d --- /dev/null +++ b/blocks/divider/index.php @@ -0,0 +1,21 @@ +. + * @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; +?> +
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