Gutenberg: dynamic block ToggleControl error in saving

Question

I am creating a dynamic block, using Toggle switch or a
Checkbox in the front-end is displayed correctly when deactivated / activated, but in the back-end I get this error when saving:"Updating failed. The response is not a valid JSON response."

This is my 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(
        
        <div className={props.className}>
            
            <InspectorControls>

                <PanelBody
                // Generalk Settings
                    title={__('General Settings', 'df-portfolio')}
                    initialOpen={true}
                >
                    <ToggleControl
                className="js-book-details-read"
                label="Read"
                checked={haveRead}
                help={haveRead ? "This book has been read." : "Currently unread."}
                onChange={checked => setAttributes({ haveRead: checked })}
              />
                </PanelBody>

            </InspectorControls>
        
        
      </div>
    );
    

}

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, 

});

This is the 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' => [
            'activateLasers'=>['type'=> 'boolean','default'=> false],
                
        ]
    ]);

});


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

?>



    <?php if ($book_details_have_read) : ?>
        <p><em>This book has been read.</em></p>
      <?php endif; 
    


}

Any help would be appreciated, thanks.

0
Denis 2 months 0 Answers 8 views 0

Leave an answer