add background color

alleyinteractive · Jun 5, 2024 · a0cc731 · a0cc731
1 parent d6b05e8
commit a0cc731
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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 (
     <>
       <div {...useBlockProps()}>
-        <div style={{ backgroundColor: '#000', height: `${elHeight}px` }} />
+        <div style={{ backgroundColor: elColor, height: `${elHeight}px` }} />
       </div>
       <InspectorControls>
         {/* @ts-ignore */}
@@ -68,6 +71,11 @@ export default function Edit({
             resetFallbackValue={8}
             allowReset
           />
+          <h3>{__('Divider color', 'wp-newsletter-builder')}</h3>
+          <ColorPicker
+            color={elColor}
+            onChange={(color) => setAttributes({ elColor: color })}
+          />
         </PanelBody>
       </InspectorControls>
     </>

diff --git 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; 
 ?>
-<div style="height: <?php echo esc_attr( $wp_newsletter_builder_divider_height ); ?>px;background-color: #000;"></div>
+<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>