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
2019-11-23 17:54:53 +01:00
parent e201d7c02f
commit 9ddcc41c6b
11 changed files with 168 additions and 16 deletions
--- a/scripts/block.js
+++ 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,
+				}
+			);
+		},
+	} );
+}() );