[
  {
    "id": 3308,
    "title": "沿革・年表_F-10",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z\" fill=\"#9aa8c9\"/><path d=\"M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "沿革",
      "年表",
      "リスト・手順",
      "沿革・年表"
    ],
    "slug": "lazyblock/f-timeline-history",
    "description": "特定のツールが辿ってきた歴史や、企業の沿革、アップデートのタイムラインなどを時系列に沿って視覚的に整理できるブロックです。",
    "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_61f8a04d84": {
        "type": "text",
        "name": "timeline_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_5f580543c2": {
        "type": "repeater",
        "name": "timeline_list",
        "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_4cb91f4412": {
        "type": "text",
        "name": "timeline_year",
        "default": "",
        "label": "年",
        "help": "",
        "child_of": "control_5f580543c2",
        "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_f039a54ba6": {
        "type": "textarea",
        "name": "timeline_event",
        "default": "",
        "label": "出来事",
        "help": "",
        "child_of": "control_5f580543c2",
        "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": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n$title = isset( $attributes['timeline_title'] ) ? $attributes['timeline_title'] : '';\r\n$timeline_list = isset( $attributes['timeline_list'] ) && is_array( $attributes['timeline_list'] ) ? $attributes['timeline_list'] : [];\r\n?>\r\n\r\n<?php if ( empty( $timeline_list ) ) : ?>\r\n  <div style=\"padding: 24px; background: #11151f; border: 2px dashed #00d2d3; border-radius: 12px; text-align: center; color: #ffffff;\">\r\n    <p style=\"margin: 0;\">📅 <strong>沿革・年表ブロック</strong><br><span style=\"font-size: 13px; color: #8b92a5;\">右側のパネルから「タイトル」と「年表一覧」を追加してください。</span></p>\r\n  </div>\r\n<?php else : ?>\r\n  <div class=\"timeline-container\">\r\n    <?php if ( ! empty( $title ) ) : ?>\r\n      <div class=\"timeline-main-title\"><?php echo esc_html( $title ); ?></div>\r\n    <?php endif; ?>\r\n\r\n    <ul class=\"timeline-history\">\r\n      <?php foreach ( $timeline_list as $item ) : \r\n        $year = isset( $item['timeline_year'] ) ? $item['timeline_year'] : '';\r\n        $event = isset( $item['timeline_event'] ) ? $item['timeline_event'] : '';\r\n      ?>\r\n      <li class=\"timeline-row\">\r\n        <span class=\"timeline-year\"><?php echo esc_html( $year ); ?></span>\r\n        <span class=\"timeline-event\"><?php echo nl2br( esc_html( $event ) ); ?></span>\r\n      </li>\r\n      <?php endforeach; ?>\r\n    </ul>\r\n  </div>\r\n\r\n  <style>\r\n  .timeline-container, .timeline-container * { box-sizing: border-box; }\r\n  .timeline-container {\r\n    margin: 32px 0;\r\n    width: 100%;\r\n  }\r\n  .timeline-main-title {\r\n    color: #111622; \r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    margin: 0 0 24px 0 !important;\r\n    padding-bottom: 12px;\r\n    border-bottom: 1px solid #283042;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    letter-spacing: 0.05em;\r\n  }\r\n  .timeline-main-title::before {\r\n    content: \"\";\r\n    display: block;\r\n    width: 4px;\r\n    height: 22px;\r\n    background: #00d2d3;\r\n    border-radius: 2px;\r\n  }\r\n  .timeline-history {\r\n    list-style: none !important; \r\n    margin: 0 !important; \r\n    padding: 0 !important; \r\n    border-left: 2px solid #283042; \r\n  }\r\n  .timeline-history .timeline-row { \r\n    list-style: none !important;\r\n    margin: 0 !important;\r\n    position: relative; \r\n    padding: 0 0 32px 40px !important; \r\n  }\r\n  .timeline-history .timeline-row:last-child {\r\n    padding-bottom: 0 !important;\r\n  }\r\n  \r\n  .timeline-history .timeline-row::before {\r\n    content: \"\"; \r\n    position: absolute; \r\n    left: -1px; \r\n    transform: translateX(-50%);\r\n    top: 4px;\r\n    width: 14px; \r\n    height: 14px; \r\n    margin: 0 !important; \r\n    padding: 0 !important;\r\n    border-radius: 50%;\r\n    background: #111622; \r\n    border: 2px solid #00d2d3;\r\n    box-shadow: 0 0 0 4px rgba(0, 210, 211, 0.1);\r\n    box-sizing: border-box !important; \r\n  }\r\n  \r\n  .timeline-year { \r\n    display: block; \r\n    font-family: \"Courier New\", Courier, monospace; \r\n    font-size: 15px; \r\n    color: #00d2d3; \r\n    margin-bottom: 8px; \r\n    font-weight: 700; \r\n    letter-spacing: 0.05em;\r\n  }\r\n  .timeline-event { \r\n    display: block;\r\n    font-size: 15px; \r\n    color: #b4b9c9; \r\n    line-height: 1.7; \r\n    position: relative;\r\n    padding: 0 0 16px 0; \r\n  }\r\n  .timeline-event::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: calc(100% - 10px);\r\n    height: 1px;\r\n    background: #3d4a60; \r\n  }\r\n  .timeline-event::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: calc(100% - 10px);\r\n    width: 14px;\r\n    height: 1px;\r\n    background: #3d4a60; \r\n    transform-origin: left bottom;\r\n    transform: rotate(-45deg); \r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .timeline-main-title { font-size: 18px; margin-bottom: 20px !important; }\r\n    .timeline-history .timeline-row { padding-left: 32px !important; padding-bottom: 24px !important; }\r\n    .timeline-year { font-size: 14px; margin-bottom: 8px; }\r\n    .timeline-event { font-size: 14px; padding-bottom: 14px; }\r\n  }\r\n  </style>\r\n<?php endif; ?>",
      "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": ""
  }
]