워드프레스 블록 패턴 사용하기

블록 패턴(Block patterns)이라고 들어 보셨나요? 블록 패턴은 워드프레스 버전 5.5에 새로 추가된 기능 중 하나죠.

블록 패턴은 워드프레스 블록들을 사용하여 하나의 UI 요소, 예를 들면 히어로 섹션(Hero Section) 같은 것을 만들어 두고 나중에 레이아웃을 만들 때 바로 활용하는 개념입니다.

기존의 블록들을 한번 더 묶어 추상화(abstraction) 수준을 한 단계 더 높였다고 보면 될 것입니다.

블록 패턴 사용하기

워드프레스 5.5 버전부터는 블록 편집기의 블록 추가 버튼을 누르면 “Patterns”라는 메뉴 탭이 추가된 것을 알 수 있습니다.

여기 “Patterns” 탭 속에는 이 테마에서 사용할 수 있는 모든 블록 패턴들이 표시되구요. 이 패턴들 중 원하는 것을 골라 선택하면 바로 편집기에 해당 패턴이 추가됩니다.

이전까지는 블록 편집기에서 페이지를 구성할 때 기본 블록들을 사용하여 직접 섹션 등을 구성해줘야 했다면, 이제는 미리 만들어 놓은 이런 섹션들을 바로 가져다 쓸 수 있게 된 것이죠.

물론 이 개념이 아주 새로운 것은 아닙니다. 이미 일부 프리미엄 테마나 페이지 빌더들 중에서도 이와 유사한 형태의 UI 요소 기능을 지원하는 경우가 있어 왔고,

또 워드프레스 블록 패턴이 도입되기 전에도 워드프레스에서 블록을 재활용하는 방법들이 더러 있었습니다. 예를 들어, 재활용 블록을 사용하는 것도 하나의 방법이었죠.

블록 편집기에서 재사용 블록 사용하기

몇몇 블록 라이브러리 플러그인들은 이 블록 패턴과 유사한 기능을 자체적으로 제공하기도 했구요. 예를 들면 인기있는 블록 라이브러리 중 하나인 Atomic Blocks 같은 경우, “Layouts” 라는 이름으로 유사한 기능을 제공했었습니다.

그런데 이제 워드프레스에 블록 패턴 기능이 공식적으로 추가됨에 따라 워드프레스에서 블록 패턴을 사용하는 방법이 하나로 “표준화” 되었다고 할 수 있겠네요.

블록 패턴을 지원하는 테마

워드프레스는 설치와 동시에 기본적인 블록 패턴을 몇 가지 제공합니다. 하지만 이건 어디까지나 샘플 맛보기 수준이며, 실제로 테마에서 사용하기엔 부족한 점이 있죠. 적어도 아직은 말이죠.

물론 앞으로는 테마나 혹은 플러그인들 중에서 블록 패턴을 제공하는 경우가 많이 생기겠지만, 적어도 아직은 그렇게 많지 않습니다.

이 글을 쓰는 현재 시점에서 워드프레스 테마 디렉터리에 등록된 테마 중 별도의 블록 패턴을 제공하는 테마는 다음 2개 정도 되는 것 같습니다.

• Cordero 테마
• Inclusive 테마
  

이들 테마 중 하나를 설치하여 어떤 블록 패턴들이 추가되어 있는지 한번 살펴 보는 것도 블록 패턴을 이해햐는 좋은 방법이 될 것입니다.

커스텀 블록 패턴 만들기

이렇게 기존에 나와 있는 블록 패턴을 사용하는 게 물론 편리하긴 하지만, 나만의 블록 패턴을 만들어 두고 활용하는 것도 좋은 방법이겠죠.

워드프레스는 블록 패턴을 등록하는 register_block_pattern 함수를 제공합니다. 따라서 이 함수를 사용하여 간단하게 나만의 커스텀 블록 패턴을 얼마든지 추가할 수 있습니다. 다음과 같은 식이죠.

register_block_pattern(
    'my-sample-pattern',
    array(
        'title'       => '내 패턴',
        'description' => '간단한 패턴입니다!',
        'content'     => '<!-- wp:heading --><h2>안녕하세요! 블록 패턴</h2><!-- /wp:heading -->'
    )
);

물론 이런 식으로 직접 패턴을 코딩으로 처리하는 일은 번거로울 수 있습니다. 그래서인지 코딩 없이 바로 커스텀 블록 패턴을 만들 수 있게 해주는 플러그인들이 벌써 몇 개 나와 있습니다.

그 중 하나가 Block Pattern Builder 인데요. 이 플러그인을 설치하면 워드프레스 관리자 대시보드에서 간단하게 커스텀 블록을 만들고 관리할 수 있습니다.

예를 들어, 아래와 같이 히어로 섹션을 블록 패턴으로 만들어 두고 나중에 필요한 곳에서 바로 가져다 쓰면 되겠죠?

블록 패턴은 간단한 개념이지만, 생각하기에 따라 다양한 용도로 사용할 수 있을 것 같습니다. 혹자는 블록 패턴이 워드프레스 테마 개발의 방식을 완전히 뒤집는 혁명적인 개념이 될 것이라고도 말하지만 그건 조금 더 지켜볼 일인 것 같구요.^^

여기까지 이번 5.5 버전에 추가된 블록 패턴에 대한 간략한 소개였습니다.

블록 패턴과 관련된 더 자세한 내용은 워드프레스 개발자 리소스를 참고하면 됩니다.