generateblocks-layouts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

GenerateBlocks V2 Layout Builder

GenerateBlocks V2 布局构建器

Build professional WordPress layouts using GenerateBlocks V2's four core blocks.

使用GenerateBlocks V2的四个核心区块构建专业的WordPress布局。

Output Requirements

输出要求

ALWAYS output generated blocks to a file, never inline in the chat.

Output filename:

{section-name}.html

(e.g.,

hero-section.html

services-grid.html

)

For multiple sections: Create separate files or one combined file
Include a brief summary in chat describing what was created

Why file output?

Block code is often 100+ lines and breaks chat formatting
Easier to copy/paste into WordPress
Prevents truncation of long outputs
Allows incremental building of complex layouts

始终将生成的区块输出到文件中，切勿直接在聊天框内显示。

输出文件名：

{section-name}.html

（例如：

hero-section.html

、

services-grid.html

）

多区块场景：创建单独文件或单个合并文件
在聊天框中包含一段简要说明，描述已创建的内容

为什么要输出到文件？

区块代码通常超过100行，会破坏聊天格式
更易于复制粘贴到WordPress中
避免长内容被截断
支持逐步构建复杂布局

Quick Start

快速开始

GenerateBlocks V2 uses four block types:

Block	Class Pattern	Use For
`generateblocks/element`	`.gb-element-{id}`	Containers (div, section, article, header, nav, footer)
`generateblocks/text`	`.gb-text-{id}`	Text content (h1-h6, p, span, a, button)
`generateblocks/media`	`.gb-media-{id}`	Images (static only, no dynamic features)
`generateblocks/shape`	`.gb-shape-{id}`	SVG icons and decorative shapes

GenerateBlocks V2使用四种区块类型：

区块	类名模式	适用场景
`generateblocks/element`	`.gb-element-{id}`	容器（div、section、article、header、nav、footer）
`generateblocks/text`	`.gb-text-{id}`	文本内容（h1-h6、p、span、a、button）
`generateblocks/media`	`.gb-media-{id}`	图片（仅静态，无动态功能）
`generateblocks/shape`	`.gb-shape-{id}`	SVG图标和装饰性图形

When to Use Core Blocks

何时使用核心区块

For elements not available in GenerateBlocks or requiring advanced media features, use WordPress Core Blocks:

Content Type	Use Core Block	Why
Images with captions	`core/image`	Built-in caption support
Image galleries	`core/gallery`	Lightbox, columns, captions
Videos	`core/video`	Native video player, controls
Embedded media	`core/embed`	YouTube, Vimeo, Twitter, etc.
Audio files	`core/audio`	Native audio player
File downloads	`core/file`	Download links with filename
Tables	`core/table`	Structured data tables
Lists	`core/list`	Semantic ul/ol with `.list` class
Quotes	`core/quote`	Blockquote with citation
Code blocks	`core/code`	Preformatted code display
Separators	`core/separator`	Horizontal rules
Buttons (grouped)	`core/buttons`	Multiple button layouts
Columns (simple)	`core/columns`	Quick equal-width layouts
Cover images	`core/cover`	Background images with overlays
Dynamic post content	`core/post-*`	Post title, excerpt, featured image, etc.
Query loops	`core/query`	Dynamic content from posts
Emojis	`core/paragraph`	GenerateBlocks doesn't render emojis properly

Rule of thumb: Use GenerateBlocks for layout structure and custom styling. Use Core Blocks for specialized content types and media with built-in functionality.

对于GenerateBlocks不支持的元素，或需要高级媒体功能的场景，请使用WordPress核心区块：

内容类型	使用核心区块	原因
带标题的图片	`core/image`	内置标题支持
图片画廊	`core/gallery`	支持灯箱、列布局、标题
视频	`core/video`	原生视频播放器及控制栏
嵌入媒体	`core/embed`	YouTube、Vimeo、Twitter等平台内容
音频文件	`core/audio`	原生音频播放器
文件下载	`core/file`	带文件名的下载链接
表格	`core/table`	结构化数据表格
列表	`core/list`	带 `.list` 类的语义化ul/ol
引用	`core/quote`	带引用来源的块级引用
代码块	`core/code`	预格式化代码展示
分隔符	`core/separator`	水平分隔线
分组按钮	`core/buttons`	多按钮布局
简单列布局	`core/columns`	快速等宽布局
封面图片	`core/cover`	带叠加层的背景图片
动态文章内容	`core/post-*`	文章标题、摘要、特色图片等
查询循环	`core/query`	来自文章的动态内容
表情符号	`core/paragraph`	GenerateBlocks无法正确渲染表情符号

经验法则： 使用GenerateBlocks构建布局结构和自定义样式。使用核心区块处理特定内容类型和带内置功能的媒体。

Block Template

区块模板

html

<!-- wp:generateblocks/{type} {json_attributes} -->
<{tag} class="gb-{type} gb-{type}-{uniqueId}">
    {content}
</{tag}>
<!-- /wp:generateblocks/{type} -->

Element blocks add

"className":"gb-element"

to attributes. HTML class order:

gb-element-{id} gb-element

html

<!-- wp:generateblocks/element {"uniqueId":"card001","tagName":"div","className":"gb-element",...} -->
<div class="gb-element-card001 gb-element">...</div>
<!-- /wp:generateblocks/element -->

html

<!-- wp:generateblocks/{type} {json_attributes} -->
<{tag} class="gb-{type} gb-{type}-{uniqueId}">
    {content}
</{tag}>
<!-- /wp:generateblocks/{type} -->

Element区块会在属性中添加

"className":"gb-element"

。HTML类名顺序：

gb-element-{id} gb-element

：

html

<!-- wp:generateblocks/element {"uniqueId":"card001","tagName":"div","className":"gb-element",...} -->
<div class="gb-element-card001 gb-element">...</div>
<!-- /wp:generateblocks/element -->

Required Attributes

必填属性

Every block needs:

```
uniqueId
```
- Unique identifier (format:
```
{section}{number}
```
like
```
hero001
```
,
```
card023
```
)
```
tagName
```
- HTML element type
```
styles
```
- CSS properties as JSON object (camelCase). Supports responsive keys like
```
"@media (max-width:1024px)":{...}
```
```
css
```
- Generated CSS string (kebab-case, minified, alphabetically sorted)
```
htmlAttributes
```
- Array of attribute objects (for links, IDs, data attributes)

Optional:

```
className
```
- Additional CSS classes (e.g.,
```
"gb-element"
```
for element blocks,
```
"gb-element alignfull"
```
for full-width sections)
```
globalClasses
```
- Array of global CSS class slugs (e.g.,
```
["lede"]
```
)
```
align
```
- Block alignment (
```
"full"
```
for full-width)

每个区块都需要：

```
uniqueId
```
- 唯一标识符（格式：
```
{section}{number}
```
，例如
```
hero001
```
、
```
card023
```
）
```
tagName
```
- HTML元素类型
```
styles
```
- 作为JSON对象的CSS属性（小驼峰命名）。支持响应式键，如
```
"@media (max-width:1024px)":{...}
```
```
css
```
- 生成的CSS字符串（短横线命名、压缩、按字母顺序排序）
```
htmlAttributes
```
- 属性对象数组（用于链接、ID、数据属性）

可选属性：

```
className
```
- 额外CSS类（例如，Element区块使用
```
"gb-element"
```
，全宽区块使用
```
"gb-element alignfull"
```
）
```
globalClasses
```
- 全局CSS类别名数组（例如：
```
["lede"]
```
）
```
align
```
- 区块对齐方式（
```
"full"
```
表示全宽）

CRITICAL: htmlAttributes Format

重要：htmlAttributes格式

htmlAttributes MUST be an array of objects, NOT a plain object:

json

// ✅ CORRECT - Array of objects
"htmlAttributes": [
  {"attribute": "href", "value": "/contact/"},
  {"attribute": "target", "value": "_blank"},
  {"attribute": "id", "value": "section-id"}
]

// ❌ WRONG - Plain object (causes block editor recovery errors)
"htmlAttributes": {"href": "/contact/", "target": "_blank"}

linkHtmlAttributes (for media blocks) uses the same array format:

json

"linkHtmlAttributes": [
  {"attribute": "href", "value": "/product/"},
  {"attribute": "target", "value": "_blank"}
]

htmlAttributes必须是对象数组，而非普通对象：

json

// ✅ 正确 - 对象数组
"htmlAttributes": [
  {"attribute": "href", "value": "/contact/"},
  {"attribute": "target", "value": "_blank"},
  {"attribute": "id", "value": "section-id"}
]

// ❌ 错误 - 普通对象（会导致区块编辑器恢复错误）
"htmlAttributes": {"href": "/contact/", "target": "_blank"}

linkHtmlAttributes（媒体区块使用）采用相同的数组格式：

json

"linkHtmlAttributes": [
  {"attribute": "href", "value": "/product/"},
  {"attribute": "target", "value": "_blank"}
]

Text

<a>

vs Element

<a>

Links

文本

<a>

与元素

<a>

链接的区别

Block Type	`htmlAttributes` for href	`href` in HTML	Use Case
`generateblocks/text` with `tagName: "a"`	No - plugin manages link internally	No	Plain text buttons/links (no inner blocks)
`generateblocks/element` with `tagName: "a"`	Yes - `[{"attribute":"href","value":"/url/"}]`	Yes	Containers wrapping inner blocks (cards, icon buttons)

Rule: Text

<a>

blocks are leaf blocks - the link URL is managed by the editor UI. Element

<a>

blocks are containers - they need explicit

htmlAttributes

for the href.

区块类型	用于href的 `htmlAttributes`	HTML中的 `href`	适用场景
`generateblocks/text` 且 `tagName: "a"`	不需要 - 插件内部管理链接	不存在	纯文本按钮/链接（无内部区块）
`generateblocks/element` 且 `tagName: "a"`	需要 - `[{"attribute":"href","value":"/url/"}]`	存在	包裹内部区块的容器（卡片、图标按钮）

规则： 文本

<a>

区块是叶子区块 - 链接URL由编辑器界面内部管理。元素

<a>

区块是容器 - 需要显式的

htmlAttributes

来指定href。

Styling Approach

样式处理方式

Always use both
styles
AND
css
attributes:

json

{
  "uniqueId": "card001",
  "tagName": "div",
  "styles": {
    "backgroundColor": "#ffffff",
    "display": "flex",
    "padding": "2rem"
  },
  "css": ".gb-element-card001{background-color:#ffffff;display:flex;padding:2rem}"
}

CSS rules:

The
```
css
```
attribute contains only base styles - no hover states, no transitions (the plugin generates those from the
```
styles
```
object)
CSS properties must be alphabetically sorted
Exceptions that go in
```
css
```
: pseudo-elements (::before/::after), media queries, animations, parent hover targeting children

css

/* Base styles only (alphabetically sorted) + pseudo-elements + media queries */
.gb-element-card001{background-color:#ffffff;border-radius:1rem;display:flex;padding:2rem;position:relative}.gb-element-card001::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#c0392b;transform:scaleX(0)}@media(max-width:768px){.gb-element-card001{padding:1rem}}

Parent hover targeting children is written in the child's

css

css

.gb-element-card001:hover .gb-text-title001{color:#c0392b}

始终同时使用
styles
和
css
属性：

json

{
  "uniqueId": "card001",
  "tagName": "div",
  "styles": {
    "backgroundColor": "#ffffff",
    "display": "flex",
    "padding": "2rem"
  },
  "css": ".gb-element-card001{background-color:#ffffff;display:flex;padding:2rem}"
}

CSS规则：

```
css
```
属性仅包含基础样式 - 无悬停状态、无过渡效果（插件会从
```
styles
```
对象生成这些效果）
CSS属性必须按字母顺序排序
例外情况（需放入
```
css
```
）：伪元素（::before/::after）、媒体查询、动画、父元素悬停影响子元素

css

/* 仅基础样式（按字母排序）+ 伪元素 + 媒体查询 */
.gb-element-card001{background-color:#ffffff;border-radius:1rem;display:flex;padding:2rem;position:relative}.gb-element-card001::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#c0392b;transform:scaleX(0)}@media(max-width:768px){.gb-element-card001{padding:1rem}}

父元素悬停影响子元素的代码需写在子元素的

css

中：

css

.gb-element-card001:hover .gb-text-title001{color:#c0392b}

Responsive Design

响应式设计

Desktop-first approach with standard breakpoints:

Breakpoint	Width	Use For
Desktop	1025px+	Default styles (no media query)
Tablet	768px - 1024px	`@media(max-width:1024px)`
Mobile	< 768px	`@media(max-width:768px)`

Two approaches for responsive styles:

In
styles
object (preferred for simple overrides):

json

{
  "styles": {
    "display": "grid",
    "gridTemplateColumns": "minmax(0, 1fr) minmax(0, 1fr)",
    "gap": "4rem",
    "@media (max-width:1024px)": {
      "gridTemplateColumns": "minmax(0, 1fr)"
    }
  }
}

In
css
string (for complex responsive rules):

css

.gb-element-hero001{display:grid;gap:4rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (max-width:1024px){.gb-element-hero001{grid-template-columns:minmax(0,1fr)}}

Common responsive patterns:

Grid to single column:

grid-template-columns:minmax(0,1fr) minmax(0,1fr)

→

grid-template-columns:minmax(0,1fr)

Reduce padding:

padding:6rem 0

→

padding:4rem 0

→

padding:3rem 0

Reduce font sizes: Use
```
clamp()
```
for fluid typography
Stack flex items:
```
flex-direction:row
```
→
```
flex-direction:column
```
Adjust gaps:
```
gap:4rem
```
→
```
gap:2rem
```
Center text on mobile:
```
text-align:left
```
→
```
text-align:center
```

采用桌面优先的方法，使用标准断点：

断点	宽度	适用场景
桌面端	1025px+	默认样式（无媒体查询）
平板端	768px - 1024px	`@media(max-width:1024px)`
移动端	< 768px	`@media(max-width:768px)`

两种响应式样式处理方式：

在
styles
对象中（优先用于简单覆盖）：

json

{
  "styles": {
    "display": "grid",
    "gridTemplateColumns": "minmax(0, 1fr) minmax(0, 1fr)",
    "gap": "4rem",
    "@media (max-width:1024px)": {
      "gridTemplateColumns": "minmax(0, 1fr)"
    }
  }
}

在
css
字符串中（用于复杂响应式规则）：

css

.gb-element-hero001{display:grid;gap:4rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (max-width:1024px){.gb-element-hero001{grid-template-columns:minmax(0,1fr)}}

常见响应式模式：

网格转单列：

grid-template-columns:minmax(0,1fr) minmax(0,1fr)

→

grid-template-columns:minmax(0,1fr)

减少内边距：

padding:6rem 0

→

padding:4rem 0

→

padding:3rem

缩小字体大小：使用
```
clamp()
```
实现流体排版
弹性项目堆叠：
```
flex-direction:row
```
→
```
flex-direction:column
```
调整间距：
```
gap:4rem
```
→
```
gap:2rem
```
移动端文本居中：
```
text-align:left
```
→
```
text-align:center
```

Full-Width Section Pattern

全宽区块模式

For full-width sections with contained inner content:

html

<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","align":"full","className":"gb-element alignfull"} -->
<section class="gb-element-hero001 gb-element alignfull">
    <!-- wp:generateblocks/element {"uniqueId":"hero002","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto"},"css":".gb-element-hero002{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}","className":"gb-element"} -->
    <div class="gb-element-hero002 gb-element">
        <!-- Inner content -->
    </div>
    <!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->

Key:

Outer section:

"align":"full"

"className":"gb-element alignfull"

Inner container:

maxWidth: "var(\u002d\u002dgb-container-width)"

(unicode-escaped

--gb-container-width

)

用于包含内部内容的全宽区块：

html

<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","align":"full","className":"gb-element alignfull"} -->
<section class="gb-element-hero001 gb-element alignfull">
    <!-- wp:generateblocks/element {"uniqueId":"hero002","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto"},"css":".gb-element-hero002{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}","className":"gb-element"} -->
    <div class="gb-element-hero002 gb-element">
        <!-- 内部内容 -->
    </div>
    <!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->

关键要点：

外部区块：

"align":"full"

"className":"gb-element alignfull"

内部容器：

maxWidth: "var(\u002d\u002dgb-container-width)"

（unicode转义的

--gb-container-width

）

Unique ID Convention

唯一ID命名规范

Format:

{section}{number}{letter}

Section prefix: 3-4 chars (
```
hero
```
,
```
serv
```
,
```
card
```
,
```
feat
```
,
```
blog
```
)
Number: 001-999 sequential
Letter: Optional for nested elements (
```
a
```
,
```
b
```
,
```
c
```
)

Examples:

hero001

serv023a

card014

feat007b

格式：

{section}{number}{letter}

区块前缀：3-4个字符（
```
hero
```
、
```
serv
```
、
```
card
```
、
```
feat
```
、
```
blog
```
）
数字：001-999 连续编号
字母：嵌套元素可选（
```
a
```
、
```
b
```
、
```
c
```
）

示例：

hero001

、

serv023a

、

card014

、

feat007b

References

参考资料

For detailed documentation, see:

Block Types - Complete attribute specs for all four blocks
CSS Patterns - Hover effects, transitions, gradients, pseudo-elements
SVG Icons - Shape block usage and inline SVG patterns
Responsive - Media queries and breakpoint patterns
Troubleshooting - Complex layout handling, chunking, error recovery

如需详细文档，请查看：

区块类型 - 所有四种区块的完整属性规范
CSS模式 - 悬停效果、过渡、渐变、伪元素
SVG图标 - Shape区块用法和内联SVG模式
响应式设计 - 媒体查询和断点模式
故障排除 - 复杂布局处理、分块、错误恢复

Examples

示例

See

/examples/

folder for copy-paste ready blocks:

basic/ - Single blocks (text, buttons, images)
compound/ - Combined blocks (cards, features, stats)
layouts/ - Full sections (hero, services, grid)
svg/ - Icons and decorative shapes

查看

/examples/

文件夹获取可直接复制粘贴的区块：

basic/ - 单个区块（文本、按钮、图片）
compound/ - 组合区块（卡片、功能、统计）
layouts/ - 完整区块（首页横幅、服务、网格）
svg/ - 图标和装饰性图形

CRITICAL: No Extra HTML Comments

重要：禁止额外HTML注释

⛔ NEVER add HTML comments other than WordPress block markers.

The ONLY allowed comments are WordPress block delimiters:

<!-- wp:generateblocks/element {...} -->

and

<!-- /wp:generateblocks/element -->

<!-- wp:generateblocks/text {...} -->

and

<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/media {...} -->

and

<!-- /wp:generateblocks/media -->

<!-- wp:generateblocks/shape {...} -->

and

<!-- /wp:generateblocks/shape -->

<!-- wp:image {...} -->

and

<!-- /wp:image -->

<!-- wp:video {...} -->

and

<!-- /wp:video -->

<!-- wp:embed {...} -->

and

<!-- /wp:embed -->

Any other
```

```
format

WRONG - These will break the block editor:

html

<!-- Hero Section -->
<!-- Card container -->
<!-- Button wrapper -->
<!-- This is a heading -->
<!-- Content goes here -->

CORRECT - Only block delimiters:

html

<!-- wp:generateblocks/element {"uniqueId":"hero001",...,"className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
    <!-- wp:generateblocks/text {"uniqueId":"hero002",...} -->
    <h1 class="gb-text gb-text-hero002">Heading</h1>
    <!-- /wp:generateblocks/text -->
</section>
<!-- /wp:generateblocks/element -->

Any extra HTML comments will break the WordPress block editor and cause parsing errors. This is non-negotiable.

⛔ 切勿添加WordPress区块标记以外的HTML注释。

唯一允许的注释是WordPress区块分隔符：

<!-- wp:generateblocks/element {...} -->

和

<!-- /wp:generateblocks/element -->

<!-- wp:generateblocks/text {...} -->

和

<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/media {...} -->

和

<!-- /wp:generateblocks/media -->

<!-- wp:generateblocks/shape {...} -->

和

<!-- /wp:generateblocks/shape -->

<!-- wp:image {...} -->

和

<!-- /wp:image -->

<!-- wp:video {...} -->

和

<!-- /wp:video -->

<!-- wp:embed {...} -->

和

<!-- /wp:embed -->

任何其他
```

```
格式的注释

错误示例 - 这些会破坏区块编辑器：

html

<!-- 首页横幅区块 -->
<!-- 卡片容器 -->
<!-- 按钮包裹层 -->
<!-- 这是标题 -->
<!-- 内容放置处 -->

正确示例 - 仅包含区块分隔符：

html

<!-- wp:generateblocks/element {"uniqueId":"hero001",...,"className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
    <!-- wp:generateblocks/text {"uniqueId":"hero002",...} -->
    <h1 class="gb-text gb-text-hero002">标题</h1>
    <!-- /wp:generateblocks/text -->
</section>
<!-- /wp:generateblocks/element -->

任何额外的HTML注释都会破坏WordPress区块编辑器并导致解析错误。这是硬性要求。

Key Rules

核心规则

No custom CSS classes - All styling in block attributes
Minify CSS - No line breaks in
```
css
```
attribute
CSS = base styles only - No hover states or transitions in
```
css
```
(the plugin generates those from the
```
styles
```
object). Exceptions: pseudo-elements, media queries, animations, parent hover targeting children
Alphabetically sort CSS - Properties in the
```
css
```
string must be alphabetically sorted
Duplicate styles - Put in both
```
styles
```
object AND
```
css
```
string
Test responsive - Add media queries for tablet (1024px) and mobile (768px)
Text
<a>
= no htmlAttributes for href - The link URL is managed by the editor UI internally
Element
<a>
= use htmlAttributes for href - Container links need explicit
```
[{"attribute":"href","value":"/url/"}]
```

Buttons with icons - Use

generateblocks/element

(tagName

) wrapping

generateblocks/text

generateblocks/shape

blocks. Plain text buttons use

generateblocks/text

Shape blocks - Use
```
styles.svg
```
for SVG-specific properties (fill, stroke, width, height) OR simple
```
styles
```
with width/height/color and inline SVG attributes. Both patterns work
Lists use
core/list
with
.list
class - Always use the native WordPress list block with
```
className: "list"
```
and customize styling as needed
Use
--gb-container-width
for inner containers - Set inner container width using the CSS variable; add
```
align: "full"
```
to parent section for full-width layouts
htmlAttributes as array - ALWAYS use array format:
```
[{"attribute":"href","value":"/link/"}]
```
NOT object format

禁止自定义CSS类 - 所有样式均在区块属性中设置
压缩CSS -
```
css
```
属性中无换行符
CSS仅包含基础样式 -
```
css
```
中无悬停状态或过渡效果（插件从
```
styles
```
对象生成这些）。例外：伪元素、媒体查询、动画、父元素悬停影响子元素
CSS按字母排序 -
```
css
```
字符串中的属性必须按字母顺序排序
样式重复设置 - 同时在
```
styles
```
对象和
```
css
```
字符串中设置
测试响应式 - 添加平板端（1024px）和移动端（768px）的媒体查询
文本
<a>
无需htmlAttributes设置href - 链接URL由编辑器界面内部管理
元素
<a>
需使用htmlAttributes设置href - 容器链接需要显式的
```
[{"attribute":"href","value":"/url/"}]
```

带图标的按钮 - 使用

generateblocks/element

（tagName为

）包裹

generateblocks/text

generateblocks/shape

区块。纯文本按钮使用

generateblocks/text

Shape区块 - 使用
```
styles.svg
```
设置SVG专属属性（填充、描边、宽度、高度），或使用简单的
```
styles
```
设置宽度/高度/颜色并结合内联SVG属性。两种模式均可
列表使用带
.list
类的
core/list
- 始终使用原生WordPress列表区块，设置
```
className: "list"
```
并按需自定义样式
内部容器使用
--gb-container-width
- 使用CSS变量设置内部容器宽度；为父区块添加
```
align: "full"
```
实现全宽布局
htmlAttributes为数组格式 - 始终使用数组格式：
```
[{"attribute":"href","value":"/link/"}]
```
，而非对象格式

Design Inference (When CSS Not Provided)

设计推断（未提供CSS时）

When no CSS values are specified, infer styles based on context:

当未指定CSS值时，根据上下文推断样式：

GeneratePress Defaults

GeneratePress 默认值

Primary:
```
#0073e6
```
Text:
```
#222222
```
Body font:
```
17px
```
, line-height
```
1.7
```
H1:
```
42px
```
, H2:
```
35px
```
, H3:
```
29px
```
Section padding:
```
60px
```
Container max-width:
```
var(--gb-container-width)
```
Button padding:
```
15px 30px
```

主色调：
```
#0073e6
```
文本颜色：
```
#222222
```
正文字体：
```
17px
```
，行高
```
1.7
```
H1：
```
42px
```
，H2：
```
35px
```
，H3：
```
29px
```
区块内边距：
```
60px
```
容器最大宽度：
```
var(--gb-container-width)
```
按钮内边距：
```
15px 30px
```

gauravtiwari.org Design System

gauravtiwari.org 设计系统

Primary:
```
#c0392b
```
Text:
```
#0a0a0a
```
, Muted:
```
#5c5c5c
```
Background:
```
#ffffff
```
, Light:
```
#f5f5f3
```
Headings: font-weight
```
900
```
, tight letter-spacing
Section padding:
```
4rem
```
Card radius:
```
1rem
```
, Button radius:
```
2rem
```
Hover lift:
```
translateY(-6px)
```
Shadow:
```
0 20px 60px rgba(0,0,0,0.15)
```

主色调：
```
#c0392b
```
文本颜色：
```
#0a0a0a
```
，次要文本：
```
#5c5c5c
```
背景色：
```
#ffffff
```
，浅色背景：
```
#f5f5f3
```
标题：字体粗细
```
900
```
，紧凑字间距
区块内边距：
```
4rem
```
卡片圆角：
```
1rem
```
，按钮圆角：
```
2rem
```
悬停抬升效果：
```
translateY(-6px)
```
阴影：
```
0 20px 60px rgba(0,0,0,0.15)
```

Complex Layout Strategy

复杂布局策略

For large sections (50+ blocks), break into chunks:

Plan structure first - Map components before coding
Build bottom-up - Start with innermost elements
Test incrementally - Verify each component works
Use consistent IDs - Same prefix for related elements

See Troubleshooting for detailed guidance on complex layouts.

对于大型区块（50个以上），拆分为多个部分：

先规划结构 - 编码前梳理组件
自底向上构建 - 从最内层元素开始
逐步测试 - 验证每个组件可正常工作
使用一致的ID - 相关元素使用相同前缀

如需复杂布局的详细指导，请查看故障排除。

generateblocks-layouts

Original

Translation

GenerateBlocks V2 Layout Builder

GenerateBlocks V2 布局构建器

Output Requirements

输出要求

Quick Start

快速开始

When to Use Core Blocks

何时使用核心区块

Block Template

区块模板

Required Attributes

必填属性

CRITICAL: htmlAttributes Format

重要：htmlAttributes格式

Text <a> vs Element <a> Links

文本<a>与元素<a>链接的区别

Styling Approach

样式处理方式

Responsive Design

响应式设计

Full-Width Section Pattern

全宽区块模式

Unique ID Convention

唯一ID命名规范

References

参考资料

Examples

示例

CRITICAL: No Extra HTML Comments

重要：禁止额外HTML注释

Key Rules

核心规则

Design Inference (When CSS Not Provided)

设计推断（未提供CSS时）

GeneratePress Defaults

GeneratePress 默认值

gauravtiwari.org Design System

gauravtiwari.org 设计系统

Complex Layout Strategy

复杂布局策略

Text
`<a>`
vs Element
`<a>`
Links

文本
`<a>`
与元素
`<a>`
链接的区别