: Add Option to Toggle To-Do List Block Visibility on Frontend

Hi everyone,

I’m currently using custom code to make the To-Do List block visible on the frontend of my WordPress site, so visitors can see my task lists as they appear in the backend. It works for displaying the list in a static view, with styling to show checked items with a green check icon and unchecked items with an empty square.

I would like to ask the developers if there are plans to add an option that allows users to toggle the visibility of the To-Do List block directly within the article editor. This way, when creating a post and adding a To-Do List, users could choose whether to render it visible or hidden on the frontend.

For now, I’m managing with the following code, but I’m not a developer. Any guidance on implementing the visibility toggle would be greatly appreciated!

/**
 * Forces the To-Do List block to render on the frontend.
 *
 * @param string $block_content The block content about to be displayed.
 * @param array  $block         The block details, including name and attributes.
 * @return string Rendered block content as a string.
 */
function render_todo_list_block_on_frontend( $block_content, $block ) {
    // Check if the block is a To-Do List block and contains inner blocks.
    if ( 'tabor/todo-list' !== $block['blockName'] || empty( $block['innerBlocks'] ) ) {
        return $block_content; // Return default block content if conditions aren't met.
    }

    ob_start();

    // Start the list for To-Do items.
    echo '<ul class="Tasklist">';
    foreach ( $block['innerBlocks'] as $list_item ) {
        // Render each To-Do item as a list element with an optional checked attribute.
        printf(
            '<li class="Tasklist-Item" %s>%s</li>',
            isset( $list_item['attrs']['checked'] ) && $list_item['attrs']['checked'] ? 'data-checked="checked"' : '',
            wp_kses_post( $list_item['attrs']['content'] ?? '' ) // Securely display item content.
        );
    }
    echo '</ul>';

    return ob_get_clean(); // Return the final HTML structure of the To-Do list.
}
add_filter( 'render_block', 'render_todo_list_block_on_frontend', 10, 2 );

/* Styling checked items */
.Tasklist-Item[data-checked="checked"] {
    text-decoration: line-through;
    opacity: 0.7;
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
}

.Tasklist-Item[data-checked="checked"]::before {
    content: "?";
    position: absolute;
    left: 0;
    color: green;
    font-weight: bold;
}

/* Styling unchecked items */
.Tasklist-Item:not([data-checked="checked"]) {
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
}

.Tasklist-Item:not([data-checked="checked"])::before {
    content: "?";
    position: absolute;
    left: 0;
    color: #ccc;
    font-size: 1em;
}

I’m going to improve the css as soon I’ll have time.