워드프레스 블록 에디터 패턴(재사용 가능 블록) 사용하기
워드프레스 블록 에디터로 페이지나 글을 작성할 때 특정 블록을 다른 페이지나 글에서 재활용하고 싶을 때가 있습니다. 그런 경우 블록 에디터의 '패턴'(이전 명칭 '재사용 가능 블록') 기능을 사용하면 편리합니다.
패턴은 Elementor의 '템플릿으로 저장' 및 Avada 테마의 'Library' 저장 기능과 비슷합니다. 이런 기능을 잘 활용하면 작업 능률이 크게 향상됩니다.
[ 이 글은 최신 워드프레스 버전의 업데이트 내용을 반영하여 새롭게 작성되었습니다. ]
워드프레스 블록 에디터의 패턴(재사용 가능 블록) 사용하기
워드프레스 사이트에서 구텐베르크 편집기(구텐베르크)로 페이지를 만들거나 포스팅 할 때 반복적으로 자주 사용하는 블록이 있거나, 완전히 동일하지 않더라도 블록을 삽입하여 내용이나 스타일을 조금씩 수정하여 사용하는 블록이 있을 수 있습니다. 이런 상황에서 블록 에디터의 "패턴"(재사용 가능 블록)을 활용하면 포스팅 작업 시간을 줄이고 능률을 높일 수 있습니다.
다음과 같은 순서로 패턴을 만들어서 활용할 수 있습니다.
워드프레스 블록 편집기에서 패턴(재사용 가능 블록) 사용하기
-
블록을 만듭니다.
재활용할 블록을 만듭니다. 색상 등의 스타일은 유지한 채 콘텐츠만 바꾸어 사용하거나 스타일을 조금 변경하고 싶은 경우에도 활용할 수 있습니다.
-
패턴(재사용 가능 블록)으로 저장합니다.
블록의 옵션 아이콘을 클릭하여 "패턴 생성"을 선택하여 패턴으로 저장합니다.
-
패턴을 로드하여 활용합니다.
재사용 가능 탭에서 저장된 재사용 가능 블록을 선택하여 삽입한 다음, 필요한 경우 적절히 수정합니다.
이 과정을 그림을 통해 살펴보면 이해하기 쉬울 것입니다.
패턴으로 저장하기
예시로 기존 버튼을 재활용하고 싶은 경우 해당 블록을 선택하고 옵션 아이콘을 클릭합니다. 컨텍스트 메뉴(상황별 메뉴)가 표시되면 패턴 생성(이전 명칭 "재사용 가능 블럭에 추가(Create Reusable block))을 선택합니다.
그러면 패턴 생성 팝업이 표시됩니다.
이 때 동기화됨 옵션을 해제하도록 합니다. 만약 이 옵션을 해제하지 않고 저장하게 되면, 즉 "동기화됨"이 선택되어 있는 상태로 저장할 경우 추후에 패턴을 추가하여 편집하면 기존에 추가된 모든 위치에서 패턴이 업데이트되어 예상치 못한 결과가 나타날 수 있습니다.
만약 한 곳에서 수정했을 때 기존에 삽입된 모든 동일 패턴도 업데이트되기를 원하는 경우에는 이 옵션을 선택합니다.
- 동기화됨 옵션을 선택하면 한 곳에서 패턴을 편집하면 사용되는 모든 위치에서 패턴이 업데이트됩니다.
- 예를 들어, 버튼을 추가하고 링크나 버튼 텍스트를 각 페이지나 글에서 수정해야 하는 경우에는 이 옵션을 해제하도록 합니다. 만약 모든 곳에서 동기화되기를 원하는 경우에는 이 옵션을 선택합니다.
패턴 이름과 카테고리(예: 버튼), 동기화 여부를 선택한 다음, 생성 버튼을 클릭합니다.
패턴삽입하기
블록을 패턴(재사용 가능 블록)으로 저장했다면 다른 페이지나 포스트에서 해당 블록을 로드하여 활용할 수 있습니다.
재사용 블록은 두 가지 방법으로 삽입할 수 있습니다.
블록 삽입기 사용
블록 삽입기 토글 버튼을 클릭합니다.
패턴 탭을 클릭하면 등록된 패턴 목록이 표시됩니다.
패턴 이름을 입력하여 추가하기
더 쉬운 방법으로 문단 블록에서 "/패턴 이름"을 입력하면 빠르게 선택하여 삽입할 수 있습니다.
이 방법으로 해보니 잘 작동할 때도 있고, 그렇지 않을 때도 있네요. 잘 작동하지 않을 경우 백스페이스를 사용하여 뒤의 글자를 삭제하면 위와 같이 블록을 선택할 수 있는 팝업이 표시될 수 있습니다. (예: "/버튼"을 입력하고 "튼"을 백스페이스 키를 사용하여 삭제하면 위와 같은 팝업이 표시될 수 있습니다.)
이 방법을 이용하면 더 빠르게 블록을 삽입할 수 있고, 마우스를 사용할 필요가 없어 손목 터널 증후군 예방에도 도움이 될 수 있습니다.
패턴 수정하기
패턴을 삽입한 후에 패턴을 수정할 수 있습니다. 패턴을 추가할 때 "Synced(동기화됨)" 옵션을 선택한 경우에는 한 곳에서 수정하면 모든 위치에서 해당 패턴이 업데이트됩니다. 이 옵션을 선택하지 않은 경우에는 편집을 해도 다른 위치에 추가한 패턴에 영향을 미치지 않습니다.
동기화되도록 설정된 패턴을 다른 패턴에 영향을 미치지 않고 편집하고 싶다면 패턴을 추가한 후에 "패턴 분리"를 선택하여 패턴을 분리할 수 있습니다.
패턴 관리하기
워드프레스 버전 6.5 업데이트에서 디자인(이전 명칭 "외모") 아래에 패턴 메뉴가 추가되었습니다.
디자인 » 패턴에서 패턴을 확인하고 편집, 삭제 등의 작업을 수행할 수 있습니다.
패턴을 JSON 파일로 내보내기/가져오기 하는 옵션이 추가되었습니다. 이제 다른 사이트에서 만든 패턴을 쉽게 임포트할 수 있을 것 같습니다.
마치며
워드프레스 블록 에디터의 패턴(재사용 가능 블록)의 사용 방법에 대하여 살펴보았습니다.
기존의 "재사용 가능 블록"은 불편하여 잘 사용하지 않았지만 새롭게 바뀐 패턴은 패턴으로 저장 시 동기화 여부를 선택할 수 있도록 하여 편리하게 사용이 가능한 것 같습니다.
워드님
재사용블록을 불러오면 자동으로 일반블록으로 전환되는 기능은 없나요?
재사용블록을 사용시 자칫 일반블록으로 전환하지 않고 업데이트가 되면 재사용블록으로 등록되어 있는 모든 블록이 업데이트되어 큰 실수로 이어지게 되잖아요?
이를 미연에 방지할 수 있는 방법이 있는지 궁금합니다.
안녕하세요, JIMIN님. 저도 이 문제 때문에 재사용 가능 블록을 잘 사용하지 않고 있습니다. 이 문제를 방지하는 방법으로 재사용 가능 블록을 패턴으로 변환하여 활용하는 것을 생각해볼 수 있습니다. 패턴으로 추가하면 추가된 패턴을 수정해도 기본 패턴은 변경되지 않습니다. 이 방법은 추후 별도의 글에서 한 번 다루어보겠습니다.
아바다 테마의 경우 전역 템플릿을 추가하면 수정이 안되도록 잠금 설정이 되는데, 재사용 가능 블록에 그런 기능이 없기 때문에 이런 문제가 발생하는 것 같습니다. 전역 요소로 추가되어 있으면 편집이 안 되도록 하고, 전역(Global) 요소를 해제하면 수정이 되도록 하면 좋지 않았을까 생각됩니다.