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
1 parent
d07cffe99e
commit
79909f449e
10 files changed
+678
-7
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' => 'c0ff9955a1748c193f64');
|
||||
<?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' => '82caafe73e40bfbf13d5');
|
||||
@@ -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(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
|
||||
.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 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
|
||||
(()=>{"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,l=window.wp.wordcount,c=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||{},b=f.nonce||"";function y(e){const{draft:r,setDraft:n,capabilities:o,limits:i,taxonomy:l,isPublishedEdit:s,onClose:m,onSaveDraft:u,onSubmit:p,privateStorage:_,privateUploads:y,saving:E,captcha:j}=e,[g,h]=(0,a.useState)(""),[w,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=g.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]))}),h("")};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,c.__)("关闭","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,c.__)("提交改稿","jio"):(0,c.__)("发布文章","jio")),(0,t.createElement)("button",{type:"button",className:"jio-creator-drawer__close",onClick:m,"aria-label":(0,c.__)("关闭","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,c.__)("审核通过前，读者看到的仍然是当前线上版本。","jio")),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,c.__)("封面","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,c.__)("移除封面","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,b),a=Number(t.attachment_id||t.id||0),r=String(t.url||"");if(!a||!r)throw new Error((0,c.__)("上传后无法读取图片。","jio"));n({featured:{type:"image",mediaId:a,data:{id:a,url:r}}})}catch(e){v(String(e?.message||(0,c.__)("上传失败","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,c.__)("上传中…","jio"):(0,c.__)("上传封面","jio"))):(0,t.createElement)("p",{className:"jio-creator-muted"},(0,c.__)("当前账号不能设置封面。","jio"))),(0,t.createElement)("section",{className:"jio-creator-field"},(0,t.createElement)("h3",null,(0,c.__)("分类","jio")),(0,t.createElement)("div",{className:"jio-creator-chips"},0===l.categories.length&&(0,t.createElement)("span",{className:"jio-creator-muted"},(0,c.__)("暂无可选分类","jio")),l.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,74 @@
|
||||
/**
|
||||
* 交互冒烟：验证插入面板能打开、能插入区块，封面条存在，
|
||||
* 并记录无法捕获的 promise 拒绝。
|
||||
*/
|
||||
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)\\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';
|
||||
|
||||
(async () => {
|
||||
const browser = await puppeteer.launch({
|
||||
executablePath: BROWSER,
|
||||
headless: 'new',
|
||||
ignoreHTTPSErrors: true,
|
||||
args: ['--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
const page = await browser.newPage();
|
||||
await page.setViewport({ width: 1440, height: 1000 });
|
||||
|
||||
const errors = [];
|
||||
page.on('pageerror', (e) => errors.push('pageerror: ' + e.message));
|
||||
|
||||
await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
|
||||
await new Promise((r) => setTimeout(r, 2500));
|
||||
|
||||
const before = await page.evaluate(() => ({
|
||||
blocks: document.querySelectorAll('.block-editor-block-list__block').length,
|
||||
hasInsertBtn: !!document.querySelector('.jio-creator__insert'),
|
||||
hasCover: !!document.querySelector('.jio-creator__cover'),
|
||||
}));
|
||||
console.log('BEFORE ' + JSON.stringify(before));
|
||||
|
||||
// 打开插入面板
|
||||
await page.click('.jio-creator__insert');
|
||||
await new Promise((r) => setTimeout(r, 400));
|
||||
const panel = await page.evaluate(() => ({
|
||||
open: !!document.querySelector('.jio-insert__panel'),
|
||||
items: Array.from(document.querySelectorAll('.jio-insert-item__label')).map((n) => n.textContent),
|
||||
}));
|
||||
console.log('PANEL ' + JSON.stringify(panel));
|
||||
|
||||
// 插入「标题」区块
|
||||
const clicked = await page.evaluate(() => {
|
||||
const btn = Array.from(document.querySelectorAll('.jio-insert-item')).find(
|
||||
(b) => (b.textContent || '').includes('标题')
|
||||
);
|
||||
if (!btn) return false;
|
||||
btn.click();
|
||||
return true;
|
||||
});
|
||||
await new Promise((r) => setTimeout(r, 900));
|
||||
|
||||
const after = await page.evaluate(() => ({
|
||||
panelClosed: !document.querySelector('.jio-insert__panel'),
|
||||
blocks: document.querySelectorAll('.block-editor-block-list__block').length,
|
||||
hasHeading: !!document.querySelector('[data-type="core/heading"]'),
|
||||
}));
|
||||
console.log('AFTER ' + JSON.stringify({ clicked, ...after }));
|
||||
|
||||
await page.screenshot({ path: 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot-insert.png' });
|
||||
|
||||
if (errors.length) {
|
||||
console.log('--- errors ---');
|
||||
errors.slice(0, 10).forEach((e) => console.log(e));
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
})();
|
||||
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* 封面预览条（公众号式）。
|
||||
*
|
||||
* 位于标题上方一行：有封面时显示缩略图，点击回到发布抽屉的封面区；
|
||||
* 无封面时给一个低调的入口。封面能力由服务端 bootstrap 决定，前端不放大权限。
|
||||
*
|
||||
* @package Jio
|
||||
*/
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
type Featured = { type: string; data: Record<string, any>; mediaId?: number };
|
||||
|
||||
type Props = {
|
||||
featured: Featured;
|
||||
canEdit: boolean;
|
||||
onOpen: () => void;
|
||||
onClear: () => void;
|
||||
};
|
||||
|
||||
export function CoverStrip({ featured, canEdit, onOpen, onClear }: Props) {
|
||||
const url = typeof featured?.data?.url === 'string' ? featured.data.url : '';
|
||||
|
||||
if (!canEdit) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!url) {
|
||||
return (
|
||||
<button type="button" className="jio-creator__cover is-empty" onClick={onOpen}>
|
||||
<i className="fa far fa-image" aria-hidden="true" />
|
||||
<span>{__('添加封面', 'jio')}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="jio-creator__cover">
|
||||
<button type="button" className="jio-creator__cover-thumb" onClick={onOpen}>
|
||||
<img src={url} alt="" />
|
||||
<span className="jio-creator__cover-edit">
|
||||
<i className="fa fas fa-pen" aria-hidden="true" />
|
||||
{__('更换封面', 'jio')}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="jio-creator__cover-clear"
|
||||
onClick={onClear}
|
||||
aria-label={__('移除封面', 'jio')}
|
||||
>
|
||||
<i className="fa fas fa-times" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
*/
|
||||
|
||||
import { createRoot, useCallback, useEffect, useMemo, useRef, useState } from '@wordpress/element';
|
||||
import { parse, serialize } from '@wordpress/blocks';
|
||||
import { createBlock, parse, serialize } from '@wordpress/blocks';
|
||||
import { registerCoreBlocks } from '@wordpress/block-library';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { BlockEditorProvider, BlockList, BlockTools } from '@wordpress/block-editor';
|
||||
import { count as countWords } from '@wordpress/wordcount';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
@@ -20,6 +20,9 @@ import { apiPost } from './services/api';
|
||||
import { installApiFetchNonce } from './services/api-fetch';
|
||||
import { installMediaUploadBridge } from './services/media';
|
||||
import { PublishDrawer } from './panels/publish-drawer';
|
||||
import { CoverStrip } from './components/cover-strip';
|
||||
import { InsertPanel, type InsertItem } from './panels/insert-panel';
|
||||
import { buildInsertGroups } from './utils/insert-items';
|
||||
import { SaveState, type SaveStateValue } from './components/save-state';
|
||||
import { useAutosave } from './hooks/use-autosave';
|
||||
import { useLocalRecovery } from './hooks/use-local-recovery';
|
||||
@@ -106,6 +109,7 @@ function Studio(): JSX.Element {
|
||||
const [blocks, setBlocks] = useState(() => parse(draft.content || ''));
|
||||
const [saveState, setSaveState] = useState<SaveStateValue>({ state: 'ready', at: '' });
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [insertOpen, setInsertOpen] = useState(false);
|
||||
const [notice, setNotice] = useState<{ tone: 'ok' | 'error'; text: string } | null>(null);
|
||||
const [recovery, setRecovery] = useState<null | { savedAt: string }>(null);
|
||||
const dirtyRef = useRef(false);
|
||||
@@ -328,9 +332,26 @@ function Studio(): JSX.Element {
|
||||
[]
|
||||
);
|
||||
|
||||
const insertGroups = useMemo(() => buildInsertGroups(capabilities), [capabilities]);
|
||||
|
||||
const insertBlock = useCallback(
|
||||
(item: InsertItem) => {
|
||||
setInsertOpen(false);
|
||||
dirtyRef.current = true;
|
||||
setBlocks((current: any[]) => {
|
||||
// 空文档时直接替换初始的空白段落，避免留下一个空行。
|
||||
const next = [...current];
|
||||
if (next.length === 1 && next[0].name === 'core/paragraph' && !next[0].attributes?.content) {
|
||||
return [createBlock(item.name, item.attributes || {})];
|
||||
}
|
||||
return [...next, createBlock(item.name, item.attributes || {})];
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="jio-creator" data-status={bootstrap.status || ''} data-blocks={selectedBlockCount}>
|
||||
<header className="jio-creator__bar">
|
||||
<div className="jio-creator" data-status={bootstrap.status || ''} data-blocks={selectedBlockCount}> <header className="jio-creator__bar">
|
||||
<a className="jio-creator__back" href={bootstrap.urls?.center || '/'}>
|
||||
<i className="fa fas fa-angle-left" aria-hidden="true" />
|
||||
<span>{__('返回', 'jio')}</span>
|
||||
@@ -371,6 +392,13 @@ function Studio(): JSX.Element {
|
||||
)}
|
||||
|
||||
<main className="jio-creator__canvas">
|
||||
<CoverStrip
|
||||
featured={draft.featured}
|
||||
canEdit={!!capabilities.canUploadImage}
|
||||
onOpen={() => setDrawerOpen(true)}
|
||||
onClear={() => patchDraft({ featured: { type: '', data: {} } })}
|
||||
/>
|
||||
|
||||
<label className="jio-creator__title">
|
||||
<span className="screen-reader-text">{__('文章标题', 'jio')}</span>
|
||||
<textarea
|
||||
@@ -407,6 +435,18 @@ function Studio(): JSX.Element {
|
||||
<BlockList />
|
||||
</BlockTools>
|
||||
</BlockEditorProvider>
|
||||
|
||||
{/* 公众号式常驻插入按钮：始终停在正文末尾，点击打开内容面板。 */}
|
||||
<button
|
||||
type="button"
|
||||
className="jio-creator__insert"
|
||||
onClick={() => setInsertOpen(true)}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={insertOpen}
|
||||
>
|
||||
<i className="fa fas fa-plus" aria-hidden="true" />
|
||||
<span>{__('添加内容', 'jio')}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<footer className="jio-creator__footer">
|
||||
@@ -417,6 +457,14 @@ function Studio(): JSX.Element {
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
{insertOpen && (
|
||||
<InsertPanel
|
||||
groups={insertGroups}
|
||||
onInsert={insertBlock}
|
||||
onClose={() => setInsertOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{drawerOpen && (
|
||||
<PublishDrawer
|
||||
draft={draft}
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* 悬浮插入面板（公众号式）。
|
||||
*
|
||||
* 正文底部常驻一个「+」，点开是分组网格：常用文本、媒体、样式。
|
||||
* 桌面端为居中浮层，移动端贴底弹出；键盘可操作，Esc 关闭。
|
||||
*
|
||||
* @package Jio
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useRef } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
export type InsertItem = {
|
||||
name: string;
|
||||
title: string;
|
||||
icon: string;
|
||||
attributes?: Record<string, any>;
|
||||
};
|
||||
|
||||
export type InsertGroup = {
|
||||
label: string;
|
||||
items: InsertItem[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
groups: InsertGroup[];
|
||||
onInsert: (item: InsertItem) => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function InsertPanel({ groups, onInsert, onClose }: Props) {
|
||||
const panelRef = useRef<HTMLDivElement | null>(null);
|
||||
const closeRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
const items = useMemo(() => groups.flatMap((group) => group.items), [groups]);
|
||||
|
||||
useEffect(() => {
|
||||
closeRef.current?.focus();
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (!['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
// 在网格内用方向键移动焦点，避免必须用鼠标。
|
||||
const buttons = Array.from(
|
||||
panelRef.current?.querySelectorAll<HTMLButtonElement>('.jio-insert-item') || []
|
||||
);
|
||||
const index = buttons.indexOf(document.activeElement as HTMLButtonElement);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const columns = window.innerWidth <= 767 ? 4 : 6;
|
||||
const delta =
|
||||
event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowDown' ? columns : -columns;
|
||||
const next = Math.min(buttons.length - 1, Math.max(0, index + delta));
|
||||
buttons[next]?.focus();
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => document.removeEventListener('keydown', onKeyDown);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className="jio-insert" role="dialog" aria-modal="true" aria-label={__('添加内容', 'jio')}>
|
||||
<button
|
||||
type="button"
|
||||
className="jio-insert__backdrop"
|
||||
aria-label={__('关闭', 'jio')}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="jio-insert__panel" ref={panelRef}>
|
||||
<header className="jio-insert__head">
|
||||
<h2>{__('添加内容', 'jio')}</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="jio-insert__close"
|
||||
onClick={onClose}
|
||||
ref={closeRef}
|
||||
aria-label={__('关闭', 'jio')}
|
||||
>
|
||||
<i className="fa fas fa-times" aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="jio-insert__body">
|
||||
{groups.map((group) =>
|
||||
group.items.length === 0 ? null : (
|
||||
<section className="jio-insert__group" key={group.label}>
|
||||
<h3>{group.label}</h3>
|
||||
<div className="jio-insert__grid">
|
||||
{group.items.map((item) => (
|
||||
<button
|
||||
key={item.name}
|
||||
type="button"
|
||||
className="jio-insert-item"
|
||||
onClick={() => onInsert(item)}
|
||||
>
|
||||
<span className="jio-insert-item__icon" aria-hidden="true">
|
||||
<i className={item.icon} />
|
||||
</span>
|
||||
<span className="jio-insert-item__label">{item.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
)}
|
||||
|
||||
{items.length === 0 && (
|
||||
<p className="jio-creator-muted">{__('当前账号没有可插入的内容类型。', 'jio')}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -364,6 +364,255 @@ $warn: #b4573f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 封面预览条 ---------- */
|
||||
|
||||
.jio-creator__cover {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&.is-empty {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px dashed #d3ded8;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #8c9a94;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, color 0.16s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jio-creator__cover-thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: #eef3f0;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 2.35 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--jc-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-creator__cover-edit {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
background: linear-gradient(to top, rgba(15, 25, 22, 0.62), rgba(15, 25, 22, 0));
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.jio-creator__cover-thumb:hover .jio-creator__cover-edit,
|
||||
.jio-creator__cover-thumb:focus-visible .jio-creator__cover-edit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.jio-creator__cover-clear {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(15, 25, 22, 0.55);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: rgba(15, 25, 22, 0.78);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 常驻插入按钮 ---------- */
|
||||
|
||||
.jio-creator__insert {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 46px;
|
||||
margin: 8px 0 26px;
|
||||
border: 1px dashed #d3ded8;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #7c8c86;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
background: #f1f7f4;
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 插入面板 ---------- */
|
||||
|
||||
.jio-insert {
|
||||
position: fixed;
|
||||
z-index: 520;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.jio-insert__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: rgba(23, 34, 31, 0.34);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.jio-insert__panel {
|
||||
position: relative;
|
||||
width: min(560px, 100%);
|
||||
max-height: min(78vh, 640px);
|
||||
overflow: hidden auto;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 70px rgba(20, 32, 28, 0.22);
|
||||
}
|
||||
|
||||
.jio-insert__head {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 22px 12px;
|
||||
border-bottom: 1px solid $line;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: $ink-soft;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: #eef3f0;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__body {
|
||||
padding: 16px 22px 24px;
|
||||
}
|
||||
|
||||
.jio-insert__group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
color: #9aa8a2;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.jio-insert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 4px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
background: #f7f9f8;
|
||||
color: $ink;
|
||||
cursor: pointer;
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
background: #eef5f2;
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert-item__icon {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.jio-insert-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- 发布抽屉 ---------- */
|
||||
|
||||
.jio-creator-drawer {
|
||||
@@ -852,6 +1101,27 @@ $warn: #b4573f;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 插入面板改为贴底抽屉，贴合手机拇指操作区。 */
|
||||
.jio-insert {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jio-insert__panel {
|
||||
width: 100%;
|
||||
max-height: 76dvh;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.jio-insert__grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jio-creator__insert {
|
||||
margin-bottom: calc(26px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
@@ -142,3 +142,39 @@ test('creator studio build artifacts and contracts exist', () => {
|
||||
assert.ok(exists('src/Core/PreviewToken.php'));
|
||||
assert.ok(exists('src/Admin/Native/SubmissionReview.php'));
|
||||
});
|
||||
|
||||
test('沉浸式布局屏蔽主题头部/页脚与挂件区', () => {
|
||||
const header = read('header.php');
|
||||
const footer = read('footer.php');
|
||||
// 工作台模式下这些输出必须可关闭，否则顶栏重复、正文被挂件挤压。
|
||||
assert.match(header, /apply_filters\('jio_render_header', true\)/);
|
||||
assert.match(header, /apply_filters\('jio_render_fluid_widgets', true\)/);
|
||||
assert.match(footer, /apply_filters\('jio_render_footer', true\)/);
|
||||
assert.match(pageSubmit, /add_filter\('jio_render_header', '__return_false'\)/);
|
||||
assert.match(pageSubmit, /add_filter\('jio_render_footer', '__return_false'\)/);
|
||||
assert.match(pageSubmit, /add_filter\('jio_render_fluid_widgets', '__return_false'\)/);
|
||||
});
|
||||
|
||||
test('插入面板与封面条走真实区块名与服务端能力', () => {
|
||||
const insertItems = read('assets/creator-studio/src/utils/insert-items.ts');
|
||||
const insertPanel = read('assets/creator-studio/src/panels/insert-panel.tsx');
|
||||
const cover = read('assets/creator-studio/src/components/cover-strip.tsx');
|
||||
|
||||
assert.match(appSource, /createBlock/);
|
||||
assert.match(insertItems, /'core\/paragraph'/);
|
||||
assert.match(insertItems, /'core\/heading'/);
|
||||
assert.match(insertItems, /'core\/image'/);
|
||||
assert.match(insertItems, /'jio\/paid-fragment'/);
|
||||
// 没有能力的条目不能出现在面板里。
|
||||
assert.match(insertItems, /if \(capabilities\.canUploadImage\)/);
|
||||
assert.match(insertItems, /if \(capabilities\.canPay\)/);
|
||||
assert.match(insertPanel, /role="dialog"/);
|
||||
assert.match(insertPanel, /event\.key === 'Escape'/);
|
||||
assert.match(cover, /添加封面/);
|
||||
assert.match(appSource, /<CoverStrip/);
|
||||
});
|
||||
|
||||
test('中文字数按字符统计而非按空格分词', () => {
|
||||
assert.match(appSource, /characters_excluding_spaces/);
|
||||
assert.doesNotMatch(appSource, /countWords\([^)]*'words'/);
|
||||
});
|
||||
Reference in new issue
Block a user