创建经过检测可与 Universal Editor 结合使用的区块 create-block

了解如何在WYSIWYG创作和Edge Delivery Services项目中创建指令用于通用编辑器的块。

先决条件 prerequisites

本指南提供了分步说明，介绍如何在WYSIWYG创作和Edge Delivery Services项目中创建针对通用编辑器的工具块。 它包括添加组件、在 Universal Editor 中加载组件定义、发布页面、实施区块装饰和样式、将更改引入生产环境以及验证更改。完成本指南后，您可以为自己的项目创建和部署新区块。

本指南需要用户了解有关Edge Delivery Services项目的WYSIWYG创作以及通用编辑器的现有知识。 在开始阅读本指南之前，您应有权访问 Edge Delivery Services 并熟悉其基础知识，其中包括：

本指南以用于WYSIWYG创作的Edge Delivery Services开发人员快速入门指南中完成的工作为基础。

向项目添加新区块 add-block

在本指南中，您将构建一个区块来在页面上呈现令人难忘的引用。

为了简化此示例，所有更改都针对项目存储库的 main 分支进行。当然，对于您的实际项目，您应遵循开发最佳实践，在不同的分支上进行开发，并在合并到 main 之前通过拉取请求检查所有更改。

Adobe 建议您采用三阶段方法来开发区块：

以下引用区块示例遵循此方法。

创建区块定义和模型 create-block-model

1&amp；period；在本地克隆您在用于WYSIWYG创作和Edge Delivery Services的开发人员快速入门指南中创建的GitHub项目，并在您选择的编辑器中打开它。

2&amp；句点；编辑项目根目录中的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&amp；句点；编辑项目根目录中的component-models.json文件，并为新报价块添加以下模型定义并保存该文件。

JSON示例

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

屏幕快照

4&amp；句点；编辑项目根目录中的component-filters.json文件，并将引用块添加到筛选器定义中，以允许将该块添加到任何部分并保存该文件。

JSON示例

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

屏幕快照

5&amp；句点；使用Git将这些更改提交到main分支。

使用区块创建内容 create-content

现在，已定义您的基本引用区块并将其提交到示例项目，您可以将引用区块添加到现有页面。

设置区块的样式 style-block

现在，您已使用一个可对其应用样式的引用区块。

1&amp；句点；返回到项目的编辑器。

2&amp；句点；在blocks文件夹下创建quote文件夹。

3&amp；句点；在新的quote文件夹中，添加quote.js文件以通过添加以下JavaScript实施块修饰并保存文件。

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&amp；句点；在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&amp；句点；使用Git将这些更改提交到main分支。

6&amp；句点；返回到Universal Editor的浏览器选项卡，您正在编辑项目的页面，请重新加载页面以查看样式化的块。

7&amp；句点；请参见页面上现在样式化的引号块。

8&amp；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 分支上进行开发时，可以在 Universal Editor 位置栏中追加 ?ref=<branch> 以从分支加载页面。<branch> 是分支名称，因为它将用于项目的预览或实时 URL，例如 https://<branch>--<repo>--<owner>.hlx.page。

仅在将新模型合并到 main 分支时，才支持使用该模型发布内容。

后续步骤 next-steps

现在您知道了如何创建块，接下来，了解如何以语义的方式对内容进行建模以实现精益的开发人员体验至关重要。

请参阅文档用于Edge Delivery Services项目的WYSIWYG创作的内容建模，了解内容建模如何用于Edge Delivery Services项目的WYSIWYG创作。