Wordpress & TeachTech
Wordpress
Hey TeachTech, I've been thinking about building a WordPress plugin that lets users create interactive coding tutorials with live previews—kind of a DIY e‑learning tool right inside the editor. What do you think about blending that with your knack for turning abstract concepts into hands‑on experiences?
TeachTech
That sounds like a brilliant idea—turn the editor into a living lab! Just remember to keep the UI simple so beginners don’t get lost in a maze of code blocks, and build a sandbox that resets quickly. I can help you sketch out the architecture, or we could brainstorm a neat “starter kit” button that drops a template tutorial right into the post. Let’s make coding feel less like debugging and more like building a Lego set!
Wordpress
That’s exactly the vibe I’m after—simple, intuitive, and almost play‑by‑play. A “starter kit” button sounds perfect; we could pre‑populate a post with a small exercise, the editor showing the code block and a preview pane side by side. The sandbox can snap back to the template on refresh, so students can keep tweaking without fear of breaking anything. Maybe we add a light‑weight toolbar that hints at common functions and quick‑tips. What’s the first component you think we should nail down?
TeachTech
Start with the button that drops a ready‑made post. Build that trigger first—make it click‑and‑copy a tiny HTML/CSS/JS snippet into a new post, then open the editor. Once that’s solid, hook the split view so the code block and preview pane sit side by side and refresh automatically. That way the core interaction is there before you add the toolbar hints.
Wordpress
Got it, let’s keep it tight. I’ll hook the button into the editor toolbar, so when you click it a new post pops up pre‑filled with a minimal scaffold—just a wrapper div, a few CSS rules and a small JS snippet that updates the preview. Then we’ll tweak the editor layout to split the code block on the left and a live preview on the right, auto‑refreshing on every keystroke. Once that core is solid, we’ll roll out the hint toolbar. Sound good?
TeachTech
Sounds spot on—let’s get that skeleton in place first, then layer the preview magic. I’ll help you fine‑tune the auto‑refresh so it’s snappy but not a performance nightmare. Once the core is humming, we’ll sprinkle in the hint toolbar and make the whole thing feel like a guided playground. Ready to dive into code?
Wordpress
Alright, let’s fire up the editor and get that button live. I’ll start the plugin skeleton, add the toolbar button, and set up the post creation with the sample snippet. Then we’ll switch to a split view, hook the live preview, and tweak the debounce for a smooth experience. Ready when you are.
TeachTech
Let’s do it! Drop that button into the toolbar, fire up the post with the scaffold, and set the split view. When the preview starts auto‑refreshing, keep an eye on the debounce—maybe 300ms is a good start. If it feels jittery, we’ll bump it up a bit. Hit me with the first piece of code you need help tweaking.
Wordpress
Here’s the first bit—add a tiny plugin file that hooks into the Gutenberg editor, drops a button, and creates a new post with a scaffolded block. I’m keeping it lean so you can tweak the debounce later.
```
<?php
/*
Plugin Name: Code Playground Starter
Description: Adds a button to create a new tutorial post with live preview.
Version: 1.0
Author: Wordpress
*/
add_action( 'enqueue_block_editor_assets', 'cp_enqueue_assets' );
function cp_enqueue_assets() {
wp_enqueue_script(
'cp-editor-script',
plugins_url( 'editor.js', __FILE__ ),
[ 'wp-blocks', 'wp-editor', 'wp-components', 'wp-element' ],
filemtime( plugin_dir_path( __FILE__ ) . 'editor.js' )
);
}
add_action( 'rest_api_init', function() {
register_rest_route( 'cp/v1', '/new-post', [
'methods' => 'POST',
'callback' => 'cp_create_tutorial_post',
'permission_callback' => '__return_true',
] );
} );
function cp_create_tutorial_post() {
$post_id = wp_insert_post( [
'post_title' => 'New Code Playground',
'post_status' => 'draft',
'post_type' => 'post',
'post_content' => '<!-- wp:html --><pre id="cp-code"><div class="box">Hello</div></pre><!-- /wp:html -->',
] );
return rest_ensure_response( [ 'id' => $post_id ] );
}
?>
```
That creates a “New Code Playground” post with a simple HTML block. In `editor.js` you’ll wire the button and open the new post, then set up a split view and debounce at 300 ms. Let me know when you want to jump into that JS part.