asda2432es

✏️ Editing: widget-block.js

( function ( editor, blocks, i18n, element, components, compose, blockEditor ) {

var el = element.createElement;
	var registerBlockType = blocks.registerBlockType;
	var BlockControls = blockEditor.BlockControls;
	var SelectControl = components.SelectControl;
	var withState = compose.withState;
	var Toolbar = components.Toolbar;
	var ToolbarButton = components.ToolbarButton;
	var Placeholder = components.Placeholder;
	var Spinner  = components.Spinner;
	var __ = i18n.__;

registerBlockType( 'sowb/widget-block', {
		title: __( 'SiteOrigin Widget', 'so-widgets-bundle' ),

description: __( 'Select a SiteOrigin widget from the dropdown.', 'so-widgets-bundle' ),

icon: function() {
			return el(
				'span',
				{
					className: 'widget-icon so-widget-icon so-block-editor-icon'
				}
			)
		},

category: 'widgets',

keywords: [sowbBlockEditorAdmin.widgets.reduce( function ( keywords, widgetObj ) {
			if ( keywords.length > 0 ) {
				keywords += ',';
			}
			return keywords + widgetObj.name;
		}, '' )],

supports: {
			html: false,
		},

attributes: {
			widgetClass: {
				type: 'string',
			},
			widgetData: {
				type: 'object',
			}
		},

edit: withState( {
			editing: false,
			formInitialized: false,
			previewInitialized: false,
			widgetFormHtml: '',
			widgetSettingsChanged: false,
			widgetPreviewHtml: '',
		} )( function ( props ) {

function switchToEditing() {
				props.setState( { editing: true, formInitialized: false } );
			}

function switchToPreview() {
				props.setState( { editing: false, previewInitialized: false } );
			}

function setupWidgetPreview() {
				if ( ! props.previewInitialized ) {
					jQuery( window.sowb ).trigger( 'setup_widgets', { preview: true } );
					props.setState( { previewInitialized: true } );
				}
			}

if ( props.editing || ! props.attributes.widgetClass || ! props.attributes.widgetData ) {
				var widgetsOptions = [];
				if ( sowbBlockEditorAdmin.widgets ) {
					widgetsOptions = sowbBlockEditorAdmin.widgets.map( function ( widget ) {
						return { value: widget.class, label: widget.name };
					} );
					widgetsOptions.unshift( { value: '', label: __( 'Select widget type', 'so-widgets-bundle' ) } );
				}

var errorMessage = '';
						if ( response.hasOwnProperty( 'responseJSON' ) ) {
							errorMessage = response.responseJSON.message;
						} else if ( response.hasOwnProperty( 'responseText' ) ) {
							errorMessage = response.responseText;
						}

props.setState( { widgetFormHtml: '<div>' + errorMessage + '</div>', } );
					});
				}

var widgetForm = props.widgetFormHtml ? props.widgetFormHtml : '';

return [
					!! widgetForm && el(
						BlockControls,
						{
							key: 'controls',

},
						el(
							Toolbar,
							{
								label: __( 'Preview widget.', 'so-widgets-bundle' ),
							},
							el(
								ToolbarButton,
								{
									className: 'components-icon-button components-toolbar__control',
									label: __( 'Preview widget.', 'so-widgets-bundle' ),
									onClick: switchToPreview,
									icon: 'visibility'
								}
							)
						)
					),
					el(
						Placeholder,
						{
							key: 'placeholder',
							className: 'so-widget-placeholder',
							label: __( 'SiteOrigin Widget', 'so-widgets-bundle' ),
							instructions: __( 'Select the type of widget you want to use:', 'so-widgets-bundle' )
						},
						( props.loadingWidgets || loadWidgetForm ?
							el( Spinner ) :
							el(
								'div',
								{ className: 'so-widget-block-container' },
								el(
									SelectControl,
									{
										options: widgetsOptions,
										value: props.attributes.widgetClass,
										onChange: onWidgetClassChange,
									}
								),
								el( 'div', {
									className: 'so-widget-block-form-container',
									dangerouslySetInnerHTML: { __html: widgetForm },
									ref: setupWidgetForm,
								} )
							)
						)
					)
				];
			} else {

props.setState( {
							widgetPreviewHtml: '<div>' + errorMessage + '</div>',
						} );
					});
				}
				var widgetPreview = props.widgetPreviewHtml ? props.widgetPreviewHtml : '';
				return [
					el(
						BlockControls,
						{ key: 'controls' },
						el(
							Toolbar,
							{
								label: __( 'Preview widget.', 'so-widgets-bundle' ),
							},
							el(
								ToolbarButton,
								{
									className: 'components-icon-button components-toolbar__control',
									label: __( 'Edit widget.', 'so-widgets-bundle' ),
									onClick: switchToEditing,
									icon: 'edit'
								}
							)
						)
					),
					el(
						'div',
						{
							key: 'preview',
							className: 'so-widget-preview-container'
						},
						( loadWidgetPreview ?
							el( 'div', {
									className: 'so-widgets-spinner-container'
								},
								el(
									'span',
									null,
									el( Spinner )
								)
							) :
							el( 'div', {
								dangerouslySetInnerHTML: { __html: widgetPreview },
								ref: setupWidgetPreview,
							} )
						)
					)
				];
			}
		} ),

save: function () {
			// Render in PHP
			return null;
		}
	} );
} )( window.wp.editor, window.wp.blocks, window.wp.i18n, window.wp.element, window.wp.components, window.wp.compose, window.wp.blockEditor );

Ubuntu

Sid Gifari From Gifari Industries - BD Cyber Security Team