Screenshot Capture Checklist
This is the master list of every screenshot the documentation uses. Not-yet-captured shots are embedded in the docs as HTML comments (<!--  -->) — a live image ref to a missing file fails the build — so after capturing one, also uncomment its ref in the page.
How to capture
- Capture in light theme, browser zoom 100%.
- Export as WebP, roughly 1600px wide (retina-friendly, still light-weight).
- Save to the exact path under
public/images/shown below. The leading/images/...in the docs maps topublic/images/...(VitePress serves thepublicfolder at the web root). - Tick the box once captured, uncomment the ref in the doc page, and run
npm run docs:buildto confirm.
Getting Started — public/images/getting-started/
| ✅ | File | What to capture |
|---|---|---|
| ✅ | wordpress-dashboard.webp | The WordPress dashboard with Plugins menu highlighted. |
| ✅ | plugin-upload.webp | The plugin upload screen showing the Choose File button. |
| ✅ | activate-plugin.webp | The Plugins list with Real Testimonials and Activate link. |
| ✅ | add-new-testimonial-page.webp | Adding a Real Testimonials block to a page/post in the editor. Spare — captured but not embedded anywhere right now (was on Quick Start before it became a router page). |
| ✅ | block-library.webp | The Real Testimonials block category open in the Gutenberg inserter. |
| ✅ | design-picker.webp | The design picker modal showing card design options. |
| ✅ | download-license-key.webp | The shapedplugin.com account page with license key visible. |
| ✅ | activate-license-key.webp | The dashboard Settings page with License Key field and Activate button. |
| ✅ | license-activated.webp | The Settings page after the license key is activated. |
Blocks — public/images/blocks/
Block-specific Layouts-panel screenshots (shared panels live in features/).
| ✅ | File | What to capture |
|---|---|---|
| ✅ | carousel-layout-general-tab.webp | Carousel Layouts panel — Settings tab. |
| ✅ | carousel-settings-tab.webp | Carousel Layouts panel — Carousel tab (autoplay, speed, loop). |
| ✅ | slider-layout-general-tab.webp | Slider Layouts panel — Settings tab. |
| ✅ | slider-layout-style-tab.webp | Slider Layouts panel — Slider tab. |
| ✅ | grid-layout-general-tab.webp | Grid Layouts panel. |
| ✅ | polaroid-grid-layout-panel.webp | Polaroid Grid Layouts panel. |
| ✅ | marquee-layout-general-tab.webp | Marquee Layouts panel — Settings tab. |
| ✅ | marquee-layout-style-tab.webp | Marquee Layouts panel — Marquee tab. |
| ☐ | testimonial-group-editor.webp | A Testimonial Group containing a search box, filter row, grid and pagination. |
Child Blocks — public/images/blocks/child-blocks/
Inspector-panel screenshots for the interactive child blocks. Each shot shows the block selected in the editor with its panel open, so no separate editor-view shots are needed for these blocks.
| ✅ | File | What to capture |
|---|---|---|
| ✅ | live-frontend-filter-style-tab.webp | Live Frontend Filter panel — Style tab. |
| ✅ | filter-by-group-general-tab.webp | Filter by Group panel — Settings tab. |
| ✅ | filter-by-group-style-tab.webp | Filter by Group panel — Style tab. |
| ✅ | filter-by-rating-general-tab.webp | Filter by Rating panel — Settings tab. |
| ✅ | filter-by-rating-style-tab.webp | Filter by Rating panel — Style tab. |
| ✅ | ajax-search-general-tab.webp | Search panel — Settings tab. |
| ✅ | ajax-search-style-tab.webp | Search panel — Style tab. |
| ✅ | ajax-search-btn-general-tab.webp | Search Button panel — Settings tab (icon options). |
| ✅ | ajax-search-btn-style-tab.webp | Search Button panel — Style tab. |
| ✅ | ajax-pagination-loadmore-general-tab.webp | Ajax Pagination panel — Button (load more) type. |
| ✅ | ajax-pagination-loadmore-style-tab.webp | Ajax Pagination panel — Style tab (Button type). |
| ✅ | ajax-pagination-number-general-tab.webp | Ajax Pagination panel — Number type. |
| ✅ | review-summary-general-tab.webp | Review Summary panel — Settings tab. |
| ✅ | review-summary-style-tab.webp | Review Summary panel — Style tab. |
| ✅ | ai-summary-general-tab.webp | AI Summary panel — Settings tab (with the AI summary rendered). |
| ✅ | ai-summary-style-tab.webp | AI Summary panel — Style tab. |
Submission Form — public/images/blocks/form/
| ✅ | File | What to capture |
|---|---|---|
| ✅ | form-all-panels.webp | The full inspector panel stack with the form block selected. |
| ✅ | form-builder-general-tab.webp | Form Builder panel — Settings tab (display type, field list, reCAPTCHA). |
| ✅ | form-builder-style-tab.webp | Form Builder panel — Style tab (form box). |
| ✅ | form-input-fields-general-tab.webp | Input Fields panel — Settings tab (input style, gaps). |
| ✅ | form-input-fields-style-tab.webp | Input Fields panel — Style tab (label, note, placeholder). |
| ✅ | form-submit-btn-general-tab.webp | Submit Button panel — Settings tab. |
| ✅ | form-submit-button-style-tab.webp | Submit Button panel — Style tab. |
| ✅ | form-message-general-tab.webp | Status & Message Settings panel — Settings tab. |
| ✅ | form-message-style-tab.webp | Status & Message Settings panel — Style tab. |
| ✅ | form-email-notification-admin-tab.webp | Email Notification Control — Admin tab. |
| ✅ | form-email-notification-awaiting-tab.webp | Email Notification Control — Awaiting tab. |
| ✅ | form-email-notification-approval-tab.webp | Email Notification Control — Approval tab. |
Classic Version — public/images/classic/
| ✅ | File | What to capture |
|---|---|---|
| ✅ | add-new-testimonial.webp | The Add New Testimonial edit screen — title, testimonial content, Reviewer Information, image, Groups, Publish. Used on the Getting Started → Add New Testimonial page (guide/add-new-testimonial.md). |
| ☐ | all-testimonials-list.webp | The All Testimonials list — Image, Name, Groups, Rating, and Shortcode columns (drag & drop rows). |
| ✅ | manage-view-add-new.webp | The Manage Views list screen with the Add New button. |
| ✅ | manage-view-editor.webp | The Manage View edit screen — title, Layout Preset picker, Shortcode Options tabs, How To Use box. |
| ✅ | layout-presets.webp | The Layout Preset picker showing all eight layouts (Slider … Isotope). |
| ✅ | layout-slider.webp | Front end — Slider layout example. |
| ✅ | layout-thumbnails-slider.webp | Front end — Thumbnails Slider layout example. |
| ✅ | layout-carousel.webp | Front end — Carousel layout example. |
| ✅ | layout-multi-row.webp | Front end — Multi-row carousel example. |
| ✅ | layout-grid.webp | Front end — Grid layout example. |
| ✅ | layout-masonry.webp | Front end — Masonry layout example. |
| ✅ | layout-list.webp | Front end — List layout example. |
| ✅ | layout-isotope.webp | Front end — Isotope layout with the filter bar. |
| ✅ | view-general-settings.webp | Shortcode Options → General Settings tab. |
| ✅ | view-theme-settings.webp | Shortcode Options → Theme Settings tab — theme picker + Configure Theme. |
| ✅ | view-display-settings.webp | Shortcode Options → Display Settings tab showing the seven sub-tabs. |
| ✅ | view-slider-settings.webp | Shortcode Options → Slider Settings tab showing the four sub-tabs. |
| ✅ | view-typography-settings.webp | Shortcode Options → Typography tab with one element's font controls expanded. |
| ✅ | view-how-to-use.webp | The How To Use box with a View shortcode. |
| ✅ | view-shortcode-block-editor.webp | A View shortcode pasted into a Shortcode block in the block editor. |
| ✅ | testimonial-forms-add-new.webp | The Testimonial Forms list screen with the Add New button. |
| ✅ | testimonial-form-editor.webp | The Testimonial Form edit screen — Form Options tabs, Testimonial Form Fields checklist, Live Preview, How to Use box. |
| ✅ | form-editor.webp | Form Options → Form Editor tab with field panels, one expanded. |
| ✅ | form-labels-messages.webp | Form Options → Labels & Messages tab. |
| ✅ | form-status-notifications.webp | Form Options → Status & Notifications tab with the three notification sub-tabs. |
| ✅ | form-styles.webp | Form Options → Form Styles tab. |
| ✅ | form-shortcode-block-editor.webp | A form shortcode pasted into a Shortcode block in the block editor. |
| ✅ | testimonial-form-preview.webp | The published testimonial form on the front end. |
Features — public/images/features/
Panel-by-panel screenshots of the Carousel block inspector, used on the canonical shared-panel reference page (guide/blocks/carousel.md).
| ✅ | File | What to capture |
|---|---|---|
| ✅ | all-panels.webp | The full inspector panel stack with the Carousel block selected. |
| ✅ | query-builder-tab.webp | Query Builder panel. |
| ✅ | carousel-navigation-general-tab.webp | Navigation Arrow panel — Settings tab. |
| ✅ | carousel-navigation-style-tab.webp | Navigation Arrow panel — Style tab. |
| ✅ | pagination-general-tab.webp | Pagination Dots panel — Settings tab. |
| ✅ | swiper-pagination-styles.webp | The Pagination Style dropdown open, showing all seven styles. |
| ✅ | swiper-pagination-style-tab.webp | Pagination Dots panel — Style tab. |
| ✅ | card-content-general-tab.webp | Card Content panel — Settings tab. |
| ✅ | card-content-style-tab.webp | Card Content panel — Style tab. |
| ✅ | testimonial-content-general-tab.webp | Testimonial Content panel — Settings tab. |
| ✅ | testimonial-content-style-tab.webp | Testimonial Content panel — Style tab. |
| ✅ | star-rating-general-tab.webp | Star Rating panel — Settings tab. |
| ✅ | star-rating-style-tab.webp | Star Rating panel — Style tab. |
| ✅ | reviewer-image-general-tab.webp | Reviewer Image panel — Settings tab. |
| ✅ | reviewer-image-style-tab.webp | Reviewer Image panel — Style tab. |
| ✅ | reviewer-details-general-tab.webp | Reviewer Details panel — Settings tab. |
| ✅ | reviewer-details-style-tab.webp | Reviewer Details panel — Style tab. |
| ✅ | social-media-general-tab.webp | Social Media panel — Settings tab. |
| ✅ | motion-effect-panel.webp | Motion Effects panel. |
| ✅ | advance-general-tab.webp | Advanced Settings panel — General tab. |
| ✅ | advance-visibility-tab.webp | Advanced Settings panel — Visibility tab. |
| ✅ | advance-advance-tab.webp | Advanced Settings panel — Advanced tab. |
Admin Dashboard — public/images/dashboard/
| ✅ | File | What to capture |
|---|---|---|
| ✅ | dashboard-overview.webp | The dashboard Welcome (getting-started) page with the top navigation bar. |
| ✅ | dashboard-blocks.webp | The Blocks section: block cards with on/off toggles. |
| ✅ | dashboard-modules.webp | The Modules section: feature cards with toggles. |
ready-patterns-button.webp | Block editor top toolbar with the blue Ready Patterns Library button (crop to the toolbar row). | |
ready-patterns-library.webp | The Ready Patterns Library window: left sidebar (All/Free/Pro tiers, search, Block Type, Category Type facets) and the 3-column pattern grid. | |
ready-patterns-preview.webp | A pattern open in Preview: Desktop/Tablet/Mobile switcher and the Insert button in the drawer header. | |
| ✅ | dashboard-integrations.webp | The Settings → Integrations tab: Gemini and page-builder cards. |
| ✅ | saved-templates.webp | The Saved Templates section listing saved block templates. |
| ✅ | dashboard-settings.webp | The Settings section with the tab sidebar and License Key tab active. |
settings-tools.webp | The Settings → Tools tab: export options (radio list) plus the import upload zone. | |
| ✅ | overview-welcome.webp | Spare alternate of the Welcome page — captured but not embedded anywhere right now. |