[
  {
    "id": 3292,
    "title": "スタッフ紹介_F-7",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z\" fill=\"#9aa8c9\"/><path d=\"M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "レイアウト・デザイン",
      "スタッフ紹介"
    ],
    "slug": "lazyblock/f-staff-list",
    "description": "運営メンバーやスタッフのプロフィール（写真・名前・役職）をグリッド形式で並べて表示するブロック。スマホ表示では自動的に1カラムに最適化されます。",
    "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_656ad64561": {
        "type": "repeater",
        "name": "staff_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_d60bef4f15": {
        "type": "text",
        "name": "staff_name",
        "default": "",
        "label": "名前",
        "help": "",
        "child_of": "control_656ad64561",
        "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_c0faa94d10": {
        "type": "text",
        "name": "staff_role",
        "default": "",
        "label": "役職",
        "help": "",
        "child_of": "control_656ad64561",
        "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_ed48f74f9d": {
        "type": "image",
        "name": "staff_photo",
        "default": "",
        "label": "写真",
        "help": "",
        "child_of": "control_656ad64561",
        "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_4b0a784884": {
        "type": "textarea",
        "name": "staff_intro",
        "default": "",
        "label": "自己紹介",
        "help": "",
        "child_of": "control_656ad64561",
        "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$staff_list = isset( $attributes['staff_list'] ) && is_array( $attributes['staff_list'] ) ? $attributes['staff_list'] : [];\r\n?>\r\n\r\n<?php if ( empty( $staff_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=\"staff-grid\">\r\n    <?php foreach ( $staff_list as $staff ) : \r\n      $name  = isset( $staff['staff_name'] ) ? $staff['staff_name'] : '';\r\n      $role  = isset( $staff['staff_role'] ) ? $staff['staff_role'] : '';\r\n      $photo = isset( $staff['staff_photo'] ) ? $staff['staff_photo'] : '';\r\n      $intro = isset( $staff['staff_intro'] ) ? $staff['staff_intro'] : '';\r\n    ?>\r\n      <div class=\"staff-card\">\r\n        <div class=\"staff-photo-wrap\">\r\n          <?php if ( is_array( $photo ) && ! empty( $photo['url'] ) ) : ?>\r\n            <img src=\"<?php echo esc_url( $photo['url'] ); ?>\" alt=\"<?php echo esc_attr( $name ); ?>\" class=\"staff-photo\">\r\n          <?php elseif ( is_string( $photo ) && ! empty( $photo ) ) : ?>\r\n            <img src=\"<?php echo esc_url( $photo ); ?>\" alt=\"<?php echo esc_attr( $name ); ?>\" class=\"staff-photo\">\r\n          <?php else : ?>\r\n            <div class=\"staff-photo-placeholder\"></div>\r\n          <?php endif; ?>\r\n        </div>\r\n        <p class=\"staff-name\"><?php echo esc_html( $name ); ?></p>\r\n        <p class=\"staff-role\">&gt; <?php echo esc_html( $role ); ?></p>\r\n        \r\n        <?php if ( ! empty( $intro ) ) : ?>\r\n          <p class=\"staff-intro\" title=\"<?php echo esc_attr( $intro ); ?>\"><?php echo nl2br( esc_html( $intro ) ); ?></p>\r\n        <?php endif; ?>\r\n      </div>\r\n    <?php endforeach; ?>\r\n  </div>\r\n\r\n  <style>\r\n  .staff-grid, .staff-grid * { box-sizing: border-box; }\r\n  .staff-grid p { margin: 0 !important; }\r\n  .staff-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n    gap: 24px;\r\n    margin: 32px 0;\r\n    width: 100%;\r\n  }\r\n  .staff-card {\r\n    background: #111622;\r\n    border: 1px solid #283042;\r\n    border-radius: 16px;\r\n    padding: 40px 24px;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    height: 100%;\r\n  }\r\n  .staff-photo-wrap {\r\n    width: 140px; \r\n    height: 140px; \r\n    margin: 0 auto 24px;\r\n    border-radius: 50%; \r\n    border: 6px solid #1e2636;\r\n    background: #283042;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: hidden;\r\n    flex-shrink: 0;\r\n  }\r\n  .staff-photo { \r\n    width: 100%; \r\n    height: 100%; \r\n    object-fit: cover; \r\n    border-radius: 50%;\r\n  }\r\n  .staff-photo-placeholder { \r\n    width: 100%; \r\n    height: 100%; \r\n    background: #283042; \r\n  }\r\n  .staff-name { \r\n    color: #ffffff; \r\n    font-family: sans-serif;\r\n    font-size: 26px; \r\n    font-weight: 700; \r\n    margin: 0 0 12px !important; \r\n    line-height: 1.2;\r\n    letter-spacing: 0.02em;\r\n  }\r\n  .staff-role { \r\n    color: #00d2d3;\r\n    font-family: \"Courier New\", Courier, monospace; \r\n    font-size: 15px; \r\n    letter-spacing: 0.05em; \r\n  }\r\n  .staff-intro {\r\n    color: #8b92a5;\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    margin: 20px 0 0 !important;\r\n    text-align: center;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\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": ""
  }
]