BlockLab으로 커스텀 블록 만들기

워드프레스 블록 에디터는 바로 쓸 수 있는 다양한 유형의 ‘블록’들을 제공합니다. 사실 웬만한 콘텐츠는 이 기본으로 제공되는 블록들만으로도 별로 어렵지 않게 구성할 수 있습니다. 하지만 종종 기본 블록만으로는 조금 부족한 경우가 생기곤 합니다.

특히 여러 필드를 조합하여 하나의 블록을 만들고 싶을 때가 그렇습니다. 이럴 땐 커스텀 블록을 직접 만들어 사용하면 되는데요.

여러 가지 방법이 있고 또 이미 저희 가이드에서도 몇 차례 소개한 적이 있습니다만,

Gutenberg 커스텀 블럭 만들기

오늘은 BlockLab이라는 커스텀 블록 플러그인을 사용하여 좀더 간단하게 블록을 만들 수 있는 방법을 소개합니다.


새 블록 추가

먼저 BlockLab 플러그인을 설치합니다.

플러그인을 설치하고 활성화시키면 워드프레스 관리자 메뉴에 “Block Lab”이라는 메뉴가 생깁니다.


“Add New” 해서 새 블록을 만들 수 있는 화면으로 들어갑니다.


이곳에서 블록의 내용을 입력하면 됩니다.

여기서는 간단하게 사용자 프로필 박스 블록을 하나 만들어 보기로 하겠습니다. 제목을 “User Profile” 이라고 입력하고, 좌측에 보이는 “Block Properties” 박스에서 이 블록의 슬러그(Slug) 값과 블록에 사용할 아이콘(Icon) 모양, 그리고 이 블록이 블록 에디터에서 어느 카테고리(Category)에 보이게끔 할지 등을 입력합니다.

그런 다음 이 블록에서 사용할 필드(Fields)를 추가합니다. 여기서는 임의로 다음과 같이 필드를 추가했습니다. 필드명(Field Name)과 필드 유형(Field Type)에 유의하세요!


이제 “공개” 버튼을 눌러 블록을 공개하면 나만의 새 블록이 하나 만들어 집니다.

여기서 잠깐! 저장을 하고 나면 아래와 같은 메시지가 화면에 표시될 것입니다.


방금 만든 블록을 화면에 표시하기 위해서는 별도의 ‘블록 템플릿’을 만들어야 하는데요. 일단은 무시하고 다음으로 넘어가겠습니다.

블록 써보기

그럼 이 블록을 한번 써 볼까요?

새 글을 하나 생성한 다음 블록 편집기에서 확인해 보면 방금 우리가 만든 “User Profile” 블록이 추가되어 있는 것을 확인할 수 있을 것입니다.


이 블록을 글 속에 삽입하면 다음과 같이 블록의 속성(필드) 값을 입력할 수 있는 입력창이 블록 편집기 내에 표시됩니다.


내친 김에 블록의 내용도 한번 추가해 보죠. 연습이니 만큼 여러분 입맛에 맞게 아무렇게나 한번 채워 넣어 보세요!

어라? 블록 밖으로 나가면 이 블록은 온데간데 없고 대신 아래와 같은 메시지가 블록 편집기에 표시되네요? 네, 그게 정상입니다.


이제 블록 템플릿을 만들 차례가 되었네요.

블록 템플릿 만들기

BlockLab은 친절하게도 다음 단계를 꼼꼼히 알려 줍니다. 앞서 블록을 생성할 때도 그랬고 지금도 마찬가지죠.

앞서 지금까지 우리가 만든 부분이 블록에 표시될 내용(데이터)을 설정하는 부분이었다면, 이제 이 내용(필드)을 어떻게 화면에 표시할지 하는 부분을 만들어 줘야 합니다.

BlockLab에서는 이 부분을 별도의 템플릿 파일로 만들어 사용자가 직접 사용하는 테마 속 특정 위치에 지정한 이름으로 추가하면 되는 방식을 취하고 있습니다. 좀더 정확히는 사용하는 테마 속에 ‘blocks’ 라는 이름의 하위 디렉터리를 만들고 그 속에 블록 템플릿을 추가하면 됩니다.

앞서 새 블록을 추가한 다음 저장 버튼을 눌렀을 때 표시되던 메시지 기억하시죠?


네, 맞습니다. 이 메시지의 내용 대로 하면 됩니다. 우리가 새로 만든 블록의 이름(slug)이 ‘user-profile’ 이었기에, 내 테마(여기서는 ‘child-astra’) 속 ‘blocks’ 디렉터리 내에 ‘block-user-profile.php’ 라는 이름으로 템플릿 파일을 하나 만들어 주면 됩니다.

그럼 하나 만들어 볼까요?

빈 블록 템플릿(아직 아무런 내용도 없는) 파일을 하나 만들고 나서 다시 블록 편집기로 와서 보면 아래와 같이 이제 더는 블록 템플릿 파일이 없다는 메시지는 표시되지 않습니다. 대신 스피너 아이콘만 뱅글뱅글 돌아갑니다.


그럼 이제 블록 템플릿의 내용을 채워야 겠죠?

블록 템플릿은 PHP 코드 속에 BlockLab에서 제공하는 몇몇 템플릿 함수를 사용해서 필드를 맵핑하는 비교적 간단한 작업입니다.

템플릿 파일의 내용을 다음과 같이 입력합니다. 이 템플릿에서 HTML 태그는 자유롭게 쓰면 되고, 중요한 부분은 php 태그 속에 들은 block_field 라는 템플릿 함수입니다. 이 함수 속에 앞서 우리가 새 블록을 만들면서 추가한 필드의 필드명(slug값)을 넣어 주면 됩니다.

<div class="user-profile-block">
    <div class="profile-photo">
        <img src ="<?php block_field( 'user-photo' ); ?>">
    </div>
    <div class="profile-body">
        <h3><?php block_field( 'user-name' ); ?></h3>
        <p><?php block_field( 'user-description' ); ?></p>
    </div>
</div>

이제 다시 블록 편집기로 가서 한번 볼까요?

블록 편집기에서 블록 필드를 적당한 값으로 채웠다면 이제 “미리보기”를 클릭해 다음과 같이 블록의 각 필드값들이 정상적으로 채워져서 화면에 표시되는 것을 확인할 수 있을 것입니다.


블록 스타일링

그런데 화면에 표시되는 블록의 모양이 아무래도 좀 엉성하다구요?

네 맞습니다. 블록을 표시만 했지 아직 스타일(style)을 적용하지 않아 그렇습니다. 블록 스타일은 워드프레스에서 통상적으로 쓰는 방법에 따라 CSS 편집기를 통해 CSS 스타일을 추가해 줘도 되지만,

BlockLab의 경우 커스텀 블록 하나당 스타일을 적용할 수 있는 별도의 CSS 파일을 하나씩 만들 수 있도록 하는 기능을 제공합니다. 앞서 우리가 만든 블록 템플릿 ‘block-user-profile.php’ 파일과 동일한 위치에 파일 이름은 같고 확장자만 틀린 ‘block-user-profile.css’ 파일을 하나 추가해 줍니다.

이 파일 속 CSS 스타일은 블록이 화면에 표시될 때 자동으로 불려와 화면 상의 블록에 스타일을 적용해 주는 역할을 합니다.

다음은 간단한 예제 CSS 파일입니다만, 여러분 입맛에 맞게 만들면 됩니다.

.user-profile-block {
    display: flex;
}
.user-profile-block .profile-photo {
    flex: 250px;
    padding-right: 20px;
}

이제 이 CSS 파일을 저장하고 다시 화면을 보면 스타일이 적용된 블록을 볼 수 있을 것입니다. (블록 편집기 속 블록의 스타일도 마찬가지로 적용됩니다)


마무리

BlockLab은 다소 번거로운 커스텀 블록 만들기 작업을 아주 간단하게 처리할 수 있게 도와 줍니다. 이전에 ACF를 이용한 방법도 한번 소개한 적이 있지만,

ACF로 커스텀 블럭 만들기

오늘 소개한 이 BlockLab 방식은 ACF 방식과 원리는 같지만 ACF 방식보다 오히려 좀 더 간단합니다.

백문이 불여일견이라고, 한번씩 만들어 써 보세요!

BlockLab 관련 더 자세한 내용은 BlockLab 문서에 잘 소개 되어 있으니 참조하시구요. 🙂

0 thoughts on “BlockLab으로 커스텀 블록 만들기”