The README doesn’t do a great job of explaining this, but this plugin intends for these TODO lists to be backend-only: out of the box, they only display within the editor.
It’s a block, though, and blocks can be filtered. The plugin did what I needed on the backend, but like you I wanted to make it display on the frontend as well. I did it by adding a filter on the render_block hook to generate markup which my theme renders as a proper checklist. You may need to choose different markup within the foreach depending on your theme’s styles, but maybe it is useful:
/**
* Force todo-list-block blocks to render on the frontend.
*
* @param string $block_content The block content about to be appended.
* @param array $block The full block, including name and attributes.
* @return string Rendered block string.
*/
function render_todo_list_block_on_frontend( string $block_content, array $block ) : string {
if ( $block['blockName'] !== 'tabor/todo-list' || empty( $block['innerBlocks'] ) ) {
return $block_content;
}
ob_start();
echo '<ul class="Tasklist">';
foreach ( $block['innerBlocks'] as $list_item ) {
printf(
'<li class="Tasklist-Item" %s>%s</li>',
// phpcs:ignore -- The output is a static string.
( $list_item['attrs']['checked'] ?? false ) ? 'data-checked=""' : '',
wp_kses_post( $list_item['attrs']['content'] )
);
}
echo '</ul>';
return (string) ob_get_clean();
}
add_action( 'render_block', __NAMESPACE__ . '\\render_todo_list_block_on_frontend', 10, 2 )
