Migrate announcement banner block to TypeScript with build tooling - #50
Open
markwong167 wants to merge 2 commits into
Open
markwong167 wants to merge 2 commits into
markwong167 wants to merge 2 commits into
Conversation
markwong167
marked this pull request as draft
August 21, 2026 22:31
markwong167
changed the base branch from
main
to
claude/canopy-blocks-typescript-migration
August 21, 2026 22:32
markwong167
force-pushed
the
claude/canopy-blocks-typescript-migration
branch
from
August 31, 2026 13:53
e0b9f09 to
51183bc
Compare
markwong167
force-pushed
the
claude/canopy-blocks-jsx-to-tsx-migration
branch
from
August 31, 2026 13:56
188ed3b to
6ac8bae
Compare
Base automatically changed from
claude/canopy-blocks-typescript-migration
to
main
September 1, 2026 20:17
Converts edit.js (a global-IIFE script depending on window.wp.*) to a proper wp-scripts entry: index.tsx registers the block, edit.tsx is a typed component using ES module imports and BlockEditProps for the block's attributes. This requires wiring the build to actually work, not just type-check: - block.json now declares editorScript so wp-scripts builds an entry and generates the dependency manifest (index.asset.php) instead of the plugin hardcoding a dependency array by hand. - canopy-blocks.php now registers the block from build/, not src/, and drops the manual wp_register_script call entirely — WP core reads the built block.json + index.asset.php on its own. - build/ is committed. There's no CI or Docker step that runs `pnpm build` yet (tracked separately), so without committing it the block would silently stop rendering in the editor. Also pins typescript to ^5.9.3 instead of the latest ^7: @typescript- eslint@6.21.0 (pulled in by @wordpress/eslint-plugin) crashes under TypeScript 7 — ts-api-utils reads an internal ts.SyntaxKind shape that 7.x changed. `pnpm lint:js` failed outright before this pin.
It's the block's attribute schema (mirrors block.json, shared by edit.tsx and index.tsx), not a component-local prop type, so it shouldn't live inside edit.tsx. Kept scoped to the block's own folder rather than a plugin-wide types/ directory — each src/<block-name>/ folder is the self-contained, independently-reusable unit in this codebase, so a shared type belongs next to the block.json it describes, not pulled out into a cross-block bucket.
markwong167
force-pushed
the
claude/canopy-blocks-jsx-to-tsx-migration
branch
from
September 1, 2026 20:25
6ac8bae to
9a1d0b5
Compare
Contributor
Author
|
Actual changes:
|
markwong167
marked this pull request as ready for review
September 1, 2026 20:33
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Converts the announcement banner block from vanilla JavaScript to TypeScript and integrates it with the WordPress build pipeline (
@wordpress/scripts).Summary
Modernizes the canopy-blocks plugin by:
@wordpress/scriptsto compile TypeScript sourcesblock.json(WordPress 5.8+ standard)Key Changes
src/announcement-banner/edit.js(ES5 implementation with manualwp.blocks.registerBlockType)src/announcement-banner/index.tsx— block registration usingregisterBlockTypefrom@wordpress/blockssrc/announcement-banner/edit.tsx— editor component with proper React/JSX syntax and type annotationssrc/announcement-banner/attributes.ts— TypeScript interface for block attributessrc/announcement-banner/block.json— block metadata (replaces inline registration)web/app/plugins/canopy-blocks/package.json— plugin-level dependencies and build scriptsweb/app/plugins/canopy-blocks/tsconfig.json— TypeScript configurationpackage.jsonandpnpm-workspace.yaml— monorepo setup.npmrc— pnpm configurationcanopy-blocks.php— simplified to callregister_block_type()with the built output directory instead of manual script registrationbuild/announcement-banner/— compiled output (index.js, index.asset.php, render.php)Implementation Details
block.jsonfollowing WordPress standardsrender.phpbuild/for deployment without requiring build steps in productionhttps://claude.ai/code/session_01LSUtqpCkbz5v2F5dooi4TF