1

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

3
  • 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
    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
    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
    Nov 24, 2020 at 11:58

1 Answer 1

0

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 } = 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',
    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

}
7
  • What was the fix? I fixed the indenting, trailing spaces, and redid the code block formatting so it typehinted the language
    – Tom J Nowell
    Nov 24, 2020 at 12:05
  • Yes, in this way it works correctly without any errors.
    – Denis
    Nov 24, 2020 at 12:43
  • I mean what was the problem and how was it fixed?
    – Tom J Nowell
    Nov 24, 2020 at 13:09
  • I won't tell you, because as previously written I couldn't see the answer ... Surely it was a question of wrong saving ...
    – Denis
    Nov 24, 2020 at 14:02
  • That doesn't make sense, did you mean that you do not know why it works?
    – Tom J Nowell
    Nov 24, 2020 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.