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/layer	src/blocks/layer/	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.

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

Editor plugins

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

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

It also imports src/editor/block-bindings/ — registers the coverkit/field client binding source for WordPress 7.0 native metadata.bindings on coverkit/layer. See block-bindings.md.

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 → layer mapping UI
MappingModePanel.js / LayerMappingMode.js / LayerPickerCanvas.js	Click-to-pick layer mapping mode
UseCasePreview.js	Preview image via POST /preview (use-case mode)
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, usePreview, useSettings, …; live previews via src/util/previewRequest.js
• src/stores/ — Fonts, Image, Pane, Settings, Sidebar

Settings and list table

• Settings → CoverKit — src/settings/ module (index.js bootstraps #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).