Blocks and editor

Source in src/, built with @wordpress/scripts and custom webpack.config.js (every src/**/index.js → build/{entry}/index.js).

npm run build
npm run start

PHP registers blocks from build/blocks/* in Post_Type::register_blocks().

Registered blocks

Block	Build path	Notes
coverkit/canvas	src/blocks/canvas/	Canvas size, background, gradient; front-end render via PHP render_canvas()
coverkit/shape	src/blocks/shape/	Layers (text, image, shapes, QR, screenshot, …); saves null (server-side render)
coverkit/meta	src/blocks/meta/	Template metadata in imported patterns
coverkit/sample	src/blocks/sample/	Development sample

In the coverkit post type editor, only coverkit/* blocks are allowed.

Shape attributes include geometry (x, y, width, height), style (color, gradient, border, …), content (text, image, imageId, mapping), and typography (typography, fitText).

Editor plugins

src/editor/index.js registers plugins used when editing templates:

• coverkit-sidebar
• coverkit-status
• coverkit-infobar
• coverkit-events
• coverkit-dropzone

Enqueued by Post_Type::enqueue_block_assets() for coverkit posts.

Use case UI (src/editor/use-cases/)

Template sidebar for enabling use cases, settings, and field-to-layer mapping:

Module	Role
UseCasePanel.js	Main use case section in the document sidebar
UseCaseAssignment.js	Per–use-case enablement and assignment state
UseCaseSettingsSidebar.js	Settings controls from PHP settings_schema
UseCaseSidebarMapping.js / MappingFields.js / MappingFieldRow.js	Field → shape mapping UI
MappingModePanel.js / LayerMappingMode.js / LayerPickerCanvas.js	Click-to-pick layer mapping mode
UseCasePreview.js	Preview image via POST /use-case/preview
useUseCaseRegistry.js	Loads GET /use-cases registry payload
useUseCasePreview.js	Debounced preview requests
useTemplateLayers.js / useLayerPickerSession.js / useLayerMappingActions.js	Layer list and picker session
utils.js / constants.js	Shared helpers

Assignments are persisted in post meta _coverkit_use_cases (REST-visible on the template post).

Shared UI and stores

• src/shared/ — inspectors, toolbar, moveable canvas, template modal, layer preview
• src/hooks/ — useCanvas, useGenerate, usePreview, useSettings, …
• src/stores/ — Fonts, Image, Pane, Settings, Sidebar

Settings and list table

• Settings → CoverKit — src/settings/index.js → #coverkit-settings-app (options from schemas/options.php, presets from schemas/templates.php)
• Template list — src/overview/index.js on edit.php?post_type=coverkit

Styles

Use-case sidebar styles: src/editor/use-cases/use-cases.scss (compiled with the editor bundle).