Блок Гутенберга не проходит проверку - PullRequest
Новая
       5

Блок Гутенберга не проходит проверку

0 голосов
/ 12 февраля 2020

Я пытаюсь создать пользовательский блок WordPress Gutenberg, который позволяет мне выбирать любое изображение и текст.

Я могу создать блок, используя этот код, и, тем не менее, могу видеть контент на веб-интерфейсе сайта. блок падает, если я просматриваю блок для его редактирования.

Консоль выдает следующую ошибку: -

Проверка блока: проверка блока не удалась для cgb/block-imagecta (Object {name: "cgb / block-imagecta ", значок: {…}, атрибуты: {…}, ключевые слова: (3) […], save: save (), заголовок:« imagecta - блок CGB », категория:« общие », редактировать: редактировать ()}).

Содержимое, сгенерированное функцией save: 

<div class="wp-block-cgb-block-imagecta"><div class="imageCtaBg"><img class="bg" alt="sergserge"/><p></p></div></div>

Содержимое, полученное из тела сообщения: 

<div class="wp-block-cgb-block-imagecta"><div class="imageCtaBg"><img class="bg" alt="sergserge"/><p>dxfbxdfbxdfbfb</p></div></div>

Связано ли это с атрибутами в все? 

/**
 * BLOCK: imagecta
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

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

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const {FormFileUpload} = wp.components;
const {RichText, MediaUpload} = wp.blockEditor;


registerBlockType('cgb/block-imagecta', {

    title: __('imagecta - CGB Block'),
    icon: 'shield',
    category: 'common',
    keywords: [
        __('imagecta — CGB Block'),
        __('CGB Example'),
        __('create-guten-block'),
    ],
    attributes: {
        content: {
            type: 'html',
            selector: '.captionText',
        },
        logo: {
            type: 'string',
            default: null,
        },
    },

    edit: (props) => {

        const {attributes: {content}, setAttributes} = props;


        function onImageSelect(imageObject) {
            setAttributes({
                logo: imageObject.sizes.full.url
            });
        }


        const onChangeContent = (newContent) => {
            setAttributes({content: newContent});
        };

        // Creates a <p class='wp-block-cgb-block-imagecta'></p>.
        return (
            <div className={props.className}>

                <MediaUpload
                    onSelect={onImageSelect}
                    type="image"
                    value={logo} // make sure you destructured backgroundImage from props.attributes!
                    render={({open}) => (
                        <button onClick={open}>
                            Upload Image!
                        </button>
                    )}
                />


                <div className='imageCtaBg'>

                <img src={logo} class="bg" alt={'sergserge'}/>


                    <RichText
                        tagName={'p'}
                        className='captionText'
                        onChange={onChangeContent}
                        value={content}
                        placeholder='Enter text...'
                    />

                </div>

            </div>
        );
    },

    save: (props) => {

        const {attributes: {content}, setAttributes} = props;

        return (
            <div className={props.className}>

                <div className={'imageCtaBg'}>
                    <img src={props.attributes.logo} className="bg" alt={'sergserge'}/>
                    <RichText.Content tagName={"p"} value={props.attributes.content}/>
                </div>

            </div>
        );
    },
});

1 Ответ

0 голосов
/ 12 февраля 2020

Проблема заключалась в атрибуте содержимого.

Вместо того, чтобы придать richtext класс 'captionText', я переместил его в div-упаковщик и изменил атрибут содержимого на следующий: - 

        content: {
            type: 'string',
            source:'html',
            selector: '.captionText',
        },

Это находит текст внутри этого div и позволяет мне обновить блок без проблем с проверкой.

...