Add language block attribute to code block (to help highlighters) by carolinan · Pull Request #76641 · WordPress/gutenberg

carolinan · 2026-03-18T16:23:38Z

What?

Introduce a language block attribute for core/code blocks.
The attribute value is used to add a language-slug CSS class on the <code> element: <code class="language-php">

The attribute is set by:

A "Code Language" inspector control (TextControl) where the user can type in whatever.
Detecting markdown language definitions such as ```php when the user adds content in the code block.
Finally, it tries to detect the language when transforming to the code block.

Note: there is no attempt to validate that it is a coding language, type "hey" or '''' if you want 🤷‍♀️.

Why?

When using markdown to define the coding language, the reporter expects it to also add the CSS class with the language to the
<code> element. See the issue.
This helps developers / advanced users and third-party code highlighters identify the coding language.

Testing Instructions

Updated Friday March 20.

TYPE in three backticks into a paragraph block (the default block), press Enter.
Observe that it turns into a code block.

TYPE in three backticks followed by word into a paragraph block (the default block), press Enter.
Observe that it turns into a code block.

PASTE three backticks followed by a word into a paragraph block.
```php
Manually transform that paragraph to a code block using the option in the toolbar

Create a new code block and type in three backticks followed by a word.

Confirm that:
The backticks are no longer visible in the code blocks.
The language input field in the block settings sidebar contains the correct word.
The CSS class name is added to the code block: language-word.

Create a new code block and type in three backticks followed by a sentence without a line break:
Confirm that this does not trigger the language detection.

Use of AI Tools

Copilot essentially wrote all of it. It initially tried something more complex so I tried to limit it to a plain text input instead of the custom inspector control it suggested.

Introduce a language attribute for core/code blocks and expose a Code Language inspector control (TextControl) to set it. Parse fenced code blocks from pasted/edited content and normalize language slugs (sanitizeLanguage, parseFencedCode, toHTMLStr). Persist the language as a language-<slug> class on the <code> element in save output. Update block transforms to extract language from <code class="language-..."> and to create blocks from fenced code, and update docs to document the new attribute.

github-actions · 2026-03-18T16:36:09Z

Size Change: +637 B (+0.01%)

Total Size: 7.68 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-library/index.min.js`	334 kB	+637 B (+0.19%)

_{compressed-size-action}

github-actions · 2026-03-18T16:47:18Z

Flaky tests detected in c436058.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23331767410
📝 Reported issues:

[Flaky Test] post title and content are editable and blocks can be inserted #76524 in /test/e2e/specs/editor/various/post-content-focus-mode.spec.js

Copilot

Pull request overview

Adds a language attribute to the core Code block so Gutenberg can preserve/detect a language slug and emit a language-<slug> class on the saved <code> element to support syntax highlighters.

Changes:

Adds a language block attribute (default "") for core/code.
Introduces parsing/sanitization helpers to detect fenced-markdown openings (e.g. ```php) and extract language/content.
Updates transforms, editor UI (Inspector control), and save markup to persist and render the language as a CSS class.

Reviewed changes

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

Show a summary per file

File	Description
test/integration/fixtures/blocks/core__code.json	Updates fixture to include the new `language` attribute.
packages/block-library/src/code/utils.js	Adds helpers for language sanitization and fenced-code parsing.
packages/block-library/src/code/transforms.js	Enhances paragraph/raw HTML transforms to detect and retain language.
packages/block-library/src/code/save.js	Outputs `language-<slug>` class on `<code>` when `language` is set.
packages/block-library/src/code/edit.js	Adds Inspector TextControl for language and detects fenced markdown during editing.
packages/block-library/src/code/block.json	Declares new `language` attribute for the block.
docs/reference-guides/core-blocks.md	Documents the new `language` attribute for `core/code`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Allow optional spaces after the backticks Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Previously, some attributes like border styles did not work when transforming to a code block.

Courtesy of Copilot

github-actions · 2026-03-20T01:43:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @davidbhayes.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: davidbhayes.

Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: designsimply <designsimply@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

ramonjd · 2026-03-20T05:54:22Z

I think this is a good idea, and it works according to instructions.

The only thing I noticed is that, outside a parent block, the backticks convert to a block immediately. I think here in the transforms?

Kapture.2026-03-20.at.16.53.09.mp4

carolinan · 2026-03-20T07:58:37Z

@ramonjd I could change the transform to type enter instead of input, but it is a change to existing behavior.

carolinan · 2026-03-20T08:19:28Z

I prefer the previous version, but at least it can be tested.

ramonjd · 2026-06-02T00:49:53Z

I could change the transform to type enter instead of input, but it is a change to existing behavior.

I just tested, sorry for the delay in getting back to you. I personally feel the enter is reasonable compromise, if it means the code block + language work consistently together.

But if you think it's a disruptive change in behaviour, I'll defer to your wisdom.

ramonjd · 2026-06-02T00:51:45Z


 export default function save( { attributes } ) {
+	const { content, language } = attributes;
+	const codeClassName = language ? `language-${ language }` : undefined;


Ah, I just saw this example is in the HTML spec... nice!

juanmaguitar · 2026-06-24T10:15:59Z

Hi @carolinan 👋

About the conflict with docs/reference-guides/core-blocks.md.

This PR was opened before #77612 was merged (Jun 7), which restructured the generated block docs: docs/reference-guides/core-blocks.md was removed in favor of an overview index at docs/reference-guides/core-blocks/README.md plus a per-block README.md (packages/block-library/src/<block>/README.md). Your branch still edits the now-deleted core-blocks.md, hence the conflict.

Resolution (tested locally, clean):

Merge the latest trunk into your branch.
On the conflict, drop the changes to core-blocks.md (accept its deletion).
Regenerate:
```
npm run docs:build
```
Commit the regenerated files (the per-block README.md plus docs/reference-guides/core-blocks/README.md).

…nguage-class # Conflicts: # docs/reference-guides/core-blocks.md

carolinan added [Type] Enhancement A suggestion for improvement. [Block] Code Affects the Code Block labels Mar 18, 2026

github-actions Bot added the [Package] Block library /packages/block-library label Mar 18, 2026

Update the integration test fixture to include the language attribute

42f8a51

carolinan requested a review from Copilot March 19, 2026 04:20

Copilot AI reviewed Mar 19, 2026

View reviewed changes

Comment thread packages/block-library/src/code/utils.js

Comment thread packages/block-library/src/code/utils.js Outdated

Comment thread packages/block-library/src/code/utils.js Outdated

Comment thread packages/block-library/src/code/transforms.js

carolinan and others added 6 commits March 19, 2026 10:05

Potential fix for pull request finding

55aed6f

Allow optional spaces after the backticks Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

2bcc47f

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Fix linting issue

b7b28d0

Transforming fenced code pass the attributes

67b6e66

Previously, some attributes like border styles did not work when transforming to a code block.

Add test for the new utils

6cfdf2f

Courtesy of Copilot

Merge branch 'trunk' into update/code-block-language-class

d2cc283

carolinan marked this pull request as ready for review March 20, 2026 01:43

carolinan requested review from ajitbohra, fabiankaegy and juanmaguitar as code owners March 20, 2026 01:43

Merge branch 'trunk' into update/code-block-language-class

c436058

Update transforms.js

2d8da23

carolinan and others added 4 commits March 20, 2026 09:22

try ensuring that three backticks and enter creates a code block

e1e2083

Try to solve merge conflict

229dc3a

Merge branch 'trunk' into update/code-block-language-class

d38e05a

Merge branch 'trunk' into update/code-block-language-class

852436a

ramonjd reviewed Jun 2, 2026

View reviewed changes

carolinan added 2 commits June 30, 2026 06:11

Merge remote-tracking branch 'origin/trunk' into update/code-block-la…

8fbc9e2

…nguage-class # Conflicts: # docs/reference-guides/core-blocks.md

Merge branch 'trunk' into update/code-block-language-class

ae9ea92

github-actions Bot mentioned this pull request Jun 30, 2026

Add a scheduled Gutenberg upstream TypeScript watch and triage workflow imjlk/wp-typia#283

Closed

Remove 40px default size from TextControl

5adfdd1

carolinan closed this Aug 28, 2026

Navigation Menu

Repository navigation

Add language block attribute to code block (to help highlighters) - #76641

Add language block attribute to code block (to help highlighters)#76641
carolinan wants to merge 17 commits into
trunkfrom
update/code-block-language-class

carolinan commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

ramonjd commented Mar 20, 2026

Uh oh!

carolinan commented Mar 20, 2026 •

edited

Loading

Uh oh!

carolinan commented Mar 20, 2026

Uh oh!

ramonjd commented Jun 2, 2026

Uh oh!

ramonjd Jun 2, 2026

Uh oh!

juanmaguitar commented Jun 24, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

carolinan commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Testing Instructions

Use of AI Tools

Uh oh!

github-actions Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

ramonjd commented Mar 20, 2026

Uh oh!

carolinan commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carolinan commented Mar 20, 2026

Uh oh!

ramonjd commented Jun 2, 2026

Uh oh!

ramonjd Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

juanmaguitar commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

carolinan commented Mar 18, 2026 •

edited

Loading

github-actions Bot commented Mar 18, 2026 •

edited

Loading

github-actions Bot commented Mar 18, 2026 •

edited

Loading

github-actions Bot commented Mar 20, 2026 •

edited

Loading

carolinan commented Mar 20, 2026 •

edited

Loading

juanmaguitar commented Jun 24, 2026 •

edited

Loading