From 9ddcc41c6b3e3fdd25ee28ed6ca6375dc314dbc8 Mon Sep 17 00:00:00 2001 From: Stefan Kalscheuer Date: Sat, 23 Nov 2019 17:54:53 +0100 Subject: [PATCH] implement Gutenberg block to add liveticker without legacy shortcode * implement react-based JS block * refactor shortcode and widget to use the same syntax and classes --- .eslintrc.json | 6 +- composer.json | 4 ++ includes/class-scliveticker-admin.php | 31 +++++++++ includes/class-scliveticker-widget.php | 2 +- includes/class-scliveticker.php | 8 +-- scripts/block.js | 91 ++++++++++++++++++++++++++ scripts/liveticker.js | 24 +++++-- stklcode-liveticker.php | 3 + styles/block.css | 7 ++ styles/liveticker.css | 6 +- views/widget-form.php | 2 +- 11 files changed, 168 insertions(+), 16 deletions(-) create mode 100644 scripts/block.js create mode 100644 styles/block.css diff --git a/.eslintrc.json b/.eslintrc.json index f008f76..95e51b8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,7 +4,8 @@ "browser": true }, "globals": { - "sclivetickerAjax": "readonly" + "sclivetickerAjax": "readonly", + "wp": "readonly" }, "extends": [ "plugin:@wordpress/eslint-plugin/recommended", @@ -16,7 +17,8 @@ "*" ], "rules": { - "no-var": "off" + "no-var": "off", + "object-shorthand": "off" } } ] diff --git a/composer.json b/composer.json index 5cc52a4..0894742 100644 --- a/composer.json +++ b/composer.json @@ -65,13 +65,17 @@ "phpcs --standard=phpcs.xml -s" ], "lint-css": [ + "./node_modules/stylelint/bin/stylelint.js styles/block.css", "./node_modules/stylelint/bin/stylelint.js styles/liveticker.css" ], "lint-js": [ + "./node_modules/eslint/bin/eslint.js scripts/block.js", "./node_modules/eslint/bin/eslint.js scripts/liveticker.js" ], "minify": [ + "minifycss styles/block.css > styles/block.min.css", "minifycss styles/liveticker.css > styles/liveticker.min.css", + "minifyjs scripts/block.js > scripts/block.min.js", "minifyjs scripts/liveticker.js > scripts/liveticker.min.js" ] } diff --git a/includes/class-scliveticker-admin.php b/includes/class-scliveticker-admin.php index 4a56989..ca0f1e1 100644 --- a/includes/class-scliveticker-admin.php +++ b/includes/class-scliveticker-admin.php @@ -202,4 +202,35 @@ class SCLiveticker_Admin extends SCLiveticker { return $result; } + + /** + * Register custom Gutenberg block type. + * + * @return void + * @since 1.1 + */ + public static function register_block() { + wp_register_script( + 'scliveticker-editor', + SCLIVETICKER_BASE . 'scripts/block.min.js', + array( 'wp-blocks', 'wp-element' ), + self::VERSION, + true + ); + + wp_register_style( + 'scliveticker-editor', + SCLIVETICKER_BASE . 'styles/block.min.css', + array(), + self::VERSION + ); + + register_block_type( + 'scliveticker-block/liveticker', + array( + 'editor_script' => 'scliveticker-editor', + 'editor_style' => 'scliveticker-editor', + ) + ); + } } diff --git a/includes/class-scliveticker-widget.php b/includes/class-scliveticker-widget.php index 34e376a..4e34012 100644 --- a/includes/class-scliveticker-widget.php +++ b/includes/class-scliveticker-widget.php @@ -70,7 +70,7 @@ class SCLiveticker_Widget extends WP_Widget { echo ''; // Show RSS feed link, if configured. if ( $show_feed ) { diff --git a/scripts/block.js b/scripts/block.js new file mode 100644 index 0000000..5c28c72 --- /dev/null +++ b/scripts/block.js @@ -0,0 +1,91 @@ +/** + * stklcode-liveticker Gutenberg Block + * + * Gutenberg Block to integrate the liveticker widget without shortcode. + */ +( function() { + var { __ } = wp.i18n; + var { registerBlockType } = wp.blocks; + var el = wp.element.createElement; + + registerBlockType( 'scliveticker/ticker', { + title: __( 'Liveticker', 'stklcode-liveticker' ), + icon: 'rss', + category: 'widgets', + keywords: [ + __( 'Liveticker', 'stklcode-liveticker' ), + ], + attributes: { + ticker: { + type: 'string', + default: '', + }, + limit: { + type: 'number', + default: 5, + }, + unlimited: { + type: 'boolean', + default: false, + }, + }, + edit: function( props ) { + return el( + 'div', + { className: props.className + ' components-placeholder' }, + [ + el( + wp.components.TextControl, + { + label: [ + el( + wp.components.Dashicon, + { icon: 'rss' } + ), + __( 'Liveticker', 'stklcode-liveticker' ) ], + value: props.attributes.ticker, + onChange: function( val ) { + props.setAttributes( { ticker: val } ); + }, + } + ), + el( + wp.components.TextControl, + { + label: __( 'Number of Ticks', 'stklcode-liveticker' ), + type: 'number', + min: 1, + step: 1, + disabled: props.attributes.unlimited, + value: props.attributes.limit, + onChange: function( val ) { + props.setAttributes( { limit: val } ); + }, + } + ), + el( + wp.components.CheckboxControl, + { + label: __( 'unlimited', 'stklcode-liveticker' ), + checked: props.attributes.unlimited, + onChange: function( val ) { + props.setAttributes( { unlimited: val } ); + }, + } + ), + ], + ); + }, + save: function( props ) { + return el( + 'div', + { + className: props.className + ' sclt-ajax', + 'data-sclt-ticker': props.attributes.ticker, + 'data-sclt-limit': props.attributes.unlimited ? 0 : props.attributes.limit, + 'data-sclt-last': 0, + } + ); + }, + } ); +}() ); diff --git a/scripts/liveticker.js b/scripts/liveticker.js index c2ba8f0..f237e0e 100644 --- a/scripts/liveticker.js +++ b/scripts/liveticker.js @@ -1,7 +1,7 @@ /** * Contructor of the scLiveticker object. * - * @constructor + * @class */ function scLiveticker() { } @@ -24,26 +24,38 @@ scLiveticker.init = function() { // Get ticker elements. scLiveticker.ticker = [].map.call( - document.querySelectorAll( 'ul.sclt-ticker-ajax' ), + document.querySelectorAll( 'div.wp-block-scliveticker-ticker.sclt-ajax' ), function( elem ) { + var list = elem.querySelector( 'ul' ); + if ( ! list ) { + list = document.createElement( 'ul' ); + elem.appendChild( list ); + } + return { s: elem.getAttribute( 'data-sclt-ticker' ), l: elem.getAttribute( 'data-sclt-limit' ), t: elem.getAttribute( 'data-sclt-last' ), - e: elem, + e: list, }; } ); // Get widget elements. scLiveticker.widgets = [].map.call( - document.querySelectorAll( 'ul.sclt-widget-ajax' ), + document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ), function( elem ) { + var list = elem.querySelector( 'ul' ); + if ( ! list ) { + list = document.createElement( 'ul' ); + elem.appendChild( list ); + } + return { w: elem.getAttribute( 'data-sclt-ticker' ), l: elem.getAttribute( 'data-sclt-limit' ), t: elem.getAttribute( 'data-sclt-last' ), - e: elem, + e: list, }; } ); @@ -132,7 +144,7 @@ scLiveticker.update = function() { scLiveticker.updateHTML = function( t, u ) { // Prepend HTML of new ticks. t.e.innerHTML = u.h + t.e.innerHTML; - t.e.setAttribute( 'data-sclt-last', u.t ); + t.e.parentNode.setAttribute( 'data-sclt-last', u.t ); // Remove tail, if limit is set. if ( 0 < t.l ) { diff --git a/stklcode-liveticker.php b/stklcode-liveticker.php index 795c351..4d3aff3 100644 --- a/stklcode-liveticker.php +++ b/stklcode-liveticker.php @@ -55,6 +55,9 @@ add_shortcode( 'liveticker', array( 'SCLiveticker', 'shortcode_ticker_show' ) ); // Add Widget. add_action( 'widgets_init', array( 'SCLiveticker_Widget', 'register' ) ); +// Add Gutenberg block. +add_action( 'enqueue_block_editor_assets', array( 'SCLiveticker_Admin', 'register_block' ) ); + // Autoload. spl_autoload_register( 'scliveticker_autoload' ); diff --git a/styles/block.css b/styles/block.css new file mode 100644 index 0000000..16ec33a --- /dev/null +++ b/styles/block.css @@ -0,0 +1,7 @@ +div.wp-block-scliveticker-ticker div.components-base-control:first-child label { + font-weight: 600; +} + +div.wp-block-scliveticker-ticker div.components-base-control:first-child label > .dashicon { + margin-right: 8px; +} diff --git a/styles/liveticker.css b/styles/liveticker.css index d05aa07..cd25599 100644 --- a/styles/liveticker.css +++ b/styles/liveticker.css @@ -1,8 +1,10 @@ -ul.sclt-ticker { +div.wp-block-scliveticker-ticker ul, +div.wp-block-scliveticker-ajax-ticker ul { list-style-type: none; } -ul.sclt-ticker > li.sclt-tick { +div.wp-block-scliveticker-ticker ul > li.sclt-tick, +div.wp-block-scliveticker-ajax-ticker ul > li.sclt-tick { background-color: #f5f5f5; list-style-type: none; margin: 0.1em; diff --git a/views/widget-form.php b/views/widget-form.php index 598969c..aeda8eb 100644 --- a/views/widget-form.php +++ b/views/widget-form.php @@ -40,7 +40,7 @@ if ( ! defined( 'ABSPATH' ) ) { - +