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 ( + <> +