如何在块编辑器中加载块的附加脚本？

Question

我正在开发一个动态块，它使用ServerSideRender组件打印以下标记(例如)：

    A title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

要完全工作，这个块需要来自Accordion UI的jQuery组件：

accordion-jquery-start.js文件：

( function( $ ) {

    $( function() {
        
        $( '.accordion' ).accordion( {
            header: 'h3',
            heightStyle: 'content',
            animate: 100,
            collapsible: true,
            active: false
        } );

    } );

} )( jQuery );

我正在使用以下方法注册动态块：

register_block_type( 'my/accordion-block', array(
    'style'           => 'accordion-block-css',
    'editor_script'   => 'accordion-block-js',
    'render_callback' => 'render_block',
);

为了加载块编辑器中显示的附加脚本，我使用了enqueue_block_editor_assets操作：

function my_enqueue_block_editor_assets() {
    wp_enqueue_script( 'accordion-jquery-start', plugins_url( '/assets/js/accordion-jquery-start.js', __FILE__ ), array( 'jquery', 'jquery-ui-accordion', 'accordion-block-js' ), false, true );
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

几乎一切都正常:块被注册并打印正确的标记，所有所需的脚本和样式都被排队。但是，由于某些原因，来自accordion UI的jQuery函数在块编辑器中没有连接到块的.accordion类，因此手风琴效果不起作用。但是，在任何地方都没有控制台错误。accordion-jquery-start.js脚本似乎是在块本身完全加载之前运行的。

有什么想法吗？我应该以不同的方式加载accordion-jquery-start.js脚本吗？

Answer 1

但是，由于某些原因，来自accordion UI的jQuery函数在块编辑器中没有连接到块的.accordion类，因此手风琴效果不起作用。

ServerSideRender组件使用REST来获取动态块输出，因此出现了上述问题，因为当DOM准备就绪时(即jQuery.ready()的S回调运行时)，REST调用尚未解析，甚至可能尚未启动，因此手风琴div尚未附加到DOM。

我应该以不同的方式加载accordion-jquery-start.js脚本吗？

是的，ServerSideRender还没有(还)提供我们可以侦听的“on loaded”或“on完整/解决”事件，所以您需要手动检查您的div是否已经在DOM中，如果是的话，运行$( '.accordion' ).accordion()。

在现代的JS世界中，一个简单的方法就是使用MutationObserverAPI接口。

请查看MDN web文档(请参阅上面的链接)以获得更多关于突变观察者API的详细信息，但具体针对Gutenberg或块编辑器，以及动态块，下面是一个可以尝试学习的工作示例。:-)

因此，在我的index.js文件中，我得到了以下内容：( console.log()只是为了调试目的，所以不要忘记以后删除它们)

1. 加载WordPress依赖项:从‘@wordpress/块’导入{ registerBlockType }；从‘@wordpress/element’导入{ useRef、useLayoutEffect }；从‘@wordpress/块编辑器’导入{ useBlockProps }；从‘@wordpress/服务器端-呈现’导入ServerSideRender；
2. MutationObserver回调: //此函数检查是否已将手风琴div附加到DOM，并且//如果已附加，则在该div上初始化jQuery即插即用。因此，这个函数可以放在文件的顶部(在调用registerBlockType()之前)。函数initAccordion(突变){(让突变){如果( 'childList‘=== mutation.type && // Good )，所添加的节点具有手风琴div。jQuery( '. accordion '，mutation.addedNodes ).length >= 1){ //将div转换为jQuery手风琴。jQuery( mutation.addedNodes ).accordion( { header：'h3'，heightStyle：'content'，动画: 100，可折叠: true，active: false } )；console.log(手风琴初始化)；}}
3. 下面是我的块类型: registerBlockType( 'My /registerBlockType‘)，{ apiVersion: 2，标题：’my registerBlockType‘，类别：'widgets'，编辑(){ //为块容器创建一个引用。当呈现块时，const = useRef( null )；//初始化突变观察者。useLayoutEffect( () ) => { let观察者；if ( ref.current ){观察者=新的MutationObserver( initAccordion )；//只观察块容器中DOM的变化。observer.observe( ref.current，{ childList: true，子树: true，} )；} //清理函数，它停止突变观察者。返回() => { if (观察者){ observer.disconnect()；console.log(‘观察者断开连接’)；} }；}，[]；//将引用传递给块容器。//注：{ ref }是{ ref: ref } const blockProps = useBlockProps( { ref })的缩写；返回( )；} )；

Answer 2

有点晚了，但是mabe会帮助某人的:)

我用一个简单的setInterval()修复了这个问题，它在页面上立即清除元素：

(function($){
    var blockSliderInterval = setInterval(function(){
        //console.log('blockSliderInterval');
        initBlock()
    }, 200);
        
    function initBlock(){
        if( $('.image-slider__wrapper').length ){
            $('.image-slider__wrapper').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true,
                dots: true,
                draggable: true,
                swipe: true,
                arrows: false,
                autoplay: true,
                autoplaySpeed: 4000,
            });

            //console.log('clearInterval blockSliderInterval');
            clearInterval(blockSliderInterval);
        }
    }

}(window.jQuery));

哦，而且我的块加载js时只添加了块，所以如果块根本没有添加，就不会有无限循环:)