Предварительный просмотр блока не отображается, когда он не находится в состоянии редактирования

Question

Я начал использовать пользовательские блоки Gutenberg и успешно создал пользовательские блоки!

Но у меня есть проблема, мне нужно увидеть предварительный просмотр блока, когда я не редактирую его на стороне администратора Я не думаю, что Гутенберг предоставляет его, потому что я искал документацию, искал inte rnet, но ничего не нашел относительно предварительного просмотра блока, когда он не находится в состоянии редактирования.

Я использовал плагин Block Lab и он у меня есть предварительный просмотр, если Гутенберг не предоставляет его, как я могу получить предварительный просмотр? Любой трюк или хак?

Это мой 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;
}