前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载SiteIndicator 是 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中用于在站点条目旁显示圆形状态徽章的 React 组件集中呈现有待更新、Jetpack 连接异常等运维关键信息。本文基于 client/my-sites/site-indicator/README.md结合组件源码、样式与测试用例完整讲解其 Props 契约、显示判定逻辑、Redux 数据链与视觉交互帮助你直接复用或二次开发该组件。组件概述一个徽章承载的站点健康情报SiteIndicator 的作用是在站点列表 / 站点管理界面中于站点名称旁渲染一个圆形徽章badge用来直观提示用户以下几类信息该站点有可用的更新WordPress 核心、插件或主题该站点与 Jetpack 存在连接问题Jetpack 无法与站点通信该站点是否为Jetpack 站点决定徽章是否显示升级即将到期等状态源码注释表明这是为 WP.com 站点预留的扩展方向。从 index.jsx 的showIndicator()逻辑可以确认一个关键事实当前版本只对 Jetpack 站点显示徽章且需要当前用户拥有站点管理权限。代码中的注释直白地说明了这一设计取舍Until WP.com sites have indicators (upgrades expiring, etc) we only show them for Jetpack sites即在 WP.com 站点具备指示器升级到期等之前我们只对 Jetpack 站点显示它们。快速上手安装与基础用法该组件位于client/my-sites/site-indicator目录下无需单独安装通过 calypso 的模块别名直接引入即可import SiteIndicator from calypso/my-sites/site-indicator; function render() { return SiteIndicator site{ siteObject } /; }site是必传的站点对象通常来自getSelectedSite()、getSite( state, siteId )等站点 selector。传入site后组件会自行从 Redux 派生所需的全部状态连接状态、更新数据、用户权限并渲染对应的徽章调用方无需关心内部数据获取逻辑。在正式接入前组件还依赖样式文件与国际化这些都已内置在组件模块中样式style.scss国际化组件通过localize高阶组件注入translate函数文案均已接入 i18n 流程。Props 契约完整参数说明组件对外暴露两个公开 Props均在 README 中以表格形式定义完整继承如下site项目值类型Object必填是站点对象Site object组件据此识别站点 ID、更新数据、权限与 Jetpack 属性。从 index.jsx 的 propTypes 可看到site是唯一的公开入参其余状态全部由 Reduxconnect注入。onSelect项目值类型Function必填否可选的回调函数。需要说明的是从当前 index.jsx 的实现看该属性在组件渲染逻辑中尚未被消费属于预留接口——README 将其定义为可选参数表明它面向未来交互扩展如点击徽章后触发站点选中行为。接入时请按可选 Props 对待不传不影响基础功能。此外组件源码中还定义了由 Redux 注入的内部 Props调用方无需也不能直接传入内部 Prop来源含义siteIsJetpackisJetpackSite站点是否为 Jetpack 站点siteIsConnectedisJetpackConnectionUnhealthy取反Jetpack 连接是否健康siteIsAutomatedTransferisSiteAutomatedTransfer站点是否为 Atomic自动迁移站点siteUpdatesgetUpdatesBySiteId站点的更新统计对象userCanManagecanCurrentUser( ..., manage_options )当前用户是否可管理该站点显示判定逻辑什么情况下渲染徽章徽章是否出现由 showIndicator() 严格把关其判定条件可概括为一条复合表达式userCanManage siteIsJetpack ( ( ! siteIsAutomatedTransfer hasUpdate() ) || hasError() )逐一拆解userCanManage当前用户必须拥有该站点的manage_options能力权限通过 canCurrentUser 从state.currentUser.capabilities[ siteId ]中读取siteIsJetpack站点必须是 Jetpack 站点由isJetpackSite判定更新分支! siteIsAutomatedTransfer hasUpdate()——Atomic自动迁移站点不显示更新徽章因为其更新由平台托管无需用户手动处理普通 Jetpack 站点则只要存在更新即显示错误分支hasError()即siteIsConnected false代表 Jetpack 连接已确认异常此时无论是否 Atomic 都会显示错误徽章。两个状态判定函数位于 index.jsxhasUpdate() { const { siteUpdates } this.props; return siteUpdates ! this.hasError() siteUpdates.total 0; } hasError() { return this.props.siteIsConnected false; }注意hasUpdate()内部先排除了hasError()的情况——当连接异常与更新同时存在时优先展示错误状态避免信息混淆。该优先级在 getText() / getIcon() 中同样体现更新优先错误其次否则返回null。徽章内容更新提示与错误提示的完整消息矩阵点击展开徽章后getText()会根据状态渲染两种消息体。更新可用updatesAvailable()updatesAvailable() 依据siteUpdates各分项与总数total的比对关系输出逐级细分的提示文案并附带对应的跳转链接条件文案链接目标wordpress total且canUpdateFilesA newer version of WordPress is available. Update to %(version)s站点的/activity-log/{slug}活动日志页plugins total且canUpdateFilesThere is a plugin update available.复数形式按count自动切换同上themes total且canUpdateFilesThere is a theme update available.复数形式同理同上themes plugins wordpress total且canUpdateFilesThere are updates available.同上其余情况含翻译等无法自动更新的部分There is an update available. / There are updates available.站点 wp-admin 的update-core.php最后一层分支很有工程价值当更新项包含翻译translationsJetpack 无法代管时组件会把用户引导到 WordPress 后台的update-core.php让用户自己完成剩余更新。目标 URL 通过site.options.admin_url update-core.php拼装使用ExternalLink组件新窗口打开该细节定义在 index.jsx。同时点击更新链接前会调用resetWindowState()index.jsx将页面滚动回顶部并收起徽章保证跳转后页面状态干净。连接异常errorAccessing()errorAccessing() 处理 Jetpack 无法与站点通信的场景若site存在展示文案Jetpack cant communicate with your site.并附带一个Learn how to fix按钮新窗口打开 Jetpack 官方重连指南https://jetpack.com/support/reconnecting-reinstalling-jetpack/若site不存在未定义退化为通用文案This site cannot be accessed.。错误场景还埋入了两条埋点Tracks视图事件calypso_jetpack_connection_health_issue_sidebar_view通过TrackComponentView在渲染时上报点击事件calypso_jetpack_connection_health_issue_sidebar_click点击Learn how to fix时上报带is_atomic属性。这些事件定义在 handleJetpackConnectionHealthSidebarLinkClick 中用于观测连接健康问题的暴露与转化情况。交互与视觉圆形徽章、展开消息与状态配色图标与按钮徽章默认是一个 26×26 的圆形按钮由 renderIndicator() 渲染状态图标通过Gridicon输出有更新时显示sync同步/刷新图标有错误时显示notice警告图标尺寸 16px未展开时按钮包裹在Animate typeappear中以淡入动画出现点击按钮通过toggleExpand切换expand状态展开后按钮切换为cross关闭图标并叠加在消息右上角。状态样式style.scss 通过父容器的修饰类控制视觉语义修饰类触发条件背景色场景is-action恒存在—使按钮可点击cursor: pointeris-updatehasUpdate()--color-warning警示黄有待更新is-errorhasError()--color-error错误红连接异常展开后的消息层.site-indicator__message会覆盖整个站点条目区域position: absolute铺满父容器背景色跟随is-update/is-error内部文案与链接使用反色--color-text-inverted保证对比度。组件还考虑了可访问性.accessible-focus下聚焦按钮会显示 1px 虚线描边style.scss。数据层Redux 连接与 Selector 调用链组件的数据完全来自 Reduxconnect映射定义在 index.jsx 底部。其数据流如下1. 更新数据siteUpdates来自 getUpdatesBySiteId该 selector 本质上是读取原始站点对象上的updates字段export default function getUpdatesBySiteId( state, siteId ) { const site getRawSite( state, siteId ); return site?.updates ?? null; }updates对象形如{ total, wordpress, plugins, themes }total即更新总数也是hasUpdate()的判断依据。2. 连接健康siteIsConnected并非直接读取某个布尔标志而是通过isJetpackConnectionUnhealthy的取反得出is-jetpack-connection-unhealthy.js 要求同时满足报告了连接问题jetpack_connection_problem true且存在错误信息error为真值才判定为不健康其底层数据由 get-jetpack-connection-health.js 从state.jetpackConnectionHealth[ siteId ].connectionHealth读取。连接状态的获取则由数据查询组件 QuerySiteConnectionStatus 触发——它在挂载时 dispatchrequestConnectionStatus( siteId )拉取最新连接状态且内部通过isRequestingSiteConnectionStatus防止重复请求index.jsx 中仅在siteIsJetpack时才渲染该查询组件。3. 站点属性与权限isJetpackSite判定站点是否连接 JetpackisSiteAutomatedTransfer判定是否 Atomic 站点用于抑制更新徽章canCurrentUser( state, siteId, manage_options )从state.currentUser.capabilities查表得出当前用户权限can-current-user.js无权限数据时返回null视为无权。测试验证行为规格即文档组件行为由 test/index.js 中的 Jest Testing Library 用例锁定测试通过redux-mock-store与直接传入内部 Props 的方式隔离了 Redux 依赖共覆盖四个关键场景非 Atomic 站点有更新 → 显示is-update徽章传入userCanManage: true, siteIsJetpack: true, siteIsConnected: true, siteIsAutomatedTransfer: false, siteUpdates: { total: 1 }断言is-update类存在、is-error类不存在Atomic 站点有更新 → 不显示更新徽章同样条件但siteIsAutomatedTransfer: true断言两类徽章均不渲染直接验证了showIndicator()中的 Atomic 抑制分支Jetpack 连接异常 → 显示is-error徽章siteIsConnected: false时断言is-error存在、is-update不存在点击展开交互默认不渲染消息层site-indicator-message不存在fireEvent.click点击site-indicator-button后消息层出现。这些用例同时充当了组件的行为规格说明——任何改动若破坏上述判定逻辑都会在测试中被捕获。测试对QuerySiteConnectionStatus做了 mock因此用例聚焦于组件自身的渲染与交互逻辑而非网络数据层。小结SiteIndicator 虽是一个不足 300 行的组件却完整演示了 wp-calypso 中状态类 UI 组件的标准工程范式公共 API 极简仅暴露site与onSelect两个 Props所有派生状态由 Reduxconnect内部注入判定逻辑集中showIndicator()一条表达式收敛了权限、站点类型、Atomic 与更新/错误状态的全部组合状态可观测通过is-update/is-error修饰类驱动视觉配合sync/notice图标完成语义化表达数据可追踪更新与连接健康均来自明确的 selector 链并借助QuerySiteConnectionStatus按需拉取行为有保障测试用例覆盖 Atomic 抑制、错误优先与展开交互等关键分支。如需在自有功能中复用只需传入正确的site对象并确保站点已通过 Jetpack 连接即可若要扩展升级到期等新指示类型可参照showIndicator()的判定结构与getIcon()/getText()的分支模式继续叠加。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso NoSitesMessage 组件全解无站点用户的引导式空状态实现wp calypso NoSitesMessage 组件全解无站点用户的引导式空状态实现 NoSitesMessage 是 wp calypsoWordPr前端CMSwp-calypso 数据查询组件实战QuerySiteConnectionStatus 获取 Jetpack 站点连接状态wp calypso 数据查询组件实战QuerySiteConnectionStatus 获取 Jetpack 站点连接状态 QuerySiteConnec前端CMSUpsellSwitch 组件全解析用 wp-calypso 实现站点状态驱动的付费升级兜底UpsellSwitch 组件全解析用 wp calypso 实现站点状态驱动的付费升级兜底 导读 UpsellSwitch / 是 wp calypso前端CMS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
wp-calypso SiteIndicator 组件全解析：Jetpack 站点状态徽章的实现与使用指南
前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载SiteIndicator 是 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中用于在站点条目旁显示圆形状态徽章的 React 组件集中呈现有待更新、Jetpack 连接异常等运维关键信息。本文基于 client/my-sites/site-indicator/README.md结合组件源码、样式与测试用例完整讲解其 Props 契约、显示判定逻辑、Redux 数据链与视觉交互帮助你直接复用或二次开发该组件。组件概述一个徽章承载的站点健康情报SiteIndicator 的作用是在站点列表 / 站点管理界面中于站点名称旁渲染一个圆形徽章badge用来直观提示用户以下几类信息该站点有可用的更新WordPress 核心、插件或主题该站点与 Jetpack 存在连接问题Jetpack 无法与站点通信该站点是否为Jetpack 站点决定徽章是否显示升级即将到期等状态源码注释表明这是为 WP.com 站点预留的扩展方向。从 index.jsx 的showIndicator()逻辑可以确认一个关键事实当前版本只对 Jetpack 站点显示徽章且需要当前用户拥有站点管理权限。代码中的注释直白地说明了这一设计取舍Until WP.com sites have indicators (upgrades expiring, etc) we only show them for Jetpack sites即在 WP.com 站点具备指示器升级到期等之前我们只对 Jetpack 站点显示它们。快速上手安装与基础用法该组件位于client/my-sites/site-indicator目录下无需单独安装通过 calypso 的模块别名直接引入即可import SiteIndicator from calypso/my-sites/site-indicator; function render() { return SiteIndicator site{ siteObject } /; }site是必传的站点对象通常来自getSelectedSite()、getSite( state, siteId )等站点 selector。传入site后组件会自行从 Redux 派生所需的全部状态连接状态、更新数据、用户权限并渲染对应的徽章调用方无需关心内部数据获取逻辑。在正式接入前组件还依赖样式文件与国际化这些都已内置在组件模块中样式style.scss国际化组件通过localize高阶组件注入translate函数文案均已接入 i18n 流程。Props 契约完整参数说明组件对外暴露两个公开 Props均在 README 中以表格形式定义完整继承如下site项目值类型Object必填是站点对象Site object组件据此识别站点 ID、更新数据、权限与 Jetpack 属性。从 index.jsx 的 propTypes 可看到site是唯一的公开入参其余状态全部由 Reduxconnect注入。onSelect项目值类型Function必填否可选的回调函数。需要说明的是从当前 index.jsx 的实现看该属性在组件渲染逻辑中尚未被消费属于预留接口——README 将其定义为可选参数表明它面向未来交互扩展如点击徽章后触发站点选中行为。接入时请按可选 Props 对待不传不影响基础功能。此外组件源码中还定义了由 Redux 注入的内部 Props调用方无需也不能直接传入内部 Prop来源含义siteIsJetpackisJetpackSite站点是否为 Jetpack 站点siteIsConnectedisJetpackConnectionUnhealthy取反Jetpack 连接是否健康siteIsAutomatedTransferisSiteAutomatedTransfer站点是否为 Atomic自动迁移站点siteUpdatesgetUpdatesBySiteId站点的更新统计对象userCanManagecanCurrentUser( ..., manage_options )当前用户是否可管理该站点显示判定逻辑什么情况下渲染徽章徽章是否出现由 showIndicator() 严格把关其判定条件可概括为一条复合表达式userCanManage siteIsJetpack ( ( ! siteIsAutomatedTransfer hasUpdate() ) || hasError() )逐一拆解userCanManage当前用户必须拥有该站点的manage_options能力权限通过 canCurrentUser 从state.currentUser.capabilities[ siteId ]中读取siteIsJetpack站点必须是 Jetpack 站点由isJetpackSite判定更新分支! siteIsAutomatedTransfer hasUpdate()——Atomic自动迁移站点不显示更新徽章因为其更新由平台托管无需用户手动处理普通 Jetpack 站点则只要存在更新即显示错误分支hasError()即siteIsConnected false代表 Jetpack 连接已确认异常此时无论是否 Atomic 都会显示错误徽章。两个状态判定函数位于 index.jsxhasUpdate() { const { siteUpdates } this.props; return siteUpdates ! this.hasError() siteUpdates.total 0; } hasError() { return this.props.siteIsConnected false; }注意hasUpdate()内部先排除了hasError()的情况——当连接异常与更新同时存在时优先展示错误状态避免信息混淆。该优先级在 getText() / getIcon() 中同样体现更新优先错误其次否则返回null。徽章内容更新提示与错误提示的完整消息矩阵点击展开徽章后getText()会根据状态渲染两种消息体。更新可用updatesAvailable()updatesAvailable() 依据siteUpdates各分项与总数total的比对关系输出逐级细分的提示文案并附带对应的跳转链接条件文案链接目标wordpress total且canUpdateFilesA newer version of WordPress is available. Update to %(version)s站点的/activity-log/{slug}活动日志页plugins total且canUpdateFilesThere is a plugin update available.复数形式按count自动切换同上themes total且canUpdateFilesThere is a theme update available.复数形式同理同上themes plugins wordpress total且canUpdateFilesThere are updates available.同上其余情况含翻译等无法自动更新的部分There is an update available. / There are updates available.站点 wp-admin 的update-core.php最后一层分支很有工程价值当更新项包含翻译translationsJetpack 无法代管时组件会把用户引导到 WordPress 后台的update-core.php让用户自己完成剩余更新。目标 URL 通过site.options.admin_url update-core.php拼装使用ExternalLink组件新窗口打开该细节定义在 index.jsx。同时点击更新链接前会调用resetWindowState()index.jsx将页面滚动回顶部并收起徽章保证跳转后页面状态干净。连接异常errorAccessing()errorAccessing() 处理 Jetpack 无法与站点通信的场景若site存在展示文案Jetpack cant communicate with your site.并附带一个Learn how to fix按钮新窗口打开 Jetpack 官方重连指南https://jetpack.com/support/reconnecting-reinstalling-jetpack/若site不存在未定义退化为通用文案This site cannot be accessed.。错误场景还埋入了两条埋点Tracks视图事件calypso_jetpack_connection_health_issue_sidebar_view通过TrackComponentView在渲染时上报点击事件calypso_jetpack_connection_health_issue_sidebar_click点击Learn how to fix时上报带is_atomic属性。这些事件定义在 handleJetpackConnectionHealthSidebarLinkClick 中用于观测连接健康问题的暴露与转化情况。交互与视觉圆形徽章、展开消息与状态配色图标与按钮徽章默认是一个 26×26 的圆形按钮由 renderIndicator() 渲染状态图标通过Gridicon输出有更新时显示sync同步/刷新图标有错误时显示notice警告图标尺寸 16px未展开时按钮包裹在Animate typeappear中以淡入动画出现点击按钮通过toggleExpand切换expand状态展开后按钮切换为cross关闭图标并叠加在消息右上角。状态样式style.scss 通过父容器的修饰类控制视觉语义修饰类触发条件背景色场景is-action恒存在—使按钮可点击cursor: pointeris-updatehasUpdate()--color-warning警示黄有待更新is-errorhasError()--color-error错误红连接异常展开后的消息层.site-indicator__message会覆盖整个站点条目区域position: absolute铺满父容器背景色跟随is-update/is-error内部文案与链接使用反色--color-text-inverted保证对比度。组件还考虑了可访问性.accessible-focus下聚焦按钮会显示 1px 虚线描边style.scss。数据层Redux 连接与 Selector 调用链组件的数据完全来自 Reduxconnect映射定义在 index.jsx 底部。其数据流如下1. 更新数据siteUpdates来自 getUpdatesBySiteId该 selector 本质上是读取原始站点对象上的updates字段export default function getUpdatesBySiteId( state, siteId ) { const site getRawSite( state, siteId ); return site?.updates ?? null; }updates对象形如{ total, wordpress, plugins, themes }total即更新总数也是hasUpdate()的判断依据。2. 连接健康siteIsConnected并非直接读取某个布尔标志而是通过isJetpackConnectionUnhealthy的取反得出is-jetpack-connection-unhealthy.js 要求同时满足报告了连接问题jetpack_connection_problem true且存在错误信息error为真值才判定为不健康其底层数据由 get-jetpack-connection-health.js 从state.jetpackConnectionHealth[ siteId ].connectionHealth读取。连接状态的获取则由数据查询组件 QuerySiteConnectionStatus 触发——它在挂载时 dispatchrequestConnectionStatus( siteId )拉取最新连接状态且内部通过isRequestingSiteConnectionStatus防止重复请求index.jsx 中仅在siteIsJetpack时才渲染该查询组件。3. 站点属性与权限isJetpackSite判定站点是否连接 JetpackisSiteAutomatedTransfer判定是否 Atomic 站点用于抑制更新徽章canCurrentUser( state, siteId, manage_options )从state.currentUser.capabilities查表得出当前用户权限can-current-user.js无权限数据时返回null视为无权。测试验证行为规格即文档组件行为由 test/index.js 中的 Jest Testing Library 用例锁定测试通过redux-mock-store与直接传入内部 Props 的方式隔离了 Redux 依赖共覆盖四个关键场景非 Atomic 站点有更新 → 显示is-update徽章传入userCanManage: true, siteIsJetpack: true, siteIsConnected: true, siteIsAutomatedTransfer: false, siteUpdates: { total: 1 }断言is-update类存在、is-error类不存在Atomic 站点有更新 → 不显示更新徽章同样条件但siteIsAutomatedTransfer: true断言两类徽章均不渲染直接验证了showIndicator()中的 Atomic 抑制分支Jetpack 连接异常 → 显示is-error徽章siteIsConnected: false时断言is-error存在、is-update不存在点击展开交互默认不渲染消息层site-indicator-message不存在fireEvent.click点击site-indicator-button后消息层出现。这些用例同时充当了组件的行为规格说明——任何改动若破坏上述判定逻辑都会在测试中被捕获。测试对QuerySiteConnectionStatus做了 mock因此用例聚焦于组件自身的渲染与交互逻辑而非网络数据层。小结SiteIndicator 虽是一个不足 300 行的组件却完整演示了 wp-calypso 中状态类 UI 组件的标准工程范式公共 API 极简仅暴露site与onSelect两个 Props所有派生状态由 Reduxconnect内部注入判定逻辑集中showIndicator()一条表达式收敛了权限、站点类型、Atomic 与更新/错误状态的全部组合状态可观测通过is-update/is-error修饰类驱动视觉配合sync/notice图标完成语义化表达数据可追踪更新与连接健康均来自明确的 selector 链并借助QuerySiteConnectionStatus按需拉取行为有保障测试用例覆盖 Atomic 抑制、错误优先与展开交互等关键分支。如需在自有功能中复用只需传入正确的site对象并确保站点已通过 Jetpack 连接即可若要扩展升级到期等新指示类型可参照showIndicator()的判定结构与getIcon()/getText()的分支模式继续叠加。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso NoSitesMessage 组件全解无站点用户的引导式空状态实现wp calypso NoSitesMessage 组件全解无站点用户的引导式空状态实现 NoSitesMessage 是 wp calypsoWordPr前端CMSwp-calypso 数据查询组件实战QuerySiteConnectionStatus 获取 Jetpack 站点连接状态wp calypso 数据查询组件实战QuerySiteConnectionStatus 获取 Jetpack 站点连接状态 QuerySiteConnec前端CMSUpsellSwitch 组件全解析用 wp-calypso 实现站点状态驱动的付费升级兜底UpsellSwitch 组件全解析用 wp calypso 实现站点状态驱动的付费升级兜底 导读 UpsellSwitch / 是 wp calypso前端CMS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
