feat(creator-studio): 公众号式插入面板与封面条

- 新增常驻「添加内容」按钮与插入面板:分组网格列出正文/标题/列表/引用、
  图片/视频/嵌入、代码/分隔线/表格/付费内容;条目不满足能力时不出现在面板里
- 面板支持方向键在网格内移动焦点、Esc 关闭;桌面居中浮层,移动端贴底抽屉并
  留出安全区
- 空文档插入区块时替换初始空白段落,不留空行
- 新增封面条:无封面时给低调入口,有封面时显示 2.35:1 缩略图,悬停出现
  「更换封面」,右上角可移除
- 补充契约测试:头部/页脚/挂件区开关、插入面板真实区块名与能力过滤、
  中文字数口径

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-06 15:57:44 +08:00
1 parent d07cffe99e
commit 79909f449e
10 files changed
+678 -7

No files matched your search

@@ -0,0 +1,65 @@
/**
* 插入面板的可插入条目。
*
* 只列出当前账号真正能用的类型:图片/视频依赖上传能力,付费片段依赖付费能力。
* 区块名用 WordPress 核心与 Jio 自有区块的真实注册名,避免插入时报
* "Block type is not registered"。
*
* @package Jio
*/
import { __ } from '@wordpress/i18n';
import type { InsertGroup } from '../panels/insert-panel';
type Capabilities = {
canUploadImage?: boolean;
canUploadVideo?: boolean;
canPay?: boolean;
canEmbed?: boolean;
};
export function buildInsertGroups(capabilities: Capabilities): InsertGroup[] {
const text: InsertGroup = {
label: __('文字', 'jio'),
items: [
{ name: 'core/paragraph', title: __('正文', 'jio'), icon: 'fa fas fa-align-left' },
{ name: 'core/heading', title: __('标题', 'jio'), icon: 'fa fas fa-heading', attributes: { level: 2 } },
{ name: 'core/list', title: __('列表', 'jio'), icon: 'fa fas fa-list-ul' },
{ name: 'core/quote', title: __('引用', 'jio'), icon: 'fa fas fa-quote-left' },
],
};
const media: InsertGroup = {
label: __('媒体', 'jio'),
items: [],
};
if (capabilities.canUploadImage) {
media.items.push({ name: 'core/image', title: __('图片', 'jio'), icon: 'fa far fa-image' });
}
if (capabilities.canUploadVideo) {
media.items.push({ name: 'core/video', title: __('视频', 'jio'), icon: 'fa fas fa-video' });
}
if (capabilities.canEmbed) {
media.items.push({ name: 'core/embed', title: __('嵌入', 'jio'), icon: 'fa fas fa-code' });
}
const blocks: InsertGroup = {
label: __('组件', 'jio'),
items: [
{ name: 'core/code', title: __('代码', 'jio'), icon: 'fa fas fa-terminal' },
{ name: 'core/separator', title: __('分隔线', 'jio'), icon: 'fa fas fa-minus' },
{ name: 'core/table', title: __('表格', 'jio'), icon: 'fa fas fa-table' },
],
};
if (capabilities.canPay) {
blocks.items.push({
name: 'jio/paid-fragment',
title: __('付费内容', 'jio'),
icon: 'fa fas fa-lock',
});
}
return [text, media, blocks];
}