What?

Closes #72469

Adds paste handler support for Grok AI content to properly convert headings and formatting when pasting into the Gutenberg editor.

Why?

When pasting content from Grok AI into the Gutenberg editor, headings and formatting were not being preserved. Grok AI uses span elements with CSS classes for both structure (headings) and styling (bold, italic) instead of semantic HTML tags. This resulted in:

• Headings appearing as plain text without line breaks
• All content concatenated into a single paragraph
• Loss of bold and italic formatting
• Poor content structure and readability

This differs from other AI sources like ChatGPT which use proper semantic HTML that Gutenberg already handles correctly.

How?

Implemented a new grok-converter.js paste handler that detects and transforms Grok AI's proprietary HTML structure to semantic HTML:

Detection Strategy:

• Uses CSS class pattern matching to identify Grok's distinctive atomic CSS classes
• Detects block-level spans (display: block) with font-size classes for headings
• Requires both size and bold classes to avoid false positives
• Only processes SPAN elements, leaving other HTML untouched

Transformations:

1. Headings: Converts spans with heading size classes (r-uho16t, r-1blvdjr, etc.) and bold classes to proper heading elements (H1, H2, H3, etc.)
2. Bold text: Converts spans with font-weight classes (r-b88u0q, r-1vr29t4) to <strong> tags
3. Italic text: Converts spans with italic class (r-36ujnk) to <em> tags

Testing Instructions

Testing Instructions

1. Go to Grok AI and generate content with headings
2. Example prompt: "Create a guide on 'WordPress Getting Started' with headings and subheadings"
3. Copy the generated content from Grok
4. Open WordPress editor and create a new post/page
5. Paste the content into the editor
6. Verify that headings, Italics and bold font are properly converted to Semantic tags like H1, H2, strong etc.
7. Verify that content is properly separated into paragraphs (not concatenated)