古腾堡:保存中的动态块ToggleControl错误

Question

我正在创建一个动态块，使用Toggle开关或前端的复选框在停用/激活时正确显示，但在后端，当saving：<#>“更新失败”时，我会得到此错误。响应不是有效的JSON响应。

这是我的js：

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

const { InspectorControls} = wp.blockEditor;
const { PanelBody,ToggleControl } = wp.components;

const BlockEdit = (props) => {
    const { attributes, setAttributes } = props;
    const { haveRead } = attributes

    return(
        
        
            
            

                
                     setAttributes({ haveRead: checked })}
              />
                

            
        
        
      
    );
    

}

registerBlockType('df/portfolioblock', {
    title: __('DF Portfolio', 'df-portfolio'),
    icon: 'portfolio',
    category: 'df-block',
    attributes: {
        haveRead: {
            type: 'boolean',
            selector: 'js-book-details-read'
          },
       
    },
    save: () => { return null; },
    edit:BlockEdit, 

});

这是php：

add_action('init', function() {
    wp_register_script('df-portfolio-block-js',  plugins_url( 'assets/js/block-df-portfolio.js', __FILE__ ),
    ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data']
);
   
    register_block_type('df/portfolioblock', [
        'editor_script' => 'df-portfolio-block-js',
        'editor_style' => 'df-portfolio-block-style',
        'render_callback' => 'df_gutenberg_portfolio_render',
        'attributes' => [
            'haveRead'=>['type'=> 'boolean','default'=> false],
                
        ]
    ]);

});


function df_gutenberg_portfolio_render($attributes, $content) {
    
    
    $book_details_have_read = $attributes['haveRead'];

?>



    
        This book has been read.

任何帮助都将不胜感激，谢谢。

Answer 1

我设法让它正常工作，下面是正确的代码：

JS文件

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

const { InspectorControls} = wp.blockEditor;
const { PanelBody,ToggleControl } = wp.components;

const BlockEdit = (props) => {
    const { attributes, setAttributes } = props;
    const { haveRead } = attributes

    return(

        

            

                
                         setAttributes({ haveRead: checked })}
                />
                

            


        
    );


}

registerBlockType('df/portfolioblock', {
    title: __('DF Portfolio', 'df-portfolio'),
    icon: 'portfolio',
    category: 'df-block',
    supports: {
        // Turn off ability to edit HTML of block content
        html: false,
        // Turn off reusable block feature
        reusable: false,
        // Add alignwide and alignfull options
        align: false
        },
    attributes: {
        haveRead: {
            type: 'boolean',
            selector: 'js-book-details-read'
            },

    },
    save: props => {
        return null
        },
    edit:BlockEdit,

});

PHP文件

add_action('init', function() {
    wp_register_script('df-portfolio-block-js',  plugins_url( 'assets/js/block-df-portfolio.js', __FILE__ ),
        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data','wp-i18n']
    );

    register_block_type('df/portfolioblock', [
        'editor_script' => 'df-portfolio-block-js',
        'editor_style' => 'df-portfolio-block-style',
        'render_callback' => 'df_gutenberg_portfolio_render',
    ]);

});


function df_gutenberg_portfolio_render($attributes, $content) {

    $book_details_have_read = $attributes['haveRead'];
    ob_start(); // Turn on output buffering

    ?>


        
            This book has been read.