Gutenberg 커스텀 블럭 만들기

모두 알다시피 워드프레스는 5.0 버전부터 기존의 TinyMCE 기반 편집기를 버리고 새로 구텐베르크(Gutenberg) 라는 이름의 편집기를 탑재하게 됩니다. 5.0 버전부터라고는 하지만 4.9.8버전부터 이미 시범적으로 적용된 상태인지라, 아마 워드프레스의 버전 업데이트를 충실하게 따라 온 사용자라면 이미 구텐베르크의 맛을 보았을 것입니다.

Calypso와 WordPress의 미래에서도 소개한 적이 있지만, 최근 웹 기술의 중심이 프론트엔드 쪽으로 빠르게 흐르고 있는 것과 궤를 같이하여 워드프레스도 백엔드 보다는 프론트와 사용자 UI 개선 쪽에 많은 공을 들이고 있는 추세입니다. 물론 구텐베르크도 그 일환이구요.

물론 구텐베르크는 워낙 파격적(?)인 행보인지라 워드프레스 커뮤니티 내부에서조차 호불호가 명백하게 갈리고 갑론을박이 계속되고 있지만, 여기서는 구텐베르크에 대한 평가는 차치하고 그저 구텐베르크에서 사용할 커스텀 블럭(custom blocks) 만드는 법을 소개하기로 합니다.

Gutenberg 블럭(Block)의 기본 개념

블럭(Block)은 구텐베르크에서 편집의 기본 단위입니다. 미디엄(Medium)이나 https://brunch.co.kr/ 같은 서비스를 이용해 보신 분들이라면 아시겠지만, 하나의 글을 작성할 때 문단 하나 이미지 하나가 각각 편집의 기본 단위가 되어 문단 별로 삭제하거나 순서를 변경하거나 할 수 있습니다. 구텐베르크 역시 바로 그 방식, 즉 블록 단위로 글 또는 콘텐츠를 작성하고 편집할 수 있도록 해 줍니다.


다만 미디엄이나 브런치는 서비스 제공 업체에서 제공하는 블럭 유형만 사용할 수 있지만, 워드프레스 구텐베르크에서는 사용자가 직접 다양한 유형의 커스텀 블럭을 추가하여 사용할 수도 있다는 게 다른 점이죠.

구텐베르크 편집기를 열면 이미 다양한 유형의 블럭 요소들을 워드프레스가 기본으로 제공합니다. 여기에 추가로 사용자는 자기에게 필요한 자신만의 블럭을 직접 만들어 사용할 수도 있게 되는 것이죠. 말하자면 “나만의 콘텐츠 편집기”를 갖게 된다고나 할까요?

create-guten-block

구텐베르크 블럭은 워드프레스 플러그인으로 제작됩니다. 블럭만을 위한 플러그인도 있지만 통상적으로는 다른 기능의 플러그인을 만들면서 블럭도 추가하는 형태를 취하는 게 더 일반적일 것입니다.

그러니 통상적인 워드프레스 플러그인 개발 방법에 따라 개발하면 됩니다. 다만 특별히 고려할 점은 구텐베르크 블럭이 리액트(React) 기반에서 동작한다는 점입니다. 따라서 리액트 개발에서 흔히 사용하는 create-react-app 같은 도구가 있으면 좀 더 편리할 것입니다. create-guten-block이 바로 그런 도구로, 구텐베르크 블럭 개발에 필요한 그루터기를 만들어 줍니다.

워드프레스 플러그인 디렉터리에서 다음 명령을 주면 create-guten-block이 기본적인 플러그인 파일 구조를 생성합니다. 여기서는 플러그인명을 ‘hello-block’이라 주었습니다.

$ npx create-guten-block hello-block

정상적으로 설치가 완료되었다면 플러그인 파일이 아래와 같은 구조로 생성되었을 것입니다.


이어 해당 플러그인 디렉터리로 가서 npm start 명령으로 개발환경을 실행합니다.

$ cd hello-block
$ npm start

이제 워드프레스 관리자 페이지의 “플러그인” 메뉴에서 보면 이 플러그인이 설치되어 있는 것을 확인할 수 있을 것입니다.


블럭 만들기

create-guten-block은 디폴트로 샘플 블럭을 위한 코드를 하나 생성해 주며 이 코드는 플러그인 파일 내 src/block 폴더에서 확인할 수 있습니다. 이 폴더 속 block.js 파일이 실제 블록을 처리하는 코드입니다.

Register Block Type

block.js 파일에서 보면 registerBlockType이라는 함수를 호출하고 있음을 알 수 있습니다. 이 함수는 이름 그대로 워드프레스에 블럭 유형을 등록하는 함수입니다. 구텐베르크의 모든 블럭은 이렇게 블럭 타입을 등록해야 하며, 이 때 registerBlockType 함수의 인수로는 블럭 이름과 블럭 설정에 필요한 값들이 자바스크립트 객체 형식으로 들어가게 됩니다.

아래는 이 글에서 사용하기 위해 간단하게 수정한 registerBlockType 코드입니다.

registerBlockType( 'wpguide/hello-block', {
    title: __( 'Hello Block' ),
    icon: 'smiley',
    category: 'common',

블럭 이름을 지정하고 아이콘과 카테고리를 지정했습니다. 기타 설정에 사용된 값들에 대한 자세한 내용은 구텐베르크의 Block API 문서를 참조하면 됩니다.

이제 워드프레스 관리자에서 플러그인을 활성화하고 구텐베르크 편집기에서 블럭 추가(“+”) 버튼을 클릭해 보면 아래와 같이 “공통 블럭” 내에 “Hello Block”이 추가된 것을 확인할 수 있을 것입니다.


물론 아직 기능은 구현하지 않았지만, 눌러 보면 create-guten-block 이 기본으로 만들어 놓은 디폴트 블록이 구텐베르크 편집기 화면에 표시될 것입니다.


이 글에서는 코드를 조금 변경하여 편집기에서 이름을 입력 받아 화면에 “안녕하세요, ㅇㅇㅇ님!”을 표시하는 간단한 블럭을 하나 만들어 보기로 하겠습니다.

edit 함수

블럭 등록 시에 특별히 중요한 2개의 함수는 edit 함수와 save 함수로 각각 블럭이 구텐베르크 편집기에서 어떻게 보일지와 실제 서버에 데이터로 저장될 때 어떻게 저장될지를 결정하는 함수들입니다.

우선 edit 함수입니다. block.js 파일에서 edit 함수 부분을 다음과 같이 변경합니다.

edit: function( props ) {
  const { attributes, setAttributes } = props;
  const { PlainText } = wp.editor;
    return (
    <PlainText 
      className="title"
      value={attributes.title} 
      placeholder="이름을 입력하세요"
      onChange={ (title) => setAttributes({title: title}) } 
    />
    );
},

코드는, 리액트(React)에 대한 사전 지식이 있다면, 별다른 설명이 필요 없을 정도로 간단합니다. 앞서도 언급했듯이 구텐베르크는 리액트 기반이며 실제로 블럭 하나 하나는 리액트 컴포넌트에 대응됩니다. editsave 함수에 지정되는 함수 역시 실제로는 리액트 컴포넌트입니다. 따라서 이 edit 함수는 실제로는 <PlainText>라는 리액트 컴포넌트를 화면에 표시(render)하는 함수입니다.

이 코드를 저장하고 편집기에서 다시 블럭을 추가해 보면 이번에는 아래와 같이 이름을 입력받을 수 있는 입력창이 있는 블럭이 표시되는 것을 확인할 수 있을 것입니다.


save 함수

이번엔 save 함수입니다. save 함수는 이 블럭이 실제 워드프레스 데이터베이스(DB)에 저장될 때 사용되는 함수입니다. 이렇게 저장된 값은 사용자가 웹페이지를 볼 때 불려와 보여지게 됩니다.

이 글에서는 간단하게 입력 받은 이름값을 가지고 “안녕하세요, 아무개님!” 메시지를 출력하면 되므로 save 함수는 다음과 같이 간단합니다. props 변수의 attributes 객체에서 title 값을 받아 표시하는 게 전부죠.

save: function( props ) {
    return (
    <h1 className="title">안녕하세요, {props.attributes.title}!</h1>
    );
},

예를 들어, 이름값으로 “홍길동”을 입력했다면 실제 웹페이지 상에는 다음과 같이 “안녕하세요, 홍길동!” 메시지가 대문짝만하게 표시될 것입니다.


여기서는 간단하게 텍스트를 입력받아 화면에 특정 형식으로 표시하는 간단한 블럭을 만들어 봤지만, 텍스트 뿐 아니라 미디어 라이브러리의 이미지 파일이나 지도, 다른 포스트나 페이지 등 다양한 유형의 콘텐츠들을 불러와 다양한 형식으로 표시할 수 있습니다. 그야말로 “Sky is the limit.” 이죠.

Gutenberg 커스텀 블럭 플러그인

이미 워드프레스 플러그인 중에는 다양한 유형의 블럭들을 추가해 주는 좋은 플러그인들이 많이 나와 있습니다. 그 중 몇 가지만 소개하면 다음과 같습니다.

이들 블럭 플러그인을 설치하고 분석해 보면 워드프레스의 새로운 무기인 구텐베르크 블럭에 대해 좀 더 친숙해 질 수 있지 않을까요? 🙂

0 thoughts on “Gutenberg 커스텀 블럭 만들기”