워드프레스 블록테마와 클래식 테마 스타일 구조 차이

로

앞으로 워드프레스 테마의 대세로 자리잡게 될 블록테마는 클래식 테마와 구조가 다르다.
하나하나 공부하고 있는 중인데, 우선 가장 어려운 부분이 스타일에 대한 부분이었다.
AI로 코딩을 시키더라도 기본적은 부분은 미리 알고 있어야 제대로 나오는 상황이다.
먼저 테마의 스타일을 어떻게 다른지 알아본다.

  • 클래식 테마 → style.css에 직접 CSS를 써서 모든 요소(버튼, 칼럼, 패딩 등)를 전역으로 제어함.
  • 블록 테마 → theme.json이 스타일의 중심이 됨. style.css는 보조용으로만 쓰임.

블록테마에서는 theme.json 파일에 전체적인 스타일을 모두 작성한다.
색상이나 글꼴 간격 등 테마 전체에 적용될 부분을 지정한다.

{
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "spacing": {
      "blockGap": "1.5rem"
    },
    "typography": {
      "fontFamily": "Inter",
      "fontSize": "16px"
    }
  }
}

또, 구텐베르그 블록 편집기에서 지원하는 기본적인 워드프레스 코어블록에 대해서도 스타일 지정이 가능하다.
theme.json 파일에서 지정하면 전체적인 블록에 반영되는 것이다.

{
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--accent)",
          "text": "white"
        },
        "border": {
          "radius": "8px"
        }
      },
      "core/columns": {
        "spacing": {
          "blockGap": "1rem"
        }
      }
    }
  }
}

theme.json 을 이용하지 않고 별도의 style.css 파일로 지정할 수도 있으나 블록 편집기에서 보면서 편집하고 싶다면 theme.json 파일을 이용하는 것이 좋다.

블록테마에서는 theme.json이 곧 스타일시트의 ‘뇌’ 역할을 한다.
클래식 테마처럼 세밀하게 제어하고 싶다면, 그만큼 theme.json을 정교하게 구성하면 된다.

theme.json은 단순한 설정 파일이 아니라,
워드프레스가 자동으로 CSS 변수를 생성하고 각 블록에 스타일을 주입하도록 지시하는 설계도다.
즉, 이 파일에 세세하게 정의할수록 CSS를 직접 쓴 것처럼 정밀한 결과가 나온다.