前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载在 WordPress.com 的 Calypso 前端中WooCommerce 安装woocommerce-install是一个多步骤的引导流程它需要综合站点资格、Atomic 迁移状态、套餐升级需求等多维度数据来决定流程的走向。本文以仓库中的 use-woop-handling/Readme.md 为骨架结合其底层实现 index.ts完整讲解useWooCommerceOnPlansEligibility源码中实际导出名为useEligibility这一自定义 React Hook 的用法、返回 API 与判定逻辑。读完本文你将掌握该 Hook 如何聚合资格数据、如何在组件中消费它完成子域名告警与流程放行判断以及它背后的状态选择器与常量体系。一、Hook 的定位与设计目标useWooCommerceOnPlansEligibility是一个资格数据处理专用 Hook其核心目标是将散落在 Calypso Redux 状态树中的资格eligibility数据加工成一个清晰、可直接消费的对象专门服务于 woocommerce-install 流程。从实现看它位于 client/signup/steps/woocommerce-install/hooks/use-woop-handling/是 WooCommerce 安装步骤目录同级的还有confirm/、step-business-info/、step-store-address/、transfer/等步骤组件所共用的数据处理层。它同时承担了四类职责数据拉取挂载时向 Redux 派发多个请求 action获取资格、产品列表与最新 Atomic 迁移记录状态订阅通过useSelector订阅资格、站点、当前用户等多份状态派生计算把原始数据加工为子域名、转移阻塞标记、升级信息等派生值流程门控产出isReadyToStart等标志供安装流程决定当前站点能否进入下一环节。二、基本用法继承原文档原文档给出了一个消费该 Hook 的典型组件示例当站点存在 WordPress.com 子域名告警时渲染一张警告卡片提示用户域名即将变更为 staging 域名。import useWooCommerceOnPlansEligibility from ../hooks/use-eligibility; function WordPressSubdomainWarningCard() { const { wpcomSubdomainWarning, stagingDomain } useWooCommerceOnPlansEligibility( siteId ); if ( ! wpcomSubdomainWarning ) { return null; } return ( div classNamecard is-warning Domain is going to change to { stagingDomain }. /div ); }需要说明两点与当前仓库的对应关系原文档示例中的导入路径../hooks/use-eligibility属于历史命名在当前仓库中该 Hook 的实现在 client/signup/steps/woocommerce-install/hooks/use-woop-handling/index.ts默认导出的函数名是useEligibility( siteId )接受的唯一参数是siteId: number。使用方式不变传入站点 ID解构出你需要的字段例如上面示例解构的wpcomSubdomainWarning与stagingDomain都是该 Hook 的返回字段具体语义见下文 API 一节。从实际调用链看该 Hook 在 woocommerce-install 的 transfer 目录如index.tsx、transfer-site.tsx、step-content.tsx、install-plugins.tsx、progress.tsx中被消费用于驱动迁移与安装的进度展示、阻塞提示与升级引导。三、APIHook 返回对象逐字段解析原文档列出了 Hook 返回对象的属性清单eligibilityHolds、eligibilityWarnings、wpcomDomain、stagingDomain、wpcomSubdomainWarning、transferringBlockers、isTransferringBlocked、siteUpgrading、isReadyToStart、isDataReady。对照 index.ts 中定义的EligibilityHook类型当前实现实际返回 12 个字段。下面按语义分组逐一说明以源码为准并标注与原文档清单的对应关系。3.1 域名与子域名类字段类型说明wpcomDomainstring \| null站点当前的 WordPress.com 域名直接取自站点选择器getSiteDomain对应原文档中的wpcomDomain。stagingDomainstring \| null由wpcomDomain派生出的 staging 域名把域名中的.wordpress.com替换为.wpcomstaging.com。wpcomSubdomainWarningEligibilityWarning \| undefined从原始资格告警列表中查找 id 为wordpress_subdomain的告警对象用于判断站点是否即将从*.wordpress.com迁往 staging 域名。stagingDomain的派生逻辑位于 index.ts// Get staging sudomain based on the wpcom subdomain. const stagingDomain wpcomDomain?.replace( /\b\.wordpress\.com/, .wpcomstaging.com ) || null;3.2 资格数据类字段类型说明warningsEligibilityWarning[]对应原文档中的eligibilityWarnings。是过滤后的告警列表——将 id 为wordpress_subdomain的告警剔除因为它已被wpcomSubdomainWarning单独处理见下文默认空数组。transferringBlockersstring[]对应原文档中的eligibilityHolds。是过滤后的资格阻塞hold列表排除NO_BUSINESS_PLAN与TRANSFER_ALREADY_EXISTS两项后剩余的 hold 集合过滤逻辑见 index.ts。3.3 转移状态类字段类型说明isDataReadyboolean转移相关数据是否可用transferringBlockers已被定义且transfer或transferError至少有一方已返回。isTransferringBlockedboolean站点转移是否被阻塞。默认视为阻塞即请求进行中时返回true只有数据就绪且无任何 blocker 时才为false。阻塞判定综合了两路信号index.ts资格 holds过滤后transferringBlockers非空最新 Atomic 转移记录状态当状态接口返回 5xx 错误transferError?.status 500或记录标记is_stuck为true时会额外追加BLOCKED_ATOMIC_TRANSFER这一 hold。const isTransferStuck transfer?.is_stuck || false; const isBlockByTransferStatus transferError transferError?.status 500;3.4 升级信息类字段类型说明siteUpgrading{ required: boolean; checkoutUrl: string; checkoutText: string; productName: string; description: string }站点升级套餐的完整描述对象供安装流程在需要先升级再安装时引导用户进入结账页。其构造逻辑见 index.tsrequired站点尚不具备woopfeature 时为trueproductName从getPlansForFeature( state, siteId, FEATURE_WOOP )返回的计划列表中取第一个再用getProductBySlug解析出产品名计划优先级由商店产品列表决定checkoutUrl拼装/checkout/${ wpcomDomain }/${ product_slug }并附带redirect_to指向/start/woocommerce-install/transfer与cancel_to指向/start/woocommerce-install/confirm两个回跳参数checkoutText/description基于产品名生成例如 Upgrade to the WordPress.com Business plan and set up your WooCommerce store.无产品名时回退为通用文案 Upgrade 与 Upgrade to set up your WooCommerce store.。3.5 流程门控与辅助类字段类型说明isReadyToStartboolean站点是否满足开始 WooCommerce 安装的全部前置条件详见下一节。isAtomicSiteboolean站点是否已是 Atomic 站点由isAtomicSiteSelector判定。currentUserEmailstring当前登录用户的邮箱取自getCurrentUserEmail。isEmailVerifiedboolean当前用户邮箱是否已验证取自isCurrentUserEmailVerified。原文档中列出的eligibilityHolds与eligibilityWarnings两个原始字段并未被直接返回——实现把它们加工成了transferringBlockers与warnings这一点在使用时需要注意。四、数据请求与底层状态支撑Hook 在挂载时通过一个useEffect派发三份请求index.tsuseEffect( () { if ( ! siteId ) { return; } dispatch( requestEligibility( siteId ) ); dispatch( requestProductsList() ); dispatch( requestLatestAtomicTransfer( siteId ) ); }, [ siteId, dispatch ] );requestEligibility( siteId )请求站点资格数据来源于calypso/state/automated-transfer/actionsrequestProductsList()请求商店产品列表用于后续按产品 slug 解析计划名requestLatestAtomicTransfer( siteId )请求最新一次 Atomic 迁移记录来源于calypso/state/atomic/transfers/actions。4.1 资格数据选择器资格数据的读取走getEligibility选择器client/state/automated-transfer/selectors/index.tsexport const getEligibilityData ( state: AppState ): EligibilityData state?.eligibility ?? { lastUpdate: 0 }; export const getEligibility ( state: AppState, siteId: number | null ) getEligibilityData( getAutomatedTransfer( state, siteId ) );Hook 中通过useSelector( ( state ) getEligibility( state, siteId ) )订阅解构出eligibilityHolds与eligibilityWarnings两份原始数据。4.2 资格 Holds 常量体系transferringBlockers的过滤依赖calypso/state/automated-transfer/constants中的eligibilityHolds常量对象client/state/automated-transfer/constants.ts。完整常量清单如下常量值语义结合>export const FEATURE_WOOP woop;该特性是否开启由 WordPress.com 在商店产品列表中定义Hook 通过siteHasFeature( state, siteId, FEATURE_WOOP )订阅。五、isReadyToStart何时放行安装流程isReadyToStart是流程门控的核心标志。其完整判定逻辑index.ts分为两层第一层基础条件let isReadyToStart !! ( siteId transferringDataIsAvailable hasWoopFeature );即站点 ID 已定义、转移数据已就绪、且站点已具备woopfeature。第二层非 Atomic 站点的附加校验当站点尚未迁移为 Atomic 时还需同时满足if ( isReadyToStart ! isAtomicSite ) { isReadyToStart isReadyToStart ! isTransferringBlocked // there is no blockers from eligibility (holds). ! ( eligibilityWarnings eligibilityWarnings.length ); // there is no warnings from eligibility (warnings). }也就是说对于普通站点任何资格阻塞holds或资格告警warnings存在都会让流程无法开始而已经是 Atomic 的站点则跳过这两项校验因为它们已在流程的其他环节被处理。这套逻辑确保了安装流程只在数据齐备、无阻塞、无告警、特性就绪时才放行用户进入下一步。六、使用建议与注意事项siteId 为必传参数Hook 在siteId为空时会跳过所有数据请求见 index.ts因此调用方应确保在拿到有效站点 ID 后再渲染依赖该 Hook 的组件。加载态的默认语义isTransferringBlocked在数据请求期间默认返回trueisDataReady为false。UI 层应优先判断isDataReady避免把数据未就绪误判为站点被阻塞。子域名告警单独处理wordpress_subdomain告警被从warnings中剔除并单独暴露为wpcomSubdomainWarning配合stagingDomain可以在流程早期如 confirm 步骤向用户预告域名将变为*.wpcomstaging.com。升级引导内置siteUpgrading已封装好checkoutUrl、按钮文案与描述组件层无需再自行拼装结账链接当required为true时直接展示升级引导即可。文档与实现的差异原 Readme 中的 API 清单eligibilityHolds/eligibilityWarnings在实现中已被加工为transferringBlockers/warnings返回并额外增加了isAtomicSite、currentUserEmail、isEmailVerified等辅助字段以源码为准。七、延伸阅读Hook 实现与类型定义client/signup/steps/woocommerce-install/hooks/use-woop-handling/index.ts官方说明文档client/signup/steps/woocommerce-install/hooks/use-woop-handling/Readme.md资格常量与转移状态client/state/automated-transfer/constants.ts资格选择器client/state/automated-transfer/selectors/index.ts服务端 hold 映射client/state/data-layer/wpcom/sites/automated-transfer/eligibility/index.js特性常量定义packages/calypso-products/src/constants/features.ts消费该 Hook 的转移步骤目录client/signup/steps/woocommerce-install/transfer/赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐深入解析 wp-calypso 的 logmein 模块用 logmeindirect 实现映射域名远程登录重定向深入解析 wp calypso 的 logmein 模块用 logmeindirect 实现映射域名远程登录重定向 logmein 是 wp calypso前端CMSWordPress.com Calypso 复活用户回流弹窗资格判定、ExPlat 实验分配与展示行为全链路解析WordPress.com Calypso 复活用户回流弹窗资格判定、ExPlat 实验分配与展示行为全链路解析 本文以 client/lib/resurre前端CMS深入解析anti-AD项目中的争议域名处理策略深入解析anti AD项目中的争议域名处理策略 项目背景与核心思想 anti AD是一个专注于隐私保护和广告拦截的开源项目其核心机制是通过DNS层面的拦截来阻上一篇openGauss连接管理最大连接数配置下一篇CANN/driver中的RoCE模块如何实现低延迟高效数据传输创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考