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:
1 parent
2c7262770b
commit
d07cffe99e
10 files changed
+272
-39
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user