前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载本文深入剖析 wp-calypso 项目中 Write On 实验Phase 1 fake-door的write-on声明式流程它如何承接在匿名 Write 编辑器/write-editor中写作、点击 Publish 的未登录访客完成 发布 → 注册 → 建站 → 草稿交接 的完整链路。读完本文你将掌握该流程的 Feature Flag 开关机制、localStorage 草稿传递协议、站点创建后的草稿传输实现以及如何复现与验证整条路径。一、背景什么是 write-on flowwrite-on流程是 Write On 实验的 Phase 1 假门fake-door实现用于验证在匿名编辑器中写作 → 注册 → 建站 → 把草稿带回新博客这一产品假设。它面向的是这样一个场景一位未登录访客在匿名 Write 编辑器/write-editor中开始写作并点击 Publish系统需要把这位访客从匿名写作平滑地交接给注册建站流程并最终把他刚写的内容以草稿形式落到新建的站点上。这一流程的说明文档位于 client/landing/stepper/declarative-flow/flows/write-on/README.md核心实现位于 write-on.ts配套的单元测试位于 test/write-on.test.ts。二、Feature Flag全局启用的一键熔断开关整个流程由配置项calypso/write-on-flow控制目前在所有环境下均处于开启状态config/development.jsonconfig/production.jsonconfig/stage.jsonconfig/horizon.jsonconfig/wpcalypso.json从源码看这个 Flag 被刻意设计成一个kill switch熔断开关在initialize()中一旦 Flag 被关闭流程直接触发recordTracksEvent( calypso_write_on_flow_blocked, { reason: flag_off } )并调用window.location.replace( /setup/onboarding )跳回标准引导流程且不暴露任何 step见 write-on.ts。这意味着团队可以在不修改代码的情况下随时把用户从该实验中安全撤离。测试用例redirects to /setup/onboarding, records a blocked event, and exposes no steps when the feature flag is off明确验证了这一点Flag 关闭时initialize()返回空步骤数组、调用location.replace(/setup/onboarding)并上报 blocked 事件见 test/write-on.test.ts。三、流程总览五步交接链路README 中给出的完整流程如下读取匿名草稿读取localStorage[wpcom-write-anon-draft]由匿名 Write 编辑器写入。如果为空重定向到/setup/onboarding如果访客已登录同样重定向到/setup/onboarding。执行内置注册步骤由__experimentalUseBuiltinAuth与stepsWithRequiredLogin配合自动注入注册步骤。创建新站点依次执行STEPS.SITE_CREATION_STEP建站与STEPS.PROCESSING处理。草稿传输通过 WP.com REST API 把匿名草稿以 draft 状态 POST 到新站点。收尾与跳转清除localStorage[wpcom-write-anon-draft]并把用户重定向到新博客上刚创建草稿对应的 Write 编辑器。关键设计之一是草稿的持久性注册流程中途刷新时流程会从 localStorage 重新读取草稿因此草稿能扛住页面刷新草稿只在 POST 成功之后才被清除避免传输失败导致内容丢失。四、源码级拆解从入口到跳转的每一环4.1 草稿的读写与防御性校验在 write-on.ts 中草稿的存储键被定义为常量并附带一个重要的容量上限export const ANON_DRAFT_STORAGE_KEY wpcom-write-anon-draft; export const MAX_DRAFT_SIZE 200_000;MAX_DRAFT_SIZE为 200,000 字符。源码注释说明一篇长篇博文的 Gutenberg block markup 通常远低于 100K 字符任何超过该上限的载荷几乎可以断定是损坏数据或恶意数据会被当作没有草稿处理。readAnonDraft()做了多层防御读取原始字符串若为空或长度超过上限则返回null尝试JSON.parse解析失败如非合法 JSON返回null校验title与content必须为字符串非字符串会被强制转为空字符串若标题与内容均为空返回null整个读取过程被try/catch包裹任何存储异常都视为无草稿由副作用处理器重定向到标准引导流程而不是带着空草稿跑一遍流程。clearAnonDraft()同样以try/catch包裹清除失败时选择忽略——草稿留给下次访问属于无害行为。测试用例如treats an oversized localStorage payload as no draft at publish time、coerces non-string draft fields to empty strings、treats a draft with no string fields as no draft都逐一验证了这些边界情况见 test/write-on.test.ts。4.2 入口守卫登录态与草稿存在性检查useSideEffect中通过hasRunEntryChecksref 保证入口检查每次挂载最多执行一次。这是有讲究的如果在注册中途isLoggedIn翻转时重新执行检查就会把用户从流程中错误地重定向出去打断认证往返见 write-on.ts。入口检查逻辑为若流程已经推进到某个 stepcurrentStepSlug非空说明已过入口阶段跳过检查若用户已登录isLoggedIn记录calypso_write_on_flow_blockedreason 为logged_in并重定向到/setup/onboarding——Phase 1 是登出态的假门已登录用户不应出现在这里若读取不到草稿记录calypso_write_on_flow_blockedreason 为no_draft并同样重定向通过检查后记录calypso_write_on_flow_entered上报draft_size标题与内容长度之和与可选的source参数用于漏斗归因若草稿带标题则调用setSiteTitle( draft.title )把标题预填进 Onboard store建站注册流程可以直接复用。4.3 source 参数的规范化流程支持通过 URL 查询参数?source...携带来源信息如?sourcepost_new并把它一路透传到 Write 编辑器保证整条旅程的 Tracks 归因一致。sanitizeSource()会把原始值小写化并仅保留[a-z0-9_-]字符见 write-on.tsfunction sanitizeSource( raw: string | null ): string { return ( raw || ).toLowerCase().replace( /[^a-z0-9_-]/g, ); }源码注释强调这一规范化与匿名漏斗侧wpcom 的write-editor-anon.php与 jetpack 的view.js保持一致两者都镜像 PHP 的sanitize_key行为。测试sanitizes the source query param to match the anon funnel before forwarding验证了sourcePost_New%21会被规范化为post_new再透传见 test/write-on.test.ts。4.4 建站与草稿传输的提交逻辑useStepNavigation中的submithandler 处理两个关键 step见 write-on.tscreate-site步骤直接navigate( processing, undefined, true )推进到处理步骤。processing步骤核心交接逻辑检查providedDependencies.processingResult是否为ProcessingResult.SUCCESS若不是建站失败保持留在流程中交由 processing step 的错误 UI 呈现失败信息若处理成功但没有siteId/siteSlug同样直接返回重新从 localStorage 读取草稿再次强调即使建站期间发生刷新草稿也能恢复通过wpcom.req.post调用 WP.com REST API 创建草稿const post ( await wpcom.req.post( /sites/${ siteId }/posts/new, { apiVersion: 1.2 }, { title, content, status: draft } ) ) as { ID: number };请求路径为/sites/{siteId}/posts/new使用 API 版本1.2请求体携带title、content与status: draft——即把匿名草稿原样落成新站点上的一篇草稿文章。传输成功后clearAnonDraft()清除本地草稿上报calypso_write_on_draft_transfer_succeeded含site_id并跳转到新站点的 Write 编辑器const params new URLSearchParams( { page: write, post: String( post.ID ) } ); if ( source ) { params.set( source, source ); } window.location.assign( https://${ siteSlug }/wp-admin/admin.php?${ params.toString() } );最终落地 URL 形如https://{newSlug}.wordpress.com/wp-admin/admin.php?pagewritepost{postId}可选携带source参数。4.5 失败路径草稿保留与降级跳转传输失败catch分支时流程采取了宁可留草稿、不丢内容的策略保留 localStorage 中的草稿供用户重试上报calypso_write_on_draft_transfer_failed事件错误消息截断至 200 字符防止上报载荷过大通过logToLogstash写入服务端日志携带feature: calypso_client、severity: error、blog_id与type: write_on_draft_transfer_failed重定向到/home/{siteSlug}让用户至少能落到一个有意义的位置站点首页。用户可见的错误提示由上游标准新建站点流程负责呈现这里不做重复处理。测试用例preserves the localStorage draft, logs to logstash, and lands on the site home when the POST fails与truncates the error message on the failed-transfer tracks event完整覆盖了失败与消息截断行为见 test/write-on.test.ts。五、流程的注册与身份在 registered-flows.ts 中WRITE_ON_FLOW被注册为按需加载webpack chunk 名为write-on-flow[ WRITE_ON_FLOW ]: () import( /* webpackChunkName: write-on-flow */ ./flows/write-on/write-on ),而WRITE_ON_FLOW常量定义于 packages/onboarding/src/utils/flows.ts值为字符串write-on对应的 URL 路由即/setup/write-on。同一文件还提供isWriteOnFlow()判断工具。在 write-on.ts 中流程对象本身标记了三个关键属性const writeOn: FlowV2 typeof initialize { name: WRITE_ON_FLOW, isSignupFlow: true, __experimentalUseBuiltinAuth: true, ... };其中__experimentalUseBuiltinAuth: true与stepsWithRequiredLogin共同作用让注册signup步骤被自动注入到流程中无需在 step 列表里手动声明。测试is registered as a signup flow with built-in auth验证了这三项配置见 test/write-on.test.ts。六、手动测试指南README 提供了完整的端到端手动验证步骤可直接在本地复现在任意calypso.localhost:3000页面打开 DevTools确保 localStorage 写入落在正确的 origin在控制台粘贴以下代码——这段 block markup 与匿名编辑器 autosave 最终会写入的内容一致因此 Write 编辑器打开草稿时不会触发 classic editor 格式化弹窗localStorage.setItem(wpcom-write-anon-draft, JSON.stringify({title:Test,content:!-- wp:paragraph --pTest/p!-- /wp:paragraph --!-- wp:paragraph --pTesting.../p!-- /wp:paragraph --!-- wp:paragraph --pTest more..../p!-- /wp:paragraph --,ts:Date.now()}));保持登出状态访问/setup/write-on完成注册验证新站点创建成功且落地于https://{newSlug}.wordpress.com/wp-admin/admin.php?pagewritepost{id}Write 编辑器中已加载上述三个段落验证localStorage[wpcom-write-anon-draft]已被清除无草稿状态下再次访问/setup/write-on确认被重定向到/setup/onboarding登录状态下访问/setup/write-on确认同样被重定向到/setup/onboarding。这六步分别对应了草稿注入、成功链路、草稿清除、无草稿守卫、登录态守卫五类行为与单元测试覆盖的行为一一对应。七、总结write-on流程是 wp-calypso 声明式流程体系中一个典型的假门 交接实现以 Feature Flag 作为一键熔断以 localStorage 作为匿名草稿的中转载体以内置注册 建站 REST 草稿传输串联整条链路。它在工程上的几个关键决策值得借鉴熔断优先Flag 关闭即整流程下线并回落标准引导风险可控草稿不丢刷新可恢复、传输失败不清理且对损坏/超限载荷做了严格防御路径一致source参数在匿名漏斗、Stepper 流程、Write 编辑器三段保持统一规范化保证归因链路完整可观测进入、被拦截、传输成功、传输失败均有 Tracks 事件失败场景另有 Logstash 服务端日志。如果你需要在 wp-calypso 中新增类似的匿名体验 → 注册建站 → 内容落地交接流程write-on.ts 及其测试是最直接的参考样板。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso 的 write-new-site flow 解析登录用户一键建站直达 Write 编辑器wp calypso 的 write new site flow 解析登录用户一键建站直达 Write 编辑器 本篇文章聚焦 WordPress.comwp前端CMSwp-calypso AddNewSite 组件架构解析环境无关的“添加新站点”交互方案wp calypso AddNewSite 组件架构解析环境无关的“添加新站点”交互方案 导读 AddNewSite 是 WordPress.com 控制台前端CMSwp-calypso Reader 站点流链接组件 ReaderSiteStreamLink从 href 生成到点击埋点的完整实现解析wp calypso Reader 站点流链接组件 ReaderSiteStreamLink从 href 生成到点击埋点的完整实现解析 导读 ReaderSi前端CMS上一篇Switch 手柄适配工具 BetterJoy 上手教程6 步让 Pro、Joy-Con 变成 PC 原生手柄下一篇408考研怎么复习才不白熬3条主线把刷题时间换成分数创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考