Merge pull request #24 from RRZE-Webteam/dev

1.2.0
RRZE-Webteam · Oct 11, 2024 · 82b1dbc · 82b1dbc
2 parents 3f049f8 + b4c969a
commit 82b1dbc
Show file tree

Hide file tree

Showing 16 changed files with 199 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Tags: hello lenny, shortcode, block, fun
 Requires at least: 6.6
 Tested up to: 6.6
 Requires PHP: 8.2
-Stable tag: 1.1.1
+Stable tag: 1.1.3
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Author: RRZE Webteam

diff --git a/build/block.asset.php b/build/block.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'aa4bcb2bed50fbfceca9');
+<?php return array('dependencies' => array(), 'version' => '4215db89d846e18af242');
diff --git a/build/block.js b/build/block.js
diff --git a/build/editor.asset.php b/build/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '8bbb717a528fa92d1bab');
+<?php return array('dependencies' => array(), 'version' => 'e9bff0d4310710d7800b');
diff --git a/build/editor.css b/build/editor.css
diff --git a/build/frontend.asset.php b/build/frontend.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '8bbb717a528fa92d1bab');
+<?php return array('dependencies' => array(), 'version' => 'e9bff0d4310710d7800b');
diff --git a/build/frontend.css b/build/frontend.css
diff --git a/includes/BlockEditor.php b/includes/BlockEditor.php
@@ -6,9 +6,12 @@
 
 class BlockEditor
 {
-    public function __construct($pluginFile)
+    protected $defaultAttributes;
+
+    public function __construct($defaultAttributes)
     {
-        add_action('init', [$this,  'registerBlock']);
+        $this->defaultAttributes = $defaultAttributes;
+        add_action('init', [$this, 'registerBlock']);
         add_action('enqueue_block_assets', [$this, 'enqueueBlockAssets']);
     }
 
@@ -18,7 +21,7 @@ public function registerBlock()
             'editor_script' => 'lenny-block-editor-script',
             'editor_style' => 'lenny-block-editor-style',
             'style' => 'lenny-block-style',
-            'render_callback' => [$this,  'renderBlock']
+            'render_callback' => [$this, 'renderBlock']
         ]);
     }
 
@@ -31,8 +34,13 @@ public function enqueueBlockAssets()
 
     public function renderBlock($attributes)
     {
+        // Sanitize attributes
+        $attributes['css_classes'] = !empty($attributes['cssClasses']) ? sanitize_hex_color($attributes['cssClasses']) : '';
+        $attributes['background_color'] = !empty($attributes['backgroundColor']) ? sanitize_hex_color($attributes['backgroundColor']) : '';
+        $attributes['border_color'] = !empty($attributes['borderColor']) ? sanitize_hex_color($attributes['borderColor']) : '';
+
         wp_enqueue_script('lenny-random-bark');
 
-        return Shortcode::generateWuffOutput();
+        return Shortcode::generateWuffOutput($attributes);
     }
 }
diff --git a/includes/Config.php b/includes/Config.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace RRZE\HelloLenny;
+
+defined('ABSPATH') || exit;
+
+class Config
+{
+    protected $pluginFile;
+
+    public function __construct($pluginFile)
+    {
+        $this->pluginFile = $pluginFile;
+    }
+
+    public static function getDefaultAttributes()
+    {
+        return [
+            'css_classes' => '',
+            'background_color' => '#ffffff',
+            'border_color' => '#000000',
+        ];
+    }
+}
diff --git a/includes/Main.php b/includes/Main.php
@@ -4,6 +4,7 @@
 
 defined('ABSPATH') || exit;
 
+use RRZE\HelloLenny\Config;
 use RRZE\HelloLenny\Shortcode;
 use RRZE\HelloLenny\BlockEditor;
 
@@ -44,8 +45,10 @@ public function onLoaded()
         add_action('enqueue_block_assets', [$this, 'enqueueAssets']);
 
         // Initialize Shortcode and BlockEditor
-        new Shortcode($this->pluginFile);
-        new BlockEditor($this->pluginFile);
+        $config = new Config($this->pluginFile);
+        $default_attributes = $config::getDefaultAttributes();
+        $shortcode = new Shortcode($default_attributes);
+        $blockeditor = new BlockEditor($default_attributes);
     }
 
     /**

diff --git a/includes/Shortcode.php b/includes/Shortcode.php
@@ -6,21 +6,39 @@
 
 class Shortcode
 {
-    public function __construct($pluginFile)
+
+    protected $defaultAttributes;
+
+    public function __construct($defaultAttributes)
     {
+        $this->defaultAttributes = $defaultAttributes;
         add_shortcode('rrze-hello-lenny', [$this, 'renderShortcode']);
     }
 
-    public function renderShortcode()
+    public function renderShortcode($attributes = [])
     {
+        // Merge user-provided attributes with default values
+        $attributes = shortcode_atts($this->defaultAttributes, $attributes);
+
+
+        // Sanitize parameters
+        $attributes['css_classes'] = sanitize_text_field($attributes['css_classes']);
+        $attributes['background_color'] = sanitize_text_field($attributes['background_color']);
+        $attributes['border_color'] = sanitize_text_field($attributes['border_color']);
+
+        //         echo '<pre>';
+        // var_dump($attributes);
+        // exit;
+
         // Enqueue assets
         wp_enqueue_style('lenny-frontend-style');
         wp_enqueue_script('lenny-random-bark');
 
-        return $this->generateWuffOutput();
+        // Generate the output
+        return $this->generateWuffOutput($attributes);
     }
 
-    public static function generateWuffOutput()
+    public static function generateWuffOutput($attributes)
     {
         $lang = get_bloginfo('language');
         $numWuffs = rand(1, 4);
@@ -34,14 +52,21 @@ public static function generateWuffOutput()
             'wouf-xlarge'
         ];
 
-        $output = '<blockquote class="rrze-hello-lenny" lang="' . esc_attr($lang) . '"><p>';
+        // Add custom CSS classes
+        $customClasses = !empty($attributes['css_classes']) ? esc_attr($attributes['css_classes']) : '';
+
+        // Create the blockquote with custom styles
+        $style = sprintf(
+            'background-color: %s; border-color: %s;',
+            esc_attr($attributes['background_color']),
+            esc_attr($attributes['border_color'])
+        );
+
+        $output = sprintf('<blockquote class="rrze-hello-lenny %s" lang="%s" style="%s"><p>', $customClasses, esc_attr($lang), $style);
 
         for ($i = 0; $i < $numWuffs; $i++) {
-            // Randomly select one CSS class
             $randomIndex = array_rand($cssClasses);
             $classString = $cssClasses[$randomIndex];
-
-            // Create the "Wouf!" span with the selected class
             $output .= '<span class="' . esc_attr($classString) . '">' . esc_html(__('Wouf!', 'rrze-hello-lenny')) . '</span> ';
         }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrze-hello-lenny",
-  "version": "1.2.0",
+  "version": "1.1.3",
   "main": "build/index.js",
   "scripts": {
     "build-css": "node-sass --output-style compressed src/sass/ -o build/",

diff --git a/rrze-hello-lenny.php b/rrze-hello-lenny.php
@@ -3,18 +3,18 @@
 namespace RRZE\HelloLenny;
 
 /**
- * Plugin Name:         RRZE Hello Lenny
- * Plugin URI:          https://github.com/RRZE-Webteam/rrze-hello-lenny/
- * Description:         A plugin inspired by Hello Dolly, using both a shortcode and a Gutenberg block.
- * Version:             1.1.2
- * Requires at least:   6.6
- * Requires PHP:        8.2
- * Author:              RRZE Webteam
- * Author URI:          https://blogs.fau.de/webworking/
- * License:             GNU General Public License v2
- * License URI:         http://www.gnu.org/licenses/gpl-2.0.html
- * Domain Path:         /languages
- * Text Domain:         rrze-hello-lenny
+ * Plugin Name:     RRZE Hello Lenny
+ * Plugin URI:      https://github.com/RRZE-Webteam/rrze-hello-lenny/
+ * Description:     A plugin inspired by Hello Dolly, using both a shortcode and a Gutenberg block.
+ * Version: 1.1.3
+ * Requires at least: 6.6
+ * Requires PHP:      8.2
+ * Author:          RRZE Webteam
+ * Author URI:      https://blogs.fau.de/webworking/
+ * License:         GNU General Public License v2
+ * License URI:     http://www.gnu.org/licenses/gpl-2.0.html
+ * Domain Path:     /languages
+ * Text Domain:     rrze-hello-lenny
  */
 
 // Prevent direct access to this file.

diff --git a/src/js/block.js b/src/js/block.js
@@ -1,35 +1,108 @@
-(function (blocks, element) {
+(function (blocks, element, blockEditor, components, i18n) {
     var el = element.createElement;
     var registerBlockType = blocks.registerBlockType;
+    var InspectorControls = blockEditor.InspectorControls;
+    var PanelBody = components.PanelBody;
+    var TextControl = components.TextControl;
+    var ColorPicker = components.ColorPicker;
+    var __ = i18n.__;
 
     registerBlockType("lenny/quote-block", {
-        title: wp.i18n.__("Lenny Quote", "rrze-hello-lenny"),
+        title: __("Lenny Quote", "rrze-hello-lenny"),
         icon: "format-quote",
         category: "widgets",
-        edit: function () {
-            return el(
-                "blockquote",
-                { className: "rrze-hello-lenny shortcode", lang: "de" },
+        attributes: {
+            cssClasses: {
+                type: "string",
+                default: ""
+            },
+            backgroundColor: {
+                type: "string",
+                default: "#ffffff"
+            },
+            borderColor: {
+                type: "string",
+                default: "#000000"
+            }
+        },
+        edit: function (props) {
+            var attributes = props.attributes;
+            var setAttributes = props.setAttributes;
+
+            return [
                 el(
-                    "p",
-                    {},
-                    el(
-                        "span",
-                        { className: "wouf-ucfirst" },
-                        wp.i18n.__("Wuff!", "rrze-hello-lenny")
-                    ),
-                    " ",
+                    InspectorControls,
+                    { key: "inspector" },
                     el(
-                        "span",
-                        { className: "wouf-ucfirst wouf-uppercase" },
-                        wp.i18n.__("Wuff!", "rrze-hello-lenny")
+                        PanelBody,
+                        { title: __("Block Settings", "rrze-hello-lenny"), initialOpen: true },
+                        el(TextControl, {
+                            label: __("CSS Classes", "rrze-hello-lenny"),
+                            value: attributes.cssClasses,
+                            onChange: function (newVal) {
+                                setAttributes({ cssClasses: newVal });
+                            }
+                        }),
+                        el("div", { style: { marginBottom: "20px" } }, 
+                            el(ColorPicker, {
+                                label: __("Background Color", "rrze-hello-lenny"),
+                                color: attributes.backgroundColor,
+                                onChangeComplete: function (newColor) {
+                                    setAttributes({ backgroundColor: newColor.hex });
+                                },
+                                disableAlpha: true
+                            })
+                        ),
+                        el("div", { style: { marginBottom: "20px" } }, 
+                            el(ColorPicker, {
+                                label: __("Border Color", "rrze-hello-lenny"),
+                                color: attributes.borderColor,
+                                onChangeComplete: function (newColor) {
+                                    setAttributes({ borderColor: newColor.hex });
+                                },
+                                disableAlpha: true
+                            })
+                        )
                     )
                 ),
-                el("cite", {}, "🐶 Lenny")
-            );
+                el(
+                    "blockquote",
+                    {
+                        className: "rrze-hello-lenny " + attributes.cssClasses,
+                        style: {
+                            backgroundColor: attributes.backgroundColor,
+                            borderColor: attributes.borderColor,
+                            borderStyle: "solid"
+                        },
+                        lang: "de"
+                    },
+                    el(
+                        "p",
+                        {},
+                        el(
+                            "span",
+                            { className: "wouf-ucfirst" },
+                            __("Wuff!", "rrze-hello-lenny")
+                        ),
+                        " ",
+                        el(
+                            "span",
+                            { className: "wouf-ucfirst wouf-uppercase" },
+                            __("Wuff!", "rrze-hello-lenny")
+                        )
+                    ),
+                    el("cite", {}, "🐶 Lenny")
+                )
+            ];
         },
         save: function () {
             return null; // Rendered in PHP on the frontend
-        },
+        }
     });
-})(window.wp.blocks, window.wp.element);
+})(
+    window.wp.blocks,
+    window.wp.element,
+    window.wp.blockEditor,
+    window.wp.components,
+    window.wp.i18n
+);
diff --git a/src/sass/editor.scss b/src/sass/editor.scss
@@ -5,6 +5,14 @@
     &.block {
         border-style: dotted;
     }
+    .wouf-ucfirst {
+        text-transform: lowercase;
+    }
+
+    .wouf-ucfirst::first-letter {
+        text-transform: uppercase;
+    }
+
     .wouf-uppercase {
         text-transform: uppercase;
     }

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,9 +2,9 @@ const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 module.exports = {
     ...defaultConfig,
     entry: {
-        'block': './src/block.js',
-        'editor': './src/editor.scss',
-        'frontend': './src/frontend.scss'
+        'block': './src/js/block.js',
+        'editor': './src/sass/editor.scss',
+        'frontend': './src/sass/frontend.scss'
     },
     output: {
         path: __dirname + '/build/',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array(), 'version' => 'aa4bcb2bed50fbfceca9');
		<?php return array('dependencies' => array(), 'version' => '4215db89d846e18af242');