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

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?

标签： wordpresswordpress-gutenberggutenberg-blockscreate-guten-block

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]"
        )
      );
    },