ユニバーサルエディタで使用するために実装したブロックの作成 create-block

Edge Delivery Services プロジェクトを使用した WYSIWYG オーサリングで、ユニバーサルエディターでの使用に対して実装されたブロックを作成する方法について説明します。

前提条件 prerequisites

このガイドでは、Edge Delivery Services プロジェクトを使用した WYSIWYG オーサリングで、ユニバーサルエディター用に実装されたブロックを作成する方法を段階的に説明します。ここでは、コンポーネントの追加、ユニバーサルエディターでのコンポーネント定義の読み込み、ページの公開、ブロック装飾とスタイルの実装、実稼動環境への変更の反映および検証について説明します。このガイドを完了すると、独自のプロジェクト用に新しいブロックを作成してデプロイできます。

このガイドでは、Edge Delivery Services プロジェクトおよびユニバーサルエディターを使用した WYSIWYG オーサリングに関する既存の知識が必ず必要になります。このガイドを始める前に、Edge Delivery Services へのアクセス権を持ち、次の項目について基本事項を理解しておく必要があります。

このガイドは、Edge Delivery Services を使用した WYSIWYG オーサリングの開発者向け入門ガイドで行った作業に基づいています。

プロジェクトへの新しいブロックの追加 add-block

このガイドでは、記憶に残る引用をページ上にレンダリングするブロックを作成します。

この例を簡素化するために、すべての変更はプロジェクトリポジトリの main ブランチに対して行われます。実際のプロジェクトでは、main に結合する前に、別のブランチで開発し、プルリクエスト経由ですべての変更を確認するという、開発のベストプラクティスに従う必要があります。

アドビでは、次の 3 段階の方法でブロックを開発することをお勧めします。

次の引用ブロックの例は、この方法に従っています。

ブロック定義とモデルの作成 create-block-model

1. Edge Delivery Services を使用した WYSIWYG オーサリングの開発者向け入門ガイドで作成した GitHub プロジェクトをローカルにクローンし、選択したエディターで開きます。

2. プロジェクトのルートにある component-definition.json ファイルを編集し、新しい引用ブロックに次の定義を追加して、ファイルを保存します。

JSON の例

code language-json
{ "title": "Quote", "id": "quote", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Quote", "model": "quote", "quote": "<p>Think, McFly! Think!</p>", "author": "Biff Tannen" } } } } }

スクリーンショット

3. プロジェクトのルートにある component-models.json ファイルを編集し、新しい引用ブロックに次のモデル定義を追加して、ファイルを保存します。

JSON の例

code language-json
{ "id": "quote", "fields": [ { "component": "richtext", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text", "valueType": "string", "name": "author", "label": "Author", "value": "" } ] }

スクリーンショット

4. プロジェクトのルートにある component-filters.json ファイルを編集し、フィルター定義に引用ブロックを追加して、ブロックを任意のセクションに追加してファイルを保存できるようにします。

JSON の例

code language-json
{ "id": "section", "components": [ "text", "image", "button", "title", "hero", "cards", "columns", "quote" ] }

スクリーンショット

5. Git を使用して、これらの変更を main 分岐にコミットします。

ブロックを使用したコンテンツの作成 create-content

基本的な引用ブロックが定義され、サンプルプロジェクトにコミットされたので、既存のページに引用ブロックを追加できます。

ブロックのスタイル設定 style-block

作業用の引用ブロックを作成したので、スタイル設定を適用できます。

1. プロジェクトのエディターに戻ります。

2. blocks フォルダーの下に quote フォルダーを作成します。

3. 新しい quote フォルダーに、次の JavaScript を追加してブロック装飾を実装する quote.js ファイルを追加し、ファイルを保存します。

JavaScript の例

code language-javascript
export default function decorate(block) { const [quoteWrapper] = block.children; const blockquote = document.createElement('blockquote'); blockquote.textContent = quoteWrapper.textContent.trim(); quoteWrapper.replaceChildren(blockquote); }

スクリーンショット

4. quote フォルダーに quote.css ファイルを追加し、次の CSS コードを追加してブロックのスタイル設定を定義し、ファイルを保存します。

CSS の例

code language-css

.block.quote { background-color: #ccc; padding: 0 0 24px; display: flex; flex-direction: column; margin: 1rem 0; } .block.quote blockquote { margin: 16px; text-indent: 0; } .block.quote > div:last-child > div { margin: 0 16px; font-size: small; font-style: italic; position: relative; } .block.quote > div:last-child > div::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; height: 5px; width: 30px; background-color: darkgray; }

スクリーンショット

5. Git を使用して、これらの変更を main 分岐にコミットします。

6. プロジェクトのページを編集していたユニバーサルエディターの「ブラウザー」タブに戻り、ページをリロードしてスタイル設定されたブロックを表示します。

7. ページ上でスタイル設定された引用ブロックを表示します。

8. 公開済みページに移動して、変更が実稼動環境にプッシュされたことを確認します。リンクは、https://<branch>--<repo>--<owner>.hlx.page のようになります。

これで完了です。完全に機能し、スタイル設定された引用ブロックが作成されました。この例を基礎として、独自のプロジェクト固有のブロックを設計できます。

ブロックオプション block-options

特定の状況に基づいてブロックの外観や動作を少し変更する必要があるが、それ自体が新しいブロックになるほどの違いがない場合は、作成者がブロックオプションから選択できます。

ブロックに classes プロパティを追加すると、このプロパティは、単純なブロックの場合はテーブルヘッダーに、コンテナブロック内にある項目の場合は値リストとしてレンダリングされます。

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

他の作業用ブランチの使用 other-branches

このガイドでは、わかりやすくするために main ブランチに直接コミットするようにしました。サンプルリポジトリでの実験の場合、これは通常問題になりません。実際のプロジェクト作業では、main に結合する前に、別のブランチで開発し、プルリクエスト経由ですべての変更を確認することで、開発のベストプラクティスに従う必要があります。

main ブランチで開発していない場合は、ユニバーサルエディターのロケーションバーに ?ref=<branch> を追加して、ブランチからページを読み込むことができます。<branch> は、プロジェクトのプレビューまたはライブ URL（例：https://<branch>--<repo>--<owner>.hlx.page）に使用されるブランチ名です。

ドキュメントベースのオーサリング用にブロックを再使用する reusing-blocks

同じコンテンツモデルに従う場合は、ユニバーサルエディターを使用して WYSIWYG オーサリング用に作成したブロックを、ドキュメントベースのオーサリングに使用できます。

詳しくは、WYSIWYG とドキュメントベースのオーサリング用のブロックを参照してください。

次の手順 next-steps

これでブロックの作成方法がわかったので、コンテンツのセマンティックモデルを作成して効率的な開発者エクスペリエンスを実現する方法を理解することが不可欠です。

Edge Delivery プロジェクトでの WYSIWYG オーサリングにコンテンツモデリングがどのように機能するかについては、Edge Delivery プロジェクトでの WYSIWYG オーサリング用のコンテンツモデリングのドキュメントを参照してください。