[
  {
    "id": 3214,
    "title": "Proスタッフ紹介_P-28",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z\" fill=\"#9aa8c9\"/><path d=\"M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "レイアウト・デザイン",
      "Proスタッフ紹介"
    ],
    "slug": "lazyblock/staff-list",
    "description": "スタッフ・メンバー紹介用の繰り返しブロック",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "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_141bee4729": {
        "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_04085b4a00": {
        "type": "text",
        "name": "staff_name",
        "default": "",
        "label": "名前",
        "help": "",
        "child_of": "control_141bee4729",
        "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_811be84de0": {
        "type": "text",
        "name": "staff_role",
        "default": "",
        "label": "役職",
        "help": "",
        "child_of": "control_141bee4729",
        "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_5b4bd14593": {
        "type": "image",
        "name": "staff_photo",
        "default": "",
        "label": "写真",
        "help": "",
        "child_of": "control_141bee4729",
        "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// 1. リピーターのデータが存在し、配列であることを厳密にチェック\r\nif ( isset( $attributes['staff_list'] ) && is_array( $attributes['staff_list'] ) && ! empty( $attributes['staff_list'] ) ) : \r\n?>\r\n<div class=\"staff-grid\">\r\n  <?php foreach ( $attributes['staff_list'] as $staff ) : ?>\r\n    <div class=\"staff-card\">\r\n      \r\n      <div class=\"staff-photo-wrap\">\r\n        <?php \r\n        // 2. 画像配列とURLが存在するかを厳密にチェック（Gutenbergのエラー落ちを防止）\r\n        if ( isset( $staff['staff_photo']['url'] ) && ! empty( $staff['staff_photo']['url'] ) ) : \r\n        ?>\r\n          <img src=\"<?php echo esc_url( $staff['staff_photo']['url'] ); ?>\" alt=\"<?php echo esc_attr( $staff['staff_name'] ?? '' ); ?>\" class=\"staff-photo\" loading=\"lazy\">\r\n        <?php else : ?>\r\n          <div class=\"staff-photo-placeholder\"></div>\r\n        <?php endif; ?>\r\n      </div>\r\n\r\n      <p class=\"staff-name\"><?php echo esc_html( $staff['staff_name'] ?? 'Name' ); ?></p>\r\n      <p class=\"staff-role\"><?php echo esc_html( $staff['staff_role'] ?? 'Role' ); ?></p>\r\n      \r\n    </div>\r\n  <?php endforeach; ?>\r\n</div>\r\n<?php endif; ?>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* グリッドレイアウト（PC: 4カラム） */\r\n.staff-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 24px;\r\n  margin: 2.5rem 0;\r\n}\r\n\r\n/* カード本体のデザイン（ダークテーマ） */\r\n.staff-card {\r\n  background: #111827; /* 深いダークスレート */\r\n  border: 1px solid #374151;\r\n  border-radius: 8px;\r\n  padding: 32px 24px;\r\n  text-align: center;\r\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\r\n  position: relative;\r\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;\r\n}\r\n\r\n/* カード上部のテック風アクセントライン（ホバー時に出現） */\r\n.staff-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 3px;\r\n  background: #06b6d4; /* サイアンブルー */\r\n  border-top-left-radius: 8px;\r\n  border-top-right-radius: 8px;\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n/* カードホバー時の浮遊エフェクト */\r\n.staff-card:hover {\r\n  transform: translateY(-6px);\r\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);\r\n  border-color: #4b5563;\r\n}\r\n\r\n.staff-card:hover::before {\r\n  transform: scaleX(1);\r\n}\r\n\r\n/* 写真のラッパー（リング風デザイン） */\r\n.staff-photo-wrap {\r\n  width: 96px;\r\n  height: 96px;\r\n  margin: 0 auto 20px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  border: 2px solid #374151;\r\n  padding: 4px; \r\n  background: #1f2937;\r\n  transition: border-color 0.3s ease;\r\n}\r\n\r\n.staff-card:hover .staff-photo-wrap {\r\n  border-color: #06b6d4;\r\n}\r\n\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  filter: grayscale(100%) contrast(1.1);\r\n  transition: filter 0.4s ease, transform 0.4s ease;\r\n}\r\n\r\n.staff-card:hover .staff-photo {\r\n  filter: grayscale(0%) contrast(1);\r\n  transform: scale(1.1);\r\n}\r\n\r\n/* 写真未設定時のダミー */\r\n.staff-photo-placeholder {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background: #374151;\r\n}\r\n\r\n/* 名前のタイポグラフィ */\r\n.staff-name {\r\n  color: #f9fafb;\r\n  font-size: 1.125rem;\r\n  font-weight: 700;\r\n  margin: 0 0 8px;\r\n  letter-spacing: 0.025em;\r\n  line-height: 1.3;\r\n}\r\n\r\n/* 役職のタイポグラフィ（ターミナル風） */\r\n.staff-role {\r\n  color: #06b6d4;\r\n  font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\r\n  font-size: 0.8125rem;\r\n  font-weight: 400;\r\n  margin: 0;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n/* 役職の先頭に「>」を自動追加 */\r\n.staff-role::before {\r\n  content: \"> \";\r\n  opacity: 0.7;\r\n}\r\n\r\n/* レスポンシブ対応（タブレット・スマホ） */\r\n@media (max-width: 1024px) {\r\n  .staff-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .staff-grid {\r\n    grid-template-columns: 1fr;\r\n    padding: 0 16px;\r\n    gap: 16px;\r\n  }\r\n}",
      "editor": "/* ==========================================================================\r\n   Lazy Blocks - Staff List [Editor CSS]\r\n   Gutenberg管理画面用の専用スタイル。エディター内の表示崩れを徹底防止します。\r\n   ========================================================================== */\r\n\r\n/* 1. エディター内プレビュー全体のラッパー調整 */\r\n.staff-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 20px;\r\n  margin: 20px 0;\r\n  padding: 24px;\r\n  background-color: #0f172a; /* エディター内でカードが綺麗に見えるよう、背景をダークグレーに強制 */\r\n  border-radius: 12px;\r\n  border: 2px dashed #374151; /* 編集エリアの境界がひと目でわかるガイドライン */\r\n}\r\n\r\n/* 2. カード本体（Frontendと統一しつつ、エディター用にマージン等を微調整） */\r\n.staff-card {\r\n  background: #111827;\r\n  border: 1px solid #374151;\r\n  border-radius: 8px;\r\n  padding: 24px 16px;\r\n  text-align: center;\r\n  position: relative;\r\n  /* エディター内でも快適に動作する軽量アニメーション */\r\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;\r\n}\r\n\r\n/* カード上部のテック風アクセントライン */\r\n.staff-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 3px;\r\n  background: #06b6d4;\r\n  border-top-left-radius: 8px;\r\n  border-top-right-radius: 8px;\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n/* 管理画面でのホバーエフェクト（動的プレビューを再現） */\r\n.staff-card:hover {\r\n  transform: translateY(-4px);\r\n  border-color: #4b5563;\r\n}\r\n\r\n.staff-card:hover::before {\r\n  transform: scaleX(1);\r\n}\r\n\r\n/* 3. 写真の円形ラッパー */\r\n.staff-photo-wrap {\r\n  width: 80px;\r\n  height: 80px;\r\n  margin: 0 auto 16px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  border: 2px solid #374151;\r\n  padding: 3px; \r\n  background: #1f2937;\r\n  transition: border-color 0.2s ease;\r\n}\r\n\r\n.staff-card:hover .staff-photo-wrap {\r\n  border-color: #06b6d4;\r\n}\r\n\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  filter: grayscale(100%) contrast(1.1);\r\n  transition: filter 0.3s ease, transform 0.3s ease;\r\n}\r\n\r\n.staff-card:hover .staff-photo {\r\n  filter: grayscale(0%) contrast(1);\r\n  transform: scale(1.08);\r\n}\r\n\r\n/* 写真未設定時のダミーエリア */\r\n.staff-photo-placeholder {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background: #374151;\r\n}\r\n\r\n/* 4. タイポグラフィ（親テーマの干渉を防ぐためフォントサイズを厳密に固定） */\r\n.staff-name {\r\n  color: #f9fafb !important;\r\n  font-size: 15px !important;\r\n  font-weight: 700 !important;\r\n  margin: 0 0 6px !important;\r\n  letter-spacing: 0.025em !important;\r\n  line-height: 1.3 !important;\r\n}\r\n\r\n.staff-role {\r\n  color: #06b6d4 !important;\r\n  font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace !important;\r\n  font-size: 11px !important;\r\n  font-weight: 400 !important;\r\n  margin: 0 !important;\r\n  letter-spacing: 0.05em !important;\r\n}\r\n\r\n.staff-role::before {\r\n  content: \"> \";\r\n  opacity: 0.7;\r\n}\r\n\r\n/* ==========================================================================\r\n   5. エディター用レスポンシブ（Gutenbergのブロック幅に合わせて最適化）\r\n   ========================================================================== */\r\n@media (max-width: 1080px) {\r\n  .staff-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    padding: 16px;\r\n  }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .staff-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 12px;\r\n  }\r\n}"
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]