前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载Happy Blocks 是 wp-calypso 仓库中的一个独立应用apps/happy-blocks存放着用于 WordPress.com 站点如 Forums 论坛 与 Support 帮助中心的专用区块源码。这些区块不面向普通用户注册也不会注册到整个 WordPress.com而是由 Happiness Engineering 团队为特定站点场景定向构建。阅读本文后你将掌握 happy-blocks 的目录结构、yarn dev --sync开发工作流、install-plugin.sh部署流程以及 Pricing Plans 与 Universal Header 两个核心区块的源码实现与配置细节。一、Happy Blocks 是什么在 apps/happy-blocks/README.md 中happy-blocks 被定义为“用于 WordPress.com 站点如 Forums 和 Support区块的源码包”。与 Calypso 主体中面向全站注册的通用区块不同happy-blocks 具有两个鲜明特征定向注册区块仅供特定站点如*.forums.wordpress.com、*.support.wordpress.com使用不注册给所有 WordPress.com 站点独立构建它作为独立的 app 存在通过 apps/happy-blocks/package.json 中的脚本单独编译产出物最终以 WordPress 插件形式部署到 wpcom 沙盒环境。从 apps/happy-blocks/index.php 的插件头注释可以看到其完整定位插件名称Happy Blocks描述Happiness Engineering Specific BlocksHappiness 工程专用区块文本域happy-blocks该文件还明确指出区块代码位于 Calypso 的apps/happy-blocks由 Calypso 的 TeamCity 构建任务在每次 Calypso 部署时都会重新构建。原因在注释中解释得很清楚——Calypso 的组件、构建系统和框架变化可能间接影响这些区块的构建产物因此每次部署都重建是“安全且正常”的做法。仓库目录结构apps/happy-blocks/ ├── README.md # 本文档主体 ├── index.php # 插件主文件加载各区块与翻译过滤器 ├── translations-filters.php # 共享的脚本翻译过滤器 ├── block-library/ # 区块源码目录 │ ├── pricing-plans/ # 定价方案区块 │ ├── search-card/ # 搜索卡片区块 │ ├── shared/ # 共享代码 │ ├── support-content-footer/ # 支持内容页脚区块 │ └── universal-header/ # 通用头部导航栏区块 ├── package.json ├── tsconfig.json ├── types.d.ts └── webpack.config.js # 按区块粒度构建的 webpack 配置其中 apps/happy-blocks/package.json 的scripts字段揭示了完整的构建体系脚本作用yarn dev调用calypso-apps-builder将本地/同步到沙盒的/home/wpcom/public_html/wp-content/a8c-plugins/happy-blocksyarn buildNODE_ENVproduction下先yarn dev再生成翻译 manifestbuild:pricing-plans以--env blockpricing-plans调用 calypso-buildbuild:search-card构建 search-card 区块build:universal-header构建 universal-header 区块build:support-content-footer构建 support-content-footer 区块build-calypso-strings通过wp-babel-makepot提取 Calypso 中client、packages、apps下的 i18n 字符串到dist/calypso-strings.pot二、开发环境沙盒 yarn dev --syncREADME 给出的开发环境搭建只有两步但每一步背后都有具体前提1. 准备沙盒主机名为wpcom-sandboxHappy Blocks 的 JS 代码全部位于 Calypso 仓库中但要在真实 WordPress.com 环境中验证效果必须有一台可用的 wpcom 沙盒sandbox。README 明确要求沙盒主机名必须是wpcom-sandbox因为calypso-apps-builder的同步目标apps/happy-blocks/package.json 中的dev脚本是--localPath / --remotePath /home/wpcom/public_html/wp-content/a8c-plugins/happy-blocks即把本地应用根目录构建并同步到沙盒上 WordPress.com 站点运行时的a8c-plugins/happy-blocks目录——这正是 WordPress.com 加载该插件的真实路径。2. 运行yarn dev --sync在 happy-blocks 目录执行yarn dev --sync--sync标志启用文件变更监听修改区块源码后构建产物会自动同步到沙盒的插件目录开发者只需刷新对应 WordPress.com 页面即可验证。这是整个开发循环的核心命令全程无需手动拷贝文件。从 apps/happy-blocks/webpack.config.js 可以看出构建是按单个区块为粒度进行的env.block指定区块名入口固定为区块目录下的index编辑器脚本与view前端视图脚本若区块目录下存在view-odie.js还会额外生成view-odie入口。产物输出到block-library/block-name/build/并使用ReadableJsAssetsWebpackPlugin生成可读的 JS 资产。同时webpack.DefinePlugin会将__i18n_text_domain__定义为happy-blocks保证所有translate/__调用在编译期就绑定正确的文本域。三、部署流程1. 先整体部署 CalypsoREADME 要求先按常规流程部署整个 Calypso 项目。这是因为 happy-blocks 的构建依附于 Calypso 的 CI 构建任务且区块依赖 Calypso 中的组件与框架代码——Calypso 先部署才能保证区块构建时引用的依赖版本一致。2. 用install-plugin.sh部署 happy-blocks 到 wpcom 沙盒在 wpcom 沙盒中执行# 准备最新 trunk 构建用于发布 install-plugin.sh happy-blocks --release # 或者从某个分支加载变更例如测试 PR install-plugin.sh happy-blocks $branch_name--release拉取最新的 trunk 构建产物用于正式发布$branch_name指定分支名用于在发布前测试某个 PR 的改动。这一步的实际目标同样是 wpcom 沙盒中wp-content/a8c-plugins/happy-blocks目录与 index.php 中注释描述的install-plugin.sh happy-blocks一致。README 最后提到的 PCYsg-OT6-p2 是 Automattic 内部 p2 文档编号仅供内部团队查阅部署的完整流程细节。部署过程中的一个关键细节translations-filters.phpapps/happy-blocks/index.php 在加载区块之前会先加载共享翻译过滤器if ( file_exists( __DIR__ . /translations-filters.php ) ) { require_once __DIR__ . /translations-filters.php; }这里用file_exists()做保护是有实际原因的插件文件是逐个部署的index.php与translations-filters.php虽然在同一 PR/提交中落地但未必在同一部署步骤中到达因此在窗口期内index.php已部署而translations-filters.php尚未到达时直接require_once会导致致命错误。apps/happy-blocks/translations-filters.php 的头部注释还揭示了另一个架构约束该文件被拆成独立文件是因为它需要被两个互不共享代码的位置加载wp-content/a8c-plugins/happy-blocks/index.php供*.support.wordpress.com/ Learn / 开发者博客等站点加载wp-content/mu-plugins/wpcom-bbpress.php供 bbPress 支持论坛博客如*.forums.wordpress.com加载这些站点直接加载block-library/pricing-plans/index.php从不会加载整个插件主文件。如果不做拆分bbPress 论坛博客会注册 pricing-plans 区块其block.json中声明了独立的textdomain: happy-blocks却永远不会注册让翻译得以解析的过滤器——WordPress 核心将静默地在错误位置查找翻译并回退到英文。该文件注册了两个关键过滤器load_script_textdomain_relative_path将 CDN 路径重写为相对路径以计算正确的翻译文件名并兼容yarn dev --sync的路径结构去掉build/前缀与/rtl/../段load_script_translation_file将 happy-blocks 的翻译文件路径重定向到WP_LANG_DIR/a8c-plugins/下的扁平目录并修正 locale——happy-blocks 使用的是站点自身 locale而非访客 locale当determine_locale()与站点 locale 不一致时会将文件名中的happy-blocks-{resolved_locale}-替换为happy-blocks-{site_locale}-。四、区块详解block-library/下实际包含 5 个目录README 重点介绍了其中的两个区块。Pricing Plans定价方案区块README 中该区块标注为“[ Needs documentation ]”待补充文档但仓库源码提供了充分的实现细节。该区块用于在wordpress.com/forums等站点向用户提供升级到不同套餐的选项。区块注册与元信息apps/happy-blocks/block-library/pricing-plans/block.json{ $schema: https://schemas.wp.org/trunk/block.json, apiVersion: 2, name: happy-blocks/pricing-plans, category: embed, textdomain: happy-blocks, title: Pricing Plans, viewScript: file:./view.js, editorScript: file:./index.js, style: file:./view.css }关键点区块名happy-blocks/pricing-plans、独立的textdomain、编辑器脚本与视图脚本分离并且存在 RTL 版本rtl/block.jsonapps/happy-blocks/block-library/pricing-plans/rtl/block.json——这与 apps/happy-blocks/webpack.config.js 中复制rtl/block.json到build/rtl/的规则一一对应。PHP 侧实现index.php注册happyblocks_pricing_plan_register()在init钩子上调用register_block_type()注册目录为__DIR__ . ( is_rtl() ? /build/rtl : /build )即根据当前站点是否为 RTL 语言选择构建目录并指定render_callback服务端渲染happyblocks_pricing_plans_render_callback()输出一个占位 div并将属性 JSON 编码后写入data-attributes其中domain字段只有在当前用户是帖子作者时才保留否则置为false——这是为了安全考虑避免向非作者泄露与主题绑定的域名信息作者判定happyblocks_pricing_plans_is_author()要求用户已登录、bbPress 已激活存在bbp_get_topic_id函数再比较当前用户 ID 与主题帖作者 ID配置注入happyblocks_pricing_plans_enqueue_config_data()通过wp_add_inline_script在视图脚本与编辑器脚本执行前注入window.A8C_HAPPY_BLOCKS_CONFIG含features.tracking开关与站点locale并在enqueue_block_editor_assets与wp_enqueue_scripts两个钩子上调用。TS 侧实现config.ts配置在 TS 侧同样有对应加载逻辑const config { plans: [ PLAN_PERSONAL, PLAN_PERSONAL_MONTHLY, PLAN_PREMIUM_MONTHLY, PLAN_PREMIUM, PLAN_BUSINESS_MONTHLY, PLAN_BUSINESS, PLAN_ECOMMERCE_MONTHLY, PLAN_ECOMMERCE, ], ...( window.A8C_HAPPY_BLOCKS_CONFIG || {} ), };套餐常量PLAN_PERSONAL、PLAN_PREMIUM、PLAN_BUSINESS、PLAN_ECOMMERCE及其月付变体全部来自automattic/calypso-products包后端通过window.A8C_HAPPY_BLOCKS_CONFIG注入的配置会覆盖默认值。同时该文件还设置了window.configData.features[plans/updated-storage-labels] true以启用新版存储容量文案。该区块的组件层components/包含pricing-plans.tsx、billing-options.tsx计费周期切换、billing-info.tsx、billing-button.tsx、pricing-plan-detail.tsx单套餐详情、pricing-plans-tabs.tsx套餐页签、pricing-plans-header.tsx、block-settings.tsx与skeleton.tsx加载骨架屏hooks/ 下则有pricing-plans.ts、plan-options.ts、plan-variants.ts负责套餐选项与变体逻辑。Universal Header通用头部区块README 明确说明这是统一版 WordPress.com 头部的区块化实现应与 WordPress.com 首页未登录状态当前版本保持一致以保证用户浏览所有站点时的体验连续性。该区块基于automattic/wpcom-template-parts包构建可在 Forums 与 Support 站点上看到实际效果。PHP 模板实现index.php该文件以区块模板pattern形式定义区块 slug 为happy-blocks/wpcom-navbar分类support。实现要点复用 h4 主题的函数localized_tailored_flow_urlrequire_once WP_CONTENT_DIR . /themes/h4/landing/marketing/pages/_common/lib/functions.php支持通过$args[website]参数为导航栏附加is-website样式类实现站点差异化外观渲染完整的桌面端导航Logo、Products / Features / Resources / Learn 下拉菜单、Plans Pricing、Log In、Get Started 按钮、桌面下拉面板与移动端全屏菜单三套结构所有链接通过localized_wpcom_url()生成从而根据站点 locale 输出本地化 URL所有文案使用esc_html_e( ..., happy-blocks )走happy-blocks文本域未登录用户才显示Log In入口if ( ! is_user_logged_in() )。配套文件apps/happy-blocks/block-library/universal-header/ 目录还包含index.js区块注册/编辑器入口、view.js前端交互脚本负责下拉菜单与移动菜单行为、includes.php与style.scss样式源文件。其余区块search-card搜索卡片区块support-content-footer支持内容页脚区块shared各区块共享的代码目录。这些区块同样遵循“indexview双入口、构建产物落入各自build/目录”的构建约定。五、WordPress 侧的安全过滤happyblocks_allow_footer_tagsapps/happy-blocks/index.php 中还注册了一个wp_kses_allowed_html过滤器happyblocks_allow_footer_tags()用于在页脚区域放行特定的 HTML 标签包括svg/path/stop/defs允许内联 SVG 图标白名单收紧了fill、viewbox、role、aria-hidden、focusable、class等属性select/option允许语言/地区选择下拉框value、disabled、lang等属性footer追加data-locale属性支持使页脚能够携带站点 locale 信息。该过滤器默认在wp_kses_allowed_html钩子上以优先级 10 生效说明 happy-blocks 在支持内容页脚中渲染了内联 SVG 图标与语言选择器等富交互元素同时通过白名单机制确保这些动态内容经过 WordPress 的wp_kses清洗兼顾功能与安全。六、构建机制速览apps/happy-blocks/webpack.config.js 是整个构建体系的核心值得总结的几点按区块构建env.block必填为空直接抛错从block-library/blockName读取源码双入口可选三入口默认产出index编辑器与view前端两个 bundle存在view-odie.js时追加view-odie产物复制CopyPlugin将区块目录下的assets/、index.php、includes.php、block.json、rtl/block.json复制进build/其中 PHP 文件内容会做字符串替换去掉/build/rtl、/build前缀使产物在插件目录中可直接以相对路径引用资源生产模式附加产物NODE_ENVproduction时通过GenerateChunksMapPlugin生成build/chunks-map.json供 WordPress.com 按需加载 chunki18n 绑定DefinePlugin注入__i18n_text_domain__ happy-blocks。七、总结与常见问题Happy Blocks 的完整开发闭环可概括为编辑区块源码TS/TSX SCSS PHP │ ▼ yarn dev --sync构建并实时同步到 wpcom-sandbox 的 a8c-plugins/happy-blocks │ ▼ 沙盒站点验证Forums / Support 等 │ ▼ 合并代码 → 常规 Calypso 部署TeamCity 自动重建 happy-blocks │ ▼ 沙盒执行 install-plugin.sh happy-blocks --release或指定分支常见问题与排查方向翻译不生效优先检查 translations-filters.php 是否已随插件加载注意 bbPress 论坛博客场景下该文件由wpcom-bbpress.php单独加载其次确认站点 locale 与文件名中的 locale 段一致部署时index.php已到而translations-filters.php未到这是正常的部署窗口期file_exists()保护已覆盖该场景区块在页面不显示确认构建产物已同步到沙盒yarn dev --sync生效、build/目录中block.json与 PHP 文件均已复制导航栏外观与首页不一致Universal Header 必须与automattic/wpcom-template-parts包保持同步修改前先确认该包版本与 WordPress.com 首页当前实现一致。以上所有路径均可在当前仓库 apps/happy-blocks 目录下直接查阅包括 package.json、index.php、translations-filters.php、webpack.config.js 及各区块源码。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐Simple SMS Messenger 常见问题排查清单20 个高频问题的解决方案Simple SMS Messenger 常见问题排查清单20 个高频问题的解决方案 Simple SMS Messenger 是一款开源、无广告的短信与彩信前端CMSCalypsowp-calypso从零搭建本地开发环境架构、安装、构建与排错全指南Calypsowp calypso从零搭建本地开发环境架构、安装、构建与排错全指南 本指南以仓库根目录 README.md https://link.gi前端CMSwp-calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南wp calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南 导读前端CMS上一篇DBAPI API编排功能详解DAG可视化画布如何实现复杂业务流程下一篇Rediscala与Akka整合构建高性能分布式系统的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考