범용 편집기에 사용하도록 구성된 블록 만들기 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으로 병합하기 전 가져오기 요청을 통해 다른 분기에서 개발하고 모든 변경 사항을 검토하여 개발 모범 사례를 따라야 합니다.

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": "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 폴더에서 다음 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 분기에서 개발하지 않으면 범용 편집기 위치 표시줄에서 ?ref=<branch>를 추가하여 분기에서 페이지를 로드할 수 있습니다. 프로젝트 미리보기 또는 라이브 URL(예: https://<branch>--<repo>--<owner>.hlx.page)에 사용되는 것처럼 <branch>는 분기 이름입니다.

문서 기반 작성을 위한 블록 재사용 reusing-blocks

동일한 콘텐츠 모델을 준수하는 경우 문서 기반 저작을 위한 범용 편집기를 사용하여 WYSIWYG 작성을 위해 만든 블록을 사용할 수 있습니다.

자세한 내용은 WYSIWYG 및 문서 기반 작성을 위한 블록 문서를 참조하십시오.

다음 단계 next-steps

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

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