Universal Editor에 사용하도록 구성된 블록 만들기 create-block

Edge Delivery Services 프로젝트를 사용하여 WYSIWYG 작성에서 유니버설 편집기와 함께 사용할 수 있도록 계측된 블록을 만드는 방법을 알아봅니다.

사전 요구 사항 prerequisites

이 안내서는 Edge Delivery Services 프로젝트를 사용하여 WYSIWYG 작성에서 유니버설 편집기용으로 계측된 블록을 만드는 방법에 대한 단계별 지침을 제공합니다. 구성 요소 추가, Universal Editor에서 구성 요소 정의 로드, 페이지 게시, 블록 장식 및 스타일 구현, 변경 사항을 프로덕션에 적용하고 확인하는 방법을 다룹니다. 이 안내서를 완료하면 자체 프로젝트에 대한 새 블록을 만들어 배포할 수 있습니다.

이 안내서에서는 유니버설 편집기와 Edge Delivery Services 프로젝트를 사용하여 WYSIWYG 작성에 대한 기존 지식이 반드시 필요합니다. 이 안내서를 시작하기 전에 Edge Delivery Services에 액세스하고 다음을 포함한 기본 사항을 숙지해야 합니다.

이 안내서는 Edge Delivery Services을 사용하여 WYSIWYG 작성을 위한 개발자 시작 안내서 안내서에서 수행한 작업을 기반으로 합니다.

프로젝트에 새로운 블록 추가 add-block

이 안내서에서는 페이지에서 기억에 남는 인용을 렌더링하는 블록을 작성합니다.

이 예를 단순화하기 위해 프로젝트 저장소의 main 분기에 모든 변경 사항이 적용됩니다. 물론 실제 프로젝트에서는 main으로 병합하기 전 가져오기 요청을 통해 다른 분기에서 개발하고 모든 변경 사항을 검토하여 개발 모범 사례를 따라야 합니다.

Adobe는 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": "text-area", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text-input", "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 폴더에서 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. quote 폴더에 다음 CSS 코드를 추가하여 블록의 스타일을 정의할 quote.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 분기에서 개발하지 않으면 Universal Editor 위치 표시줄에서 ?ref=<branch>를 추가하여 분기에서 페이지를 로드할 수 있습니다. 프로젝트 미리보기 또는 라이브 URL(예: https://<branch>--<repo>--<owner>.hlx.page)에 사용되는 것처럼 <branch>는 분기 이름입니다.

새 모델을 사용한 콘텐츠 게시는 모델이 main 분기에 병합된 경우에만 지원됩니다.

다음 단계 next-steps

블록을 생성하는 방법을 알았으므로 린 개발자 경험을 달성하기 위해 의미론적 방식으로 콘텐츠의 모델링 방법을 이해하는 것이 중요합니다.

Edge Delivery Services 프로젝트를 사용하여 WYSIWYG 작성을 위한 콘텐츠 모델링 문서를 참조하여 Edge Delivery Services 프로젝트를 사용하여 WYSIWYG 작성을 위한 콘텐츠 모델링이 작동하는 방식을 알아보십시오.