Backticks in Code block produce nested <code> tags · WordPress/gutenberg#28926

Backticks in Code block produce nested tags

2021-02-10T18:50:04.000Z

## Description If you try to add open and closing backticks inside of a "Code" block, then it produces a nested ` ` 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 ` ` element, nested inside of the block ## Expected behaviour Backticks should retain their original formatting and not transform. ## Actual behaviour Backticks are converted into a ` ` 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

(1 commentaire) (0 réactions) (0 assignés)JavaScript (9 607 stars) (3 893 forks)batch import

Good First Issue[Block] Code[Status] In Progress[Type] Regression

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

Create a new code block (or preformatted block)
Add text inside of two backticks
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

Guide contributeur

Stack technique: javascriptreacthtmlcss
Domaine: frontend
Type d'issue: bug
Difficulté: 3
Temps estimé: 1-3 hours
Statut d'activité: stale
Clarté: clear
Prérequis: Familiarity with Gutenberg block editorUnderstanding of React rich text components
Accessibilité débutant: 60
Direction de recherche: 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.