The etchKit plugin follows a minimal file structure. There is no build step, no node_modules, no compiled assets. Everything runs as plain PHP, CSS, and vanilla JavaScript.

etchkit/
├── etchkit.php
├── README.md
├── includes/
│   └── class-etchkit.php
├── assets/
│   ├── css/
│   │   └── panel.css
│   ├── js/
│   │   └── panel.js
│   └── img/
│       ├── *.svg
│       └── placeholder.svg
└── library/
    └── library.json

File breakdown #

etchkit.php is the entry point. It defines plugin constants (version, paths) and boots the plugin. WordPress reads the plugin header from this file.

includes/class-etchkit.php is the main plugin class, implemented as a singleton. It handles hooking into WordPress: registering the REST endpoint, enqueuing assets, and checking capabilities. All server-side logic lives here.

assets/css/panel.css contains every style used by the panel. All selectors are scoped to #etchkit-drawer so they never leak into the Etch builder or the WordPress admin. If you need to add a new badge colour or tweak the panel layout, this is the file.

assets/js/panel.js is the panel logic. It handles rendering, filtering, search, localStorage state, the REST fetch, detail/tool views, custom item management, and integration with the Etch Controls API. The TOOLS map at the top of this file is where built-in tools are registered.

assets/img/ holds the SVG wireframe images used as previews on library cards and in the sidebar detail view. placeholder.svg is the fallback for custom items that have no wireframe set.

library/library.json is the registry. Every built-in component, pattern, and tool is defined here as a JSON array of objects. The panel fetches this file through the REST endpoint on first load. When you want to add or modify library items, this is the file you edit. See Adding Items for the field schema.