워드프레스 블로그를 운영하면서 GeneratePress 테마와 GenerateBlocks 플러그인 조합을 쓰는 분들이라면 한 번쯤 겪어봤을 상황이다.
분명 에디터에서는 수정을 했는데 실제 화면에서는 스타일이 적용되지 않거나, 반대로 설정한 적 없는 엉뚱한 CSS(여백, 배경색 등)가 나타나는 현상이다. 개발자 도구(F12)를 열어보니 아래와 같은 정체불명의 코드가 범인이었다.
.gb-element-dd97372a {
background-color: var(--base);
margin-bottom: 1rem;
margin-top: 3rem;
position: relative;
/* 나는 이런 걸 설정한 적이 없는데? */
}아무리 설정을 건드려도 반응이 없다면, 99% 확률로 ‘GenerateBlocks ID 충돌’ 문제다. 오늘은 이 귀신같은 오류를 10초 만에 해결하는 방법을 정리한다.
GenerateBlocks 스타일 오류의 원인: ID 충돌
이 문제가 발생하는 이유는 ‘패턴(Pattern) 복사’ 과정에서 생긴 버그 때문이다.
GenerateBlocks는 블록 하나하나에 .gb-element-xxxxx라는 고유 ID(주민등록번호)를 부여해서 스타일을 입힌다. 그런데 우리가 편의상 만들어둔 패턴이나 재사용 블록을 복사해서 붙여넣을 때, 가끔 이 고유 ID까지 갱신되지 않고 그대로 복제되는 경우가 있다.
즉, 서로 다른 위치에 있는 블록 A와 블록 B가 같은 ID를 공유하게 되는 것이다.
- 증상 1: A를 수정했는데 엉뚱한 B의 디자인이 바뀐다.
- 증상 2: ID가 꼬여서 아무리 여백이나 색상을 바꿔도 CSS가 업데이트되지 않는다.
해결 방법: 블록 복제 후 삭제 (Duplicate & Delete)
CSS 코드를 직접 건드릴 필요 없다. 해결책은 “강제로 새로운 ID를 발급받게” 하는 것이다. 가장 확실하고 빠른 방법은 다음과 같다.
- 스타일이 꼬여버린(수정이 안 되는) 해당 컨테이너 블록을 선택한다.
- 블록 툴바의 점 3개(
⋮)를 누르고 **[복제 (Duplicate)]**를 클릭한다. - 바로 아래에 똑같은 쌍둥이 블록이 생성된다.
- 기존(위쪽) 블록은 과감하게 삭제한다.
- 새로 생긴 블록을 저장하고 확인한다.
왜 이 방법으로 해결될까?
워드프레스 에디터 상에서 블록을 ‘복제’하는 순간, GenerateBlocks는 해당 블록에 새로운 고유 ID(Unique ID)를 자동으로 생성해서 부여하기 때문이다.
기존에 족보가 꼬여있던 ID를 버리고, 깨끗한 새 신분증을 발급받는 원리다. 이 과정을 거치면 거짓말처럼 CSS가 정상적으로 적용되고, 좀비처럼 살아나던 이상한 스타일도 싹 사라진다.
요약 및 결론
만약 워드프레스 GenerateBlocks 스타일 오류로 골머리를 앓고 있다면, 복잡하게 생각하지 말고 **’복제 후 삭제’**를 기억하자.
- 증상: 알 수 없는 CSS가 적용되거나, 수정 사항이 반영 안 됨.
- 원인: 패턴 복사 중 발생한
.gb-element-id중복 충돌. - 해결: 블록 복제(Duplicate)로 ID 새로고침.
이 간단한 팁 하나면 아까운 시간을 삽질로 날리지 않을 수 있다.
