WordPress 使用 Gutenberg 列表区块实现带换行、代码块、多格式混排的 UL 列表（li 项）

在 WordPress 后台编辑文章时，要实现带换行、代码块、多格式混排的 UL 列表（li 项），核心是利用 Gutenberg 编辑器的「列表区块嵌套能力」+「内联格式 / 嵌套区块」，以下是分步操作指南（含进阶技巧）：

1. 插入列表区块

• 编辑文章页点击「+」→ 搜索「列表」→ 选择「无序列表（UL）」（或输入 /list 快速插入）；
• 默认生成空的 li 项，直接输入第一个列表内容。

2. 列表项内换行（不新建 li 项）

WordPress 列表区块支持「软换行」（同 HTML 里的 <br>），两种方式：

• 快捷键：在 li 内容末尾按 Shift + Enter（核心！Enter 是新建 li，Shift+Enter 是当前 li 内换行）；
• 可视化操作：光标定位到需换行处 → 点击编辑器顶部「格式」→「换行」（或右键 → 插入换行）。

3. 列表项内添加基础格式（加粗 / 斜体 / 链接）

• 选中 li 内的文本 → 直接用编辑器工具栏的「B（加粗）」「I（斜体）」「链接」按钮；
• 支持混合格式：比如 这是【加粗文本】，这是【斜体文本】，这是【链接文本】。

Gutenberg 列表区块支持「区块嵌套」，可在单个 li 项内插入代码块、表格等复杂内容，步骤如下：

1. 列表项内插入代码块（核心需求）

1. 光标定位到目标 li 项的末尾（或换行后的新行）；
2. 按 / 触发区块搜索 → 输入「代码」→ 选择「代码」区块（core/code）；
3. 此时代码块会嵌套在当前 li 项内（而非新建 li），可输入代码内容（支持语言高亮、行号）；
4. 如需在代码块后继续添加 li 内文本，光标移到代码块末尾 → 按 Shift + Enter 换行即可。

2. 列表项内嵌套其他区块（表格 / 图片 / 引用等）

操作逻辑和代码块一致：

• 光标定位到 li 内 → 按 / → 搜索目标区块（如「表格」「图片」「引用」）；
• 嵌套的区块会自动缩进，属于当前 li 项的子内容；
• 如需调整嵌套层级：选中嵌套区块 → 点击编辑器工具栏的「增加缩进」「减少缩进」按钮。

目标效果：

1. 第一步：配置 WordPress 主题
   需修改 functions.php 文件，添加以下代码：
   // 禁用指定核心区块
   function disable_core_blocks() {
       unregisterBlockType( 'core/shortcode' );
   }
   add_action( 'init', 'disable_core_blocks' );
   保存后刷新后台，验证区块是否禁用成功。

2. 第二步：配置 theme.json
   核心配置项：
   {
     "styles": {
       "blocks": {
         "core/heading": {
           "typography": { "fontSize": "2rem" }
         }
       }
     }
   }

操作步骤：

1. 插入「无序列表」→ 输入第一项文本：第一步：配置 WordPress 主题；
2. 按 Shift + Enter 换行 → 输入：需修改 functions.php 文件，添加以下代码：；
3. 再按 Shift + Enter 换行 → 输入 /代码 插入代码块 → 粘贴 PHP 代码；
4. 代码块末尾按 Shift + Enter 换行 → 输入：保存后刷新后台，验证区块是否禁用成功。；
5. 按 Enter（无 Shift）→ 新建 li 项 → 重复上述步骤添加第二项内容。

1. 区分「Enter」和「Shift+Enter」：
   • Enter：新建 li 项（列表层级）；
   • Shift+Enter：当前 li 内换行（文本层级）；
2. 嵌套区块对齐问题：
   嵌套的代码块 / 表格默认缩进，如需取消缩进：选中嵌套区块 → 右侧「高级」→ 自定义 CSS 类 → 添加 no-indent，再在主题样式中加：
   css.no-indent { margin-left: 0 !important; padding-left: 0 !important; }
3. 批量编辑列表格式：选中整个列表区块 → 右侧「区块」面板可统一设置：
   • 列表样式（项目符号 / 编号样式）；
   • 文本颜色 / 背景色；
   • 内边距 / 外边距（调整 li 项间距）；
4. 兼容旧版编辑器：若习惯经典编辑器（TinyMCE）：
   • 安装「Classic Editor」插件 → 切换到经典模式；
   • 列表内换行：Shift+Enter；
   • 插入代码块：用「代码」按钮（或直接包裹 <pre><code>...</code></pre>）。

• 编辑时：嵌套的代码块会显示为带背景的独立区域，且缩进在 li 项内；
• 预览 / 发布后：前端会渲染为 <ul><li>文本<br>代码块<br>文本</li></ul>，和你示例中的格式完全一致；
• 若前端样式错乱：检查主题是否覆盖了 wp-block-list wp-block-code 的默认样式，可通过「自定义 izer → 附加 CSS」调整。

如果需要「列表 + 代码块 + 换行」的前端样式优化代码（比如统一代码块字体、li 项间距），可以补充说明，我会给出适配的 CSS 片段。