オプションを使用したブロックの開発

このチュートリアルでは、select（ドロップダウン）入力タイプを使用して作成者が単一のブロックオプションを選択し、単一の対応する CSS クラスとして適用する方法について説明します。

{align="center"}

ブロックモデル

「デフォルト」オプションでは、空の文字列（""）で表示され、「並べて表示」オプションでは、"side-by-side" が使用されます。オプションの​ 名前 ​と​ 値 ​は同じにする必要はありませんが、値 ​によってブロックの HTML に適用される CSS クラスが決定されます。例えば、「並べて表示」オプションの値は、side-by-side ではなく layout-10 に指定できます。ただし、オプション値の明確さと一貫性を確保することを目的に、CSS クラスには意味のある名前を使用することをお勧めします。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下のコードサンプルのファイル名。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            }
        ]
    }
]
...

ブロックの HTML

作成者が次のオプションを選択すると、対応する値が CSS クラスとしてブロックの HTML に追加されます。

• 「デフォルト」を選択した場合：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 「並べて表示」を選択した場合：

  code language-html
  <div class="block teaser side-by-side"> <!-- Block content here --> </div>

これにより、選択したオープンに応じて、異なるスタイル設定と条件付き JavaScript を適用できます。

このチュートリアルでは、このアプローチは使用しませんが、代替方法と高度なブロックオプションについて説明します。

select 入力タイプを使用すると、作成者は単一のブロックオプションを選択し、オプションで複数の CSS クラスにマッピングできます。これを行うには、CSS クラスをスペース区切り値としてリストします。

{align="center"}

ブロックモデル

例えば、「並べて表示」オプションでは、画像が左側（side-by-side left）または右側（side-by-side right）に表示されるバリエーションをサポートできます。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下のコードサンプルのファイル名。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side with Image on left",
                "value": "side-by-side left"
            },
            {
                "name": "Side-by-side with Image on right",
                "value": "side-by-side right"
            }
        ]
    }
]
...

ブロックの HTML

作成者が次のオプションを選択すると、対応する値がブロックの HTML 内のスペース区切りセットの CSS クラスとして適用されます。

• 「デフォルト」を選択した場合：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 「画像を左に並べて表示」を選択した場合：

  code language-html
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 「画像を右に並べて表示」を選択した場合：

  code language-html
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

これにより、選択したオプションに応じて、異なるスタイル設定と条件付き JavaScript を適用できます。

このチュートリアルでは、このアプローチは使用しませんが、代替方法と高度なブロックオプションについて説明します。

"component": "multiselect" の入力タイプを使用すると、作成者は複数のオプションを同時に選択できます。これにより、複数のデザイン選択を組み合わせて、ブロックの外観を複雑に並べ替えることができます。

{align="center"}

ブロックモデル

例えば、「並べて表示」、「画像を左に」、「画像を右に」では、画像が左側（side-by-side left）または右側（side-by-side right）に配置されるバリエーションをサポートできます。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下のコードサンプルのファイル名。"}

...
"fields": [
    {
        "component": "multiselect",
        "name": "classes",
        "value": [],
        "label": "Teaser options",
        "valueType": "array",
        "options": [
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            },
            {
                "name": "Image on left",
                "value": "left"
            },
            {
                "name": "Image on right",
                "value": "right"
            }
        ]
    }
]
...

ブロックの HTML

作成者が次の複数オプションを選択すると、対応する値がブロックの HTML 内のスペース区切りの CSS クラスとして適用されます。

• 「並べて表示」および「画像を左に」を選択した場合：

  code language-none h-1
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 「並べて表示」および「画像を右に」を選択した場合：

  code language-none h-1
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

複数選択には柔軟性がありますが、デザインの並べ替えの管理が複雑になります。制限がないと、選択内容が競合して、破損したエクスペリエンスやオフブランドのエクスペリエンスが生じる可能性があります。

例：

• 「並べて表示」を選択せずに「画像を左に」または「画像を右に」を選択すると、暗黙的に「デフォルト」が適用され、画像が常に背景として設定されるので、左揃えと右揃えは無関係になります。
• 「画像を左に」と「画像を右に」の両方を選択すると矛盾が生じます。
• 「画像を左に」または「画像を右に」を指定せずに「並べて表示」を選択すると、画像の位置が指定されていないので、曖昧と見なされる場合があります。

複数選択を使用する際に問題が発生したり、作成者が混乱したりしないようにするには、オプションを適切に計画し、すべての並べ替えをテストする必要があります。複数選択は、レイアウトを変更する選択肢ではなく、「大きい」や「ハイライト表示」などのシンプルで競合しない機能強化に最適です。

このチュートリアルでは、このアプローチは使用しませんが、代替方法と高度なブロックオプションについて説明します。

ユニバーサルエディターでページに新しいブロックインスタンスを追加する際に、ブロックオプションをデフォルトとして設定できます。これを行うには、ブロックの定義で classes プロパティのデフォルト値を設定します。

ブロックの定義

次の例では、classes フィールドの value プロパティを side-by-side に割り当てることで、デフォルトのオプションが「並べて表示」に設定されています。ブロックモデルの対応するブロックオプション入力はオプションです。

また、同じブロックに対して、それぞれ異なる名前とクラスを持つ複数のエントリを定義することもできます。これにより、ユニバーサルエディターでは、それぞれ特定のブロックオプションが事前設定された個別のブロックエントリを表示できます。これらはエディターでは個別のブロックとして表示されますが、コードベースには、選択したオプションに基づいて動的にレンダリングされる単一のブロックが含まれています。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下のコードサンプルのファイル名。"}

{
    "definitions": [{
      "title": "Teaser",
      "id": "teaser",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Teaser",
              "model": "teaser",
              "classes": "side-by-side",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

次は、JavaScript と CSS を使用して装飾するターゲットとなる、「並べて表示」ブロックオプションが選択されたティーザーブロックの DOM です。

...
<body>
    <header/>
    <main>
        <div>
            <!-- Start block HTML -->
            <div class="teaser block side-by-side" data-block-name="teaser" data-block-status="loaded">
                <div>
                    <div>
                    <picture>
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=webply&optimize=medium">
                        <source type="image/jpeg" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
                        <img loading="eager" alt="Woman looking out over a river." src="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=jpeg&optimize=medium" width="1600" height="900">
                    </picture>
                    </div>
                </div>
                <div>
                    <div>
                    <h2 id="wknd-adventures">WKND Adventures</h2>
                    <p>Join us on one of our next adventures. Browse our list of curated experiences and sign up for one when you're ready to explore with us.</p>
                    <p>Terms and conditions: By signing up, you agree to the rules for participation and booking.</p>
                    <p class="button-container"><a href="/" title="View trips" class="button">View trips</a></p>
                    </div>
                </div>
            </div>
            <!-- End block HTML -->
        </div>
    </main>
    <footer/>
</body>
...

装飾する DOM を見つけるには、ローカル開発環境でブロックを含むページを開き、web ブラウザーの開発者ツールを使用してブロックを選択して DOM を検査します。これにより、装飾する関連要素を識別できます。

{align="center"}