[
  {
    "id": 3591,
    "title": "タブ_P-34",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M224,56V96H32V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" fill=\"#9aa8c9\"/><path d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V88H40V56Zm0,144H40V104H216v96Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "タブ",
      "tabs",
      "切り替え",
      "レイアウト・デザイン"
    ],
    "slug": "lazyblock/f-tabs-pro",
    "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_1de578a773": {
        "type": "panel",
        "name": "",
        "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": "",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\" fill=\"#dbea88\"><path d=\"M224,56V168a8,8,0,0,1-8,8H192V88a8,8,0,0,0-8-8H64V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" opacity=\"0.2\"/><path d=\"M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,88H184v16H40ZM184,200H40V120H184v80Zm32-32H200V88a16,16,0,0,0-16-16H72V56H216Z\"/></svg>",
        "initial_open": "true",
        "endpoint": "false"
      },
      "control_e97840f622": {
        "type": "select",
        "name": "tab_style",
        "default": "standard",
        "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": "",
        "choices": [
          {
            "label": "標準（背景塗りつぶし）",
            "value": "standard"
          },
          {
            "label": "アンダーライン",
            "value": "underline"
          },
          {
            "label": "ボックス",
            "value": "boxed"
          }
        ],
        "allow_null": "false",
        "multiple": "false",
        "output_format": ""
      },
      "control_5e4a6c474a": {
        "type": "number",
        "name": "tab_default_active",
        "default": 0,
        "label": "最初に開くタブ",
        "help": "0が1番目のタブです。1なら2番目のタブが最初に開いた状態になります。",
        "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": "",
        "min": 0,
        "max": 99,
        "step": 1
      },
      "control_aba5078f3c": {
        "type": "panel",
        "name": "",
        "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": "",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\" fill=\"#dbea88\"><path d=\"M224,56V168a8,8,0,0,1-8,8H192V88a8,8,0,0,0-8-8H64V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" opacity=\"0.2\"/><path d=\"M216,40H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V184h16a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,88H184v16H40ZM184,200H40V120H184v80Zm32-32H200V88a16,16,0,0,0-16-16H72V56H216Z\"/></svg>",
        "initial_open": "false",
        "endpoint": "false"
      },
      "control_c6c8ba5b71": {
        "type": "toggle",
        "name": "tab_mobile_dropdown",
        "default": "true",
        "label": "スマホ表示時にドロップダウン化",
        "help": "480px以下の画面幅で、タブの見出しをセレクトボックスに切り替えます。",
        "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_498fac732a": {
        "type": "toggle",
        "name": "tab_keyboard_nav",
        "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": ""
      },
      "control_afe0f37e8d": {
        "type": "repeater",
        "name": "tab_list",
        "default": "",
        "label": "タブ一覧",
        "help": "「＋タブを追加」から、タブを1つずつ追加してください。",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "rows_min": "1",
        "rows_max": "",
        "rows_label": "タブ",
        "rows_add_button_label": "タブを追加",
        "rows_collapsible": "true",
        "rows_collapsed": "false"
      },
      "control_7ce95007b4": {
        "type": "text",
        "name": "tab_label",
        "default": "",
        "label": "タブ名",
        "help": "",
        "child_of": "control_afe0f37e8d",
        "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_3ea74b5cc0": {
        "type": "rich_text",
        "name": "tab_content",
        "default": "",
        "label": "内容",
        "help": "",
        "child_of": "control_afe0f37e8d",
        "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\nif ( ! empty( $attributes['tab_list'] ) && is_array( $attributes['tab_list'] ) ) :\n\t$style           = $attributes['tab_style'] ?? 'standard';\n\t$default_active  = isset( $attributes['tab_default_active'] ) ? (int) $attributes['tab_default_active'] : 0;\n\t$mobile_dropdown = ! empty( $attributes['tab_mobile_dropdown'] );\n\t$keyboard_nav    = ! empty( $attributes['tab_keyboard_nav'] );\n\t$tabs            = $attributes['tab_list'];\n\t$count           = count( $tabs );\n\tif ( $default_active < 0 || $default_active >= $count ) {\n\t\t$default_active = 0;\n\t}\n\t$uid = 'tabs-' . substr( md5( serialize( $tabs ) . $default_active ), 0, 8 );\n?>\n<div class=\"tabs-block tabs-style-<?php echo esc_attr( $style ); ?><?php echo $mobile_dropdown ? ' tabs-has-mobile-dropdown' : ''; ?>\"\n\tid=\"<?php echo esc_attr( $uid ); ?>\"\n\tdata-keyboard-nav=\"<?php echo $keyboard_nav ? '1' : '0'; ?>\">\n\n\t<div class=\"tabs-nav\" role=\"tablist\">\n\t\t<?php foreach ( $tabs as $i => $tab ) : ?>\n\t\t\t<button type=\"button\"\n\t\t\t\tclass=\"tabs-nav-item<?php echo $i === $default_active ? ' is-active' : ''; ?>\"\n\t\t\t\trole=\"tab\"\n\t\t\t\taria-selected=\"<?php echo $i === $default_active ? 'true' : 'false'; ?>\"\n\t\t\t\taria-controls=\"<?php echo esc_attr( $uid . '-panel-' . $i ); ?>\"\n\t\t\t\ttabindex=\"<?php echo $i === $default_active ? '0' : '-1'; ?>\"\n\t\t\t\tdata-tab-index=\"<?php echo esc_attr( $i ); ?>\">\n\t\t\t\t<?php echo esc_html( $tab['tab_label'] ?? ( 'Tab ' . ( $i + 1 ) ) ); ?>\n\t\t\t</button>\n\t\t<?php endforeach; ?>\n\t</div>\n\n\t<?php if ( $mobile_dropdown ) : ?>\n\t<select class=\"tabs-mobile-select\" aria-label=\"タブを選択\">\n\t\t<?php foreach ( $tabs as $i => $tab ) : ?>\n\t\t\t<option value=\"<?php echo esc_attr( $i ); ?>\" <?php selected( $i, $default_active ); ?>>\n\t\t\t\t<?php echo esc_html( $tab['tab_label'] ?? ( 'Tab ' . ( $i + 1 ) ) ); ?>\n\t\t\t</option>\n\t\t<?php endforeach; ?>\n\t</select>\n\t<?php endif; ?>\n\n\t<?php foreach ( $tabs as $i => $tab ) : ?>\n\t\t<div class=\"tabs-panel<?php echo $i === $default_active ? ' is-active' : ''; ?>\"\n\t\t\trole=\"tabpanel\"\n\t\t\tid=\"<?php echo esc_attr( $uid . '-panel-' . $i ); ?>\"\n\t\t\tdata-tab-panel=\"<?php echo esc_attr( $i ); ?>\">\n\t\t\t<?php echo wp_kses_post( $tab['tab_content'] ?? '' ); ?>\n\t\t</div>\n\t<?php endforeach; ?>\n</div>\n<style>\n.tabs-block, .tabs-block * { box-sizing: border-box; }\n.tabs-block { margin: 24px 0; max-width: 680px; }\n.tabs-nav { display: flex; overflow-x: auto; gap: 4px; border-bottom: 2px solid #2c2c3a; -webkit-overflow-scrolling: touch; }\n.tabs-nav-item {\n\tbackground: none; border: none; cursor: pointer;\n\tpadding: 10px 18px; font-size: 14px; color: #666478;\n\twhite-space: nowrap; position: relative; flex-shrink: 0;\n}\n.tabs-nav-item.is-active { color: #111622; font-weight: 700; }\n.tabs-style-underline .tabs-nav-item.is-active::after {\n\tcontent: \"\"; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #00d2d3;\n}\n.tabs-style-standard .tabs-nav-item.is-active { background: #111622; color: #fff; border-radius: 6px 6px 0 0; }\n.tabs-style-boxed .tabs-nav-item { border: 1px solid #2c2c3a; border-radius: 6px; margin-bottom: -2px; }\n.tabs-style-boxed .tabs-nav-item.is-active { background: #FAC775; color: #111622; border-color: #FAC775; }\n.tabs-panel { display: none; padding: 20px 4px; font-size: 14px; color: #444460; line-height: 1.8; }\n.tabs-panel.is-active { display: block; }\n.tabs-mobile-select { display: none; width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #2c2c3a; border-radius: 6px; background: #fff; margin-bottom: 12px !important; }\n.tabs-mobile-select:focus { outline: 2px solid #00d2d3; }\n\n@media (max-width: 680px) {\n\t.tabs-nav-item { padding: 8px 14px; font-size: 13px; }\n}\n@media (max-width: 480px) {\n\t.tabs-has-mobile-dropdown .tabs-nav { display: none; }\n\t.tabs-has-mobile-dropdown .tabs-mobile-select { display: block; }\n}\n</style>\n<script>\ndocument.querySelectorAll('.tabs-block').forEach(function (block) {\n\tif (block.dataset.bound) return;\n\tblock.dataset.bound = 'true';\n\n\tvar buttons = Array.prototype.slice.call(block.querySelectorAll('.tabs-nav-item'));\n\tvar select  = block.querySelector('.tabs-mobile-select');\n\tvar keyboardNav = block.dataset.keyboardNav === '1';\n\n\tfunction activate(index) {\n\t\tbuttons.forEach(function (b) {\n\t\t\tb.classList.remove('is-active');\n\t\t\tb.setAttribute('aria-selected', 'false');\n\t\t\tb.setAttribute('tabindex', '-1');\n\t\t});\n\t\tblock.querySelectorAll('.tabs-panel').forEach(function (p) { p.classList.remove('is-active'); });\n\n\t\tvar btn = buttons[index];\n\t\tif (btn) {\n\t\t\tbtn.classList.add('is-active');\n\t\t\tbtn.setAttribute('aria-selected', 'true');\n\t\t\tbtn.setAttribute('tabindex', '0');\n\t\t}\n\t\tvar panel = block.querySelector('[data-tab-panel=\"' + index + '\"]');\n\t\tif (panel) panel.classList.add('is-active');\n\t\tif (select) select.value = String(index);\n\t}\n\n\tbuttons.forEach(function (btn, i) {\n\t\tbtn.addEventListener('click', function () { activate(i); });\n\t\tif (keyboardNav) {\n\t\t\tbtn.addEventListener('keydown', function (e) {\n\t\t\t\tvar next = null;\n\t\t\t\tif (e.key === 'ArrowRight') next = (i + 1) % buttons.length;\n\t\t\t\tif (e.key === 'ArrowLeft') next = (i - 1 + buttons.length) % buttons.length;\n\t\t\t\tif (next !== null) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tactivate(next);\n\t\t\t\t\tbuttons[next].focus();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t});\n\n\tif (select) {\n\t\tselect.addEventListener('change', function () {\n\t\t\tactivate(parseInt(select.value, 10));\n\t\t});\n\t}\n\n\tvar inEditor = document.body.classList.contains('block-editor-iframe__body') ||\n\t\tdocument.body.classList.contains('editor-styles-wrapper') ||\n\t\tdocument.body.classList.contains('wp-admin');\n\tif (inEditor) {\n\t\tblock.querySelectorAll('a[href]').forEach(function (a) {\n\t\t\ta.addEventListener('click', function (e) { e.preventDefault(); });\n\t\t});\n\t}\n});\n</script>\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": ""
  }
]