Business · Gutenberg

App Screenshot block for WordPress

SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages.

Get Blockenberg

Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.

Get Blockenberg

What it actually does

SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages.

Inspector panels on this block: Layout, Screenshot Image, Callout Points, CTA. Those titles come from index.js, not from a shared template.

Behavior controls: “Layout” options: Centered, Split (text + screenshot); “Device Frame” options: Browser, MacBook, No Frame.

Where to find it

Gutenberg inserter → Business → search “App Screenshot” (block name `blockenberg/app-screenshot` in block.json). Style it in the sidebar after insert.

How to use App Screenshot block for WordPress

Install Blockenberg. Install from WordPress.org and activate the plugin.
Insert the block. Edit a page, click +, search for “App Screenshot”, insert it. Category: Business.
Configure inspector controls that exist on this block. Open Layout. Set “Device Frame”, “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”.
Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.

Inspector controls from this block’s code

Control	What the code does
Layout	Select control; the chosen value is saved on the block. Options: Centered; Split (text + screenshot). block.json default: centered. Saved as `layout`.
Device Frame	Select control; the chosen value is saved on the block. Options: Browser; MacBook; No Frame. block.json default: browser. Saved as `deviceFrame`.
Max Width (px)	Numeric range control in the inspector. Range 600–1600. block.json default: 1200. Saved as `maxWidth`.
Padding Top (px)	Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`.
Padding Bottom (px)	Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`.
Show Callouts	On/off toggle in the inspector. On by default. Saved as `showCallouts`.
Label	Text field in the inspector.
Description	Text field in the inspector.
Position X (%)	Numeric range control in the inspector. Range 0–100.
Position Y (%)	Numeric range control in the inspector. Range 0–100.
Show CTA	On/off toggle in the inspector. On by default. Saved as `showCta`.
CTA Label	Text field in the inspector. block.json default: See It in Action. Saved as `ctaLabel`.
CTA URL	Text field in the inspector. block.json default: #. Saved as `ctaUrl`.
Colors — Background	Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`.
Heading	Color control in the inspector. block.json default: #111827. Saved as `headingColor`.
Subtext	Color control in the inspector. block.json default: #6b7280. Saved as `subColor`.
Eyebrow	Color control in the inspector. block.json default: #6366f1. Saved as `eyebrowColor`.
Device Frame	Color control in the inspector. block.json default: #1e293b. Saved as `frameColor`.
Callout BG	Color control in the inspector. block.json default: #6366f1. Saved as `calloutBg`.
Callout Text	Color control in the inspector. block.json default: #ffffff. Saved as `calloutColor`.
CTA BG	Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`.
CTA Text	Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`.

What the front-end script actually does

The view script reads HTML data attributes: data-opts, data-rendered.

When this is the right block

SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages — that is the job of App Screenshot, not a generic content block.
Use it when you need the editor control labeled “Device Frame”, which exists on this block’s inspector.
It matches pages about app, screenshot, saas.
Inserter grouping: company, service, and operations pages.

Notes from the implementation

viewScript: this folder’s frontend.js is enqueued on the front end for this block.

FAQ

How do I add the App Screenshot block in WordPress?

Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “App Screenshot”. It sits under Business. After insert, open Layout and set “Device Frame”, “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”.

What makes App Screenshot different from other Blockenberg blocks?

SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages. Inspector labels on this block include “Device Frame”, “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”.

Is the App Screenshot Gutenberg block free?

Yes. App Screenshot ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.

Can I style App Screenshot to match my theme?

Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Screenshot Image, Callout Points, CTA).

Related business blocks

Tech Stack

Showcase your technology stack or toolset. Category-grouped, logo images with labels, optional proficiency indicators and hover effects.

Business

About Section

Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.

Business