设计Section 09 · Cost & Lead Time Factors 的完整 Block Editor 操作步骤

下面是 Section 09 · Cost & Lead Time Factors 的完整 Block Editor 操作步骤。

Section 09 最终层级结构

[Gutenberg Group] Section 外层
└── [Gutenberg Group] Section inner
    ├── [Gutenberg Group] orange kicker line
    ├── [Gutenberg Heading H2] What Affects Turnkey PCBA Cost and Lead Time?
    ├── [Gutenberg Paragraph] Lead text
    ├── [Gutenberg Group] Note box
    │
    ├── [Stackable Columns] 4 个 H3 因素卡片
    │   ├── H3 Component Availability
    │   ├── H3 PCB Complexity and Build Requirements
    │   ├── H3 Approval Cycles and Substitution Speed
    │   └── H3 Testing and Final Delivery Requirements
    │
    └── [Gutenberg Group] CTA bar
        ├── [Gutenberg Paragraph] CTA copy
        └── [Gutenberg Buttons] Start RFQ

这部分 不使用 Ninja Tables ，因为它不是数据矩阵。

这部分 不直接放 Fluent Forms，因为这是成本与交期解释区，不是正式询盘表单区。按钮可以跳转到后面 RFQ 表单 section。

---

一、Section 外层结构

Step 1 --- 添加 Section 外层

组件：Gutenberg → Group

在 Section 08 后面新增一个 Group。

Toolbar 设置：

Alignment: Full width

右侧 Advanced → Additional CSS class(es) 填：

suga-pillar-section suga-pillar-section--09 suga-pillar-section--cost

不要设置：

Background
Padding
Margin
Width
Max-width

说明：

suga-pillar-section
= 复用全局 full-bleed 与 section rhythm

suga-pillar-section--09
= section 编号，只放在 class，不显示在页面正文

suga-pillar-section--cost
= 语义 modifier，表示这是成本与交期 section

---

Step 2 --- 添加 Section Inner

组件：Gutenberg → Group

在外层 Group 里面添加一个 Group。

Advanced → Additional CSS class(es) 填：

suga-pillar-section__inner

不要设置：

width
max-width
左右 padding
background
margin
Spacer

---

二、标题区域

Step 3 --- 添加橘黄色短线

组件：Gutenberg → Group

在 .suga-pillar-section__inner 里面添加一个空 Group。

Advanced → Additional CSS class(es) 填：

suga-pillar-kicker-line

不要用：

Gutenberg Separator
空段落
手打横线

---

Step 4 --- 添加 H2

组件：Gutenberg → Heading

Heading level 选择：

H2

内容输入：

What Affects Turnkey PCBA Cost and Lead Time?

Advanced → Additional CSS class(es) 填：

suga-pillar-h2

注意：

效果图里 H2 是左对齐，但你的模板规则是 普通 section H2 统一居中 。所以这里不要添加 has-text-align-left，也不要给 Section 09 单独写 H2 左对齐 CSS。

---

Step 5 --- 添加 Lead 文案

组件：Gutenberg → Paragraph

内容输入：

Pricing logic, not price gimmicks --- so your RFQ gets an accurate, defensible quote.

Advanced → Additional CSS class(es) 填：

suga-pillar-lead

---

三、Note 提示框

Step 6 --- 添加 Note Box

组件：Gutenberg → Group

在 Lead 后面添加一个 Group。

Advanced → Additional CSS class(es) 填：

suga-cost-note

里面添加一个 Paragraph。

组件：Gutenberg → Paragraph

内容输入：

Note: We don't publish fixed-price tables or flat lead-time promises --- real turnkey projects are driven by project variables.

Advanced → Additional CSS class(es) 填：

suga-cost-note__text

说明：

这句话很重要，它避免用户误解为固定报价表，也符合你的 Do / Do Not。

---

四、4 个 H3 因素卡片

Step 7 --- 添加 4 卡片父级

组件：Stackable → Columns

在 Note Box 后面添加 Stackable Columns。

建议：

Columns: 4

Advanced → Additional CSS class(es) 填：

suga-stack-grid suga-cost-factor-grid

说明：

suga-stack-grid
= 复用全局 Stackable Columns 兼容层

suga-cost-factor-grid
= Section 09 独有 grid modifier

不要使用：

Gutenberg Columns
suga-card-grid
普通 display:grid 接管 Stackable

---

五、Factor 01 --- Component Availability

Step 8 --- 添加第 1 个 Column

组件：Stackable → Column

第 1 个 Column 的 Advanced class 填：

suga-cost-factor-grid__item

在 Column 内添加一个 Group。

组件：Gutenberg → Group

Advanced class：

suga-cost-factor-card suga-cost-factor-card--01

---

Step 9 --- 添加编号

组件：Gutenberg → Paragraph

内容输入：

1

Advanced class：

suga-cost-factor-card__num

---

Step 10 --- 添加 H3 标题

组件：Gutenberg → Heading

Heading level 选择：

H3

内容输入：

Component Availability

Advanced class：

suga-cost-factor-card__title

这是正式 H3，符合你的 H3 子结构。

---

Step 11 --- 添加小分隔线

组件：Gutenberg → Group

在 H3 后面添加一个空 Group。

Advanced class：

suga-cost-factor-card__line

不要用 Gutenberg Separator。

---

Step 12 --- 添加变量说明

组件：Gutenberg → Paragraph

内容输入：

Most often the #1 driver.

Advanced class：

suga-cost-factor-card__intro

---

Step 13 --- 添加变量列表

组件：Gutenberg → List

内容逐行输入：

Long-lead ICs
EOL / NRND parts
Market shortage cycles
AVL restrictions

Advanced class：

suga-cost-factor-card__list

---

Step 14 --- 添加影响说明

组件：Gutenberg → Paragraph

内容输入：

Impact on your project:

Advanced class：

suga-cost-factor-card__impact-label

组件：Gutenberg → Paragraph

内容输入：

Usually drives the schedule, often drives the cost too.

Advanced class：

suga-cost-factor-card__impact

---

六、Factor 02 --- PCB Complexity and Build Requirements

Step 15 --- 添加第 2 个 Column

组件：Stackable → Column

Column class：

suga-cost-factor-grid__item

内部添加 Group。

组件：Gutenberg → Group

Group class：

suga-cost-factor-card suga-cost-factor-card--02

内容按下面添加：

编号 Paragraph:
2
class: suga-cost-factor-card__num

H3:
PCB Complexity and Build Requirements
class: suga-cost-factor-card__title

空 Group 分隔线:
class: suga-cost-factor-card__line

Intro:
Build-level variables.
class: suga-cost-factor-card__intro

List:
Layer count
SMT / THT / mixed-tech
Fine-pitch / BGA
Panelization and yield
class: suga-cost-factor-card__list

Impact label:
Impact on your project:
class: suga-cost-factor-card__impact-label

Impact:
Drives assembly cost and NPI setup timeline.
class: suga-cost-factor-card__impact

---

七、Factor 03 --- Approval Cycles and Substitution Speed

Step 16 --- 添加第 3 个 Column

组件：Stackable → Column

Column class：

suga-cost-factor-grid__item

内部 Group class：

suga-cost-factor-card suga-cost-factor-card--03

内容：

编号:
3

H3:
Approval Cycles and Substitution Speed

Intro:
Often overlooked by buyers.

List:
BOM issue resolution time
Alternate part approval SLA
DFM feedback turnaround
AVL updates and exceptions

Impact label:
Impact on your project:

Impact:
A slow decision cycle can add more time than sourcing.

对应 class 仍然使用：

suga-cost-factor-card__num
suga-cost-factor-card__title
suga-cost-factor-card__line
suga-cost-factor-card__intro
suga-cost-factor-card__list
suga-cost-factor-card__impact-label
suga-cost-factor-card__impact

---

八、Factor 04 --- Testing and Final Delivery Requirements

Step 17 --- 添加第 4 个 Column

组件：Stackable → Column

Column class：

suga-cost-factor-grid__item

内部 Group class：

suga-cost-factor-card suga-cost-factor-card--04

内容：

编号:
4

H3:
Testing and Final Delivery Requirements

Intro:
Per-project variables.

List:
ICT / FCT / burn-in
Inspection scope
Packaging and export docs
Traceability records

Impact label:
Impact on your project:

Impact:
Affects per-unit cost and final release schedule.

---

九、底部 CTA Bar

Step 18 --- 添加 CTA 外层

组件：Gutenberg → Group

在 4 个卡片后面添加一个 Group。

Advanced → Additional CSS class(es) 填：

suga-section-cta suga-cost-cta

说明：

这里复用你的全局 CTA 命名体系，不重新造一套 cost-button-bar 这种 one-off class。

---

Step 19 --- 添加 CTA 文案区

组件：Gutenberg → Group

在 CTA 外层里面添加一个 Group。

Advanced class：

suga-section-cta__copy

里面添加一个 Paragraph。

组件：Gutenberg → Paragraph

内容输入：

Want pricing logic applied to your specific BOM? Upload files below --- we'll give you a defensible quote, not a lucky guess.

Advanced class：

suga-cost-cta__text

注意：

这句话不要写成"最低价格""最快交期""固定报价"。

---

Step 20 --- 添加 CTA 按钮

组件：Gutenberg → Buttons

在 .suga-section-cta 外层里，与 .suga-section-cta__copy 同级添加 Buttons。

Buttons 这个 block 的 Advanced class 填：

suga-section-cta__action

添加 Button。

组件：Gutenberg → Button

按钮文字：

Start RFQ →

Button Advanced class 填：

suga-section-cta__button

链接建议：

#rfq

或者跳转到你后面正式 Fluent Forms 所在 section 的锚点，例如：

#turnkey-rfq

---

十、最终 List View 应该是这样

Group --- suga-pillar-section suga-pillar-section--09 suga-pillar-section--cost
└── Group --- suga-pillar-section__inner
    ├── Group --- suga-pillar-kicker-line
    ├── Heading H2 --- suga-pillar-h2
    ├── Paragraph --- suga-pillar-lead
    │
    ├── Group --- suga-cost-note
    │   └── Paragraph --- suga-cost-note__text
    │
    ├── Stackable Columns --- suga-stack-grid suga-cost-factor-grid
    │   ├── Stackable Column --- suga-cost-factor-grid__item
    │   │   └── Group --- suga-cost-factor-card suga-cost-factor-card--01
    │   │       ├── Paragraph --- suga-cost-factor-card__num
    │   │       ├── Heading H3 --- suga-cost-factor-card__title
    │   │       ├── Group --- suga-cost-factor-card__line
    │   │       ├── Paragraph --- suga-cost-factor-card__intro
    │   │       ├── List --- suga-cost-factor-card__list
    │   │       ├── Paragraph --- suga-cost-factor-card__impact-label
    │   │       └── Paragraph --- suga-cost-factor-card__impact
    │   │
    │   ├── Stackable Column --- suga-cost-factor-grid__item
    │   │   └── Group --- suga-cost-factor-card suga-cost-factor-card--02
    │   ├── Stackable Column --- suga-cost-factor-grid__item
    │   │   └── Group --- suga-cost-factor-card suga-cost-factor-card--03
    │   └── Stackable Column --- suga-cost-factor-grid__item
    │       └── Group --- suga-cost-factor-card suga-cost-factor-card--04
    │
    └── Group --- suga-section-cta suga-cost-cta
        ├── Group --- suga-section-cta__copy
        │   └── Paragraph --- suga-cost-cta__text
        └── Buttons --- suga-section-cta__action
            └── Button --- suga-section-cta__button

---

十一、本 Section 不使用的组件

Ninja Tables：不用
Fluent Forms：不用
Gutenberg Table：不用
Gutenberg Columns：不用
Spacer：不用
Separator：不用
Cover：不用
Media & Text：不用

说明：

Ninja Tables 适合矩阵 / 能力表 / 参数表。
Fluent Forms 应放在正式 RFQ section。
Section 09 只负责解释成本与交期变量，不负责收集询盘。

---

十二、必须避免的错误

不要添加 "SECTION 09 --- COST & LEAD TIME"
不要添加 Design Spec
不要把 H2 改成左对齐
不要发布固定价格表
不要写 fixed lead time promise
不要写 cheap turnkey / lowest price
不要把 4 个因素标题做成 H4，它们应该是 H3
不要用 Gutenberg Separator 做卡片分隔线
不要用 Spacer 拉开 note / cards / CTA
不要在 Stackable Column 和内部 Group 同时添加 suga-cost-factor-card
不要把 Fluent Forms 直接塞进这个 section

十三、后续 Section 09 CSS 只允许新增这些类

.suga-pillar-section--09
.suga-pillar-section--cost

.suga-cost-note
.suga-cost-note__text

.suga-cost-factor-grid
.suga-cost-factor-grid__item
.suga-cost-factor-card
.suga-cost-factor-card--01
.suga-cost-factor-card--02
.suga-cost-factor-card--03
.suga-cost-factor-card--04
.suga-cost-factor-card__num
.suga-cost-factor-card__title
.suga-cost-factor-card__line
.suga-cost-factor-card__intro
.suga-cost-factor-card__list
.suga-cost-factor-card__impact-label
.suga-cost-factor-card__impact

.suga-cost-cta
.suga-cost-cta__text

不能再碰：

.suga-pillar-section full-bleed
.suga-pillar-section__inner width / max-width / 左右 padding
.suga-pillar-h2 全局对齐
.suga-pillar-lead 全局对齐
.suga-stack-grid 基础兼容
Gutenberg gap reset
section outer margin

CSS 09

/* =========================================================
   SECTION 09 --- COST & LEAD TIME FACTORS
   Clean Section-only CSS.
   Does not redefine:
   - .suga-pillar-section full-bleed
   - .suga-pillar-section__inner width / max-width / left-right padding
   - global .suga-pillar-h2 alignment / typography
   - global .suga-pillar-lead alignment / typography
   - global .suga-stack-grid base compatibility
   - global .suga-section-cta base structure

   Notes:
   - No SECTION 09 label in front-end body copy.
   - No fixed price table.
   - No fixed lead-time promise.
   - No "cheap turnkey" positioning.
   ========================================================= */


/* ---------------------------------------------------------
   09.1) Section background only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--09,
body[data-prefix="single_page"] .suga-pillar-section--cost {
  background: var(--suga-color-soft-bg);
}


/* ---------------------------------------------------------
   09.2) Cost note
   Structure:
   Group: .suga-cost-note
   Paragraph: .suga-cost-note__text
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-cost-note {
  margin: 30px 0 34px;
  padding: 14px 18px;
  border: 1px solid var(--suga-color-orange);
  background: rgba(253, 83, 32, 0.055);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-cost-note__text {
  margin: 0;
  padding: 0;
  color: var(--suga-color-text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}


/* ---------------------------------------------------------
   09.3) Cost factor grid
   Structure:
   Stackable Columns: .suga-stack-grid .suga-cost-factor-grid
   Column: .suga-cost-factor-grid__item
   Inner Group: .suga-cost-factor-card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-cost-factor-grid {
  margin: 0 0 34px;
}

body[data-prefix="single_page"] .suga-cost-factor-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-cost-factor-grid .stk-column,
body[data-prefix="single_page"] .suga-cost-factor-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}


/* ---------------------------------------------------------
   09.4) Cost factor cards
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-cost-factor-card {
  height: 100%;
  min-height: 326px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(7, 28, 52, 0.12);
  border-left: 4px solid var(--suga-color-orange);
  background: rgba(255, 255, 255, 0.62);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-cost-factor-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 24px;
  padding: 0;
  background: var(--suga-color-orange);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

body[data-prefix="single_page"] .suga-cost-factor-card__title {
  margin: 0 0 18px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 17px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-cost-factor-card__line {
  width: 100%;
  height: 1px;
  margin: 0 0 18px;
  padding: 0;
  background: rgba(7, 28, 52, 0.11);
}

body[data-prefix="single_page"] .suga-cost-factor-card__intro {
  margin: 0 0 8px;
  padding: 0;
  color: var(--suga-color-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

body[data-prefix="single_page"] .suga-cost-factor-card__list {
  margin: 0 0 22px;
  padding-left: 16px;
  color: var(--suga-color-text);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-cost-factor-card__list li {
  margin: 0 0 5px;
  padding: 0;
}

body[data-prefix="single_page"] .suga-cost-factor-card__impact-label {
  margin: 0 0 6px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 800;
}

body[data-prefix="single_page"] .suga-cost-factor-card__impact {
  margin: 0;
  padding: 0;
  color: var(--suga-color-orange);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}


/* ---------------------------------------------------------
   09.5) Cost CTA
   Uses global CTA classes:
   - .suga-section-cta
   - .suga-section-cta__copy
   - .suga-section-cta__action
   - .suga-section-cta__button

   This only defines Section 09-specific content spacing/color.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-cost-cta {
  margin-top: 0;
}

body[data-prefix="single_page"] .suga-cost-cta__text {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-cost-cta__text strong {
  color: #ffffff;
  font-weight: 800;
}


/* ---------------------------------------------------------
   09.6) Responsive
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-cost-factor-grid .stk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-prefix="single_page"] .suga-cost-factor-card {
    min-height: 300px;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-cost-note {
    margin: 26px 0 28px;
    padding: 14px 16px;
  }

  body[data-prefix="single_page"] .suga-cost-factor-grid {
    margin-bottom: 28px;
  }

  body[data-prefix="single_page"] .suga-cost-factor-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-cost-factor-card {
    min-height: auto;
    padding: 22px 20px 20px;
  }

  body[data-prefix="single_page"] .suga-cost-factor-card__num {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    font-size: 22px;
  }

  body[data-prefix="single_page"] .suga-cost-factor-card__title {
    font-size: 16px;
  }
}