JezK
Edit File: block.json
{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "bpsc/app-showcase-section", "version": "1.0.0", "title": "App Showcase Section", "category": "section-collection", "description": "Display product screenshots in realistic device frames with feature lists and multiple layouts.", "keywords": [ "app", "showcase", "screenshot", "device", "mockup", "phone", "tablet", "browser", "product", "saas", "section" ], "textdomain": "section-collection", "attributes": { "themeStyle": { "type": "object", "default": { "theme": "style-1" } }, "content": { "type": "object", "default": { "badgeText": "See It In Action", "title": "A Product That Speaks for Itself", "subtitle": "Take a look inside and see why thousands of teams love using our app every day.", "screenshots": [ { "id": "ss-1", "url": "", "alt": "App screenshot 1", "caption": "Dashboard overview" }, { "id": "ss-2", "url": "", "alt": "App screenshot 2", "caption": "Analytics view" }, { "id": "ss-3", "url": "", "alt": "App screenshot 3", "caption": "Settings panel" } ], "featureList": [ { "id": "fl-1", "icon": "check", "title": "Real-Time Analytics", "description": "Monitor performance metrics live with beautiful charts and actionable insights." }, { "id": "fl-2", "icon": "shield", "title": "Enterprise Security", "description": "Bank-grade encryption keeps your data safe and your team compliant." }, { "id": "fl-3", "icon": "bolt", "title": "Blazing Fast", "description": "Optimised from the ground up so every interaction feels instant." } ], "primaryBtnText": "Get Started Free", "primaryBtnUrl": "#", "primaryBtnTarget": "_self", "secondaryBtnText": "Watch Demo", "secondaryBtnUrl": "#", "secondaryBtnTarget": "_self" } }, "elements": { "type": "object", "default": { "isBadge": true, "isTitle": true, "isSubtitle": true, "isFeatureList": true, "isPrimaryBtn": true, "isSecondaryBtn": true } }, "deviceFrame": { "type": "object", "default": { "type": "phone", "colorScheme": "dark", "customColor": "#1a1a2e", "showShadow": true, "shadowColor": "rgba(0,0,0,0.25)" } }, "carousel": { "type": "object", "default": { "autoPlay": false, "autoPlayInterval": 3000, "showDots": true, "showArrows": true } }, "layout": { "type": "object", "default": { "imagePosition": "right", "contentAlign": "left", "maxWidth": "1200px", "featureColumns": 1 } }, "titleStyle": { "type": "object", "default": { "color": "#111827", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 700, "isUploadFont": true, "fontSize": { "desktop": 40, "tablet": 34, "mobile": 28 }, "lineHeight": "1.2" } } }, "subtitleStyle": { "type": "object", "default": { "color": "#6b7280", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 400, "isUploadFont": true, "fontSize": { "desktop": 17, "tablet": 16, "mobile": 15 }, "lineHeight": "1.65" } } }, "badgeStyle": { "type": "object", "default": { "backgroundColor": "#ede9fe", "textColor": "#6366f1", "borderRadius": { "top": "20px", "right": "20px", "bottom": "20px", "left": "20px" }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 13, "tablet": 13, "mobile": 13 } } } }, "featureTitleStyle": { "type": "object", "default": { "color": "#111827", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 16, "tablet": 15, "mobile": 15 }, "lineHeight": "1.4" } } }, "featureDescStyle": { "type": "object", "default": { "color": "#6b7280", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 400, "isUploadFont": true, "fontSize": { "desktop": 14, "tablet": 14, "mobile": 14 }, "lineHeight": "1.6" } } }, "captionStyle": { "type": "object", "default": { "color": "#6b7280", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 400, "isUploadFont": true, "fontSize": { "desktop": 14, "tablet": 13, "mobile": 13 }, "lineHeight": "1.4" } } }, "primaryBtnStyle": { "type": "object", "default": { "backgroundColor": "#6366f1", "textColor": "#ffffff", "hoverBackgroundColor": "#4f46e5", "hoverTextColor": "#ffffff", "borderRadius": { "top": "8px", "right": "8px", "bottom": "8px", "left": "8px" }, "padding": { "desktop": { "top": "14px", "right": "28px", "bottom": "14px", "left": "28px" }, "tablet": { "top": "12px", "right": "24px", "bottom": "12px", "left": "24px" }, "mobile": { "top": "12px", "right": "20px", "bottom": "12px", "left": "20px" } }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 14 } } } }, "secondaryBtnStyle": { "type": "object", "default": { "backgroundColor": "transparent", "textColor": "#6366f1", "hoverBackgroundColor": "#ede9fe", "hoverTextColor": "#4f46e5", "borderColor": "#6366f1", "borderWidth": "2px", "borderRadius": { "top": "8px", "right": "8px", "bottom": "8px", "left": "8px" }, "padding": { "desktop": { "top": "14px", "right": "28px", "bottom": "14px", "left": "28px" }, "tablet": { "top": "12px", "right": "24px", "bottom": "12px", "left": "24px" }, "mobile": { "top": "12px", "right": "20px", "bottom": "12px", "left": "20px" } }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 14 } } } }, "featureIconStyle": { "type": "object", "default": { "color": "#6366f1", "backgroundColor": "#ede9fe", "size": "20px" } }, "wrapper": { "type": "object", "default": { "bg": { "type": "solid", "color": "#ffffff", "gradient": "linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%)", "overlayColor": "rgba(0,0,0,0)", "image": { "url": "" }, "position": "center center", "repeat": "no-repeat", "size": "cover" }, "padding": { "desktop": { "top": "80px", "right": "24px", "bottom": "80px", "left": "24px" }, "tablet": { "top": "60px", "right": "20px", "bottom": "60px", "left": "20px" }, "mobile": { "top": "48px", "right": "16px", "bottom": "48px", "left": "16px" } } } }, "alignment": { "type": "string", "default": "left" }, "align": { "type": "string", "default": "full" } }, "supports": { "align": [ "wide", "full" ], "html": false }, "example": { "attributes": {} }, "editorScript": "file:../index.js", "style": "file:./view.css", "render": "file:./render.php", "viewScript": "file:./view.js" }