왜 블록 에디터 UX를 확장해야 할까?

왜 블록 에디터 UX를 확장해야 할까?

기본 블록만으로는 복잡한 스타일링이나 편집자 요구에 한계가 있음.
커스텀 블록 또는 기존 블록에 추가 옵션 UI를 삽입함으로써
편집자가 직접 스타일을 선택하거나 값을 지정할 수 있어
반복되는 커스터마이징 작업을 GUI 수준으로 단순화할 수 있다.

---

1. Inspector Controls란?

Inspector Controls는 블록 선택 시 우측 패널(사이드바)에 표시되는 설정 UI 영역을 말한다.

jsx

복사편집

import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, ToggleControl } from '@wordpress/components';

예를 들어 특정 블록에 그림자 효과를 주고 싶다면:

jsx

복사편집

<InspectorControls> <PanelBody title="디자인 설정" initialOpen={true}> <ToggleControl label="그림자 사용" checked={shadowEnabled} onChange={(value) => setAttributes({ shadowEnabled: value })} /> </PanelBody> </InspectorControls>

---

2. Sidebar 설정 UI 요소 구성

워드프레스는 다양한 입력 요소를 기본 컴포넌트로 제공한다.

컴포넌트용도

TextControl	텍스트 입력
SelectControl	옵션 선택
ColorPalette	색상 선택
ToggleControl	스위치 토글
RangeControl	수치 슬라이더
UnitControl	단위 포함 숫자 입력(px, %, em 등)
FontSizePicker	폰트 크기 선택

 

이 컴포넌트들은 @wordpress/components에서 불러온다.

---

3. 예제: 배경색 + 여백 조절 UI 삽입

jsx

복사편집

import { PanelBody, ColorPalette, RangeControl } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; <InspectorControls> <PanelBody title="스타일 설정" initialOpen={true}> <ColorPalette value={backgroundColor} onChange={(color) => setAttributes({ backgroundColor: color })} /> <RangeControl label="패딩" value={padding} onChange={(value) => setAttributes({ padding: value })} min={0} max={100} /> </PanelBody> </InspectorControls>

---

4. 속성값에 따라 블록 스타일 적용하기

jsx

복사편집

const blockProps = useBlockProps({ style: { backgroundColor: attributes.backgroundColor, padding: attributes.padding + 'px' } });

프론트 출력용 save.js에서도 동일한 로직으로 스타일 적용 가능

---

5. 커스텀 컨트롤 예시

커스텀 클래스 추가

jsx

복사편집

<TextControl label="추가 클래스" value={attributes.customClass} onChange={(val) => setAttributes({ customClass: val })} />

jsx

복사편집

const blockProps = useBlockProps({ className: attributes.customClass });

---

6. 고급 UI 설계 팁

전략설명

옵션 그룹화	PanelBody로 그룹 나눔
기본값 설정	attributes에 default 값 미리 정의
조건부 렌더링	특정 속성 값에 따라 UI 동적 노출
폴더 분리 구조	controls/, panels/, hooks/ 폴더 등으로 UI 구성 코드 관리
아이콘 사용	설정 UI를 직관적으로 구성

 

---

7. 블록 에디터 UX 확장을 위한 플러그인/툴

도구기능

@wordpress/components	모든 UI 요소 제공
@wordpress/data	상태 관리
@wordpress/hooks	전역 필터/액션 시스템
block.json	속성, 스크립트 선언
create-block	블록 개발 CLI 자동화

 

---

블록 UX 확장 체크리스트

항목완료 여부

InspectorControls 삽입 및 테스트	예 / 아니오
속성 값 정의 및 저장 연동	예 / 아니오
스타일 반영 및 저장 출력 적용	예 / 아니오
UI 요소 최적화 및 조건부 처리	예 / 아니오
사용자 입장에서 UX 검토 완료	예 / 아니오