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 } = wpponents;

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' => [
            'haveRead'=>['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.

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 } = wpponents;

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' => [
            'haveRead'=>['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.

• block-editor

• Have you inspected the response in the browser dev network panel? If it isn't valid JSON that was returned, what was it? I see that in PHP your attribute has a very different name activateLasers – Tom J Nowell ♦ Commented Nov 23, 2020 at 17:42
• Hi, for the attribute, you are right I entered the wrong code here, I actually tried with the correct code, but the result doesn't change. For the browser response I tried from the console but honestly I can't understand what response it gives me ... – Denis Commented Nov 23, 2020 at 21:40
• If you can share it maybe someone will recognise the issue, in the past when I've encountered it, it's usually PHP warning text displayed before the JSON starts, or a shortcode that outputs its content instead of returning it – Tom J Nowell ♦ Commented Nov 24, 2020 at 11:58

1 Answer 1

I managed to get it to work, here is the correct code:

JS file

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

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

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',
    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 file

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

    ?>


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

    /* END HTML OUTPUT */

    $output = ob_get_contents(); // collect output
    ob_end_clean(); // Turn off ouput buffer

    return $output; // Print output

}