Add language block attribute to code block (to help highlighters)#76641
Open
Add language block attribute to code block (to help highlighters)#76641
Conversation
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.
|
Size Change: +543 B (+0.01%) Total Size: 7.66 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c436058. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23331767410
|
Contributor
There was a problem hiding this comment.
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
languageblock attribute (default"") forcore/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
|
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 Unlinked AccountsThe 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. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Member
|
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 |
Contributor
Author
|
@ramonjd I could change the transform to type |
Contributor
Author
|
I prefer the previous version, but at least it can be tested. |
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
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.
What?
Closes #10200
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:
```phpwhen 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.
```phpManually 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.