不处于编辑状态时块预览不可见

Question

我已经开始使用古腾堡自定义块了，而且我已经成功构建了自定义块！

但我有一个问题，当我不在管理员端编辑它时，我需要查看块的预览，我认为古腾堡没有提供它，因为我搜索了文档，搜索了互联网但是在不处于编辑状态时没有找到有关块预览的内容。

我用过Block Lab Plugin，它有预览，如果Gutenberg不提供，我怎么能有预览？有什么技巧或技巧吗？

这是我的block.js:

(function(blocks, components, element) {
    var el = element.createElement;
    var registerBlockType = blocks.registerBlockType;
    var TextControl = components.TextControl;

    registerBlockType("blocks/test-block", {
      title: "Test Block",
      description: "A custom block.",
      icon: "businessman",
      category: "common",
      attributes: {
        headline: {
          type: "string"
        }
      },

      edit: function(props) {
        var headline = props.attributes.headline;
        var onHeadlineChange = function(val) {
          props.setAttributes({
            headline: val
          });
        };

        return el(TextControl, {
          value: headline,
          label: "Headline",
          onChange: onHeadlineChange
        });
      },
      save: function(props) {
        return el(
          "h3",
          {
            className: "headline"
          },
          props.attributes.headline
        );
      }
    });
  })(window.wp.blocks, window.wp.components, window.wp.element);

Answer 1

要显示带有预览的自定义块，只需将 example: () => {}, 添加到部分，方法与保存和编辑相同。 https://prnt.sc/rov8qo

//Custom Gutenberg block
(function(components, element) {
    //Default
    const { registerBlockType } = wp.blocks;

    //Block registration
    registerBlockType('', {
        title: '',
        description: '',
        icon: '',
        category: '',
        keywords: [''],
        attributes: {},

        //Example function
        example: () => {}, //Add this to get block preview works

        //Edit function
        edit: props => {},

        //Save function
        save: props => {}
    });
})(window.wp.components, window.wp.element);

更新 1

为了预览方块（在前面会怎样），需要给这个方块加上样式，和前面一样，跟踪props.isSelected这个方块在编辑。根据块是否被选中，显示不同的内容。

//Custom Gutenberg block 
(function(blocks, element, blockEditor) {
    //Default variable
    const { registerBlockType } = blocks;
    const { createElement: el } = element;
    const { RichText } = blockEditor;

    //Block registration
    registerBlockType("blocks/test-block", {
        title: 'Test Block',
        description: 'A custom block.',
        icon: 'businessman',
        category: 'common',
        attributes: {
            title: {
                type: 'string',
                source: 'html',
                selector: '.headline'
            }
        },

        //Example function
        example: () => {},

        //Edit function
        edit: props => {
            const attributes = props.attributes;

            return (
                el( 'div', { className: props.className },
                    //View input field
                    props.isSelected && el(RichText, {
                        tagName: 'h3',
                        placeholder: 'Headline...',
                        keepPlaceholderOnFocus: true,
                        value: attributes.title,
                        allowedFormats: [],
                        onChange: title => props.setAttributes({ title })
                    }),
                    //View frontend preview
                    !props.isSelected && el( 'div', { className: 'block__headline' },
                        el( 'div', { className: 'block__headline-title' }, attributes.title ? attributes.title : 'Entry headline...')
                    )
                )
            );
        },

        //Save function
        save: props => {
            return el( RichText.Content, {
                tagName: 'h3',
                className: 'headline',
                value: props.attributes.title
            });
        }
    });
})(window.wp.blocks, window.wp.element, window.wp.blockEditor);

Css 与您的前端相同。

.block__headline {
    padding: 20px 15px 30px;
    background: #fafafa;
    text-align: center;
}
.block__headline-title {
    font-family: 'Montserrat';
    font-size: 30px;
    font-weight: bold;
    position: relative;
}
.block__headline-title:after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #333;
    margin: 0 auto;
}

不处于编辑状态时块预览不可见

Block preview not visible when not in edit state

wordpress

wordpress-gutenberg