One-off community release. Not actively maintained. No ongoing support, security fixes, or compatibility updates are promised. Tested with Bricks 2.4.4, WordPress 7.1.4, and PHP 8.3. Test on a staging site before use. Shared as a frozen reference; forks are welcome under the license below.
Component Thumbnail Studio is a WordPress plugin for composing custom Bricks component previews directly inside the Bricks editor.
Capture the component you are editing, arrange one or more views on a canvas, and apply the result to its native thumbnail. Useful for showing visually different variants together in one preview.
- Download component-thumbnail-studio-1.1.2.zip from Releases.
- In WordPress, open Plugins → Add New Plugin → Upload Plugin, upload the ZIP, and activate it.
- Enable component screenshots in Bricks → Settings → Templates & components.
- Reload the Bricks editor, select a component instance, and click the camera in the main toolbar.
Use the attached plugin ZIP for installation. GitHub’s automatic “Source code” archives contain the development repository and optional extras.
- Capture the currently rendered component, including its variant, properties, slots, and breakpoint.
- Combine up to 12 screenshots in one 1200 × 800 thumbnail.
- Drag and proportionally resize each screenshot, with keyboard controls and undo/redo.
- Edit the background color using a swatch or hex value.
- Apply per-image border, corner-radius, and shadow presets, with individual fine-tuning.
- Save arrangements automatically and reopen them for later editing.
- Assign a composition to another component.
- Keep custom previews protected from native screenshot regeneration while the plugin is active.
To capture another view, choose Add capture, select the next component or variant in Bricks, and click the camera again. Apply saves the finished image to the Media Library and assigns it to the component.
The camera in the Component Browser opens an existing composition. Use automatic thumbnail, in the three-dot menu, releases the custom assignment and requests a normal Bricks screenshot.
The separate sidebar component previews snippet replaces the icons in Bricks’ normal Components sidebar with saved thumbnails and enlarges the rows. Components without a usable thumbnail keep their native icon.
It lives in this repository’s extras folder and is installed separately through a PHP code manager. It does not need Thumbnail Studio, so it can remain active after the plugin is removed. It creates no additional images or editing data.
- WordPress 6.5 or later.
- PHP 8.2 or later, OpenSSL, and a working WordPress image editor, such as GD or Imagick.
- Bricks 2.4.x, with component screenshots enabled.
- Permission to edit the current page and Bricks components, and to upload media.
Live integration was checked with Bricks 2.4.4, WordPress 7.1.4, and PHP 8.3. The editor adapter depends on Bricks internals because there is no documented public screenshot-composition API. Other Bricks versions require a compatibility review; the interface does not attach outside the supported version range.
Captures are static. Cross-origin assets must permit browser access. Third-party frames, live video, and WebGL have browser capture limitations; use video poster images. Source captures are limited to 5 MB and 16 megapixels each.
This is an independent community project, unaffiliated with Bricks. A Bricks installation is required; Bricks itself is not included.
Deactivate and delete the plugin through WordPress’s Plugins screen. Uninstall removes its editing recipes, encrypted source captures, scheduled cleanup, and ownership metadata. Finished Media Library images and current native thumbnail assignments remain. Normal Bricks regeneration resumes and may later replace those assignments.
Deleting the plugin directory directly bypasses WordPress uninstall cleanup. Keep a site backup before trying editor extensions on a production site.
Repeated unchanged Apply reuses the existing finished image. Replaced generated images are retired only when the reference checks find no remaining use. Current draft sources stay available; unused sources have a one-hour recovery period and scheduled cleanup.
Use Node.js 24.18 or later and npm 11.16 or later. The lockfile pins dependencies; PHP checks use a bundled WASM runtime.
npm ci
npm run typecheck
npm test
npm run test:php
npm run format:check
npm run build
npm run packageThe installable ZIP is written to build/component-thumbnail-studio-1.1.2.zip. Only the allow-listed runtime files in plugin/ are packaged. Optional snippets, source files, tests, and development dependencies are excluded.
The existing suite has 21 TypeScript tests and 82 PHP scenarios, including permissions, stale revisions, thumbnail-only writes, source access, output reuse, reference-aware cleanup, and uninstall retention. PHP scenarios use WordPress test doubles. Live editor testing remains necessary for changes to the Bricks adapter.
Pull requests and updates to main also run the Security scan check. It scans first-party PHP, JavaScript, TypeScript, and the JavaScript embedded in the optional sidebar snippet. The scanner, rules, and GitHub actions are pinned. Results are published to GitHub’s Security tab for trusted branches; fork pull requests run the same blocking scan without write access. No Semgrep account or source-code upload is required, and scanner telemetry is disabled. Reviewed findings are accepted only for the recorded source-file hashes, finding locations, scanner version, and rule-set hash. Changing any of these requires review again.
The final security review records the scan scope and limitations. The final v1.1.2 release has locked assets and a locked tag, with GitHub release attestation and SHA-256 checksums. Earlier releases are retained for reference. This is a frozen release, not a promise of continuing security monitoring.
GPL-2.0-or-later. The bundled modern-screenshot dependency is MIT licensed; its notice is included in the plugin.