📦 왜 블록 개발이 중요한가?

📦 왜 블록 개발이 중요한가?

Gutenberg 기반의 블록 에디터는
고전적인 숏코드와 위젯을 대체하고 있으며,
블록을 커스터마이징함으로써 에디터 안에서 콘텐츠 유형별 입력 방식을
자유롭게 설계할 수 있습니다.

✅ 마케팅 섹션, CTA, 카드 블록
✅ 사용자 후기 입력 블록
✅ FAQ, Accordion, 슬라이드 등
👉 모두 직접 블록으로 만들 수 있습니다.

 

---

✅ 1. 블록 개발 준비환경

필수 사항

• Node.js + npm
• 워드프레스 5.9 이상
• Gutenberg 또는 Block Editor 포함된 테마 사용 중

설치 명령

bash

복사편집

npx @wordpress/create-block my-custom-block

설치 완료 후 구조:

pgsql

복사편집

my-custom-block/ ├── block.json ├── build/ ├── src/ │ ├── edit.js │ └── save.js ├── style.scss └── index.php

---

🧩 2. 핵심 구조 이해 – block.json 기반

예시: block.json

json

복사편집

{ "apiVersion": 2, "name": "mytheme/cta-block", "title": "CTA 블록", "category": "widgets", "icon": "megaphone", "attributes": { "title": { "type": "string", "source": "text", "selector": "h2" }, "buttonUrl": { "type": "string" } }, "editorScript": "file:./build/index.js", "style": "file:./style.css" }

📌 이 JSON 파일이 블록의 전체 정의 역할을 합니다.

---

✍️ 3. edit.js – 편집기 UI 구현

jsx

복사편집

import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText, URLInputButton } from '@wordpress/block-editor'; export default function Edit({ attributes, setAttributes }) { const { title, buttonUrl } = attributes; return ( <div {...useBlockProps()}> <RichText tagName="h2" value={title} onChange={(value) => setAttributes({ title: value })} placeholder="제목을 입력하세요" /> <URLInputButton url={buttonUrl} onChange={(url) => setAttributes({ buttonUrl: url })} /> </div> ); }

📌 사용자 입력은 setAttributes를 통해 상태 저장

---

💾 4. save.js – 실제 HTML 출력 정의

jsx

복사편집

import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save({ attributes }) { return ( <div {...useBlockProps.save()}> <RichText.Content tagName="h2" value={attributes.title} /> <a href={attributes.buttonUrl} className="cta-button">바로가기</a> </div> ); }

📌 이 코드가 프론트엔드 출력용 HTML 을 정의합니다.

---

🎨 5. 스타일 커스터마이징 – style.scss

scss

복사편집

.wp-block-mytheme-cta-block { background: #f2f4f8; padding: 20px; border-radius: 8px; .cta-button { display: inline-block; background: #0073aa; color: #fff; padding: 10px 20px; margin-top: 10px; text-decoration: none; } }

📌 빌드 시 자동으로 CSS가 포함됩니다.

---

🧠 고급 블록 기능 추가 아이디어

기능설명

InnerBlocks	블록 안에 다른 블록 삽입 (예: 카드 블록 안에 텍스트)
Repeater 형태	Array 속성 관리로 동적 항목 반복 생성
Toggle/Select 컨트롤	@wordpress/components 활용
블록 편집기 컨텍스트 제한	특정 post_type에만 노출되게 설정
Server-side Render 블록	PHP 기반 동적 블록 (render_callback 사용)

 

---

✅ 블록 개발 체크리스트

항목완료 여부

create-block CLI로 생성	✅ / ❌
block.json 구성 완료	✅ / ❌
edit.js에서 속성 상태 관리 구현	✅ / ❌
save.js에서 프론트 HTML 정의	✅ / ❌
스타일 커스터마이징 적용	✅ / ❌
필요한 Editor 컴포넌트 추가 (URL, Toggle 등)	✅ / ❌