# Implementation Plan: Replicating Gutenberg Blocks in EditorJS

## Goal Description
The objective is to replicate the extensive list of blocks found in the reference WordPress site (techdaily.kesug.com) within our custom EditorJS instance ([post.php](file:///c:/xampp/htdocs/bm/admin/wp/post.php) and [sidebar.php](file:///c:/xampp/htdocs/bm/admin/wp/sidebar.php)). This includes the following categories from the provided screenshots:
- **Plover Blocks**: Icon, Particles, Code Snippet, Reading Time, Table of Contents, Patterns, Counter.
- **Design**: Buttons, Columns, Group, Row, Stack, Grid, More, Page Break, Separator, Spacer, Blog Designer.
- **Embeds**: Embed, Twitter Embed, YouTube Embed, WordPress Embed, SoundCloud Embed, Spotify Embed, Vimeo Embed, etc.
- **Theme**: Navigation, Site Logo, Site Title, Query Loop, Avatar, Title, Excerpt, Featured Image, Author, etc.

Since EditorJS requires custom javascript classes for each block, and building 70+ fully functional unique React-like blocks is out of scope for a simple JS integration, we will implement a smart wrapper approach:
1. **Sidebar HTML UI**: Generate all the buttons with SVG icons corresponding to the screenshots in [sidebar.php](file:///c:/xampp/htdocs/bm/admin/wp/sidebar.php).
2. **Generic Embed Tool**: For all Embed blocks, we will use a unified `SimpleEmbed` class that accepts a URL and embeds it.
3. **Generic Component Tool**: For complex Theme/Design/Plover blocks, we will use a unified `GenericBlockTool` which acts as a configurable placeholder inside EditorJS. This will satisfy the requirement of blocks being "Total Working" (they can be added, configured, and saved).

## User Review Required
> [!IMPORTANT]
> Because there are over 70 new blocks, I will implement a "Generic Block" strategy for complex items like "Query Loop" or "Site Logo" so that they can be visually inserted and their data saved. Is this acceptable, or do you require specific custom HTML rendering for certain blocks?

## Proposed Changes

### 1. Update Sidebar UI
#### [MODIFY] sidebar.php
- Convert the sidebar to include the new categories: `Plover Blocks`, `Design`, `Theme`, `Embeds`.
- Add over 70 individual `<button>` elements with `data-type` identifiers and respective icons.

### 2. Update EditorJS Logic
#### [MODIFY] post.php
- **New JS Classes**: Add a `GenericBlockTool` and a `SimpleEmbedTool`.
- **Register Tools**: Map the 70+ new `data-type` properties in the `typeMap` dictionary to these generic classes utilizing the EditorJS `config` object to pass the block Title (e.g. `config: { title: 'Site Logo' }`).

## Verification Plan
### Automated Tests
- Run `php -l admin/wp/sidebar.php` and `php -l admin/wp/post.php` to ensure PHP syntax validity.
### Manual Verification
- Open `http://localhost/bm/admin/wp/post.php` in the browser.
- Open the Inserter sidebar.
- Verify all new categories (Plover, Design, Theme, Embeds) and buttons are present.
- Click a block (e.g. "YouTube Embed" or "Site Logo") and ensure it correctly inserts a functional block into the EditorJS canvas.
