正确使用 wp.data.subscribe

Question

如何使用wp.data.subscribe显示/隐藏特定帖子格式（音频、视频和图库）的块，我测试了这段代码，它运行良好，但它在编写帖子内容和选择任何其他选项时触发，因此目标块闪烁写作时。

wp.data.subscribe(() => {

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


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


    if( postFormat == 'gallery' ) {

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

    }

});

Answer 1

wp.data.subscribe是 Redux 的包装器store.subscribe。

从 Redux 文档：

subscribe(listener)添加更改侦听器。它会在任何动作被分派时被调用，状态树的某些部分可能已经改变。然后您可以调用 getState() 来读取回调中的当前状态树。

我的解释wp.data.subscribe是：按设计，每次当前状态发生变化时都会调用。在编辑器中编辑帖子时，状态会更改可枚举次数，因此每次调用侦听器函数是有意义的。我敢打赌，如果状态的相关部分发生了变化，您应该检查自己，然后做您想做的事情。

所以我认为你可以像这样修改你的代码：

const getPostFormat = () => wp.data.select('core/editor').getEditedPostAttribute('format');

// set the initial postFormat
let postFormat = getPostFormat();

wp.data.subscribe(() => {

    // get the current postFormat
    const newPostFormat = getPostFormat();    

    // only do something if postFormat has changed.
    if( postFormat !== newPostFormat ) {

      // Do whatever you want after postFormat has changed
      if (newPostFormat == 'gallery') {
        $('#blockAudio, #blockVideo, #blockGallery').hide();
        $('#blockGallery').fadeIn();
      }

    }
    
    // update the postFormat variable.
    postFormat = newPostFormat;

});

资料来源：

• https://redux.js.org/api/store/#subscribelistener

• https://developer.wordpress.org/block-editor/packages/packages-data/#generic-stores

Answer 2

我遇到过这个问题，并通过我给出的另一个解决方案解决了它：display: none; 到 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