옵션이 있는 블록 개발

이 튜토리얼에서는 select(드롭다운) 입력 유형을 사용하는 방법을 보여 줍니다. 이렇게 하면 작성자가 단일 블록 옵션을 선택하여 해당하는 단일 CSS 클래스로 적용할 수 있습니다.

{align="center"}

블록 모델

기본 옵션은 빈 문자열("")로 표시되며, 병렬 옵션은 "side-by-side"를 사용합니다. 옵션 이름 ​과 값 ​이 꼭 같을 필요는 없지만 값 ​은 블록의 HTML에 적용되는 CSS 클래스를 결정합니다. 예를 들어 병렬 옵션의 값은 side-by-side가 아닌 layout-10일 수 있습니다. 그러나 옵션 값의 명확성과 일관성을 보장하려면 CSS 클래스에 의미 있는 이름을 사용하는 것이 가장 좋습니다.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="아래 코드 샘플의 파일 이름입니다."}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            }
        ]
    }
]
...

블록 HTML

작성자가 옵션을 선택하면 해당 값이 CSS 클래스로 블록의 HTML에 추가됩니다.

• 기본 ​을 선택한 경우:

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 병렬 ​을 선택한 경우:

  code language-html
  <div class="block teaser side-by-side"> <!-- Block content here --> </div>

이를 통해 선택한 옵션에 따라 다양한 스타일과 조건부 JavaScript를 적용할 수 있습니다.

이 방법은 본 튜토리얼에서는 사용되지 않지만 대안적 방법과 고급 블록 옵션을 보여 줍니다.

select 입력 유형을 통해 작성자는 단일 블록 옵션을 선택할 수 있으며, 이는 선택적으로 여러 CSS 클래스에 매핑할 수 있습니다. 이렇게 하려면 CSS 클래스를 공백으로 구분된 값으로 나열합니다.

{align="center"}

블록 모델

예를 들어 병렬 옵션은 이미지가 왼쪽에 표시되는 경우(side-by-side left) 또는 오른쪽에 표시되는 경우(side-by-side right)와 같은 변형을 지원할 수 있습니다.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="아래 코드 샘플의 파일 이름입니다."}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side with Image on left",
                "value": "side-by-side left"
            },
            {
                "name": "Side-by-side with Image on right",
                "value": "side-by-side right"
            }
        ]
    }
]
...

블록 HTML

작성자가 옵션을 선택하면 해당 값이 블록의 HTML에 공백으로 구분된 CSS 클래스 세트로 적용됩니다.

• 기본 ​을 선택한 경우:

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 이미지가 왼쪽에 있는 병렬 ​을 선택한 경우:

  code language-html
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 이미지가 오른쪽에 있는 병렬 ​을 선택한 경우:

  code language-html
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

이를 통해 선택한 옵션에 따라 다양한 스타일과 조건부 JavaScript를 적용할 수 있습니다.

이 방법은 본 튜토리얼에서는 사용되지 않지만 대안적 방법과 고급 블록 옵션을 보여 줍니다.

"component": "multiselect" 입력 유형을 통해 작성자는 여러 옵션을 동시에 선택할 수 있습니다. 이렇게 하면 여러 가지 디자인 선택을 결합하여 블록의 모양을 복잡하게 변형할 수 있습니다.

{align="center"}

블록 모델

예를 들어 병렬, 이미지를 왼쪽에 배치 및 이미지를 오른쪽에 배치 옵션은 이미지가 왼쪽에 위치하는 경우(side-by-side left) 또는 오른쪽에 위치하는 경우(side-by-side right)와 같은 변형을 지원할 수 있습니다.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="아래 코드 샘플의 파일 이름입니다."}

...
"fields": [
    {
        "component": "multiselect",
        "name": "classes",
        "value": [],
        "label": "Teaser options",
        "valueType": "array",
        "options": [
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            },
            {
                "name": "Image on left",
                "value": "left"
            },
            {
                "name": "Image on right",
                "value": "right"
            }
        ]
    }
]
...

블록 HTML

작성자가 여러 옵션을 선택하면 해당 값이 블록의 HTML에 공백으로 구분된 CSS 클래스로 적용됩니다.

• 병렬 및 이미지를 왼쪽에 배치 ​을 선택한 경우:

  code language-none h-1
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 병렬 및 이미지를 오른쪽에 배치 ​을 선택한 경우:

  code language-none h-1
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

다중 선택은 유연성을 제공하지만 디자인 변형을 관리하는 데 복잡성을 증가시킵니다. 제한이 없으면 선택이 충돌하여 끊어진 경험이나 브랜드에 맞지 않는 경험을 초래할 수 있습니다.

예:

• 이미지를 왼쪽에 배치 또는 이미지를 오른쪽에 패치 ​를 병렬 ​과 함께 선택하지 않으면 암묵적으로 기본 ​이 적용되어 항상 이미지를 배경으로 설정하므로, 좌우 정렬은 중요하지 않습니다.
• 이미지를 왼쪽에 배치 ​와 이미지를 오른쪽에 패치 ​를 모두 선택할 수는 없습니다.
• 이미지를 왼쪽에 배치 또는 이미지를 오른쪽에 배치 없이 병렬 ​을 선택하면 이미지의 위치가 지정되지 않아 모호한 것으로 간주될 수 있습니다.

다중 선택을 사용할 때 문제가 발생하고 작성자가 혼란스러워지는 것을 방지하려면 옵션을 잘 계획하고 모든 조합을 충분히 테스트해야 합니다. 다중 선택은 레이아웃이 변경되는 선택보다는 “크게” 또는 “강조 표시”와 같이 간단하고 상충되지 않는 개선 작업에 가장 적합합니다.

이 방법은 본 튜토리얼에서는 사용되지 않지만 대안적 방법과 고급 블록 옵션을 보여 줍니다.

범용 편집기에서 페이지에 새로운 블록 인스턴스를 추가할 때 블록 옵션을 기본값으로 설정할 수 있습니다. 이 작업은 블록 정의에서 classes 속성의 기본값을 설정하여 수행됩니다.

블록 정의

아래 예제에서는 classes 필드의 value 속성을 side-by-side로 할당하여 기본 옵션을 병렬 ​로 설정합니다. 블록 모델의 해당 블록 옵션 입력은 선택 사항입니다.

동일한 블록에 대해 각각 다른 이름과 클래스를 사용하여 여러 항목을 정의할 수도 있습니다. 이를 통해 범용 편집기는 특정 블록 옵션으로 미리 구성된 고유한 블록 항목을 표시할 수 있습니다. 편집기에서는 이들이 별도의 블록으로 나타나지만 코드베이스에는 선택한 옵션에 따라 동적으로 렌더링되는 단일 블록이 포함됩니다.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="아래 코드 샘플의 파일 이름입니다."}

{
    "definitions": [{
      "title": "Teaser",
      "id": "teaser",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Teaser",
              "model": "teaser",
              "classes": "side-by-side",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

다음은 병렬 블록 옵션이 선택된 티저 블록의 DOM입니다. 이 블록은 JavaScript와 CSS를 사용하여 장식됩니다.

...
<body>
    <header/>
    <main>
        <div>
            <!-- Start block HTML -->
            <div class="teaser block side-by-side" data-block-name="teaser" data-block-status="loaded">
                <div>
                    <div>
                    <picture>
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=webply&optimize=medium">
                        <source type="image/jpeg" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
                        <img loading="eager" alt="Woman looking out over a river." src="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=jpeg&optimize=medium" width="1600" height="900">
                    </picture>
                    </div>
                </div>
                <div>
                    <div>
                    <h2 id="wknd-adventures">WKND Adventures</h2>
                    <p>Join us on one of our next adventures. Browse our list of curated experiences and sign up for one when you're ready to explore with us.</p>
                    <p>Terms and conditions: By signing up, you agree to the rules for participation and booking.</p>
                    <p class="button-container"><a href="/" title="View trips" class="button">View trips</a></p>
                    </div>
                </div>
            </div>
            <!-- End block HTML -->
        </div>
    </main>
    <footer/>
</body>
...

장식할 DOM을 찾으려면 로컬 개발 환경에서 블록이 포함된 페이지를 열고, 웹 브라우저의 개발자 도구를 사용하여 블록을 선택한 다음 DOM을 검사합니다. 이렇게 하면 장식에 적합한 요소를 식별할 수 있습니다.

{align="center"}