wp.data.subscribe을 올바르게 사용합니다.

wp.data.subscribe을 올바르게 사용합니다.

사용방법wp.data.subscribe특정 게시 형식(오디오, 비디오 및 갤러리)에 대한 블록을 표시/숨기기 위해 이 코드를 테스트하여 정상적으로 작동하지만 게시 내용을 작성하는 동안 및 다른 옵션을 선택하면 대상 블록이 깜박거립니다.

wp.data.subscribe(() => {

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


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


    if( postFormat == 'gallery' ) {

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

    }

});

wp.data.subscribe리덕스 주변의 포장지입니다.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/ #클라이언트 리스너

• https://developer.wordpress.org/block-editor/packages/packages-data/ #전문점

저는 이 문제에 직면했고 CSS 파일 내의 모든 메타 박스에 대해 디스플레이를 제공한 다른 솔루션으로 해결했습니다.다음과 같이:

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

그리고 자바스크립트 파일에 다음과 같이 적었습니다.

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

언급URL : https://stackoverflow.com/questions/52301472/using-wp-data-subscribe-properly