워드프레스 블로그를 시작하고 기본으로 제공하는 있는 구텐베르크 블록 편집기를 사용하다보면 불편한 점들이 있습니다. 기본 텍스트 편집기의 경우 커스터마이징에 제약이 있어 CSS 코드를 수정하거나, HTML 코드를 삽입해야하는 경우들이 발생합니다. 이를 보완해 줄 수 있는 것이 워드프레스 구텐베르그 블록 전용 플러그인인 제너레이트 블록(Generate Block) 플러그인입니다. 이번 글에서는 제너레이트 블록 플러그인 설치 및 사용법에 대해 알아보겠습니다.
1. 제너레이트 블록(GenerateBlock) 플러그인 설치
제너레이트 블록 플러그인은 제너레이트 프레스에서 개발한 구텐베르크 블록 편집기입니다. 워드프레스에서 기본으로 사용하고 있는 구텐베르크 블록 편집기에서 부족한 부분을 보완해줄 수 있습니다. 블록 편집기에서 기본으로 사용하고 있는 컨테이너, 제목, 버튼, 사진, 룹, 그리드와 같은 블록을 조금더 상세하게 커스터 마이징할 수 있는 기능을 제공해 줍니다. 제너레이트 블록 플러그인은 사용하고 있는 테마와 상관없이 모두 테마에서 사용할 수 있는 플러그인입니다.
제너레이트 블록 플러그인 설치는 다른 플러그인 설치와 마찬가지로 [플러그] – [새로 추가] 항목에서 ‘generateblock’ 검색 후 설치를 하시면 됩니다.
2. 제너레이트 블록 플러그인 사용 방법
제너레이트 블록을 사용하는 방법은 간단합니다. 글 편집기 화면에서 [➕]을 클릭하여 [GENERATEBLOCKS] 섹션에 있는 블록을 선택하여 사용하면 됩니다. [GENERATEBLOCKS] 아래 Grid, Query Loop, Container, Button, Headline, Image 총 6개의 블록이 존재합니다.
3. 제너레이트 블록 플러인 기능 및 상세 기능
제너레이트 블록 플러그인에는 6개의 블록이 포함되어 있습니다. CSS 코드를 이용하여 커스텀 설정할 수 있던 부분을 블록 속성창에서 바로 변경할 수 있습니다.
- 컨테이너 (Container)
- 컨테이너는 여러 개의 블록을 담고 있는 집합체입니다. 컨테이너 안에 단락, 사진, 목록과 같은 여러개의 블록을 삽입하고 이들의 레이아웃을 설정할 수 있는 블록입니다.
- 그리드 (Grid)
- 여러 개의 블록을 다양한 형태의 레이아웃을 구성할 수 있는 블록
- 제목 (Headline)
- 커스텀 제목 생성할 수 있는 블록
- 버튼 (Button)
- 커스텀 버튼 생성할 수 있는 블록
- 쿼리 룹 (Query Loop)
- 모든 유형의 게시물을 표시할 수 있는 글 목록 블록
- 사진 (Image)
- 사진 업로드 및 커스텀 할 수 있는 블록
3.1. 컨테이너(Container) 블록
컨테이터 블록은 제너레이트 블록의 핵심 블록입니다. 이 블록을 통해 기본 편집기에서 제공해주지 못했던 형태의 콘텐츠를 만들어 줄 수 있습니다. 단순히 텍스트를 입력하는 블록으로만 사용할 수 있는 것이 아니라 컨테이너 안에 여러 개의 블록을 추가로 넣을 수도 있고, 다양한 레이아웃으로 변경할 수 있습니다. 그리드 블록과 같이 사용하면 더 다양한 레이아웃 콘텐츠를 만들 수 있습니다.
컨테이너 블록을 추가하며 오른쪽 속성 패널에서 블록의 레이아웃, 크기, 간격, 블록유형, 패딩, 마진, 너비, 여백, 생상, 테두리, 폰트, 색상, 배경색상, 모양, 동적 데이터를 설정할 수 있습니다. 하나의 컨테이너 안에 Inner Container를 추가할 수 도 있습니다.
3.2. 그리드(Grid) 블록
그리드 블록은 콘텐츠가 표시되는 형태를 설정할 수 있는 블록입니다. [➕] 을 클릭하여 [그리드] 블록을 클릭하며 아래와 같이 기본적인 블록 레이아웃을 선택합니다.
예시로 2×1 그리드를 만들고 왼쪽에는 글을 오른쪽에는 사진을 추가해보겠습니다. 오른쪽 컨테이너에 있는 [+] 버튼을 클릭 후 [이미지]를 업로드립니다.
왼쪽 컨테이너에도 동일하게 [➕] 버튼을 클릭하여 [문단] 블록을 추가한 후 글을 작성합니다.
그리드 블록 안에 있는 컨테이너 사이의 간격 및 정렬은 속성 패널에서 수정을 하면 됩니다. 아래는 문단와 사진 사이 수평 방향 GAP 20픽셀 추가한 결과입니다. 그리드를 활용하면 다양한 형태로 블로그 및 웹사이트를 수정할 수 있습니다.
아래는 그리드 블록을 사용하여 만들 수 있는 콘텐츠 예시입니다.
3.3. 제목 (Headline) 블록
제목 블록은 H1에서 H6까지 커스터마이징 할 수 있는 제목 생성 블록입니다. 워드프레스에서 기본적으로 제공하는 제목 블록보다 더 다양한 설정 변경을 할 수 있습니다. 속성 패널에 있는 나머지 항목들은 컨테이너 속성과 비슷합니다. 추가로 할 수 있는 부분이 아이콘이 있습니다.
원하는 아이콘을 선택하면 제목 앞에 아이콘이 아래와 삽입이 됩니다.
3.4. 버튼(Button) 블록
버튼 블록 또한 제목 블록과 유사하게 워드프레스에서 기본적으로 제공하는 버튼 블록에 비해 더 다양한 커스터마이징 기능을 제공합니다. 워드프레스 기본 버튼 블록에서 제공하지 않는 마우스 호버링 (마우스를 버튼에 올렸을 때 색상 변경) 기능도 지원합니다.
하지만 이 버튼 블록도 CSS 코드를 수정하는 만큼의 다양한 옵션을 제공하고 있지는 않습니다. 그렇기 때문에 더욱 다양한 커스텀을 하려면 CSS를 이용해야합니다. CSS를 이용한 버튼 수정은 아래 글 참고하세요.
3.5. 게시글 (Query Loop) 블록
쿼리 룹 블록은 사이트내 만들어 놓은 콘텐츠를 표시할 수 있는 글 목록 블록입니다. 쿼리 블록을 추가하면 기본적으로 몇 개의 템플릿을 제공하는데 해당 템블릿을 이용하여 글 목록을 만들면 됩니다. 이후 오른쪽 속성 패널에서 상세 설정을 변경하시면 됩니다.
예시로 ‘Two column & feature image’ 템플릿을 선택하고, 표시되는 글의 갯수를 2개로 변경하였습니다. 그러면 아래와 같이 표시가 됩니다. 블로그에서 많이 사용할 일은 없을 것 같은데, 블로그에 있는 글 추천용으로 사용하면 좋을 것 같습니다.
3.6. 이미지 (Image) 블록
마지막으로 소개할 블록은 이미지 블록인데 이 또한 워드프레스에서 기본적으로 제공하는 블록입니다. 워드프레스에서 기본적으로 제공하는 이미지 블록에 비해 다양한 설정이 가능합니다. 이미지 블록에서 테두리(border), 간격(spacing), 내부(padding) 및 외부 간격(margin)를 할 수 있습니다. 기본 이미지 블록에서 지원되지 않는 코너 라운드 곡률 조정도 가능합니다.
이번 글에서는 워드프레스 기본 편집기인 구텐베르기 편집기를 보완해 줄 수 있는 제너레이트 블록 플러그인에 대해 알아 보았습니다. 제너레이트 블록에서 제공하는 기능들이 유용하고, 더 많은 커스텀이 필요하다면 유로 버전을 구매해서 사용해도 됩니다. 하지만 단순히 블로그용으로 워드프레스를 운영하고 있다면 유로 버전을 구매할 필요는 없다고 생각이 됩니다.