jetpack-mu-wpcom: Add code block #45181

sirreal · 2025-09-15T18:22:11Z

To do:

TypeScript build
Static language data compilation

Proposed changes:

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Go to '..'

This allows import() to be used in the build. Before, it would error with: > The target environment doesn't support 'import()' so it's not possible > to use external type 'import'

This reverts commit df380db.

github-actions · 2025-09-15T18:23:06Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Mu Wpcom plugin:

Next scheduled release: WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2)

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Wpcomsh plugin:

Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2)

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

gziolo · 2025-09-17T12:38:55Z

Excellent progress! 🎉

How can I test it? What's left to do?

I see that it's implemented as a standalone block. What is your latest opinion about having it as a new block vs enhancing the Code (core/code) block?

sirreal · 2025-09-17T14:05:06Z

How can I test it?

I'll prepare an easy way to test this soon on WordPress.com. There's also the Jetpack Beta Tester plugin for testing on WordPress.com WP Cloud sites.

What's left to do?

I just got it building and working, so I need to review things myself and make sure it's finished and all working correctly 🙂

Copilot

Pull Request Overview

This PR adds a new experimental code block feature to the jetpack-mu-wpcom package. The implementation includes a full-featured code editor with syntax highlighting, language detection, and various display options.

Key changes:

New code block implementation: Introduces an a8c/code block with CodeMirror-based editing capabilities, syntax highlighting, and language auto-detection
Enhanced build configuration: Updates webpack configuration to support the new block's modules and adds Lezer grammar processing for custom language parsers
Feature integration: Integrates the code block into the main plugin loader and adds changelog entries across related projects

Reviewed Changes

Copilot reviewed 31 out of 33 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
projects/packages/jetpack-mu-wpcom/webpack.config.modules.js	Adds new entry points for code block modules and Lezer grammar processing
projects/packages/jetpack-mu-wpcom/webpack.config.js	Adds code block definition entry point and ES2020 target configuration
projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/	Complete code block implementation with editor, parser, styling, and PHP backend
projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php	Integrates code block into main feature loader
projects/packages/jetpack-mu-wpcom/package.json	Adds CodeMirror and Lezer dependencies
projects/packages/jetpack-mu-wpcom/lezer-loader.js	Custom webpack loader for processing Lezer grammar files

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-17T14:24:15Z

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/common/base-64.ts

+const fromBase64 =
+	typeof Uint8Array.fromBase64 === 'function'
+		? ( toDecode: string ): string => {
+				// biome-ignore lint/style/noNonNullAssertion: This is checked aboid and should narrow here.


There's a typo in the comment: 'aboid' should be 'above'.

Copilot · 2025-09-17T14:24:16Z

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/common/base-64.ts

+const toBase64 =
+	typeof Uint8Array.prototype.toBase64 === 'function'
+		? ( toEncode: string ): string => {
+				// biome-ignore lint/style/noNonNullAssertion: This is checked aboid and should narrow here.


There's a typo in the comment: 'aboid' should be 'above'.

Copilot · 2025-09-17T14:24:16Z

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/class-code-block.php

+		// <code>### text ###</code>.
+		if (
+			! $this->next_token() ||
+			! $this->get_token_type() === '#text'


The negation operator has incorrect precedence. This should be $this->get_token_type() !== '#text' to properly check if the token type is not equal to '#text'.

Suggested change

! $this->get_token_type() === '#text'

$this->get_token_type() !== '#text'

Copilot · 2025-09-17T14:24:16Z

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/class-code-block.php

+		$code_string = $this->get_modifiable_text();
+		if (
+			! $this->next_token() ||
+			! $this->get_tag() === 'CODE' ||


The negation operators have incorrect precedence. These should be $this->get_tag() !== 'CODE' and ! $this->is_tag_closer() respectively to properly check the conditions.

Suggested change

! $this->get_tag() === 'CODE' ||

$this->get_tag() !== 'CODE' ||

Copilot · 2025-09-17T14:24:17Z

...ects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/block-definition/transforms.ts

+				const language = getLanguage( file )!;
+
+				// Grab the last segment of the file name. Try to handle different path separators.
+				const filename = file.name.split( /\\\// ).at( -1 ) ?? '';


The regex pattern /\\\// is incorrect for splitting on path separators. It should be /[\\/]/ to match either backslash or forward slash characters.

Suggested change

const filename = file.name.split( /\\\// ).at( -1 ) ?? '';

const filename = file.name.split( /[\\/]/ ).at( -1 ) ?? '';

Copilot · 2025-09-17T14:24:17Z

...ckages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/block-definition/block-definition.tsx

+				<code
+					className={
+						language
+							? `language-${ language.toLowerCase().replace( ' \t\n\r\f', '_' ) }`


The replace method is being called with a string instead of a regex. It should be .replace(/[ \t\n\r\f]/g, '_') to replace all whitespace characters with underscores.

Suggested change

? `language-${ language.toLowerCase().replace( ' \t\n\r\f', '_' ) }`

? `language-${ language.toLowerCase().replace(/[ \t\n\r\f]/g, '_' ) }`

Copilot · 2025-09-17T14:24:17Z

...ckages/jetpack-mu-wpcom/src/features/wpcom-blocks/code/block-definition/block-definition.tsx

+	const textColorProperties: CSSProperties = {};
+	if ( attributes.textColor ) {
+		backgroundProperties[ '--colorText' ] = `var( --wp--preset--color--${ attributes.textColor } )`;
+	} else if ( attributes.style?.color?.background ) {


The condition checks for background property but then sets the text color from text property. This should be attributes.style?.color?.text in the condition.

Suggested change

} else if ( attributes.style?.color?.background ) {

} else if ( attributes.style?.color?.text ) {

sirreal added 7 commits September 15, 2025 13:14

Update @wordpress/browserslist-config and browserslist

df380db

Add web es2020 target to build

132b250

This allows import() to be used in the build. Before, it would error with: > The target environment doesn't support 'import()' so it's not possible > to use external type 'import'

Add block

1a05bf0

Add codemirror and lezer dependencies

001c10e

Add grammar loader

da08e98

Revert "Update @wordpress/browserslist-config and browserslist"

37f8a20

This reverts commit df380db.

changelog

0872794

github-actions bot added [mu wpcom Feature] Wpcom Blocks [Package] Jetpack mu wpcom WordPress.com Features [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Wpcomsh [Status] In Progress labels Sep 15, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Sep 15, 2025

sirreal added the [Type] Feature Development of a new feature label Sep 17, 2025

sirreal requested a review from Copilot September 17, 2025 14:22

Copilot AI reviewed Sep 17, 2025

View reviewed changes

sirreal added 3 commits September 17, 2025 17:30

Add TypeScript setup

fa7474b

Fix misuse of background instead of text color in editor

f130668

Fix incorrect string replace

200282f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

jetpack-mu-wpcom: Add code block #45181

jetpack-mu-wpcom: Add code block #45181

sirreal commented Sep 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 15, 2025 •

edited

Loading

Uh oh!

gziolo commented Sep 17, 2025

Uh oh!

sirreal commented Sep 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Uh oh!

	! $this->get_token_type() === '#text'
	$this->get_token_type() !== '#text'

	! $this->get_tag() === 'CODE' \|\|
	$this->get_tag() !== 'CODE' \|\|

	const filename = file.name.split( /\\\// ).at( -1 ) ?? '';
	const filename = file.name.split( /[\\/]/ ).at( -1 ) ?? '';

	? `language-${ language.toLowerCase().replace( ' \t\n\r\f', '_' ) }`
	? `language-${ language.toLowerCase().replace(/[ \t\n\r\f]/g, '_' ) }`

	} else if ( attributes.style?.color?.background ) {
	} else if ( attributes.style?.color?.text ) {

jetpack-mu-wpcom: Add code block #45181

Are you sure you want to change the base?

jetpack-mu-wpcom: Add code block #45181

Conversation

sirreal commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gziolo commented Sep 17, 2025

Uh oh!

sirreal commented Sep 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sirreal commented Sep 15, 2025 •

edited

Loading

github-actions bot commented Sep 15, 2025 •

edited

Loading