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
1 parent
2c7262770b
commit
d07cffe99e
10 files changed
+272
-39
No files matched your search
@@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-data', 'wp-element', 'wp-i18n', 'wp-wordcount'), 'version' => 'd48b7a862f5ed6e6e859');
|
||||
<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-data', 'wp-element', 'wp-i18n', 'wp-wordcount'), 'version' => 'c0ff9955a1748c193f64');
|
||||
@@ -1 +1 @@
|
||||
.jio-page-submit{background:#fafbfa}.jio-page-submit .float-btn,.jio-page-submit .footer,.jio-page-submit .footer-tabbar,.jio-page-submit .header,.jio-page-submit .jio-float-buttons{display:none!important}.jio-page-submit #main-content.container{max-width:none;padding:0}#jio-creator-studio.is-ready{display:block}.jio-creator{--jc-ink:#243330;--jc-ink-soft:#5c6b66;--jc-paper:#fafbfa;--jc-line:#e2e9e5;--jc-accent:#267665;--jc-accent-strong:#1d5f52;--jc-warn:#b4573f;--jc-bar:60px;-webkit-font-smoothing:antialiased;background:var(--jc-paper);color:var(--jc-ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;min-height:100vh;min-height:100dvh}.jio-creator *,.jio-creator :after,.jio-creator :before{box-sizing:border-box}.jio-creator button{color:inherit;font:inherit}.jio-creator__bar{align-items:center;backdrop-filter:blur(10px);background:rgba(250,251,250,.92);border-bottom:1px solid var(--jc-line);display:flex;gap:16px;height:var(--jc-bar);padding:0 clamp(16px,4vw,40px);position:sticky;top:0;z-index:30}.jio-creator__back{align-items:center;color:var(--jc-ink-soft);display:inline-flex;gap:6px;text-decoration:none}.jio-creator__back:focus-visible,.jio-creator__back:hover{color:var(--jc-accent)}.jio-creator__brand{color:var(--jc-ink-soft);font-size:13px;letter-spacing:.06em;margin-right:auto}.jio-creator__actions{align-items:center;display:flex;gap:10px}.jio-creator__save{align-items:center;color:var(--jc-ink-soft);display:inline-flex;font-size:13px;gap:6px}.jio-creator__save>i{color:var(--jc-line);font-size:7px}.jio-creator__save time{font-variant-numeric:tabular-nums;opacity:.7}.jio-creator__save.is-saved>i{color:var(--jc-accent)}.jio-creator__save.is-conflict,.jio-creator__save.is-conflict>i,.jio-creator__save.is-error,.jio-creator__save.is-error>i{color:var(--jc-warn)}.jio-creator__btn,.jio-creator__ghost,.jio-creator__primary{align-items:center;border:1px solid transparent;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;min-height:36px;padding:0 16px;transition:background .18s ease,border-color .18s ease,color .18s ease}.jio-creator__ghost{background:transparent;border-color:var(--jc-line)}.jio-creator__ghost:focus-visible,.jio-creator__ghost:hover{border-color:var(--jc-accent);color:var(--jc-accent)}.jio-creator__primary{background:var(--jc-accent);color:#fff}.jio-creator__primary:focus-visible,.jio-creator__primary:hover{background:var(--jc-accent-strong)}.jio-creator__primary:disabled{cursor:not-allowed;opacity:.5}.jio-creator__notice{align-items:center;background:#f1f5f2;border-bottom:1px solid var(--jc-line);color:var(--jc-ink-soft);display:flex;font-size:13px;gap:12px;margin:0 auto;max-width:820px;padding:10px 16px}.jio-creator__notice>span{flex:1}.jio-creator__notice button{background:transparent;border:0;color:var(--jc-accent);cursor:pointer}.jio-creator__notice.is-error{background:#fdf2ee;color:var(--jc-warn)}.jio-creator__hint{color:var(--jc-ink-soft);font-size:13px;margin:18px auto 0;max-width:820px;padding:0 clamp(16px,4vw,40px)}.jio-creator__canvas{margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,40px) 120px;width:min(820px,100%)}.jio-creator__title{display:block;margin-bottom:8px}.jio-creator__title textarea{background:transparent;border:0;color:var(--jc-ink);font-family:Songti SC,"Noto Serif SC","Source Han Serif SC",serif;font-size:clamp(26px,3.4vw,34px);font-weight:600;line-height:1.35;min-height:56px;padding:0;resize:none;width:100%}.jio-creator__title textarea:focus{outline:0}.jio-creator__title textarea::-moz-placeholder{color:#b7c2bd}.jio-creator__title textarea::placeholder{color:#b7c2bd}.jio-creator__excerpt{display:block;margin-bottom:28px}.jio-creator__excerpt>span{color:var(--jc-ink-soft);display:block;font-size:12px;margin-bottom:6px}.jio-creator__excerpt textarea{background:transparent;border:0;border-bottom:1px solid var(--jc-line);color:var(--jc-ink-soft);font-family:inherit;font-size:15px;line-height:1.7;padding:8px 0;resize:none;width:100%}.jio-creator__excerpt textarea:focus{border-color:var(--jc-accent);outline:0}.jio-creator__editor{position:relative}.jio-creator__editor .block-editor-writing-flow{font-size:17px;line-height:1.85}.jio-creator__editor .block-editor-default-block-appender textarea.block-editor-default-block-appender__content{color:#b7c2bd}.jio-creator__editor .block-editor-block-list__layout{padding-bottom:80px}.jio-creator__editor .wp-block{max-width:none}.jio-creator__inspector{margin-top:24px}.jio-creator__inspector .block-editor-block-inspector{border-top:1px solid var(--jc-line);padding-top:16px}.jio-creator__inspector .block-editor-block-inspector:empty{display:none}.jio-creator__inspector .components-panel__body{border:0}.jio-creator__footer{border-top:1px solid var(--jc-line);color:var(--jc-ink-soft);display:flex;font-size:12px;justify-content:space-between;padding-top:20px}.jio-creator-drawer{display:flex;inset:0;justify-content:flex-end;posiLine truncated
|
||||
.jio-page-submit{background:#fafbfa}.jio-page-submit .float-btn,.jio-page-submit .footer,.jio-page-submit .footer-tabbar,.jio-page-submit .header,.jio-page-submit .jio-float-buttons{display:none!important}.jio-page-submit #main-content.container{max-width:none;padding:0}#jio-creator-studio.is-ready{display:block}.jio-creator{--jc-ink:#243330;--jc-ink-soft:#5c6b66;--jc-paper:#fafbfa;--jc-line:#e2e9e5;--jc-accent:#267665;--jc-accent-strong:#1d5f52;--jc-warn:#b4573f;--jc-bar:60px;-webkit-font-smoothing:antialiased;background:var(--jc-paper);color:var(--jc-ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;min-height:100vh;min-height:100dvh}.jio-creator *,.jio-creator :after,.jio-creator :before{box-sizing:border-box}.jio-creator button{color:inherit;font:inherit}.jio-creator__bar{align-items:center;backdrop-filter:blur(10px);background:rgba(250,251,250,.92);border-bottom:1px solid var(--jc-line);display:flex;gap:16px;height:var(--jc-bar);padding:0 clamp(16px,4vw,40px);position:sticky;top:0;z-index:30}.jio-creator__back{align-items:center;color:var(--jc-ink-soft);display:inline-flex;gap:6px;text-decoration:none}.jio-creator__back:focus-visible,.jio-creator__back:hover{color:var(--jc-accent)}.jio-creator__brand{color:var(--jc-ink-soft);font-size:13px;letter-spacing:.06em;margin-right:auto}.jio-creator__actions{align-items:center;display:flex;gap:10px}.jio-creator__save{align-items:center;color:var(--jc-ink-soft);display:inline-flex;font-size:13px;gap:6px}.jio-creator__save>i{color:var(--jc-line);font-size:7px}.jio-creator__save time{font-variant-numeric:tabular-nums;opacity:.7}.jio-creator__save.is-saved>i{color:var(--jc-accent)}.jio-creator__save.is-conflict,.jio-creator__save.is-conflict>i,.jio-creator__save.is-error,.jio-creator__save.is-error>i{color:var(--jc-warn)}.jio-creator__btn,.jio-creator__ghost,.jio-creator__primary{align-items:center;border:1px solid transparent;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;min-height:36px;padding:0 16px;transition:background .18s ease,border-color .18s ease,color .18s ease}.jio-creator__ghost{background:transparent;border-color:var(--jc-line)}.jio-creator__ghost:focus-visible,.jio-creator__ghost:hover{border-color:var(--jc-accent);color:var(--jc-accent)}.jio-creator__primary{background:var(--jc-accent);color:#fff}.jio-creator__primary:focus-visible,.jio-creator__primary:hover{background:var(--jc-accent-strong)}.jio-creator__primary:disabled{cursor:not-allowed;opacity:.5}.jio-creator__notice{align-items:center;background:#f1f5f2;border-bottom:1px solid var(--jc-line);color:var(--jc-ink-soft);display:flex;font-size:13px;gap:12px;margin:0 auto;max-width:820px;padding:10px 16px}.jio-creator__notice>span{flex:1}.jio-creator__notice button{background:transparent;border:0;color:var(--jc-accent);cursor:pointer}.jio-creator__notice.is-error{background:#fdf2ee;color:var(--jc-warn)}.jio-creator__hint{color:var(--jc-ink-soft);font-size:13px;margin:18px auto 0;max-width:820px;padding:0 clamp(16px,4vw,40px)}.jio-creator__canvas{margin:0 auto;padding:clamp(20px,4vw,44px) clamp(20px,5vw,52px) 140px;width:min(720px,100%)}.jio-creator__title{display:block;margin-bottom:6px}.jio-creator__title textarea{background:transparent;border:0;color:var(--jc-ink);font-family:Songti SC,"Noto Serif SC","Source Han Serif SC",serif;font-size:clamp(23px,2.6vw,27px);font-weight:500;letter-spacing:.01em;line-height:1.4;min-height:50px;padding:0;resize:none;width:100%}.jio-creator__title textarea:focus{outline:0}.jio-creator__title textarea::-moz-placeholder{color:#b7c2bd}.jio-creator__title textarea::placeholder{color:#b7c2bd}.jio-creator__excerpt{display:block;margin-bottom:22px}.jio-creator__excerpt>span{color:#9aa8a2;display:block;font-size:12px;letter-spacing:.02em;margin-bottom:4px}.jio-creator__excerpt textarea{background:transparent;border:0;color:var(--jc-ink-soft);font-family:inherit;font-size:14px;line-height:1.7;padding:6px 0;resize:none;width:100%}.jio-creator__excerpt textarea:focus{outline:0}.jio-creator__editor{min-height:40vh;position:relative}.jio-creator__editor .block-editor-writing-flow{font-size:16px;letter-spacing:.01em;line-height:1.85}.jio-creator__editor .block-editor-default-block-appender textarea.block-editor-default-block-appender__content{color:#b7c2bd}.jio-creator__editor .block-editor-block-list__layout{padding-bottom:40px}.jio-creator__editor .wp-block{max-width:none}.jio-creator__editor .block-editor-block-list__block{margin-bottom:1.1em;margin-top:0}.jio-creator__editor .block-editor-block-list__block[data-type="core/heading"]{margin-top:1.6em}.jio-creator__editor .block-editor-block-list__block.is-hovered:after,.jio-creator__editor .block-editor-block-list__block.is-selected:after{border-radius:3px;box-shadow:0 0 0 1.5px rgba(38,118,101,.35)}.jio-creator__editor .block-editor-block-contextual-toolbar{margin-left:0}.jio-creator__editor .block-editor-block-contexLine truncated
|
||||
@@ -1 +1 @@
|
||||
(()=>{"use strict";const e={n:t=>{const a=t&&t.__esModule?()=>t.default:()=>t;return e.d(a,{a}),a},d:(t,a)=>{for(var r in a)e.o(a,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},o:(e,t)=>Object.hasOwn(e,t)},t=window.React,a=window.wp.element,r=window.wp.blocks,n=window.wp.blockLibrary,o=window.wp.data,i=window.wp.blockEditor,c=window.wp.wordcount,l=window.wp.i18n;function s(e,t){const a=e&&(e.message||e.error)||(401===t?"登录状态已失效，请刷新页面重新登录。":"请求失败，请稍后重试。"),r=new Error(String(a));return r.status=t,r.code=e&&e.code?String(e.code):"",r.data=e,r}async function m(e){try{return await e.json()}catch(e){return null}}async function u(e,t,a){const r=await fetch(e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a},body:JSON.stringify(t)}),n=await m(r);if(!r.ok)throw s(n,r.status);return n}async function d(e,t,a,r={}){const n=new FormData;n.append("file",t),Object.entries(r).forEach(([e,t])=>n.append(e,t));const o=await fetch(e,{method:"POST",credentials:"same-origin",headers:{"X-WP-Nonce":a},body:n}),i=await m(o);if(!o.ok)throw s(i,o.status);return i}const p=window.wp.apiFetch;var _=e.n(p);const f=window.jioCreatorStudio||{},y=f.nonce||"";function b(e){const{draft:r,setDraft:n,capabilities:o,limits:i,taxonomy:c,isPublishedEdit:s,onClose:m,onSaveDraft:u,onSubmit:p,privateStorage:_,privateUploads:b,saving:E,captcha:g}=e,[j,w]=(0,a.useState)(""),[h,v]=(0,a.useState)(""),[N,k]=(0,a.useState)(!1),S=(0,a.useRef)(null),C=(0,a.useRef)(null),I=(0,a.useRef)(null);(0,a.useEffect)(()=>{const e=I.current,t=document.getElementById("jio-creator-captcha");if(!e||!t)return;const a=t.parentElement;return e.appendChild(t),t.removeAttribute("hidden"),()=>{a&&(a.appendChild(t),t.setAttribute("hidden",""))}},[]);const x=(0,a.useMemo)(()=>(r.title||"").trim().length,[r.title])>=Number(i.titleMin||1),L=()=>{const e=j.trim();if(!e)return;const t=e.split(/[,，\n]+/u).map(e=>e.trim()).filter(Boolean);n({tags:Array.from(new Set([...r.tags,...t]))}),w("")};return(0,t.createElement)("div",{className:"jio-creator-drawer",role:"dialog","aria-modal":"true","aria-labelledby":"jio-creator-publish-title"},(0,t.createElement)("button",{type:"button",className:"jio-creator-drawer__backdrop","aria-label":(0,l.__)("关闭","jio"),onClick:m}),(0,t.createElement)("div",{className:"jio-creator-drawer__panel"},(0,t.createElement)("header",{className:"jio-creator-drawer__head"},(0,t.createElement)("h2",{id:"jio-creator-publish-title"},s?(0,l.__)("提交改稿","jio"):(0,l.__)("发布文章","jio")),(0,t.createElement)("button",{type:"button",className:"jio-creator-drawer__close",onClick:m,"aria-label":(0,l.__)("关闭","jio")},(0,t.createElement)("i",{className:"fa fas fa-times","aria-hidden":"true"}))),(0,t.createElement)("div",{className:"jio-creator-drawer__body"},s&&(0,t.createElement)("p",{className:"jio-creator-drawer__note"},(0,l.__)("审核通过前，读者看到的仍然是当前线上版本。","jio")),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,l.__)("封面","jio")),r.featured?.data?.url?(0,t.createElement)("div",{className:"jio-creator-cover"},(0,t.createElement)("img",{src:String(r.featured.data.url),alt:""}),(0,t.createElement)("button",{type:"button",onClick:()=>n({featured:{type:"",data:{}}}),"aria-label":(0,l.__)("移除封面","jio")},(0,t.createElement)("i",{className:"fa fas fa-times","aria-hidden":"true"}))):o.canUploadImage?(0,t.createElement)("label",{className:"jio-creator-cover-empty"},(0,t.createElement)("input",{ref:S,type:"file",accept:"image/*",onChange:()=>{(async()=>{const e=S.current?.files?.[0];if(e&&f.media?.uploadUrl?.image){v(""),k(!0);try{const t=await d(f.media.uploadUrl.image,e,y),a=Number(t.attachment_id||t.id||0),r=String(t.url||"");if(!a||!r)throw new Error((0,l.__)("上传后无法读取图片。","jio"));n({featured:{type:"image",mediaId:a,data:{id:a,url:r}}})}catch(e){v(String(e?.message||(0,l.__)("上传失败","jio")))}finally{k(!1)}}})()},disabled:N}),(0,t.createElement)("i",{className:"fa fas fa-plus","aria-hidden":"true"}),(0,t.createElement)("span",null,N?(0,l.__)("上传中…","jio"):(0,l.__)("上传封面","jio"))):(0,t.createElement)("p",{className:"jio-creator-muted"},(0,l.__)("当前账号不能设置封面。","jio"))),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,l.__)("分类","jio")),(0,t.createElement)("div",{className:"jio-creator-chips"},0===c.categories.length&&(0,t.createElement)("span",{className:"jio-creator-muted"},(0,l.__)("暂无可选分类","jio")),c.categories.map(e=>(0,t.createElement)("label",{key:e.id,className:"jio-creator-chip"+(r.categories.includes(e.id)?" is-active":"")},(0,t.createElement)("input",{type:"checkbox",checked:r.categories.includes(e.id),onChange:()=>(e=>{const t=r.categories.includes(e);n({categories:t?r.categories.filter(t=>t!==e):[...r.cateLine truncated
|
||||
(()=>{"use strict";const e={n:t=>{const a=t&&t.__esModule?()=>t.default:()=>t;return e.d(a,{a}),a},d:(t,a)=>{for(var r in a)e.o(a,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},o:(e,t)=>Object.hasOwn(e,t)},t=window.React,a=window.wp.element,r=window.wp.blocks,n=window.wp.blockLibrary,o=window.wp.data,i=window.wp.blockEditor,c=window.wp.wordcount,l=window.wp.i18n;function s(e,t){const a=e&&(e.message||e.error)||(401===t?"登录状态已失效，请刷新页面重新登录。":"请求失败，请稍后重试。"),r=new Error(String(a));return r.status=t,r.code=e&&e.code?String(e.code):"",r.data=e,r}async function u(e){try{return await e.json()}catch(e){return null}}async function m(e,t,a){const r=await fetch(e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a},body:JSON.stringify(t)}),n=await u(r);if(!r.ok)throw s(n,r.status);return n}async function d(e,t,a,r={}){const n=new FormData;n.append("file",t),Object.entries(r).forEach(([e,t])=>n.append(e,t));const o=await fetch(e,{method:"POST",credentials:"same-origin",headers:{"X-WP-Nonce":a},body:n}),i=await u(o);if(!o.ok)throw s(i,o.status);return i}const p=window.wp.apiFetch;var _=e.n(p);const f=window.jioCreatorStudio||{},y=f.nonce||"";function b(e){const{draft:r,setDraft:n,capabilities:o,limits:i,taxonomy:c,isPublishedEdit:s,onClose:u,onSaveDraft:m,onSubmit:p,privateStorage:_,privateUploads:b,saving:E,captcha:g}=e,[j,w]=(0,a.useState)(""),[h,v]=(0,a.useState)(""),[N,k]=(0,a.useState)(!1),S=(0,a.useRef)(null),C=(0,a.useRef)(null),x=(0,a.useRef)(null);(0,a.useEffect)(()=>{const e=x.current,t=document.getElementById("jio-creator-captcha");if(!e||!t)return;const a=t.parentElement;return e.appendChild(t),t.removeAttribute("hidden"),()=>{a&&(a.appendChild(t),t.setAttribute("hidden",""))}},[]);const I=(0,a.useMemo)(()=>(r.title||"").trim().length,[r.title])>=Number(i.titleMin||1),L=()=>{const e=j.trim();if(!e)return;const t=e.split(/[,，\n]+/u).map(e=>e.trim()).filter(Boolean);n({tags:Array.from(new Set([...r.tags,...t]))}),w("")};return(0,t.createElement)("div",{className:"jio-creator-drawer",role:"dialog","aria-modal":"true","aria-labelledby":"jio-creator-publish-title"},(0,t.createElement)("button",{type:"button",className:"jio-creator-drawer__backdrop","aria-label":(0,l.__)("关闭","jio"),onClick:u}),(0,t.createElement)("div",{className:"jio-creator-drawer__panel"},(0,t.createElement)("header",{className:"jio-creator-drawer__head"},(0,t.createElement)("h2",{id:"jio-creator-publish-title"},s?(0,l.__)("提交改稿","jio"):(0,l.__)("发布文章","jio")),(0,t.createElement)("button",{type:"button",className:"jio-creator-drawer__close",onClick:u,"aria-label":(0,l.__)("关闭","jio")},(0,t.createElement)("i",{className:"fa fas fa-times","aria-hidden":"true"}))),(0,t.createElement)("div",{className:"jio-creator-drawer__body"},s&&(0,t.createElement)("p",{className:"jio-creator-drawer__note"},(0,l.__)("审核通过前，读者看到的仍然是当前线上版本。","jio")),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,l.__)("封面","jio")),r.featured?.data?.url?(0,t.createElement)("div",{className:"jio-creator-cover"},(0,t.createElement)("img",{src:String(r.featured.data.url),alt:""}),(0,t.createElement)("button",{type:"button",onClick:()=>n({featured:{type:"",data:{}}}),"aria-label":(0,l.__)("移除封面","jio")},(0,t.createElement)("i",{className:"fa fas fa-times","aria-hidden":"true"}))):o.canUploadImage?(0,t.createElement)("label",{className:"jio-creator-cover-empty"},(0,t.createElement)("input",{ref:S,type:"file",accept:"image/*",onChange:()=>{(async()=>{const e=S.current?.files?.[0];if(e&&f.media?.uploadUrl?.image){v(""),k(!0);try{const t=await d(f.media.uploadUrl.image,e,y),a=Number(t.attachment_id||t.id||0),r=String(t.url||"");if(!a||!r)throw new Error((0,l.__)("上传后无法读取图片。","jio"));n({featured:{type:"image",mediaId:a,data:{id:a,url:r}}})}catch(e){v(String(e?.message||(0,l.__)("上传失败","jio")))}finally{k(!1)}}})()},disabled:N}),(0,t.createElement)("i",{className:"fa fas fa-plus","aria-hidden":"true"}),(0,t.createElement)("span",null,N?(0,l.__)("上传中…","jio"):(0,l.__)("上传封面","jio"))):(0,t.createElement)("p",{className:"jio-creator-muted"},(0,l.__)("当前账号不能设置封面。","jio"))),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,l.__)("分类","jio")),(0,t.createElement)("div",{className:"jio-creator-chips"},0===c.categories.length&&(0,t.createElement)("span",{className:"jio-creator-muted"},(0,l.__)("暂无可选分类","jio")),c.categories.map(e=>(0,t.createElement)("label",{key:e.id,className:"jio-creator-chip"+(r.categories.includes(e.id)?" is-active":"")},(0,t.createElement)("input",{type:"checkbox",checked:r.categories.includes(e.id),onChange:()=>(e=>{const t=r.categories.includes(e);n({categories:t?r.categories.filter(t=>t!==e):[...r.cateLine truncated
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 本地视觉预览页：加载 WordPress 官方 dist 脚本 + Creator Studio 构建产物，
|
||||
* 用一份模拟的 bootstrap 数据渲染工作台，便于在不登录的情况下截图核对视觉。
|
||||
* 仅用于本机视觉验收，不进入主题运行时。
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const [srcArg, outArg] = process.argv.slice(2);
|
||||
const src = srcArg || '/tmp/studio-preview.html';
|
||||
const out = outArg || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/jio-preview.html';
|
||||
|
||||
let html = fs.readFileSync(src, 'utf8');
|
||||
|
||||
const mockBootstrap = {
|
||||
sourceId: 0,
|
||||
versionId: 0,
|
||||
versionRev: 0,
|
||||
status: '',
|
||||
reviewNote: '',
|
||||
title: '',
|
||||
excerpt: '',
|
||||
content:
|
||||
'<!-- wp:paragraph --><p>这是正文的第一段。微信公众号式的编辑体验强调沉浸感：大面积留白、克制的工具栏、只在需要时才出现的设置面板。</p><!-- /wp:paragraph -->',
|
||||
permalink: '',
|
||||
isPublished: false,
|
||||
categories: {
|
||||
items: [
|
||||
{ id: 1, name: '未分类' },
|
||||
{ id: 4, name: '分类一' },
|
||||
{ id: 5, name: '分类二' },
|
||||
],
|
||||
selected: [1],
|
||||
},
|
||||
tags: { items: ['写作', '产品'], enabled: true },
|
||||
custom: {},
|
||||
customDefs: [],
|
||||
featured: { type: '', data: {}, canImage: true, canSlide: false, canVideo: false },
|
||||
pay: {
|
||||
enabled: false,
|
||||
canPay: true,
|
||||
canDownload: true,
|
||||
payModo: 'cash',
|
||||
price: '0.00',
|
||||
points: 0,
|
||||
vip1Price: '0.00',
|
||||
vip2Price: '0.00',
|
||||
payLimit: 0,
|
||||
downloads: [],
|
||||
freeAllowed: true,
|
||||
priceMin: 0,
|
||||
priceMax: 0,
|
||||
pointsMin: 0,
|
||||
pointsMax: 0,
|
||||
privateStorage: false,
|
||||
},
|
||||
capabilities: {
|
||||
canUploadImage: true,
|
||||
canUploadVideo: true,
|
||||
canUploadFile: true,
|
||||
canEmbed: true,
|
||||
canHide: true,
|
||||
canPay: true,
|
||||
canPayDownload: true,
|
||||
canPublishNow: true,
|
||||
canEdit: true,
|
||||
isLoggedIn: true,
|
||||
},
|
||||
limits: { titleMin: 5, titleMax: 30, titlePlaceholder: '请输入标题', contentPlaceholder: '开始写作…' },
|
||||
privateUploads: [],
|
||||
privateStorage: false,
|
||||
media: { maxBytes: 5242880, batch: 6 },
|
||||
rest: { root: 'https://localhost/wp-json/', nonce: 'preview' },
|
||||
urls: { submit: '#', newPost: '#', center: '#' },
|
||||
captcha: { enabled: false },
|
||||
creator: {
|
||||
saveUrl: '#',
|
||||
submitUrl: '#',
|
||||
previewUrl: '#',
|
||||
privateUrl: '#',
|
||||
bootstrapUrl: '#',
|
||||
},
|
||||
blocks: { mediaUploadUrl: '#', mediaListUrl: '#' },
|
||||
nonce: 'preview',
|
||||
};
|
||||
|
||||
// 换成模拟数据。WP 的 wp_add_inline_script 会在结尾追加 sourceURL 注释，
|
||||
// 所以只匹配到 JSON 的结束分号，保留其后的注释。
|
||||
const before = html.length;
|
||||
html = html.replace(
|
||||
/window\.jioCreatorStudio = \{[\s\S]*?\};\n/,
|
||||
`window.jioCreatorStudio = ${JSON.stringify(mockBootstrap)};\n`
|
||||
);
|
||||
if (html.length === before) {
|
||||
console.error('WARN: bootstrap 替换未生效');
|
||||
}
|
||||
|
||||
// 追加一个 banner 说明这是预览
|
||||
html = html.replace(
|
||||
'</body>',
|
||||
`<div style="position:fixed;left:0;right:0;bottom:0;z-index:99999;padding:6px 12px;background:#1d5f52;color:#fff;font:12px/1.6 system-ui;text-align:center">视觉预览（模拟数据）· 非真实登录会话</div></body>`
|
||||
);
|
||||
|
||||
fs.writeFileSync(out, html, 'utf8');
|
||||
console.log('written ' + out + ' bytes=' + html.length);
|
||||
console.log('has studio script: ' + /jio-creator-studio-js/.test(html));
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 截图：打开预览页并保存桌面 / 移动端截图，同时把配色、字体与布局尺寸打印出来。
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const puppeteer = require('puppeteer-core');
|
||||
|
||||
const CANDIDATES = [
|
||||
process.env.JIO_BROWSER,
|
||||
'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
|
||||
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
|
||||
'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
|
||||
].filter(Boolean);
|
||||
const BROWSER = CANDIDATES.find((p) => fs.existsSync(p));
|
||||
|
||||
const URL = process.argv[2] || 'https://localhost/jio-preview.html';
|
||||
const PREFIX = process.argv[3] || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot';
|
||||
|
||||
(async () => {
|
||||
if (!BROWSER) {
|
||||
console.error('no browser');
|
||||
process.exit(1);
|
||||
}
|
||||
const browser = await puppeteer.launch({
|
||||
executablePath: BROWSER,
|
||||
headless: 'new',
|
||||
ignoreHTTPSErrors: true,
|
||||
args: ['--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
|
||||
for (const [name, viewport] of [
|
||||
['desktop', { width: 1440, height: 1000 }],
|
||||
['mobile', { width: 390, height: 844, isMobile: true, hasTouch: true }],
|
||||
]) {
|
||||
const page = await browser.newPage();
|
||||
await page.setViewport(viewport);
|
||||
await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
|
||||
await new Promise((r) => setTimeout(r, 2000));
|
||||
await page.screenshot({ path: `${PREFIX}-${name}.png` });
|
||||
|
||||
const metrics = await page.evaluate(() => {
|
||||
const pick = (sel) => {
|
||||
const el = document.querySelector(sel);
|
||||
if (!el) return null;
|
||||
const cs = getComputedStyle(el);
|
||||
const r = el.getBoundingClientRect();
|
||||
return {
|
||||
text: (el.textContent || '').trim().slice(0, 40),
|
||||
font: `${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily.split(',')[0]}`,
|
||||
weight: cs.fontWeight,
|
||||
color: cs.color,
|
||||
bg: cs.backgroundColor,
|
||||
pad: cs.padding,
|
||||
box: `${Math.round(r.width)}x${Math.round(r.height)}`,
|
||||
};
|
||||
};
|
||||
return {
|
||||
bar: pick('.jio-creator__bar'),
|
||||
title: pick('.jio-creator__title textarea'),
|
||||
excerpt: pick('.jio-creator__excerpt textarea'),
|
||||
canvas: pick('.jio-creator__canvas'),
|
||||
para: pick('.block-editor-block-list__block'),
|
||||
appender: pick('.block-editor-default-block-appender'),
|
||||
primaryBtn: pick('.jio-creator__primary'),
|
||||
ghostBtn: pick('.jio-creator__ghost'),
|
||||
pageBg: getComputedStyle(document.body).backgroundColor,
|
||||
};
|
||||
});
|
||||
console.log(`=== ${name} ===`);
|
||||
console.log(JSON.stringify(metrics, null, 2));
|
||||
await page.close();
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
})();
|
||||
@@ -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>
|
||||
|
||||
@@ -218,26 +218,28 @@ $warn: #b4573f;
|
||||
}
|
||||
|
||||
.jio-creator__canvas {
|
||||
width: min(820px, 100%);
|
||||
/* 公众号式阅读宽度：正文行宽控制在约 40 个汉字，留白优先。 */
|
||||
width: min(720px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 120px;
|
||||
padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 52px) 140px;
|
||||
}
|
||||
|
||||
.jio-creator__title {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
min-height: 50px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--jc-ink);
|
||||
font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
font-size: clamp(26px, 3.4vw, 34px);
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
font-size: clamp(23px, 2.6vw, 27px);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.4;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
@@ -252,29 +254,28 @@ $warn: #b4573f;
|
||||
|
||||
.jio-creator__excerpt {
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--jc-ink-soft);
|
||||
margin-bottom: 4px;
|
||||
color: #9aa8a2;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
padding: 6px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--jc-line);
|
||||
background: transparent;
|
||||
color: var(--jc-ink-soft);
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--jc-accent);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
@@ -282,10 +283,13 @@ $warn: #b4573f;
|
||||
|
||||
.jio-creator__editor {
|
||||
position: relative;
|
||||
/* 行内浮动工具栏相对书写区定位，而不是相对整个页面。 */
|
||||
min-height: 40vh;
|
||||
|
||||
.block-editor-writing-flow {
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
line-height: 1.85;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
|
||||
@@ -293,28 +297,61 @@ $warn: #b4573f;
|
||||
}
|
||||
|
||||
.block-editor-block-list__layout {
|
||||
padding-bottom: 80px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.wp-block {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-creator__inspector {
|
||||
margin-top: 24px;
|
||||
|
||||
.block-editor-block-inspector {
|
||||
border-top: 1px solid var(--jc-line);
|
||||
padding-top: 16px;
|
||||
/* 段落之间留出公众号式的呼吸感，标题上方多留一档。 */
|
||||
.block-editor-block-list__block {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.1em;
|
||||
}
|
||||
|
||||
.block-editor-block-inspector:empty {
|
||||
display: none;
|
||||
.block-editor-block-list__block[data-type='core/heading'] {
|
||||
margin-top: 1.6em;
|
||||
}
|
||||
|
||||
.components-panel__body {
|
||||
/* 选中时的虚线框收敛成低对比描边，贴近公众号的“轻选中”。 */
|
||||
.block-editor-block-list__block.is-selected::after,
|
||||
.block-editor-block-list__block.is-hovered::after {
|
||||
box-shadow: 0 0 0 1.5px rgba(38, 118, 101, 0.35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 行内工具栏：圆角悬浮条，深色底更接近公众号的选中工具条。 */
|
||||
.block-editor-block-contextual-toolbar {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #2b3733;
|
||||
box-shadow: 0 6px 20px rgba(20, 32, 28, 0.22);
|
||||
|
||||
.components-toolbar-group,
|
||||
.components-toolbar {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.components-button {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.is-pressed,
|
||||
&[aria-pressed='true'] {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -63,6 +63,7 @@ $_footer_conter = wp_kses_post(trim((string) $footer_customize_code));
|
||||
|
||||
<?php \Jio\WidgetSystem\WidgetAreas::render('all_bottom_fluid', 'fluid-widget-wrap'); ?>
|
||||
|
||||
<?php if (apply_filters('jio_render_footer', true)) : ?>
|
||||
<footer class="footer" data-jio-shell="site-footer" data-footer-template="<?php echo esc_attr($footer_template); ?>" role="contentinfo">
|
||||
<?php if (is_active_sidebar('all_footer')) : ?>
|
||||
<?php dynamic_sidebar('all_footer'); ?>
|
||||
@@ -237,6 +238,7 @@ $tabbar_enabled = !$jio_hide_chrome && !empty($tabbar_settings['enabled']) &&
|
||||
endif; ?>
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
<?php endif; // jio_render_footer ?>
|
||||
|
||||
<?php
|
||||
// 弹窗登录/注册模板（仅未登录用户）
|
||||
|
||||
+4
-2
@@ -61,9 +61,11 @@ $jio_body_classes[] = 'mobile-nav-' . $jio_mobile_align;
|
||||
|
||||
|
||||
<?php
|
||||
if (function_exists('jio_header')) {
|
||||
if (apply_filters('jio_render_header', true) && function_exists('jio_header')) {
|
||||
jio_header();
|
||||
}
|
||||
|
||||
\Jio\WidgetSystem\WidgetAreas::render('all_top_fluid', 'fluid-widget-wrap');
|
||||
if (apply_filters('jio_render_fluid_widgets', true)) {
|
||||
\Jio\WidgetSystem\WidgetAreas::render('all_top_fluid', 'fluid-widget-wrap');
|
||||
}
|
||||
?>
|
||||
@@ -40,11 +40,19 @@ $use_studio = $studio
|
||||
&& get_current_user_id() > 0
|
||||
&& !empty($ctx['is_can_new']);
|
||||
if ($use_studio) {
|
||||
// 沉浸式工作台：不渲染主题头部/底部挂件与导航，避免与工作台顶栏重复。
|
||||
// header.php 里的 all_top_fluid 挂件区、页脚挂件、浮动入口都由 body class
|
||||
// 与下方过滤器一并屏蔽。
|
||||
add_filter('jio_render_header', '__return_false');
|
||||
add_filter('jio_render_footer', '__return_false');
|
||||
add_filter('jio_render_fluid_widgets', '__return_false');
|
||||
|
||||
get_header();
|
||||
?>
|
||||
<main id="main-content" role="main" tabindex="-1">
|
||||
<main id="main-content" role="main" tabindex="-1" class="jio-studio-shell">
|
||||
<div id="jio-creator-studio">
|
||||
<div class="jio-studio-skeleton" aria-live="polite">
|
||||
<i class="fa fas fa-spinner fa-spin" aria-hidden="true"></i>
|
||||
<?php esc_html_e('正在加载创作工作台…', 'jio'); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user