0

我在一个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-blockCLI 命令创建了一个完整的新块，虽然它编译得很好，但在插入器对话框中是不可见的。出了什么问题？

4

1 回答 1

0

（代表问题作者发布）。

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

  1. 正在使用wp.component而不是wp.components
  2. 正在使用const { Form } = wp.components，当 Form 可能不是 Gutenberg 内置组件时。因为我也试过const { Form } = wp.components，但也没有用。
于 2019-02-08T23:41:52.220 回答