ユニバーサルエディターで使用するために実装されたブロックの作成 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. WYSIWYG Edge Delivery Services オーサリング用 開発者向けスタートガイドガイドで作成した 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&period；新しい 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&period；公開済みページに移動して、変更が実稼動環境にプッシュされたことを確認します。 リンクは、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）に使用されるブランチ名です。

新しいモデルを使用したコンテンツの公開は、モデルを main ブランチに結合した場合にのみサポートされます。

ドキュメントベースのオーサリングのためのブロックの再利用 reusing-blocks

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

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

次の手順 next-steps

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

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