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.

Really cool plugin, thanks ??

I just wonder about how to create a todo-list with prefilled items, that I would hook below each post-title – other than deploying it as a block-pattern.

Any idea or advise how to achieve this?

Thank you in advance and kind regards

Sascha

After I add a to-do list item and hit enter, I expected to be able to start typing the next item, and a double-enter to exist the block. The new item is added but I have to use the mouse to click into the item to start typing. This starts with the first list item. It would be great if this acted just like the core list block. Thanks! This and Markdown Comment Block are useful for keeping writer notes in post.

List just showing on editor, but not on website. It’s not outputing any HTML.

You’ll need the password to access the page: PlannerMagic2021

I’ve added a checklist but it doesn’t appear on the preview OR publish.