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
}