Question

我在一个block.js文件中有多个块。一切都很好。但是今天我在同一个文件中添加了另一个块，但是不知道为什么最后一个块没有出现在插入对话框中。可能是什么原因？

编译没有错误。我尝试通过清除缓存。但是没有任何效果。昨天创建的块仍然可以正常工作。

我可以在一个文件中放入多少个块？

/**
 * BLOCK: hall-shortcode-formatting
 *
 * Registering a block with Gutenberg for placing different shortcodes.
 * gray-content, white-content, brushstroke-content, white-box, search-form
 */

import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, PlainText } = wp.editor;
const { Button, Form } = wp.component;

/**
 * Block name: gray-content-container
 * Places the block with an editable area.
 * Content is rendered in front-end inside <div class="gray-bg">
 */
registerBlockType( 'hallmark/gray-content-container', {
    title: __( 'Gray Content Container' ),
    icon: 'grid-view',
    category: 'formatting',
    keywords: [
        __( 'Hallmark gray content' ),
        __( 'Hallmark' ),
        __( 'Gray content container' ),
    ],

    attributes:{
        textContent: {
            type: 'string'
        }
    },

    edit: function( props ) {

        var textContent = props.attributes.textContent;

        function onChangeTextContent( content ) {
            props.setAttributes( { textContent: content } );
        }

        return (
            <div className={ props.className }>
                <label class="editor-content-section-label">Content for gray section</label>
                <RichText
                    className={props.className}
                    onChange={onChangeTextContent}
                    value={textContent}
                    placeholder="Add content"
                />
            </div>
        );
    },

    save: function( props ) {
        return null;
    },
} );

/* Gray content block ends */

/**
 * Block name: white-content-container
 * Places the block with an editable area.
 * Content is rendered in front-end inside <div class="white-bg">
 */
registerBlockType( 'hallmark/white-content-container', {
    title: __( 'White Content Container' ),
    icon: 'grid-view',
    category: 'formatting',
    keywords: [
        __( 'Hallmark white content' ),
        __( 'Hallmark' ),
        __( 'White content container' ),
    ],

    attributes:{
        textContent: {
            type: 'string'
        }
    },

    edit: function( props ) {

        var textContent = props.attributes.textContent;

        function onChangeTextContent( content ) {
            props.setAttributes( { textContent: content } );
        }

        return (
            <div className={ props.className }>
                <label class="editor-content-section-label">Content for white section</label>
                <RichText
                    className={props.className}
                    onChange={onChangeTextContent}
                    value={textContent}
                    placeholder="Add content"
                />
            </div>
        );
    },

    save: function( props ) {
        return null;
    },
} );

/* White content block ends */

/**
 * Block name: brush-stroke-content-container
 * Places the block with an editable area.
 * Content is rendered in front-end inside <div class="brush-stroke-bg">
 */
registerBlockType( 'hallmark/brush-stroke-content-container', {
    title: __( 'Brush Stroke Content Container' ),
    icon: 'grid-view',
    category: 'formatting',
    keywords: [
        __( 'Hallmark brush stroke content' ),
        __( 'Hallmark' ),
        __( 'Brush stroke content container' ),
    ],

    attributes:{
        textContent: {
            type: 'string'
        }
    },

    edit: function( props ) {

        var textContent = props.attributes.textContent;

        function onChangeTextContent( content ) {
            props.setAttributes( { textContent: content } );
        }

        return (
            <div className={ props.className }>
                <label class="editor-content-section-label">Content for brush-stroke section</label>
                <RichText
                    className={props.className}
                    onChange={onChangeTextContent}
                    value={textContent}
                    placeholder="Add content"
                />
            </div>
        );
    },

    save: function( props ) {
        return null;
    },
} );

/* Brush stroke content block ends */

/**
 * Block name: custom-link
 * Places the block with an editable area.
 * Content is rendered in front-end inside <div class="custom-link">
 */
registerBlockType( 'hallmark/custom-link', {
    title: __( 'Hallmark Custom Link' ),
    icon: 'admin-links',
    category: 'formatting',
    keywords: [
        __( 'Hallmark custom link' ),
        __( 'Hallmark' ),
        __( 'Custom link' ),
    ],

    attributes:{
        textContent: {
            type: 'string'
        }
    },

    edit: function( props ) {

        var textContent = props.attributes.textContent;

        function onChangeTextContent( content ) {
            props.setAttributes( { textContent: content } );
        }

        return (
            <div className={ props.className }>
                <label class="editor-content-section-label">Link URL</label>
                <RichText
                    className={props.className}
                    onChange={onChangeTextContent}
                    value={textContent}
                    placeholder="Add a URL"
                />
            </div>
        );
    },

    save: function( props ) {
        return null;
    },
} );

/* Brush custom-link content block ends */


/**
 * Block name: hall-subheading
 * Places the block with an editable area.
 * Content is rendered in front-end inside <div class="subheading">
 */
registerBlockType( 'hallmark/hall-subheading', {
    title: __( 'Hallmark Subheading' ),
    icon: 'welcome-write-blog',
    category: 'formatting',
    keywords: [
        __( 'Hallmark Subheading' ),
        __( 'Hallmark' ),
        __( 'Heading' ),
    ],

    attributes:{
        textContent: {
            type: 'string'
        }
    },

    edit: function( props ) {

        var textContent = props.attributes.textContent;

        function onChangeTextContent( content ) {
            props.setAttributes( { textContent: content } );
        }

        return (
            <div className={ props.className }>
                <label class="editor-content-section-label">Subheading</label>
                <RichText
                    className={props.className}
                    onChange={onChangeTextContent}
                    value={textContent}
                    placeholder="Add Subheading"
                />
            </div>
        );
    },

    save: function( props ) {
        return null;
    },
} );

/* Subheading content block ends */

/**
 * Block name: media-search-box
 * Places the block with an editable area.
 */
registerBlockType( 'hallmark/media-search-box', {
    title: __( 'Hallmark Media Search' ),
    icon: 'shield',
    category: 'common',
    keywords: [
        __( 'Hallmark media search' ),
        __( 'Hallmark' ),
        __( 'Media search' ),
    ],

    edit: function( props ) {

        return(
            <div className={props.className}>
                <h1>Hello</h1>
            </div>
        );
    },

    save: function( props ) {
        return(
            <div className={props.className}>
                <h1>Hello</h1>
            </div>
        );
    },
} );

/* Media search box block ends */

最后一个，即registerBlockType( 'hallmark/media-search-box' ... );没有出现。

更新

突然，我在文件中创建的所有自定义块都从“插入器”对话框中消失了！！这怎么可能？即使我使用create-guten-block CLI命令创建了一个完整的新块，尽管它可以正常编译，但在“插入器”对话框中也不可见。怎么了？

Answer 1

（代表问题作者发布）。

问题已解决！我犯了两个错误：

使用wp.component代替wp.components
当Form可能不是Gutenberg内置组件时，使用const { Form } = wp.components。因为我也尝试过const { Form } = wp.components，但是那也不起作用。

将多个Gutenberg块放入一个文件中-块数是否有限制？最后添加的一个不在插入对话框中

更新

1 个答案: