WordPress Block Catalog

Category-aware reference for WordPress core block surfaces styled by blocks.css. The catalog follows the Block Inserter categories Text, Media, Design, Widgets, and Theme; Embeds remain excluded pending source and privacy policy.

Text

Paragraph

Ready blocks.css §2

기본 출력은 prose.css의 typography를 따릅니다. .has-drop-cap 변형만 blocks.css가 추가합니다.

Drop cap

처음 글자가 큰 드롭캡으로 표시됩니다. 본문은 자연스럽게 흘러갑니다. WordPress block editor에서 paragraph block의 "Drop cap" 옵션을 켜면 자동으로 has-drop-cap 클래스가 추가됩니다. 한글 첫 글자도 드롭캡 처리되며 brand typeface로 강조됩니다.

Text alignment

왼쪽 정렬 (기본).

중앙 정렬.

오른쪽 정렬.

Text

Heading

Ready base.css + prose.css

core/heading is already covered by v3.6.2 Tier 1 snapshots and by base.css semantic heading mapping. It does not require a blocks.css selector.

H1 / H2 / H3 scale

H1 heading specimen

Lead paragraph directly under an H1 heading.

H2 heading specimen

Section paragraph directly under an H2 heading.

H3 heading specimen

Subsection paragraph directly under an H3 heading.

Text

Quote & Pullquote

Ready blocks.css §3

Quote는 prose.css의 primary-bordered blockquote을 그대로 사용. Pullquote는 blocks.css가 정의한 별도 스타일 — headline-medium serif italic, top/bottom dividers.

core/quote

코드는 한 번 쓰이고 여러 번 읽힙니다. 그래서 코드를 읽기 좋게 만드는 일이 가독성 있는 글을 쓰는 일보다 더 중요합니다.

Guido van Rossum

core/pullquote

"디자인은 어떻게 보이느냐가 아니라 어떻게 작동하느냐다."

Steve Jobs
Text

Code / Preformatted / Poetry

Ready blocks.css §4

core/code

function greet(name) {
  return `안녕하세요, ${name}!`;
}

console.log(greet('World'));

core/preformatted

  공백과
    들여쓰기가
      그대로
    유지됩니다.

core/verse — Poetry

진달래꽃
김소월

나 보기가 역겨워
가실 때에는
말없이 고이 보내드리오리다
Text

List

Ready blocks.css §13

기본 ul/ol는 base.css + prose.css가 처리. is-style-list-segmented는 blocks.css의 Axismundi block style — surface-container 셀이 2px 간격으로 쌓이는 segmented 변형.

Default list

  • 첫 번째 항목
  • 두 번째 항목
    • 중첩 항목 a
    • 중첩 항목 b
  • 세 번째 항목

Segmented (Axismundi block style)

  • 알림 설정
  • 개인정보
  • 연결된 계정
  • 로그아웃

Task list (markdown - [x])

  • 완료된 작업
  • 진행 중인 작업
  • 대기 중인 작업
Text

Table

Ready PHP layer needed blocks.css §6

core/table은 <figure class="wp-block-table"> 안에 <table>이 들어있는 형태로 출력됩니다. blocks.css가 figure를 wrapper로 활용 (border, radius, overflow-x).

Default

WP core 기본 렌더링. 전체 셀 격자 테두리. thead / tbody / tfoot 모두 지원.

이름역할가입일
김민수관리자2024-01-15
이서연편집자2024-03-22
박지훈작성자2024-05-08
합계3명

Row separators (is-style-row-separators)

수직 경계선 제거 — 수평 row 구분선만 남김. 데이터 밀도가 높거나 열 수가 많아 수직선이 시각적 노이즈가 될 때 사용.

이름역할가입일
김민수관리자2024-01-15
이서연편집자2024-03-22
박지훈작성자2024-05-08
합계3명

Stripes (is-style-stripes)

제품가격
Basic$9/mo
Pro$29/mo
EnterpriseContact
총 플랜 수3

Wide table — horizontal scroll (PHP wrapper needed)

셀에 white-space: nowrap이 있으면 table이 figure 밖으로 overflow됩니다. 스크롤 격리는 <div class="wp-table-scroll"> wrapper가 필요하며, WP core/table 블록에서는 render_block 필터로 주입해야 합니다. 현재 catalog는 PHP 미적용 상태 — overflow 동작을 그대로 노출합니다.

ID이름 (Full Name)이메일 주소 역할 / 권한가입일자 마지막 로그인 시각현재 상태접속 IP
00001김민수 (Minsu Kim) minsu.kim@example.com Administrator2024-01-15 09:30 2 hours ago● Active 203.0.113.42
00002이서연 (Seoyeon Lee) seoyeon.lee@example.com Editor2024-03-22 14:18 1 day ago● Active 198.51.100.7

Wide table — wrap (is-style-wrap)

Opt OUT of horizontal scroll. Cells wrap to multiple lines. Use when table content is text-heavy (descriptions, notes).

토큰설명 (긴 텍스트)
--space-md component padding 기본값. 16px. 한글 본문이나 영문 설명이 길게 들어가도 셀 안에서 자연스럽게 줄바꿈되어 표시됩니다.
--space-lg section 내부 단락 간 spacing. 24px. word-break: keep-all 로 한글은 단어 단위 줄바꿈, 긴 영단어는 overflow-wrap: anywhere로 강제 break.

With figcaption

core/table에서 caption 입력 시 <figure> 내부 <table> 다음 형제로 <figcaption> 출력. 테이블의 border/radius는 <table>이 소유하므로 caption은 테두리 밖에 놓입니다.

제품가격
Basic$9/mo
Pro$29/mo
EnterpriseContact
Table 1. 2026년 기준 월별 구독 요금 — VAT 별도
Text

Details

Ready browser native

core/details (WP 6.4+) — <details class="wp-block-details"><summary>...</summary>[inner blocks]</details>. 내부에 임의의 블록을 중첩할 수 있는 토글 컨테이너. Axismundi CSS 없음 — 브라우저 기본 disclosure 위젯 그대로 사용.

Default (closed)

접근성 지침 요약
  • 모든 이미지에 alt 텍스트를 제공하세요.
  • 색상만으로 정보를 전달하지 마세요.
  • 키보드로 모든 인터랙션에 접근할 수 있어야 합니다.

Open (open attribute)

디자인 토큰이란

디자인 토큰은 색상, 타이포그래피, 간격 같은 시각적 결정을 플랫폼 독립적인 값으로 저장한 단위입니다. --md-sys-color-primary처럼 CSS custom property로 노출되며, 테마 전환 시 단일 지점에서 변경됩니다.

Text

Footnotes

Ready prose.css

core/footnotes (WP 6.3+) — 포스트 말미에 <ol class="wp-block-footnotes">로 렌더링. 인라인 각주 링크는 편집기가 자동 생성. prose.css ol 룰로 커버되며 별도 Axismundi CSS 없음.

Default

  1. Smith, J. (2024). Design Systems at Scale. Material Design Press. p. 42. ↩︎
  2. "디자인 토큰은 디자인 결정의 단일 진실 공급원이다." — W3C Design Tokens Community Group. ↩︎
Text · template

Post metadata

Ready blocks.css §6.x

Query Loop / Single post template 전용 블록. 일반 포스트 content 편집기에서 삽입 불가. blocks.css §6.x가 visual contract 담당.

Post Terms — bare list

기본 출력. Taxonomy term을 chip row로. __separator는 hidden, gap이 spacing 담당.

core/post-terms
디자인 시스템 , Material 3 , WordPress , Pilot , Tokens

Post Terms — prefixed label

WP prefix attribute. Term group 앞에 "Categories: " 등 라벨이 prepend. Theme은 라벨에 label-medium tone 적용.

core/post-terms prefix
Categories: Design , Engineering , Strategy

Time to Read

추정 읽기 시간 텍스트. ::before로 schedule Material Symbol 주입 — theme chrome 스코프.

core/post-time-to-read

5 minute read

In post header — meta row composition

Title 하위의 metadata row. Date · Time-to-Read · Terms 조합. WP는 각 블록을 개별로 emit하므로 row 컴포지션은 theme의 책임.

composition post header

In post footer — tag row

Long-form 본문 끝에 놓이는 tag row 패턴. 본문과 distinct하게 surface-container 위에 chip.

composition post footer
Text · reference / gap rows

Text block gaps

Future / gap —

These rows make unsupported Text blocks explicit without reopening v3.6.2 Tier 1 or claiming implementation.

  • Math — WP 6.9+ reference-only block. Future route, no implementation in v3.6.24.
  • Classic — legacy/editor surface. Out of scope for the block catalog.
Media

Image / Gallery / Cover / Media & Text

v3.6.24 keeps Media specimens bounded to image-derived surfaces. Audio, file, and icon remain explicit gap rows. Video specimen is promoted with text track structure.

core/image — default

Axismundi 기본 이미지 스타일. border-radius: corner-medium. WP core의 rounded style과 source-order 충돌이 생기지 않도록 is-style-rounded는 blocks.css에서 명시적으로 재선언.

이미지 캡션 — body-small, on-surface-variant, center.

core/image — rounded (is-style-rounded)

WP core 등록 스타일. border-radius: corner-full (9999px) — 정사각형 이미지에서 원형으로 처리. blocks.css에서 명시적 재선언으로 source-order 충돌 방어.

core/gallery — 3 columns

core/icon — SVG icon

WP 6.9+ media block. SVG source는 block content가 소유하고, Axismundi는 currentColor 상속과 geometry만 계약.

Icon block inherits text color and uses SVG fill: currentColor.

core/video — with text tracks

브라우저 native controls 사용. Axismundi는 geometric frame만 계약 (border-radius: corner-medium, margin-block). <track kind="captions">은 structural HTML — CC 버튼은 브라우저 UI.

core/video — captions 2개 (ko/en). 광안대교 placeholder video와 WebVTT track 파일 연결.

core/cover — image placeholder

core/cover

Cover specimen with overlay text

core/media-text — image plus content

core/media-text

Media & Text specimen

Uses existing image placeholder and text composition. No new CSS contract is created in v3.6.24.

Media gap rows

  • Audio — native control styling은 catalog 미계약. 앨범 아트 레이아웃은 axismundi_pilot_get_audio_cover_attachment_id() PHP 훅 준비 완료 → future visual contract.
  • File — intended: 리사이즈 버전 드롭다운 (Download button → Small / Medium / Large / Original). PHP render_block_core/file 필터 + JS 토글 필요. 레이아웃 참조: WordPress Photo Directory. Phase 4에서 구현.
Design · local layout helper

Alignment helpers

Ready blocks.css §1

.alignleft, .alignright, .aligncenter for inline-flow alignment. .alignwide, .alignfull for content-width breakouts. Both wide/full require a bounded parent — the demo container below sets max-inline-size to ensure correct behavior.

Float left / right

왼쪽 정렬 이미지 옆으로 본문이 흘러갑니다. .alignleft는 float: left와 margin-inline-end: var(--space-md)를 적용합니다. RTL 환경에서는 logical property가 자동으로 반대편으로 띄웁니다. 영문 sample text follows the floated image to demonstrate the wrap behavior across mixed scripts.

Center

중앙 정렬된 figure 또는 image.

Wide / full

기본 콘텐츠 폭의 본문.

.alignwide는 부모의 max-inline-size를 해제합니다. 이 demo 컨테이너 자체가 720px이라 그 안에서만 늘어납니다.

Design

Separator — 5 styles

Ready blocks.css §5

Default (25% width)

Wide (100%)

Dots (centered ···)

Divider inset (Axismundi block style)

Divider middle-inset

Design

Columns / Group / Card variants

Ready blocks.css §8

core/group + 3 card style variants — is-style-card-filled, is-style-card-elevated, is-style-card-outlined. core/columns는 600px 이하에서 자동 stack (is-not-stacked-on-mobile 옵션으로 비활성).

Card filled

알림

새로운 메시지가 도착했습니다.

Card elevated

제목

elevated card는 약간의 그림자로 surface 위로 떠 보입니다.

Card outlined

제목

outlined card는 1px outline-variant 테두리만 있습니다.

core/columns — 3 columns (mobile stack @ 600px)

첫번째

왼쪽 컬럼.

두번째

중간 컬럼.

세번째

오른쪽 컬럼.

Design

Accordion

Ready blocks.css §8

core/accordion (WP 6.9+) — coordinated disclosure list. Unlike core/details, an Accordion contains multiple core/accordion-item children and can auto-close siblings. WP Interactivity API owns behavior; blocks.css owns neutral M3 surfaces.

Default — one item open

주문 후 2-3영업일 안에 발송됩니다. 지역과 재고 상태에 따라 일정이 달라질 수 있습니다.

수령 후 7일 이내 미사용 상품만 반품할 수 있습니다.

Icon left

WP attribute iconPosition:left은 toggle 안에서 icon과 title의 순서를 바꿉니다. Theme CSS는 gap과 색상만 제공.

Heading은 button 역할을 하며, panel은 aria-labelledby로 연결됩니다.

Design

Row / Stack / Grid

Ready blocks.css §8

Layout blocks are chrome-free composition surfaces. WP layout support owns display mode, alignment, and author controls; Axismundi normalizes gap tokens only.

Row (core/row)

Alpha

Beta

Gamma

Stack (core/stack)

Step one

Step two

Step three

Grid (core/grid)

One

Two

Three

Four

Design

Buttons — 5 style variants

Ready blocks.css §9

core/button + is-style-{fill|tonal|elevated|outline|text}. WordPress core의 fill/outline 기본 스타일을 M3 Filled/Outlined로 매핑하고, 나머지 3개 스타일만 theme이 등록합니다.

5 style variants — label only

M3 Filled / Tonal / Elevated / Outlined / Text. is-style-{fill|tonal|elevated|outline|text}. WP core는 fill/outline만 등록하고 theme이 나머지 3개를 추가.

core/buttons core/button 5 styles
Filled
Tonal
Elevated
Outlined
Text

Leading + trailing icons

Editor에서 inline SVG를 link 안에 직접 삽입. Theme은 icon sizing (1em)과 gap만 계약 — icon 선택은 author 결정.

+ inline SVG
Upload
Continue
Add item
Learn more

Disabled state

WP는 anchor에 aria-disabled="true"를 부여. Theme은 0.38 opacity + cursor: not-allowed로 시각적 비활성화. 모든 5가지 variant에 동일 패턴.

aria-disabled
Filled
Tonal
Elevated
Outlined
Text

Interaction states

Static state classes mirror component behavior for visual QA. Real hover / active / focus still work through native pseudo-classes.

Hover
Hover
Pressed
Pressed
Focus visible
Focus

Toggle (4 variants — text excluded)

core/button is link markup, so this is a static visual contract for selected states. Interactive toggles should use the component button layer.

Filled
Tonal
Elevated
Outlined

Width — 100% / 50% / 50%

WP width attribute로 link가 25/50/75/100% 폭으로 확장. Container/checkout/사용 시 흔한 패턴.

width: 100 width: 50
결제 진행 — ₩42,000
취소
장바구니 담기

CTA pair — in long-form context

Long-form 본문 끝의 단일 CTA 패턴. 주요 액션은 Filled + leading icon, secondary는 Text.

composition CTA pair

워크숍 안내

이 가이드의 패턴을 직접 적용해 보고 싶다면, 2일짜리 실습 워크숍에서 같이 만들어 봅니다. 다음 회차는 6월 15–16일 부산.

워크숍 신청
상세 안내
Design · reference / gap rows

Design block gaps

Future / gap —

These WordPress design blocks are acknowledged as upstream catalog entries, but v3.6.24 does not add their visual contracts.

  • Spacer — content-flow utility. Runtime output is an empty div with inline block size; no additional Axismundi chrome.
  • More / Page Break — editor/runtime pagination utilities. Future route or out-of-scope decision.
Widgets

Widget lists

Ready blocks.css §16

Sidebar/footer information lists. blocks.css §16 normalizes list reset, link tokens, metadata labels, dropdown controls, and excerpt clamping.

Latest Posts — bare list

최소 출력. Title link만. Sidebar의 dense vertical list로 적합.

core/latest-posts

Latest Posts — with date + author + excerpt

Date / author / excerpt 옵션을 모두 켠 verbose 변형. Theme은 metadata에 label-small + on-surface-variant, excerpt는 2-line clamp.

core/latest-posts displayPostDate displayAuthor displayExcerpt
  • 스타일 시스템과 디자인 토큰의 관계 Ji-woon Kim

    디자인 토큰은 색상, 타이포그래피, 간격 같은 시각적 결정을 플랫폼 독립적인 값으로 저장한 단위입니다. WordPress block theme에서는 theme.json preset과 CSS custom property 사이의 연결이 핵심입니다.

  • TT5 구조를 Pilot theme으로 옮기기 Mina Park

    패턴, 템플릿, 블록 스타일 variation을 유지하면서 Material 3 토큰으로 다시 매핑하는 과정을 단계별로 정리했습니다.

Latest Posts — with featured image

Image grid-style. Featured image는 corner-small radius + 100% width. List 항목은 column gap만 분리.

core/latest-posts displayFeaturedImage

Archives + Categories + Dropdown

3가지 navigation widget을 나란히. Categories는 hierarchical (.children 중첩 지원).

core/archivesdisplayAsDropdown

Page List — hierarchical

Site의 모든 page를 hierarchical하게 나열. 2단 indent까지 시연.

core/page-list

Latest Comments

Author / post link / date / excerpt 패턴. Sidebar에서 reader engagement를 surface.

core/latest-comments

  2. VTT track 메타데이터를 attachment page와 연결하는 방식이 오디오 커버 이미지 연결과 어떻게 다른지 잘 보입니다.

In sidebar — composition

Latest Posts + Categories + Tag Cloud를 sidebar widget 영역에 stack. 각 widget은 outlined card로 wrap.

composition sidebar
Widgets

Social Icons

Ready blocks.css §11

core/social-links + core/social-link. Axismundi defines neutral default geometry only; service brand colors remain WordPress core responsibility.

Neutral default

Widgets

Tag Cloud

Ready blocks.css §11

core/tag-cloud renders taxonomy links with optional counts. Axismundi normalizes the cloud to a chip row and ignores WP's frequency-based font-size ramp.

Default — frequency-weighted cloud

WP는 taxonomy frequency에 따라 font-size를 8pt–22pt 사이에서 ramp. Theme은 cloud를 chip row로 재해석. (font-size는 inline style로 보존되지만 chip framing은 그대로.)

core/tag-cloud frequency-weighted

Material 3 WordPress Tokens Typography Blocks Themes Color Patterns Spacing Shadows Motion Accessibility

With counts (showTagCounts: true)

각 tag 옆에 post count 표시. WP는 <span class="tag-link-count">으로 wrap.

core/tag-cloud showTagCounts

Material 3 (24) WordPress (18) Tokens (12) Blocks (9) Color (7) Typography (5) Spacing (3)

Outline style

Axismundi 등록 block style. transparent + 1px outline-variant. Sidebar widget의 quiet 변형.

core/tag-cloud is-style-outline

design (12) tokens (8) pilot (4) audit (3) a11y (2)

In sidebar widget context

Sidebar / footer widget으로 typical 사용 — outlined card로 wrap, heading + cloud composition.

composition sidebar widget
Theme

Theme identity blocks

Ready PHP layer needed blocks.css §12-17

CSS-only theme blocks that can be represented without rendering a full FSE template. Query Loop and Template Part stay routed to the future pattern/template styleguide.

Site Logo (core/site-logo)

Default + is-style-rounded 변형. Theme은 max-inline-size: 100% + corner radius만 계약.

core/site-logo

Site Title / Site Tagline

Header chrome. Title은 title-large, tagline은 body-medium + on-surface-variant.

core/site-title core/site-tagline

Axismundi Pilot

Material 3 design system for WordPress block themes.

Query / Post Template — 3-column grid

Blog index / archive의 default layout. core/post-template이 list 컨테이너, 각 item이 featured image + title + meta + excerpt + CTA.

core/query core/post-template layout: grid · cols: 3

Query / Post Template — list with side image

Archive / search results의 dense list layout. Featured image left, content right. 12-column-friendly.

core/post-template layout: list

Query / Post Template — hero + 4 small (TT5 more-posts)

TT5의 more-posts 패턴. 첫 항목은 hero (full image + large title), 나머지는 dense list.

core/post-template pattern: more-posts 1 hero + 4 small

Post author meta — avatar + name + date

단독 사용 (post header inset). Avatar는 circular, name은 label-medium link, date 옆 배치.

core/avatar core/post-author-name core/post-date
J
Ji-woon Kim

Query Pagination — full (numbers + prev/next)

Default. Prev / 1 … current 2 … last / Next 패턴. Current는 secondary-container chip.

core/query-pagination full

Query Pagination — numbers only / prev-next only

numbers only

Post Navigation — adjacent post

Single post 하단의 prev/next post link. Theme은 surface-container 칩, hover 시 state layer.

core/post-navigation-link

core/navigation — desktop horizontal

데스크탑 기본. current-menu-item은 secondary-container active marker. Submenu hover 시 surface-container-high + elevation-2.

core/navigation layout: flex

core/navigation — centered with site identity

TT5 header 패턴. Site logo + nav가 중앙 정렬되고, right slot에 search 또는 CTA가 들어감.

composition centered header
Axismundi
Subscribe

core/navigation — mobile overlay (static specimen)

모바일에서 hamburger trigger → full-screen overlay. WP Interactivity API의 open state. Lab specimen은 always-open static.

core/navigation overlayMenu: always open

Theme gap rows

  • Template Part FSE structure surface. Future route.
  • Breadcrumbs WP 7.0 reference-only block. Future route.

Comments — thread with nested reply (core/comments)

Static specimen — Pilot fixture: patterns/comments.php. Avatar는 WP가 Gravatar로 채움. Nested threading은 child <ol> indent. Moderation pending은 .comment--pending 변형 (Axismundi 추가).

core/comments core/comment-template depth: 2 + moderation

3 thoughts on "스타일 시스템과 디자인 토큰의 관계"

  1. M

    MD3 토큰 레이어와 WP 블록 구조의 분리가 명확하게 잘 구현되어 있습니다. surface-container 계층이 자연스럽네요.

    1. J

      감사합니다. surface-container 계층은 M3 spec을 충실히 따른 거고, 다만 lab 시점에 lowest까지 5단을 모두 쓰진 않습니다 — 보통 low / base / high 3단이 충분하더라고요.

  2. S

    comment-form의 outlined input이 §10 Search와 동일한 토큰을 쓰는 점도 일관성 있어 보입니다. textarea도 같은 패턴인가요?

  3. ?
    Anonymous
    Pending moderation

    댓글이 관리자 승인을 기다리는 중입니다. 승인되면 표시됩니다.

Comments — form (core/post-comments-form)

Outlined pill inputs (동일 토큰: §10 Search / §18.9) + corner-medium textarea + filled primary submit. WP는 nonce, moderation, validation, AJAX submit을 소유.

core/post-comments-form

이메일은 공개되지 않습니다. 필수 항목은 *로 표시됩니다.

관리자 승인 후 게시됩니다.