instance settings in gutenberg block

Author: contactashish13

classes/Visualizer/Gutenberg/Block.php

@@ -139,6 +139,9 @@ public function register_block_type() {
 					'id' => array(
 						'type' => 'number',
 					),
+					'lazy' => array(
+						'type' => 'string',
+					),
 				),
 			)
 		);
@@ -147,14 +150,39 @@ public function register_block_type() {
 	/**
 	 * Gutenberg Block Callback Function
 	 */
-	public function gutenberg_block_callback( $attr ) {
-		if ( isset( $attr['id'] ) ) {
-			$id = $attr['id'];
-			if ( empty( $id ) || $id === 'none' ) {
-				return ''; // no id = no fun
-			}
-			return '[visualizer id="' . $id . '"]';
+	public function gutenberg_block_callback( $atts ) {
+		$atts = shortcode_atts(
+			array(
+				'id'     => false,
+				'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
+				// we are deliberating excluding the class attribute from here 
+				// as this will be handled by the custom class in Gutenberg
+			),
+			$atts
+		);
+
+		// no id, no fun.
+		if ( ! $atts['id'] ) {
+			return '';
+		}
+
+		// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
+		if ( $atts['lazy'] == -1 || $atts['lazy'] == false ) {
+			$atts['lazy'] = 'no';
+		}
+
+		// we don't want the chart in the editor lazy-loading.
+		if ( is_admin() ) {
+			unset( $atts['lazy'] );
 		}
+
+		$shortcode = '[visualizer';
+		foreach ( $atts as $name => $value ) {
+			$shortcode .= sprintf( ' %s="%s"', $name, $value );
+		}
+		$shortcode .= ']';
+
+		return $shortcode;
 	}
 
 	/**

classes/Visualizer/Gutenberg/build/block.js

@@ -133,7 +133,7 @@ class ChartSelect extends Component {
 						/>
 
 						{ 'showAdvanced' === this.state.route &&
-							<Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
+							<Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
 						}
 
 						{ 'showPermissions' === this.state.route &&

classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import GeneralSettings from './Sidebar/GeneralSettings.js';
+import InstanceSettings from './Sidebar/InstanceSettings.js';
 import HorizontalAxisSettings from './Sidebar/HorizontalAxisSettings.js';
 import VerticalAxisSettings from './Sidebar/VerticalAxisSettings.js';
 import PieSettings from './Sidebar/PieSettings.js';
@@ -45,6 +46,8 @@ class Sidebar extends Component {
 		return (
 			<Fragment>
 
+				<InstanceSettings chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.edit } />
+
 				<GeneralSettings chart={ this.props.chart } edit={ this.props.edit } />
 
 				{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (

classes/Visualizer/Gutenberg/src/Components/Sidebar.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+const { Component } = wp.element;
+
+const {
+	PanelBody,
+	Notice,
+	TextControl
+} = wp.components;
+
+class InstanceSettings extends Component {
+	constructor() {
+		super( ...arguments );
+	}
+
+	render() {
+
+		const settings = this.props.chart['visualizer-settings'];
+
+		return (
+			<PanelBody
+				title={ __( 'Instance Settings' ) }
+				initialOpen={ true }
+				className="visualizer-instance-panel"
+			>
+
+                <Notice status="info" isDismissible={ false } >
+                    <p>
+                        { __( 'These settings are valid only for this instance of the chart.' ) }
+                    </p>
+                    <p>
+                        { __( 'This means that if you insert this chart again elsewhere, these values will not persist.' ) }
+                    </p>
+                </Notice>
+
+                <TextControl
+                    label={ __( 'Should this instance lazy Load?' ) }
+                    help={ __( '-1: do not lazy load. Any number greater than -1 will lazy load the chart once the viewport is that many pixels away from the chart' ) }
+                    value={ this.props.attributes.lazy ? Number( this.props.attributes.lazy ) : -1 }
+                    type="number"
+                    min="-1"
+                    max="1000"
+                    step="1"
+                    onChange={ e => {
+                        this.props.attributes.lazy = e;
+                        this.props.edit( settings );
+                    } }
+                />
+
+			</PanelBody>
+		);
+	}
+}
+
+export default InstanceSettings;

classes/Visualizer/Gutenberg/src/Components/Sidebar/InstanceSettings.js

@@ -101,7 +101,8 @@ class Editor extends Component {
 
 		this.props.setAttributes({
 			id,
-			route: 'chartSelect'
+			route: 'chartSelect',
+            lazy
 		});
 	}
 
@@ -483,6 +484,7 @@ class Editor extends Component {
 				{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
 					<ChartSelect
 						id={ this.props.attributes.id }
+						attributes={ this.props.attributes }
 						chart={ this.state.chart }
 						editSettings={ this.editSettings }
 						editPermissions={ this.editPermissions }

classes/Visualizer/Gutenberg/src/Editor.js

@@ -39,6 +39,10 @@ export default registerBlockType( 'visualizer/chart', {
 		id: {
 			type: 'number'
 		},
+		lazy: {
+            default: '-1',
+			type: 'string'
+		},
 		route: {
 			type: 'string'
 		}