Export JSON Gutenberg Block, Implemented code on Gutentor

block-export.js

/**
 * Block Export: gutentor
 *
 * Export Block on JSON
 */

/* From WordPress Core*/

const {
    __
} = wp.i18n; // Import __() from wp.i18n

const {
	registerPlugin
} = wp.plugins;

const {
	serialize,
	parse
} = wp.blocks;

const {
	compose
} = wp.compose;

const {
	withSelect
} = wp.data;

const {
	PluginBlockSettingsMenuItem
} = wp.editPost;

const {
	Component
} = wp.element;

/**
 * BlockExportJson
 *
 * Block Export to Json File
 *
 * @link https://developer.wordpress.org/block-editor/components/
 *
 * @return PluginBlockSettingsMenuItem
 *
 */
function gutentorParseBlocks( blockData ) {
    return parse( serialize( blockData ) );
}
function gutentorSaveJSON( data, filename, blockProps ) {
    if ( ! data ) {
        return;
    }

    if ( ! filename ) {
        filename = 'block.json';
    }
    else{
        filename = filename+'.json';
    }

    if ( 'object' === typeof data ) {
        if ( 1 === blockProps.count ) {
            data = JSON.stringify( data.shift(), undefined, 4 );
        } else {
            data = JSON.stringify( data, undefined, 4 );
        }
    }

    const blob = new Blob([ data ], { type: 'text/json' }),
        e = document.createEvent( 'MouseEvents' ),
        a = document.createElement( 'a' );

    a.download = filename;
    a.href = window.URL.createObjectURL( blob );
    a.dataset.downloadurl =  [ 'text/json', a.download, a.href ].join( ':' );
    e.initMouseEvent( 'click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null );
    a.dispatchEvent( e );
}
class BlockExportJson extends Component {
	constructor() {
		super( ...arguments );

		this.exportBlocks = this.exportBlocks.bind( this );
	}

	exportBlocks() {
        gutentorSaveJSON(
            gutentorParseBlocks( 1 === this.props.count ? this.props.block : this.props.blocks ),
            1 === this.props.count ? this.props.block.name : '',
            this.props
        );
	}

	render() {
		return (
			<PluginBlockSettingsMenuItem
				icon='migrate'
				label={ __( 'Export Block' ) }
				onClick={ this.exportBlocks }
			/>
		);
	}
}

const GutentorExport = compose([
	withSelect( ( select ) => {
		const { getSelectedBlockCount, getSelectedBlock, getMultiSelectedBlocks } = select( 'core/block-editor' );

		return {
			count: getSelectedBlockCount(),
			block: getSelectedBlock(),
			blocks: getMultiSelectedBlocks()
		};
	})
])( BlockExportJson );

registerPlugin( 'gutentor-block-export', {
	render: GutentorExport
});



/**
 * Add "Advanced Block Export" button to the toolbar.
 */
document.addEventListener( 'DOMContentLoaded', gutentorExportButton );

/**
 * Build the layout inserter button.
 */
function gutentorExportButton() {
    let toolbar = document.querySelector( '.edit-post-header__settings' );
    if ( ! toolbar ) {
        return;
    }
    let buttonDiv = document.createElement( 'div' );
    let html = '<div class="gutentor-export-button">';
    html += `<button id="gutentor-advanced-export-button" class="components-button components-icon-button" title="${ __( 'Export All Blocks Content On JSON Format' ) }">`;
    html += `<img src="`+gutentor.gutentorWhiteSvg+`" class="components-panel__icon" size="20" style="width: 20px; margin-right: 10px">`;
    html += `${ __( 'Block Template Export', 'gutentor' ) }`;
    html += `</button>`;
    html += '</div>';
    buttonDiv.innerHTML = html;
    toolbar.insertBefore( buttonDiv,toolbar.firstChild );
    document.getElementById( 'gutentor-advanced-export-button' ).addEventListener( 'click', gutentorTriggerExport );
}

/**
 * Add "gutentor/advanced-export" on click.
 */
function gutentorTriggerExport() {

    gutentorSaveJSON(
        wp.data.select('core/block-editor').getBlocks(),
        'template',
        false
    );
}