fix(creator-studio): 沉浸式布局与公众号式写作体验

首轮实机体验暴露的问题:

- 投稿页仍在渲染主题头部的 all_top_fluid 挂件区、页脚与浮动入口,
  与工作台顶栏重复。header.php / footer.php 新增 jio_render_header、
  jio_render_footer、jio_render_fluid_widgets 过滤器,工作台模式下全部关闭
- 区块 Inspector 被写在 BlockList 之后,作为正文流的一部分渲染出
  一个巨大的「未选择区块」白框;移除内联 Inspector(区块设置改由
  行内工具栏的区块菜单提供)
- 中文正文被 wordcount 的 'words' 口径算成「字数:1」;改用
  characters_excluding_spaces,与前台 TinyMCE 字数一致
- 行宽 820px、标题 34px 偏松散;收窄到 720px / 27px,正文 16px/1.85,
  段落间距与选区描边收敛,行内工具栏改为深色圆角悬浮条

新增本地视觉验收脚本(不参与运行时):
- scripts/preview.cjs:用模拟 bootstrap 生成离线预览页
- scripts/shoot.cjs:桌面/移动端截图与控制台错误采集

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

No files matched your search

+10 -7
View File
@@ -12,7 +12,7 @@ import { createRoot, useCallback, useEffect, useMemo, useRef, useState } from '@
import { parse, serialize } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';
import { useSelect } from '@wordpress/data';
import { BlockEditorProvider, BlockList, BlockTools, BlockInspector } from '@wordpress/block-editor';
import { BlockEditorProvider, BlockList, BlockTools } from '@wordpress/block-editor';
import { count as countWords } from '@wordpress/wordcount';
import { __ } from '@wordpress/i18n';
@@ -133,7 +133,13 @@ function Studio(): JSX.Element {
}, []);
const serialized = useMemo(() => serialize(blocks), [blocks]);
const words = useMemo(() => countWords(serialized.replace(/<[^>]*>/g, ' '), 'words', {}), [serialized]);
// 中文没有空格分词,wordcount 的 'words' 会把整段算成 1。
// 'characters_excluding_spaces' 才是中文场景该用的口径(与前台 TinyMCE 字数一致)。
const charCount = useMemo(() => {
const text = serialized.replace(/<[^>]*>/g, ' ');
return countWords(text, 'characters_excluding_spaces', {});
}, [serialized]);
const buildPayload = useCallback(
(extra: Record<string, any> = {}) => ({
@@ -400,16 +406,13 @@ function Studio(): JSX.Element {
<BlockTools>
<BlockList />
</BlockTools>
<aside className="jio-creator__inspector" aria-label={__('区块设置', 'jio')}>
<BlockInspector />
</aside>
</BlockEditorProvider>
</div>
<footer className="jio-creator__footer">
<span>{__('字数', 'jio')}:{words}</span>
<span>{__('字数', 'jio')}:{charCount}</span>
<span>
{__('约', 'jio')} {Math.max(1, Math.round(words / 400))} {__('分钟阅读', 'jio')}
{__('约', 'jio')} {Math.max(1, Math.round(charCount / 400))} {__('分钟阅读', 'jio')}
</span>
</footer>
</main>