How to add block content in the cutsom gutenberg block - wordpress

Question

I was trying to add a custom shortcode in the admin panel when my custom block added to the page.
( function( blocks, element, editor, components) {
var el = element.createElement;
const { RichText, InspectorControls, BlockEdit } = editor;
const { Fragment } = element;
const { TextControl, ToggleControl, Panel, PanelBody, PanelRow, SelectControl } = components;
blocks.registerBlockType( 'gutenberg-custom/show-information', {
title: 'Show information',
icon: 'universal-access-alt',
category: 'layout',
example: {},
attributes: {
exhibitor_id:{
type: "string"
}
},
edit: function(props) {
console.log('props', props)
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{ title: "Show Settings", initialOpen: true },
/* Text Field */
el(
PanelRow,
{},
el(SelectControl, {
label: "Select Exhibitor",
options: [
{ label: 'Big', value: '100%' },
{ label: 'Medium', value: '50%' },
{ label: 'Small', value: '25%' },
] ,
onChange: value => {
props.setAttributes({ exhibitor_id: value });
},
value: props.attributes.exhibitor_id
})
)
),
)
);
},
save: function(props){
return 'Test output'
}
} );
}(
window.wp.blocks,
window.wp.element,
window.wp.editor,
window.wp.components
) );
The above is my js code. I could add the settings for the block but I couldn't figure out how can I add my custom content that is '[custom-shortcode]' in the block itself (like in the picture).
How can I do that?

Answer 1

edit: function(props) {
console.log("props", props);
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{ title: "Show Settings", initialOpen: true },
el(
PanelRow,
{},
el(SelectControl, {
label: "Select Exhibitor",
options: [
{ label: "Big", value: "100%" },
{ label: "Medium", value: "50%" },
{ label: "Small", value: "25%" }
],
onChange: value => {
props.setAttributes({ exhibitor_id: value });
},
value: props.attributes.exhibitor_id
})
)
)
),
el(
"div",
{},
"[show-information]"
)
);
},