Каков наилучший способ проверить блоки WordPress Gutenberg на наличие обязательного поля и показать уведомление, когда оно пустое? - PullRequest
Новая
       39

Каков наилучший способ проверить блоки WordPress Gutenberg на наличие обязательного поля и показать уведомление, когда оно пустое?

0 голосов
/ 08 апреля 2020

Я знаю, что документации для этого недостаточно, и обязательная проверка полей в Гутенберге - это не то, к чему мы привыкли в редакторе classi c.

Однако Гутенберг действительно предоставляет способы блокировки и разблокировать сохранение записи (которая отключает или включает кнопку «Опубликовать / обновить») и показывать или удалять уведомления.

И я могу oop просмотреть блоки на странице, чтобы проверить, пусты ли они.

(Существует также отдельное обсуждение того, что представляет собой «пустой» блок в Гутенберге, поэтому для наших целей в этом примере мы говорим о блоке абзаца без содержимого: '<p></p>' или '' в зависимости от на каком атрибуте используется.)

У меня возникли проблемы с поиском разумного способа оценки блоков на странице без постоянной стрельбы. В идеале, мы должны либо проверять, когда нажимается кнопка сохранения / обновления, а также перед сохранением сообщения, либо даже когда мы оставляем (не выбираем) блок с обязательным полем. Но мое ограниченное понимание состоит в том, что мы не хотим использовать jQuery, javascript или DOM для изменений, таких как нажатия / изменения кнопок сохранения / обновления или поля ввода onChange / onBlur.

Возможно вот где я ошибаюсь?

Ниже приведен пример, который «работает», поскольку он запускается снова и снова и успешно оценивает пустые блоки абзаца, но раздел с блокировкой сохранения и уведомления приводит к «максимальному вызову». превышен размер стека "ошибки. Использование «подписки» запускает много.

В сценарии реального мира это, скорее всего, будет пользовательский блок или блок ACF, с более ограниченным использованием и, возможно, даже только одно вхождение этого поля на вместо данного примера, где у вас может быть 12 абзацев.

Есть ли у кого-нибудь полезные советы о том, как разумно сделать это более чистым и более взвешенным способом? 

const { subscribe } = wp.data;

let unsubscribe = subscribe( () => {

    let emptyBlocks = [];
    let emptyLock = false;

    let ourBlocks = wp.data.select( 'core/block-editor' ).getBlocks();   

    let isEditedPostDirty = wp.data.select( 'core/editor' ).isEditedPostDirty();
    let isSavingPost = wp.data.select( 'core/editor' ).isSavingPost();
    let isAutosavingPost = wp.data.select( 'core/editor' ).isAutosavingPost();
    let isTyping = wp.data.select( 'core/block-editor' ).isTyping();
    let hasSelected = wp.data.select( 'core/block-editor' ).hasSelectedBlock();

    let emptyNotice = wp.data.select( 'core/notices' ).getNotices( 'emptyBlocksNotice' );

    if ( isEditedPostDirty && !isSavingPost && !isAutosavingPost && !isTyping && !hasSelected ) {

        Object.keys( ourBlocks ).forEach( function (item) {
            if ( ourBlocks[item].name == 'core/paragraph' && ourBlocks[item].attributes.content == '' ) {
                if ( emptyBlocks.indexOf( ourBlocks[item].clientId === -1 ) ) {
                    emptyBlocks.push( ourBlocks[item].clientId );
                }
                emptyLock = true;
            }
        });

        if ( emptyLock ) {
            wp.data.dispatch( 'core/editor' ).lockPostSaving( 'emptyBlocksLock' );

            if ( emptyNotice.length < 1 ) {
                wp.data.dispatch( 'core/notices' ).createErrorNotice( 'You have empty paragraph blocks.', { id: 'emptyBlocksNotice', isDismissible: false } ) ;
            }
        } else if ( ! emptyLock ) {
            wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'emptyBlocksLock' );

            if ( emptyNotice.length > 0 ) {
                wp.data.dispatch( 'core/notices' ).removeNotice( 'emptyBlocksNotice' );
            }
        }

    }

});
...