[
  {
    "id": 3327,
    "title": "メリット・デメリット_P-33",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M80,104V208H32a8,8,0,0,1-8-8V112a8,8,0,0,1,8-8Z\" fill=\"#9aa8c9\"/><path d=\"M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "メリット",
      "デメリット",
      "比較・レビュー",
      "メリット・デメリット"
    ],
    "slug": "lazyblock/f-pros-cons",
    "description": "プラグインやツールのレビュー記事には欠かせない、良い部分と注意すべき部分を左右で比較できるブロックです。PCでは横並びで見やすく、スマホでは縦積みに切り替わるレスポンシブ設計にしています。",
    "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_0f99904aca": {
        "type": "repeater",
        "name": "pros_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_7e999a419b": {
        "type": "text",
        "name": "pro_text",
        "default": "",
        "label": "メリット内容",
        "help": "",
        "child_of": "control_0f99904aca",
        "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_5d4af9433e": {
        "type": "repeater",
        "name": "cons_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_7afa2b4fbc": {
        "type": "text",
        "name": "con_text",
        "default": "",
        "label": "デメリット内容",
        "help": "",
        "child_of": "control_5d4af9433e",
        "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$pros = isset( $attributes['pros_list'] ) && is_array( $attributes['pros_list'] ) ? $attributes['pros_list'] : [];\r\n$cons = isset( $attributes['cons_list'] ) && is_array( $attributes['cons_list'] ) ? $attributes['cons_list'] : [];\r\n?>\r\n\r\n<?php if ( empty( $pros ) && empty( $cons ) ) : ?>\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=\"pros-cons-wrapper\">\r\n    \r\n    <div class=\"pros-box\">\r\n      <div class=\"pros-title\"><span class=\"pros-icon\">&#10003;</span> メリット</div>\r\n      <ul class=\"pros-list\">\r\n        <?php foreach ( $pros as $p ) : ?>\r\n          <?php if ( ! empty( $p['pro_text'] ) ) : ?>\r\n            <li><?php echo esc_html( $p['pro_text'] ); ?></li>\r\n          <?php endif; ?>\r\n        <?php endforeach; ?>\r\n      </ul>\r\n    </div>\r\n    \r\n    <div class=\"cons-box\">\r\n      <div class=\"cons-title\"><span class=\"cons-icon\">&#10005;</span> デメリット</div>\r\n      <ul class=\"cons-list\">\r\n        <?php foreach ( $cons as $c ) : ?>\r\n          <?php if ( ! empty( $c['con_text'] ) ) : ?>\r\n            <li><?php echo esc_html( $c['con_text'] ); ?></li>\r\n          <?php endif; ?>\r\n        <?php endforeach; ?>\r\n      </ul>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <style>\r\n  .pros-cons-wrapper, .pros-cons-wrapper * { box-sizing: border-box; }\r\n  .pros-cons-wrapper ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }\r\n  .pros-cons-wrapper {\r\n    display: flex;\r\n    gap: 24px;\r\n    margin: 32px 0;\r\n    width: 100%;\r\n  }\r\n  .pros-box, .cons-box {\r\n    flex: 1;\r\n    background: #111622;\r\n    border: 1px solid #283042;\r\n    border-radius: 12px;\r\n    padding: 24px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n  }\r\n  .pros-box { border-top: 4px solid #00d2d3; }\r\n  .cons-box { border-top: 4px solid #ff6b6b; }\r\n  \r\n  .pros-title, .cons-title {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    margin-bottom: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n  .pros-title { color: #00d2d3; }\r\n  .cons-title { color: #ff6b6b; }\r\n  \r\n  .pros-icon, .cons-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 24px;\r\n    height: 24px;\r\n    border-radius: 50%;\r\n    font-size: 12px;\r\n    color: #11151f;\r\n  }\r\n  .pros-icon { background: #00d2d3; }\r\n  .cons-icon { background: #ff6b6b; }\r\n  \r\n  .pros-list li, .cons-list li {\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    margin-bottom: 14px !important;\r\n    position: relative !important;\r\n    padding-left: 20px !important; \r\n    list-style: none !important;\r\n  }\r\n  .pros-list li:last-child, .cons-list li:last-child {\r\n    margin-bottom: 0 !important;\r\n  }\r\n  .pros-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 9px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #00d2d3;\r\n  }\r\n  .cons-list li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 9px;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #ff6b6b;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .pros-cons-wrapper { flex-direction: column; gap: 20px; }\r\n    .pros-box, .cons-box { padding: 20px; }\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": ""
  }
]