[
  {
    "id": 3465,
    "title": "ステップ_F-17",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M216,64V192H104V64Z\" fill=\"#9aa8c9\"/><path d=\"M224,128a8,8,0,0,1-8,8H104a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM104,72H216a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16ZM216,184H104a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM43.58,55.16,48,52.94V104a8,8,0,0,0,16,0V40a8,8,0,0,0-11.58-7.16l-16,8a8,8,0,0,0,7.16,14.32ZM79.77,156.72a23.73,23.73,0,0,0-9.6-15.95,24.86,24.86,0,0,0-34.11,4.7,23.63,23.63,0,0,0-3.57,6.46,8,8,0,1,0,15,5.47,7.84,7.84,0,0,1,1.18-2.13,8.76,8.76,0,0,1,12-1.59A7.91,7.91,0,0,1,63.93,159a7.64,7.64,0,0,1-1.57,5.78,1,1,0,0,0-.08.11L33.59,203.21A8,8,0,0,0,40,216H72a8,8,0,0,0,0-16H56l19.08-25.53A23.47,23.47,0,0,0,79.77,156.72Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "ステップ",
      "手順",
      "段階",
      "フロー",
      "リスト・手順"
    ],
    "slug": "lazyblock/f-steps2026",
    "description": "物事の手順や段階の流れを説明するブロック。デフォルト/大/カードの3スタイル、ステップごとにアクセントカラーを変更可能。",
    "category": "Lazyblocks Free",
    "category_label": "Lazyblocks Free",
    "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_9c0d1e2f3a": {
        "type": "select",
        "name": "step_style",
        "default": "default",
        "label": "スタイル",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "choices": [
          {
            "label": "デフォルト",
            "value": "default"
          },
          {
            "label": "大",
            "value": "large"
          },
          {
            "label": "カード",
            "value": "card"
          }
        ],
        "allow_null": "false",
        "multiple": "false",
        "output_format": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_0d1e2f3a4b": {
        "type": "repeater",
        "name": "step_list",
        "default": "",
        "label": "ステップ一覧",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "true",
        "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_1e2f3a4b5c": {
        "type": "text",
        "name": "step_label",
        "default": "",
        "label": "ラベル",
        "help": "",
        "child_of": "control_0d1e2f3a4b",
        "placement": "content",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "STEP",
        "characters_limit": 0
      },
      "control_2f3a4b5c6d": {
        "type": "text",
        "name": "step_title",
        "default": "",
        "label": "タイトル",
        "help": "",
        "child_of": "control_0d1e2f3a4b",
        "placement": "content",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": 0
      },
      "control_3a4b5c6d7e": {
        "type": "textarea",
        "name": "step_desc",
        "default": "",
        "label": "説明",
        "help": "",
        "child_of": "control_0d1e2f3a4b",
        "placement": "content",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": 0
      },
      "control_4b5c6d7e8f": {
        "type": "color",
        "name": "step_color",
        "default": "",
        "label": "アクセントカラー（任意）",
        "help": "",
        "child_of": "control_0d1e2f3a4b",
        "placement": "content",
        "group": "settings",
        "width": "",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "alpha": "false",
        "palette": [],
        "alongside_text": "",
        "output_format": "",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php if ( ! empty( $attributes['step_list'] ) && is_array( $attributes['step_list'] ) ) :\n\t$style = $attributes['step_style'] ?? 'default';\n?>\n<div class=\"steps-block steps-style-<?php echo esc_attr( $style ); ?>\">\n\t<?php foreach ( $attributes['step_list'] as $i => $step ) :\n\t\t$color = ! empty( $step['step_color'] ) ? $step['step_color'] : '#2F80ED';\n\t?>\n\t<div class=\"steps-item\" style=\"--sc: <?php echo esc_attr( $color ); ?>;\">\n\t\t<div class=\"steps-marker\"><span class=\"steps-label\"><?php echo esc_html( $step['step_label'] ?? ( 'STEP ' . ( $i + 1 ) ) ); ?></span></div>\n\t\t<div class=\"steps-content\">\n\t\t\t<p class=\"steps-title\"><?php echo esc_html( $step['step_title'] ?? '' ); ?></p>\n\t\t\t<p class=\"steps-desc\"><?php echo nl2br( esc_html( $step['step_desc'] ?? '' ) ); ?></p>\n\t\t</div>\n\t</div>\n\t<?php endforeach; ?>\n</div>\n<style>\n.steps-block, .steps-block * { box-sizing: border-box; }\n.steps-block p { margin: 0 !important; }\n.steps-block { margin: 24px 0; max-width: 640px; width: 100%; }\n\n.steps-style-default .steps-item {\n\tdisplay: flex; align-items: flex-start; gap: 14px;\n\tpadding: 14px 0; border-bottom: 1px solid #F0F1F3;\n}\n.steps-style-default .steps-item:last-child { border-bottom: none; }\n.steps-style-default .steps-marker {\n\tflex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;\n\tmin-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px;\n\tbackground: #ffffff; border: 2px solid var(--sc); color: var(--sc);\n\tfont-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1;\n}\n.steps-style-default .steps-content { flex: 1; min-width: 0; }\n.steps-style-default .steps-title { color: #1A1A1A; font-weight: 700; font-size: 15px; margin-bottom: 4px !important; overflow-wrap: break-word; }\n.steps-style-default .steps-desc { font-size: 13px; color: #6B7280; overflow-wrap: break-word; }\n\n.steps-style-large .steps-item { padding: 20px 0; border-bottom: 1px solid #E5E7EB; }\n.steps-style-large .steps-item:last-child { border-bottom: none; }\n.steps-style-large .steps-marker { display: block; }\n.steps-style-large .steps-label { color: var(--sc); font-family: \"Courier New\", monospace; font-size: 12px; font-weight: 700; }\n.steps-style-large .steps-title { color: #1A1A1A; font-size: 19px; font-weight: 700; margin: 8px 0 8px !important; overflow-wrap: break-word; }\n.steps-style-large .steps-desc { font-size: 14px; color: #4B5563; overflow-wrap: break-word; }\n\n.steps-style-card {\n\tdisplay: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;\n}\n.steps-style-card .steps-item {\n\tbackground: #ffffff; border: 1px solid #E5E7EB;\n\tborder-radius: 16px; padding: 26px 22px; min-width: 0;\n}\n.steps-style-card .steps-marker {\n\tdisplay: inline-flex; align-items: center; justify-content: center;\n\tbackground: #EFF6FF;\n\tbackground: color-mix(in srgb, var(--sc) 10%, #ffffff);\n\tcolor: var(--sc);\n\tfont-size: 13px; font-weight: 700; min-width: 40px; height: 40px; padding: 0 12px;\n\tborder-radius: 12px; margin-bottom: 16px; white-space: nowrap;\n}\n.steps-style-card .steps-title { color: #1A1A1A; font-weight: 700; font-size: 15px; margin-bottom: 8px !important; overflow-wrap: break-word; }\n.steps-style-card .steps-desc { color: #6B7280; font-size: 13px; line-height: 1.7; overflow-wrap: break-word; }\n\n@media (max-width: 680px) {\n\t.steps-style-card { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }\n}\n@media (max-width: 480px) {\n\t.steps-style-default .steps-title { font-size: 14px; }\n\t.steps-style-large .steps-title { font-size: 17px; }\n\t.steps-style-card { grid-template-columns: 1fr; }\n\t.steps-style-card .steps-item { padding: 14px; }\n}\n</style>\n<?php else : ?>\n<p class=\"steps-placeholder\">ステップブロック：ステップを追加してください</p>\n<style>.steps-placeholder { border: 2px dashed #D1D5DB; border-radius: 10px; padding: 24px 20px; text-align: center; color: #9CA3AF; font-size: 13px; background: #F9FAFB; margin: 24px 0; max-width: 640px; }</style>\n<?php endif; ?>\n",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]