What?

• Closes Custom HTML block: <pre> and <blockquote> display with forced overflow scroll and incorrect formatting #76236
• Fixes two related overflow issues in the Custom HTML block:

1. Editor preview: Long unbreakable words inside p and blockquote elements in the SandBox iframe overflow horizontally instead of wrapping.
2. Frontend: Same long words overflow on the published page because the block had no frontend CSS to handle word breaking.

Why?

The Custom HTML block lets users paste arbitrary HTML including long unbreakable words like place names (Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu). When these are wrapped in p or blockquote tags, two things go wrong:

• Editor: The SandBox iframe constrains the content to the available width, but browser defaults let text flow beyond the container, forcing horizontal scrollbars on pre and clipping on blockquote.
• Frontend: The save() function rendered raw HTML with no wrapper element and no block-level CSS, so the browser had no instruction to break long words.

This makes valid HTML look broken to both the author and site visitors.

How?

Editor fix

In packages/block-library/src/html/preview.js, the DEFAULT_STYLES string that gets injected into the SandBox iframe was expanded:

p,
blockquote {
	overflow-wrap: break-word;
}

This sits alongside the existing html,body,:root reset and tells the iframe to break long words inside paragraphs and blockquotes instead of overflowing.

Frontend fix

Three small changes ensure the same behavior on the published page:

1. save.js - Wrapped <RawHTML> in a <div className="wp-block-html"> so the block has a targeting class. Without this, no frontend CSS could reach the raw HTML output.
2. style.scss - New file with the same overflow-wrap: break-word rule scoped to .wp-block-html p and .wp-block-html blockquote.
3. block.json - Added "style": "wp-block-html" to register the new stylesheet.

This pattern matches how the Quote, Pullquote, and Code blocks already prevent overflow.

Testing Instructions

1. Open the post editor.
2. Insert a Custom HTML block.
3. Paste the following:

<p>TaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahuTaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu</p>

<blockquote>TaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahuTaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu</blockquote>

4. Switch to the block preview (Visual Editor).
5. Confirm both paragraphs and blockquotes wrap the long word across multiple lines instead of scrolling horizontally.
6. Publish or preview the post.
7. On the frontend, confirm the same long word wraps correctly inside both p and blockquote without overflowing the content area.

Use of AI Tools

• This PR description was authored with the help of kimi-k2.6:cloud model of ollama.
• The recommended fix was produced by kimi-k2.6:cloud model of ollama which was tested and implemented