Помещение нескольких блоков Гутенберга в один файл - есть ли ограничение количества блоков?Последний добавленный не появляется в диалоге вставки - PullRequest
Новая
       8

Помещение нескольких блоков Гутенберга в один файл - есть ли ограничение количества блоков?Последний добавленный не появляется в диалоге вставки

0 голосов
/ 07 февраля 2019

У меня есть несколько блоков в одном 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' ... ); не подходит.

Обновление

Внезапно все мои пользовательские блоки, которые я создал внутри файла, исчезли из диалога Inserter !!Как это может быть возможным?Даже если я создаю полностью новый блок с помощью команды create-guten-block CLI, хотя она прекрасно компилируется, она не отображается в диалоговом окне Inserter.Что пошло не так?

1 Ответ

0 голосов
/ 09 февраля 2019

(Опубликовано от имени автора вопроса) .

Проблема решена!Я делал две ошибки:

  1. Использовал wp.component вместо wp.components
  2. Использовал const { Form } = wp.components, когда Форма, вероятно, не является встроенным компонентом Гутенберга.Потому что я тоже попробовал const { Form } = wp.components, но это тоже не сработало.
...