[
    {
        "id": 2056,
        "title": "ステップブロック",
        "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z\" \/><\/svg>",
        "keywords": [
            "ステップ",
            "STEP"
        ],
        "slug": "lazyblock\/step-block",
        "description": "",
        "category": "lazyblocks",
        "category_label": "lazyblocks",
        "supports": {
            "customClassName": true,
            "anchor": false,
            "html": false,
            "multiple": true,
            "inserter": true,
            "reusable": true,
            "color": false,
            "layout": false,
            "shadow": false,
            "spacing": false,
            "dimensions": false,
            "typography": false,
            "lock": true,
            "align": [
                "wide",
                "full"
            ],
            "ghostkit": {
                "effects": false,
                "position": false,
                "spacings": false,
                "frame": false,
                "transform": false,
                "customCSS": false,
                "display": false,
                "attributes": false
            }
        },
        "controls": {
            "control_d0fad7493d": {
                "type": "text",
                "name": "guide_title",
                "default": "インストールと初期設定の手順",
                "label": "ガイドタイトル",
                "help": "",
                "child_of": "",
                "placement": "inspector",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_d3fb6849c1": {
                "type": "repeater",
                "name": "steps",
                "default": "",
                "label": "ステップ一覧",
                "help": "",
                "child_of": "",
                "placement": "inspector",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "rows_min": "",
                "rows_max": "",
                "rows_label": "",
                "rows_add_button_label": "",
                "rows_collapsible": "true",
                "rows_collapsed": "true",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_ef6b044ffa": {
                "type": "text",
                "name": "step_title",
                "default": "プラグインの有効化",
                "label": "ステップ名",
                "help": "",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_d748344f4a": {
                "type": "url",
                "name": "step_btn_url",
                "default": "",
                "label": "ボタンURL",
                "help": "",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_3eeb6641c5": {
                "type": "text",
                "name": "step_btn_text",
                "default": "公式サイトを開く",
                "label": "ボタンのテキスト",
                "help": "",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_ad38bc4c4c": {
                "type": "rich_text",
                "name": "step_desc",
                "default": "",
                "label": "説明",
                "help": "",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_cd8b4541ce": {
                "type": "rich_text",
                "name": "step_advice",
                "default": "",
                "label": "アドバイス",
                "help": "補足情報用",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_16abe348ba": {
                "type": "color",
                "name": "step_color",
                "default": "#3b82f6",
                "label": "テーマカラー",
                "help": "",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "alpha": "false",
                "palette": "true",
                "alongside_text": "",
                "output_format": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_587a004917": {
                "type": "gallery",
                "name": "step_gallery",
                "default": "",
                "label": " ステップ画像",
                "help": "複数枚設定した際にはスライダーとなり、コントロールが追加されます。",
                "child_of": "control_d3fb6849c1",
                "placement": "content",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "preview_size": "full",
                "placeholder": "",
                "characters_limit": ""
            }
        },
        "code": {
            "output_method": "php",
            "editor_html": "",
            "editor_callback": "",
            "frontend_html": "<?php\n$attributes = $attributes ?? [];\n$steps      = $attributes['steps'] ?? [];\n?>\n\n<div class=\"lzb-premium-wrap\">\n    <?php if ( ! empty( $steps ) ) : ?>\n        <div class=\"lzb-premium-timeline\">\n            <?php \n            $step_count = 1;\n            foreach ( $steps as $step ) : \n                $accent_color = !empty($step['step_color']) ? $step['step_color'] : '#3b82f6';\n                \n                \/\/ ★単一のGalleryコントロールで画像を配列として取得\n                $images = ! empty( $step['step_gallery'] ) && is_array( $step['step_gallery'] ) ? $step['step_gallery'] : [];\n                $img_count = count($images);\n            ?>\n                <div class=\"lzb-premium-step\" style=\"--step-accent: <?php echo esc_attr($accent_color); ?>;\">\n                    <div class=\"lzb-premium-node\"><\/div>\n                    <div class=\"lzb-premium-card\">\n                        <div class=\"lzb-premium-badge\">\n                            <span class=\"lzb-premium-badge-label\">STEP<\/span>\n                            <span class=\"lzb-premium-badge-num\"><?php echo str_pad($step_count, 2, '0', STR_PAD_LEFT); ?><\/span>\n                        <\/div>\n\n                        <div class=\"lzb-premium-content\">\n                            <?php if ( ! empty( $step['step_title'] ) ) : ?>\n                                <h4 class=\"lzb-premium-title\"><?php echo esc_html( $step['step_title'] ); ?><\/h4>\n                            <?php endif; ?>\n                            \n                            <?php if ( ! empty( $step['step_desc'] ) ) : ?>\n                                <div class=\"lzb-premium-desc\"><?php echo wp_kses_post( $step['step_desc'] ); ?><\/div>\n                            <?php endif; ?>\n\n                            <?php if ( ! empty( $step['step_advice'] ) ) : ?>\n                                <div class=\"lzb-premium-advice\">\n                                    <div class=\"lzb-premium-advice-icon\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.9 1.2 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>\n                                    <\/div>\n                                    <div class=\"lzb-premium-advice-text\"><?php echo wp_kses_post( $step['step_advice'] ); ?><\/div>\n                                <\/div>\n                            <?php endif; ?>\n\n                            <?php if ( ! empty( $step['step_btn_url'] ) ) : ?>\n                                <div class=\"lzb-premium-btn-wrap\">\n                                    <a href=\"<?php echo esc_url( $step['step_btn_url'] ); ?>\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"lzb-premium-btn\">\n                                        <?php echo esc_html( !empty($step['step_btn_text']) ? $step['step_btn_text'] : '公式サイトを開く' ); ?>\n                                        <span class=\"lzb-premium-btn-icon\">\n                                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"><\/path><polyline points=\"15 3 21 3 21 9\"><\/polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"><\/line><\/svg>\n                                        <\/span>\n                                    <\/a>\n                                <\/div>\n                            <?php endif; ?>\n\n                            <!-- 額装フレーム（1枚でも複数枚でもベースの枠は完全に同一） -->\n                            <?php if ( $img_count > 0 ) : ?>\n                                <div class=\"lzb-premium-image-frame <?php echo $img_count > 1 ? 'lzb-is-slider' : ''; ?>\">\n                                    \n                                    <!-- 複数枚ならスライダートラックを、1枚なら単発画像を出力 -->\n                                    <div class=\"<?php echo $img_count > 1 ? 'lzb-slider-track' : 'lzb-single-track'; ?>\">\n                                        <?php foreach ( $images as $img ) : ?>\n                                            <div class=\"lzb-slide\">\n                                                <img src=\"<?php echo esc_url( $img['url'] ); ?>\" alt=\"<?php echo esc_attr( $step['step_title'] ?? 'ステップ解説画像' ); ?>\" class=\"lzb-premium-image\">\n                                            <\/div>\n                                        <?php endforeach; ?>\n                                    <\/div>\n\n                                    <!-- 複数枚の時だけコントロール（矢印＆カウンター）を表示 -->\n                                    <?php if ( $img_count > 1 ) : ?>\n                                        <div class=\"lzb-slider-controls\">\n                                            <button type=\"button\" class=\"lzb-slider-btn lzb-prev\" aria-label=\"前の画像\">\n                                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n                                            <\/button>\n                                            <div class=\"lzb-slider-counter\">\n                                                <span class=\"lzb-current-num\">1<\/span> <span class=\"lzb-total-num\">\/ <?php echo $img_count; ?><\/span>\n                                            <\/div>\n                                            <button type=\"button\" class=\"lzb-slider-btn lzb-next\" aria-label=\"次の画像\">\n                                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n                                            <\/button>\n                                        <\/div>\n                                    <?php endif; ?>\n\n                                <\/div>\n                            <?php endif; ?>\n                            \n                        <\/div>\n                    <\/div>\n                <\/div>\n            <?php \n            $step_count++;\n            endforeach; \n            ?>\n        <\/div>\n    <?php else : ?>\n        <div class=\"lzb-premium-placeholder\">\n            <div class=\"lzb-premium-placeholder-icon\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"><\/line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"><\/line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"><\/line><\/svg>\n            <\/div>\n            <p class=\"lzb-premium-placeholder-text\"><strong>STEPブロック<\/strong><br>右パネルからステップを追加してください<\/p>\n        <\/div>\n    <?php endif; ?>\n<\/div>\n",
            "frontend_callback": "",
            "show_preview": "always",
            "single_output": true
        },
        "style": {
            "block": "@charset \"UTF-8\";\n\n\/* ============================================================\n   1. 全体構造（ラッパー & タイムライン）\n   ============================================================ *\/\n.lzb-premium-wrap {\n  margin: 3rem 0; padding: 2rem 0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n.lzb-premium-timeline { position: relative; isolation: isolate; z-index: 1; }\n.lzb-premium-timeline::before {\n  content: ''; position: absolute; top: 0; bottom: 0; left: 7px; width: 2px;\n  background: linear-gradient(to bottom, #e2e8f0 0%, #e2e8f0 95%, transparent 100%); z-index: -1;\n}\n\n\/* ============================================================\n   2. 各ステップ・アニメーション・ノード・カード\n   ============================================================ *\/\n.lzb-premium-step {\n  position: relative; z-index: 2; margin-bottom: 4.5rem; opacity: 0.5; transform: scale(0.98);\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.lzb-premium-step:last-child { margin-bottom: 0; }\n.lzb-premium-step.is-active { opacity: 1; transform: scale(1); z-index: 3; }\n\n.lzb-premium-node {\n  position: absolute; left: 0; top: 1.5rem; width: 16px; height: 16px; border-radius: 50%;\n  background-color: #cbd5e1; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #cbd5e1; z-index: 5; transition: all 0.4s ease;\n}\n.lzb-premium-node::after {\n  content: ''; position: absolute; top: 50%; left: 100%; width: 24px; height: 2px;\n  background-color: #e2e8f0; transform: translateY(-50%); z-index: -1;\n}\n.lzb-premium-step.is-active .lzb-premium-node {\n  background-color: var(--step-accent); border-color: #ffffff;\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-accent) 20%, transparent), 0 0 0 4px #ffffff;\n}\n\n.lzb-premium-card {\n  margin-left: 2.5rem; position: relative; background: #ffffff; border: 1px solid #e2e8f0;\n  border-radius: 16px; padding: 2.5rem 2rem 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: box-shadow 0.4s ease, border-color 0.4s ease;\n}\n.lzb-premium-step.is-active .lzb-premium-card { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: var(--step-accent); }\n\n.lzb-premium-badge {\n  position: absolute; top: -18px; left: 24px; display: flex; align-items: center; padding: 4px 6px 4px 14px;\n  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); z-index: 10; transition: border-color 0.4s ease;\n}\n.lzb-premium-step.is-active .lzb-premium-badge { border-color: var(--step-accent); }\n.lzb-premium-badge-label { font-size: 0.7rem; font-weight: 800; color: #64748b; letter-spacing: 0.1em; margin-right: 10px; transition: color 0.4s ease; }\n.lzb-premium-step.is-active .lzb-premium-badge-label { color: var(--step-accent); }\n.lzb-premium-badge-num {\n  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #94a3b8; color: #ffffff;\n  border-radius: 50%; font-size: 0.75rem; font-weight: 800; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.lzb-premium-step.is-active .lzb-premium-badge-num { background-color: var(--step-accent); transform: scale(1.1); }\n\n\/* ============================================================\n   3. テキスト・ボタン\n   ============================================================ *\/\n.lzb-premium-title { margin: 0 0 1rem 0 !important; font-size: 1.4rem !important; color: #0f172a; font-weight: 700; }\n.lzb-premium-desc { color: #475569; line-height: 1.7; margin-bottom: 1.5rem; }\n.lzb-premium-desc p { margin: 0 0 0.75rem 0; } .lzb-premium-desc p:last-child { margin-bottom: 0; }\n.lzb-premium-advice { margin: 1.5rem 0; padding: 1.25rem; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; align-items: flex-start; gap: 1rem; }\n.lzb-premium-advice-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #fffbeb; color: #f59e0b; border-radius: 50%; margin-top: -2px; }\n.lzb-premium-advice-icon svg { width: 16px; height: 16px; }\n.lzb-premium-advice-text { font-size: 0.95rem; color: #475569; line-height: 1.7; }\n.lzb-premium-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--step-accent); color: #ffffff !important; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.2s ease; }\n.lzb-premium-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }\n\n\/* ============================================================\n   4. 究極の「ピタッと」額装フレーム（1枚\/複数枚 共通）\n   ============================================================ *\/\n.lzb-premium-image-frame {\n  margin: 2rem auto 0;\n  padding: 1.25rem; \/* 1cmの神余白 *\/\n  background-color: #f1f5f9;\n  border: 1px solid #e2e8f0;\n  border-radius: 20px;\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: fit-content; \n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n\/* トラック（画像を入れる箱） *\/\n.lzb-single-track { display: block; }\n.lzb-slider-track {\n  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;\n  scrollbar-width: none; -ms-overflow-style: none; gap: 1.25rem;\n}\n.lzb-slider-track::-webkit-scrollbar { display: none; }\n\n\/* スライド個別のラッパーと画像 *\/\n.lzb-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; }\n.lzb-premium-image {\n  display: block; max-width: 100%; height: auto; max-height: 520px; object-fit: contain;\n  border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.8); transition: transform 0.4s ease;\n}\n.lzb-premium-step.is-active .lzb-single-track .lzb-premium-image:hover { transform: scale(1.02); }\n\n\/* スライダー用コントロール *\/\n.lzb-slider-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; }\n.lzb-slider-btn {\n  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;\n  background-color: #ffffff; border: 1px solid #cbd5e1; color: #475569; cursor: pointer;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s ease;\n}\n.lzb-slider-btn:hover { background-color: var(--step-accent); border-color: var(--step-accent); color: #ffffff; transform: scale(1.05); }\n.lzb-slider-counter { font-size: 0.95rem; font-weight: 700; color: #64748b; letter-spacing: 0.05em; background: #e2e8f0; padding: 6px 16px; border-radius: 20px; }\n.lzb-current-num { color: #0f172a; font-size: 1.05rem; }\n\n\/* ============================================================\n   5. レスポンシブ対応\n   ============================================================ *\/\n.lzb-premium-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; background-color: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; text-align: center; color: #64748b; }\n@media (max-width: 600px) {\n  .lzb-premium-timeline::before, .lzb-premium-node { display: none; }\n  .lzb-premium-step { opacity: 1 !important; transform: none !important; margin-bottom: 3rem; }\n  .lzb-premium-card { margin-left: 0; padding: 2.5rem 1.25rem 1.5rem; border-color: var(--step-accent) !important; }\n  .lzb-premium-badge { border-color: var(--step-accent) !important; }\n  .lzb-premium-badge-label { color: var(--step-accent) !important; }\n  .lzb-premium-badge-num { background-color: var(--step-accent) !important; transform: scale(1) !important; }\n  .lzb-premium-image-frame { width: 100%; padding: 0.75rem; border-radius: 14px; }\n  .lzb-premium-image { max-height: 380px; }\n}\n",
            "editor": ".lzb-premium-wrap .lzb-premium-step { opacity: 1 !important; transform: none !important; }\r\n.lzb-premium-wrap .lzb-premium-card, .lzb-premium-wrap .lzb-premium-badge { border-color: var(--step-accent) !important; }\r\n.lzb-premium-wrap .lzb-premium-badge-num, .lzb-premium-wrap .lzb-premium-node { background-color: var(--step-accent) !important; }"
        },
        "script": {
            "view": "document.addEventListener(\"DOMContentLoaded\", function() {\n    \n    \/\/ 1. スクロール・アクティブ化（PCのみ）\n    if (window.innerWidth > 600) {\n        const steps = document.querySelectorAll('.lzb-premium-step');\n        if (steps.length > 0) {\n            const observer = new IntersectionObserver((entries) => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('is-active');\n                    } else {\n                        entry.target.classList.remove('is-active');\n                    }\n                });\n            }, { rootMargin: \"-30% 0px -40% 0px\", threshold: 0 });\n            steps.forEach(step => observer.observe(step));\n        }\n    }\n\n    \/\/ 2. ネイティブスライダー処理\n    const sliders = document.querySelectorAll('.lzb-premium-image-frame.lzb-is-slider');\n    \n    sliders.forEach(slider => {\n        const track = slider.querySelector('.lzb-slider-track');\n        const btnPrev = slider.querySelector('.lzb-prev');\n        const btnNext = slider.querySelector('.lzb-next');\n        const currentNum = slider.querySelector('.lzb-current-num');\n        \n        if (!track) return;\n\n        const updateCounter = () => {\n            const index = Math.round(track.scrollLeft \/ track.clientWidth);\n            if (currentNum) currentNum.textContent = index + 1;\n        };\n\n        track.addEventListener('scroll', () => { updateCounter(); });\n\n        if (btnPrev) {\n            btnPrev.addEventListener('click', () => {\n                track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' });\n            });\n        }\n        if (btnNext) {\n            btnNext.addEventListener('click', () => {\n                track.scrollBy({ left: track.clientWidth, behavior: 'smooth' });\n            });\n        }\n    });\n});\n"
        },
        "styles": [],
        "condition": [],
        "provide_context_to_blocks": "",
        "custom_context_slug": "",
        "allowed_blocks": "",
        "ancestor": ""
    }
]