Custom HTML: show placeholder when block renders no visible HTML content

[himanshupathak95]

What?

Closes #80843

When a Custom HTML block contains only JavaScript or CSS, with no visible HTML markup, and the editor canvas collapses the block to zero height. The block saves and renders correctly on the frontend, but is completely invisible in the editor: only a detached toolbar badge indicates it exists. Multiple such blocks on a page produce a blank editing experience.

Why?

The redesign stores JS as <script data-wp-block-html="js"> and CSS as <style data-wp-block-html="css"> inside the block's inner content. When painting the canvas, InnerContent passes all markup, which strips <script> tags. A JS-only block then has nothing to inject into the DOM, gets a height of zero, and collapses silently.

How?

Adds a new early-return branch in HTMLEdit between the existing empty-content check and the normal InnerContent render:

• After confirming the block has content, call parseContent(content).
• If the html field is empty (all content is JS/CSS), render a named Placeholder instead of . The Placeholder shows the block icon, a clear message ("This block contains JavaScript or CSS that cannot be previewed in the editor."), and an "Edit code" CTA.
• BlockControls and InspectorControls are preserved in this branch so the toolbar and sidebar panel remain fully reachable, consistent with the existing non-empty path.

The block content is not modified. Only the editor-side visual representation changes.

Testing Instructions

• Add a Custom HTML block.
• Open the modal → JavaScript tab → enter any JS (e.g. console.log('hello')).
• Click Update.
• Verify: the block is visible on the canvas as a Placeholder with label and "Edit code" button (previously: invisible).
• Click the canvas Placeholder's "Edit code" button → modal opens with JS content intact.
• Add some HTML in the HTML tab as well → verify the block switches back to the live InnerContent preview path (Placeholder disappears).
• Verify the frontend still renders correctly (JS runs on the published page).

Screenshots or screencast

Before

Screen.Recording.2026-07-30.at.16.25.26.mov

After

Screen.Recording.2026-07-30.at.16.22.11.mov

Screen.Recording.2026-07-30.at.16.22.33.mov

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

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: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: prachigarg19 <prachigarg19@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>

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