🔧 구텐베르크(Gutenberg)란?

🔧 구텐베르크(Gutenberg)란?

Gutenberg는 워드프레스 5.0 이후 기본 적용된 블록 기반 에디터입니다.
단락, 이미지, 버튼 등을 모듈 단위로 작성하며,
React 기반으로 확장 가능한 구조를 가지고 있어
개발자는 원하는 형태의 커스텀 블록을 만들 수 있습니다.

 

---

✅ 블록 커스터마이징이 필요한 이유

상황예시

콘텐츠 UI 통일	"주의사항", "리뷰 요약", "강의 카드" 등을 반복 사용하고 싶다
편집자용 도구	관리자는 블록만 추가하고, 코드나 스타일은 걱정하지 않게
마케팅 요소 삽입	CTA 버튼, 폼, 상품 카드 등 삽입 자동화
고급 콘텐츠 연동	외부 API 데이터 시각화, 그래프 등

👉 모두 나만의 커스텀 블록이 해결해 줍니다.

---

⚙️ 블록 만들기 준비

1. Node.js + npm 설치

bash

복사편집

node -v npm -v

(없다면 Node.js 공식 사이트에서 설치)

---

2. 플러그인 디렉토리 생성

bash

복사편집

wp-content/plugins/my-custom-block/

---

3. WordPress 공식 블록 개발 도구 사용

bash

복사편집

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

➡ 자동으로 React 기반 블록 개발 구조 생성됨

bash

복사편집

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

---

🧩 블록 구성 요소 이해

파일역할

block.json	블록 이름, 설명, 아이콘, 속성 등 정의
edit.js	편집기 상에서 블록의 UI
save.js	프론트엔드에 실제 렌더링되는 출력물
my-custom-block.php	워드프레스에 블록 등록

---

🧪 실전 예제: "주의사항" 박스 블록 만들기

block.json

json

복사편집

{ "apiVersion": 2, "name": "myplugin/alert-box", "title": "주의사항 박스", "category": "widgets", "icon": "warning", "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } }, "editorScript": "file:./index.js" }

---

edit.js

js

복사편집

import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function Edit({ attributes, setAttributes }) { return ( <div {...useBlockProps({ className: 'alert-box' })}> <RichText tagName="p" value={attributes.content} onChange={(val) => setAttributes({ content: val })} placeholder="주의사항 내용을 입력하세요" /> </div> ); }

---

save.js

js

복사편집

import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save({ attributes }) { return ( <div {...useBlockProps.save({ className: 'alert-box' })}> <RichText.Content tagName="p" value={attributes.content} /> </div> ); }

---

style.css (전역 또는 editor.scss)

css

복사편집

.alert-box { background: #fff3cd; color: #856404; padding: 16px; border-left: 6px solid #ffecb5; border-radius: 4px; }

---

🔧 플러그인 활성화

my-custom-block.php:

php

복사편집

<?php /** * Plugin Name: My Custom Block */ function my_custom_block_register() { register_block_type(__DIR__); } add_action('init', 'my_custom_block_register');

bash

복사편집

npm run build

📌 관리자 → 플러그인 활성화 후, 에디터에서 “주의사항 박스” 블록 선택 가능!

---

💡 고급 활용 아이디어

블록 타입응용 예

리뷰 요약 블록	평점, 총평, pros/cons
CTA 박스 블록	버튼, 강조 텍스트 포함
FAQ 블록	아코디언 형식으로 접고 펼치기
강의 카드	제목 + 시간 + 썸네일 표시
API 연동	날씨, 주식, 외부 DB 자동 출력

---

✅ 블록 개발 체크리스트

항목완료 여부

Node + @wordpress/create-block으로 환경 구성	✅ / ❌
block.json으로 블록 등록	✅ / ❌
edit.js + save.js 구성 완료	✅ / ❌
스타일 파일 적용	✅ / ❌
플러그인 등록 및 빌드 완료	✅ / ❌