사용자가 설정할 수 있는 블록

갑자기 주어진 상황!

• 블록을 제작하는 중에 블록의 사용자가 <h1> 태그 내 “색상, 글자 크기나 컨텐츠 일부를 직접 수정할 수 있도록 지원” 해달라는 요청이 왔어요.
• 사용자는 아쉽게도 코드를 직접 수정하지 못하는 분이어서, 컨텐츠와 디자인을 바꾸고 싶을 때마다 항상 코드 수정을 위해 연락이 와요. 😢

사용자가 설정할 수 있는 블록

블록 문법을 활용하면 사용자가 코드 변경 없이도 블록을 설정해 직접 블록의 컨텐츠와 디자인, 동작을 설정할 수 있도록 지원할 수 있어요.

1. 세팅 빌더를 통해 블록에서 지원하려는 설정 가능한(커스터마이징 가능한) 세팅을 정의.
2. 설정 값들을 블록 코드상에서 컨텍스트(Context)를 통해 접근하고 사용하도록 지원.
3. 사용자는 에디터에서 웹사이트 제작 시 블록을 페이지에 삽입하고 입맛에 맞게 설정!

{
	// 웹사이트에 삽입된 각 블록의 고유한 ID 에요.
	"id": "...",
	// 사용자가 설정한 블록 설정 값이 property 내에 포함되어 있어요.
	"property": {
		"myHelloPhrase": "🖐🏻",
		"myColor": "blue",
		"myFontSize": 36,
	},
	...
}

세팅 빌더를 통해 정의된 설정들(property)과 각 설정의 값들을 포함한 컨텍스트(Context) 객체 예시

<style>

	h1 {
		color: {{property.myColor}};
		font-size: {{property.myFontSize}}px;
	}

</style>

<template>

	<h1>{{property.myHelloPhrase}} 블록!</h1>
	<ul>
		<li>제목 색상: {{property.myColor}}</li>
		<li>제목 사이즈: {{property.myFontSize}}px</li>
	</ul>
	<button>설명 보기</button>

</template>

<script>

	const container = bm.container;
	const context = bm.context;

	function clicked(e) {

		e.preventDefault();

		if (e.target.matches('button')) {

			const myColor = context.property.myColor;
			const myFontSize = context.property.myFontSize;

			alert(`제목 색상은 ${myColor}이고 사이즈는 ${myFontSize}px 이에요!`);
		}
	}

	container.addEventListener('click', clicked, true);

</script>

이제 사용자는 <h1> 의 색상과 글자 크기를 설정할 수 있고, "안녕"이라는 문구를 고쳐 쓸 수 있어요.

컨텍스트(Context)

• 컨텍스트(Context)는 블록의 UI를 그리거나 블록 동작에 참고 및 활용할 수 있는 데이터를 담고 있는 일종의 JSON 객체(Object)에요.
• 컨텍스트 객체 내에는 id 필드가 존재하고, 동일한 블록이라도 여러 위치에 삽입되면 각각 고유한 ID를 가져요.
• 블록을 만드는 과정에서 세팅 빌더를 통해서 정의한 세팅(Setting)과 설정 값(디폴트 값 혹은 사용자가 설정한 값)들이 컨텍스트 객체 내 property 라는 객체 내에 키와 값이 전달돼요.
• 세팅 빌더와 컨텍스트 객체 내 property 를 활용하여 블록을 제작하면, 한 번 제작한 블록에서 코드 수정 없이도 사용자가 UI나 동작을 에디터에서 설정할 수 있도록 블록을 제작할 수 있어요.
• 컨텍스트 객체는 <style> , <template> , <script> 모든 태그 내에서 접근해 활용할 수 있어요.
  • <style>: Handlebars.js 문법을 통해서 컨텍스트 객체에 접근할 수 있어요.
  • <template>: Handlebars.js 문법을 통해서 컨텍스트 객체에 접근할 수 있어요.
  • <script>: bm.context를 통해서 컨텍스트 객체에 접근할 수 있어요.
• 컨텍스트 객체는 id, property 외의 다른 상황에도 사용돼요.
  • 자세한 내용은 <data> 태그 내용을 함께 참고해주세요.

🙋🏻 Handlebars.js 문법이 어려워 보이는데 혹시 다 알아야 할까요?

사용자가 설정한 값을 HTML/CSS에서 단순히 읽어서 사용하시는 경우에는 모든 문법을 자세히 알 필요 없이 property 값에 접근하기 위한 {{property.*}} 문법만 기억해도 괜찮아요!