[
  {
    "id": 3306,
    "title": "FAQ_F-9",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z\" fill=\"#9aa8c9\"/><path d=\"M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "FAQ",
      "FAQ・Q&A"
    ],
    "slug": "lazyblock/f-faq",
    "description": "よくある質問（FAQ）や補足説明などを折りたたんで表示できるブロック。JSを使用せず、HTML標準の <details> タグを使用しているため軽量に動作します。",
    "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_e9a8174134": {
        "type": "repeater",
        "name": "faq_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_8ffb2b478b": {
        "type": "text",
        "name": "faq_question",
        "default": "",
        "label": "質問",
        "help": "",
        "child_of": "control_e9a8174134",
        "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_4269aa4ed4": {
        "type": "text",
        "name": "faq_answer",
        "default": "",
        "label": "回答",
        "help": "",
        "child_of": "control_e9a8174134",
        "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_6feaf947c4": {
        "type": "toggle",
        "name": "enable_faq_schema",
        "default": "true",
        "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": "",
        "checked": "true"
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n$faq_list = isset( $attributes['faq_list'] ) && is_array( $attributes['faq_list'] ) ? $attributes['faq_list'] : [];\r\n$enable_schema = ! empty( $attributes['enable_faq_schema'] );\r\n?>\r\n\r\n<?php if ( empty( $faq_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>FAQブロック</strong><br><span style=\"font-size: 13px; color: #8b92a5;\">右側のパネルから「質問一覧」を追加してください。</span></p>\r\n  </div>\r\n<?php else : ?>\r\n  <div class=\"faq-accordion\">\r\n    <?php foreach ( $faq_list as $faq ) : \r\n      $q = isset( $faq['faq_question'] ) ? $faq['faq_question'] : '';\r\n      $a = isset( $faq['faq_answer'] ) ? $faq['faq_answer'] : '';\r\n    ?>\r\n    <details class=\"faq-item\">\r\n      <summary class=\"faq-question\">\r\n        <span class=\"faq-q-icon\">Q.</span>\r\n        <span class=\"faq-q-text\"><?php echo esc_html( $q ); ?></span>\r\n        <span class=\"faq-toggle-icon\"></span>\r\n      </summary>\r\n      <div class=\"faq-answer\">\r\n        <div class=\"faq-answer-inner\">\r\n          <span class=\"faq-a-icon\">A.</span>\r\n          <p><?php echo nl2br( esc_html( $a ) ); ?></p>\r\n        </div>\r\n      </div>\r\n    </details>\r\n    <?php endforeach; ?>\r\n  </div>\r\n\r\n  <?php\r\n  if ( $enable_schema ) :\r\n      $schema_entities = [];\r\n      foreach ( $faq_list as $faq ) {\r\n          $q = isset( $faq['faq_question'] ) ? $faq['faq_question'] : '';\r\n          $a = isset( $faq['faq_answer'] ) ? $faq['faq_answer'] : '';\r\n          \r\n          if ( ! empty( $q ) && ! empty( $a ) ) {\r\n              $schema_entities[] = [\r\n                  '@type'          => 'Question',\r\n                  'name'           => wp_strip_all_tags( $q ),\r\n                  'acceptedAnswer' => [\r\n                      '@type' => 'Answer',\r\n                      'text'  => nl2br( esc_html( $a ) )\r\n                  ]\r\n              ];\r\n          }\r\n      }\r\n\r\n      if ( ! empty( $schema_entities ) ) {\r\n          $schema_data = [\r\n              '@context'   => 'https://schema.org',\r\n              '@type'      => 'FAQPage',\r\n              'mainEntity' => $schema_entities\r\n          ];\r\n          echo '<script type=\"application/ld+json\">' . wp_json_encode( $schema_data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ) . '</script>';\r\n      }\r\n  endif;\r\n  ?>\r\n\r\n  <style>\r\n  .faq-accordion, .faq-accordion * { box-sizing: border-box; }\r\n  .faq-accordion p { margin: 0 !important; }\r\n  .faq-accordion {\r\n    width: 100%; \r\n    margin: 32px 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n  .faq-item { \r\n    background: #111622; \r\n    border: 1px solid #283042;\r\n    border-radius: 12px; \r\n    overflow: hidden;\r\n    transition: border-color 0.2s ease;\r\n  }\r\n  .faq-item:hover {\r\n    border-color: #3d4a60;\r\n  }\r\n  .faq-item[open] {\r\n    border-color: #00d2d3;\r\n  }\r\n  .faq-question {\r\n    cursor: pointer; \r\n    display: flex;\r\n    align-items: center;\r\n    padding: 20px 24px; \r\n    position: relative; \r\n    list-style: none;\r\n    user-select: none;\r\n  }\r\n  .faq-question::-webkit-details-marker { display: none; }\r\n  \r\n  .faq-q-icon {\r\n    color: #00d2d3;\r\n    font-family: \"Courier New\", Courier, monospace;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    margin-right: 12px;\r\n    flex-shrink: 0;\r\n  }\r\n  .faq-q-text {\r\n    color: #ffffff; \r\n    font-weight: 600; \r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n    flex-grow: 1;\r\n    padding-right: 24px;\r\n  }\r\n  .faq-toggle-icon {\r\n    position: absolute;\r\n    right: 24px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n  .faq-toggle-icon::before,\r\n  .faq-toggle-icon::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    background: #8b92a5;\r\n    transition: transform 0.3s ease, background-color 0.2s ease;\r\n  }\r\n  .faq-toggle-icon::before {\r\n    top: 7px; left: 0; width: 16px; height: 2px;\r\n  }\r\n  .faq-toggle-icon::after {\r\n    top: 0; left: 7px; width: 2px; height: 16px;\r\n  }\r\n  .faq-item:hover .faq-toggle-icon::before,\r\n  .faq-item:hover .faq-toggle-icon::after {\r\n    background: #ffffff;\r\n  }\r\n  .faq-item[open] .faq-toggle-icon::after {\r\n    transform: rotate(90deg);\r\n  }\r\n  .faq-item[open] .faq-toggle-icon::before,\r\n  .faq-item[open] .faq-toggle-icon::after {\r\n    background: #00d2d3;\r\n  }\r\n  .faq-answer { \r\n    border-top: 1px solid #283042;\r\n    background: #0d111a;\r\n  }\r\n  .faq-answer-inner {\r\n    display: flex;\r\n    padding: 24px;\r\n  }\r\n  .faq-a-icon {\r\n    color: #8b92a5;\r\n    font-family: \"Courier New\", Courier, monospace;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    margin-right: 12px;\r\n    flex-shrink: 0;\r\n  }\r\n  .faq-answer-inner p {\r\n    color: #b4b9c9;\r\n    font-size: 15px; \r\n    line-height: 1.7;\r\n    margin: 2px 0 0 !important;\r\n  }\r\n  @media (max-width: 480px) {\r\n    .faq-question { padding: 16px; }\r\n    .faq-answer-inner { padding: 16px; }\r\n    .faq-toggle-icon { right: 16px; }\r\n    .faq-q-text { font-size: 15px; padding-right: 16px; }\r\n    .faq-answer-inner p { font-size: 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": ""
  }
]