Skip to content

Conversation

@mecskyverse
Copy link
Contributor

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)
Before After
before-grok-paste.webm After-grok-paste-compressed.webm

Converts Grok AI's span-based HTML to semantic HTML when pasting. Handles headings, bold, and italic formatting by detecting Grok's distinctive CSS classes.
@github-actions
Copy link

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.

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

Co-authored-by: mecskyverse <aakashverma1@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Copying/pasting from Grok doesn't include text formatting

1 participant