如何在自定义古腾堡块中添加块内容答案

【问题标题】：How to add block content in the cutsom gutenberg block如何在自定义古腾堡块中添加块内容
【发布时间】：2019-11-22 10:20:11
【问题描述】：

当我的自定义块添加到页面时，我试图在管理面板中添加自定义简码。

( 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
) );

以上是我的js代码。我可以添加块的设置，但我不知道如何在块本身中添加自定义内容，即“[custom-shortcode]”（如图所示）。

我该怎么做？

【问题讨论】：

标签： wordpress wordpress-gutenberg gutenberg-blocks create-guten-block

【解决方案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]"
        )
      );
    },

【讨论】：