Использование wp.data.subscribe правильно - PullRequest
Новая
       3

Использование wp.data.subscribe правильно

0 голосов
/ 12 сентября 2018

Как использовать wp.data.subscribe, чтобы показать / скрыть блок для определенного формата записи (аудио, видео и галерея), я тестирую этот код, и он работает хорошо, НО он срабатывает при записи содержимого записи и при выборе любого другого опция, так что целевой блок мерцает во время записи. 

wp.data.subscribe(() => {

    var postFormat = wp.data.select('core/editor').getEditedPostAttribute('format');


    $('#blockAudio, #blockVideo, #blockGallery').hide();


    if( postFormat == 'gallery' ) {

      $('#blockGallery').fadeIn();

    }

});

1 Ответ

0 голосов
/ 12 ноября 2018

Я столкнулся с этой проблемой и решил ее другим решением, которое я дал: нет;на все мои мета-блоки в файле CSS.как это: 

#fw-options-box-link,
#fw-options-box-video,
#fw-options-box-gallery,
#fw-options-box-audio,
#fw-options-box-quote {
    display: none;
}

тогда в моем файле JavaScript я написал следующее: 

jQuery(document).ready(function ($) {
    /*''''''''''''''''''''''''''''''''''''' /   Standard Optns  */
    "use strict";
    var standerOptions = jQuery('#no_options'); //metabox ID
    var standerTrigger = jQuery('#post-format-0'); //post format ID
    /*''''''''''''''''''''''''''''''''''''' /   Quote Optns  */
    var quoteOptions = $('#fw-options-box-quote');
    var quoteTrigger = jQuery('#post-format-quote');
    /*''''''''''''''''''''''''''''''''''''' /   Video Optns  */
    var videoOptions = jQuery('#fw-options-box-video');
    var videoTrigger = jQuery('#post-format-video');
    /*''''''''''''''''''''''''''''''''''''' /   Gallery Optns  */
    var galleryOptions = jQuery('#fw-options-box-gallery');
    var galleryTrigger = jQuery('#post-format-gallery');
    /*''''''''''''''''''''''''''''''''''''' /   Link Optns  */
    var linkOptions = $('#fw-options-box-link');
    var linkTrigger = jQuery('#post-format-link');
    /*''''''''''''''''''''''''''''''''''''' /   Audio Optns  */
    var audioOptions = jQuery('#fw-options-box-audio');
    var audioTrigger = jQuery('#post-format-audio');
    /*''''''''''''''''''''''''''''''''''''' /   Image Optns  */
    var imageOptions = jQuery('#no_options');
    var imageTrigger = jQuery('#post-format-image');
    /*''''''''''''''''''''''''''''''''''''' /   Core  */
    $(document).on('change', 'select[id*="post-format"],#post-formats-select input', function () {
        // alert(this.value);
        linkOptions.show();
        if (this.value == 'video') {
            videoOptions.css('display', 'block');
            reyHideAll(videoOptions);
        } else if (this.value == '0') {
            standerOptions.css('display', 'block');
            reyHideAll(standerOptions);
        } else if (this.value == 'quote') {
            quoteOptions.css('display', 'block');
            reyHideAll(quoteOptions);
        } else if (this.value == 'gallery') {
            galleryOptions.css('display', 'block');
            reyHideAll(galleryOptions);
        } else if (this.value == 'link') {
            linkOptions.css('display', 'block');
            reyHideAll(linkOptions);
        } else if (this.value == 'image') {
            imageOptions.css('display', 'block');
            reyHideAll(imageOptions);
        } else if (this.value == 'audio') {
            audioOptions.css('display', 'block');
            reyHideAll(audioOptions);
        } else {
            standerOptions.css('display', 'none');
            quoteOptions.css('display', 'none');
            linkOptions.css('display', 'none');
            imageOptions.css('display', 'none');
            videoOptions.css('display', 'none');
            audioOptions.css('display', 'none');
            galleryOptions.css('display', 'none');
        }
    });

    if (standerTrigger.is(':checked'))
        standerOptions.css('display', 'block');

    if (quoteTrigger.is(':checked'))
        quoteOptions.css('display', 'block');

    if (videoTrigger.is(':checked'))
        videoOptions.css('display', 'block');

    if (galleryTrigger.is(':checked'))
        galleryOptions.css('display', 'block');

    if (imageTrigger.is(':checked'))
        imageOptions.css('display', 'block');

    if (linkTrigger.is(':checked'))
        linkOptions.css('display', 'block');

    if (audioTrigger.is(':checked'))
        audioOptions.css('display', 'block');

    function reyHideAll(notThisOne) {
        videoOptions.css('display', 'none');
        standerOptions.css('display', 'none');
        quoteOptions.css('display', 'none');
        galleryOptions.css('display', 'none');
        imageOptions.css('display', 'none');
        audioOptions.css('display', 'none');
        linkOptions.css('display', 'none');
        notThisOne.css('display', 'block');
    }
});

you can convert this code to be suitable for you
...