WordPress/gutenberg

Backticks in Code block produce nested <code> tags

Open

#28926 opened on Feb 10, 2021

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Good First Issue[Block] Code[Status] In Progress[Type] Regression

Description

Description

If you try to add open and closing backticks inside of a "Code" block, then it produces a nested <code> block inside of it. The same is true of the Preformatted block

Step-by-step reproduction instructions

  1. Create a new code block (or preformatted block)
  2. Add text inside of two backticks
  3. The text will be transformed into a <code> element, nested inside of the block

Expected behaviour

Backticks should retain their original formatting and not transform.

Actual behaviour

Backticks are converted into a <code> element

Screenshots or screen recording (optional)

Code snippet (optional)

WordPress information

  • WordPress version: 5.6
  • Gutenberg version: Not Installed
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

  • Device: Desktop
  • Operating system: MacOS 11.2
  • Browser: Firefox 86

Contributor guide

Tech stack
javascriptreacthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with Gutenberg block editorUnderstanding of React rich text components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Look into the RichText component in the Gutenberg codebase (e.g., packages/block editor/src/components/rich text/). The issue is that backticks inside a Code or Preformatted block are being parsed into nested <code> tags. Investigate how the block editor handles inline formatting and specifically the backtick transformation. The fix likely involves modifying the formatting rules or the paste handler to prevent this conversion when already inside a code block.