古登堡块中的WordPress Ajax类别过滤器

Question

我正在将动态的帖子网格构建到Gutenberg块中，前端用户可以在其中选择类别，而后网格动态地切换到所选类别的帖子，而无需重新加载页面。

那里有很多postgrid块，但是我还没有看到前端带有ajax过滤器的块。所以我决定尝试建立一个。

这是块设置，基于Misha的教程： https://rudrastyh.com/wordpress/ajax-post-filters.html

index.php（用于服务器端呈现）：

<?php

function register_block() {
    register_block_type(
        'blocks/filter-posts',
        array(
            'editor_script' => 'blocks-js',
            'attributes'      => array(
                'categories'      => array(
                    'type' => 'string',
                ),
              ),
            'render_callback' => 'filter_function'
        )
    );
}

add_action('wp_ajax_filter', 'filter_function');
add_action('wp_ajax_nopriv_filter', 'filter_function');

function filter_function($attributes){

    if( isset( $_POST['categoryfilter'] ) ) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'term_id',
                'terms' => $_POST['categoryfilter']
            )
        );
    }
        $posts_markup = '<div id="response">';//output ajax data here

    if( $terms = get_terms( array('taxonomy' => 'category') ) ) {
        $posts_markup .= '<form action="'.site_url().'/wp-admin/admin-ajax.php" method="POST" id="filter">';
        $posts_markup .= '<select name="categoryfilter"><option value="">Select category...</option>';

        foreach ( $terms as $term ) :
            $posts_markup .= '<option value="'.$term->term_id.'">'.$term->name.'</option>';
        endforeach;

        $posts_markup .= '</select><button>Apply filter</button><input type="hidden" name="action" value="ajax_filter"></form>';

    }

    $query = new WP_Query( $args );

    if( $query->have_posts() ) {

        while( $query->have_posts() ) {
            $query->the_post();
            $posts_markup .= '<h2>' . $query->post->post_title . '</h2>';
        }

        $posts_markup .= '</div>';//<div id="response">

        wp_reset_postdata();

        return $posts_markup;

    } else {
        $posts_markup .= '<h2>No posts to show</h2>';
        $posts_markup .= '</div>';//<div id="response">

        return $posts_markup;
    }

}//end filter_function

index.js：

registerBlockType( 'blocks/filter-posts', {
... etc etc...
});

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('Apply filter'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});

ajax调用返回0。在php文件中回显post_markup时，我只能得到一些结果。但这与gutenberg块的设置方式冲突。我不知道如何使它工作。 我希望你们中一些经验丰富的Wordpress程序员可以提供帮助。