Preview Toggle for Custom HTML Block#78688
Draft
KarunyaChavan wants to merge 5 commits into
Draft
Conversation
- Restore the HTML editor as the default block view so users can search and edit code directly again. - Add an explicit HTML/Preview toggle in the block toolbar, preserve preview rendering on demand, and keep the edit modal available for code changes.
…ling. - Add "default": "html" to block.json so new Custom HTML blocks open the raw HTML editor by default. - Normalize runtime view mode in edit.js: treat any non-'preview' value as 'html' and use the normalized viewMode for toolbar state.
- Replace deprecated __experimentalVStack from @wordpress/components with Stack from @wordpress/ui - Add direction="column" prop to maintain vertical layout
github-actions
Bot
added
[Package] Block library
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @KarunyaChavan! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
… rendering - Initialize Custom HTML editor in preview mode for new empty blocks. - Keep editor/preview panes mounted (toggle visibility) to avoid iframe remount flicker when switching modes. - Remove redundant viewMode schema attribute and simplify redundant mode/placeholder logic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Core Ticket: https://core.trac.wordpress.org/ticket/65332
This PR makes the Custom HTML block open the raw HTML editor by default again and hardens the component against invalid or legacy
viewModeattribute values.Why?
Users reported regressions when the Custom HTML block rendered the Preview by default. Restoring the HTML-first experience fixes:
The change is implemented as a defensive improvement: setting the schema default ensures new blocks behave correctly, and runtime normalization prevents malformed or legacy
viewModevalues from leaving blocks stuck in Preview.How?
defaultfor theviewModeattribute in the block schema to make the default behavior deterministic for new blocks.viewModeasattributes.viewMode === 'preview' ? 'preview' : 'html'so any undefined or invalid value falls back to'html'.This keeps existing blocks that explicitly saved
viewMode: "preview"unchanged, while guaranteeing new blocks and invalid values render HTML-first.Testing Instructions
Custom HTMLblock.Cmd/Ctrl+F) for text within it.Previewbutton - the block should switch to the preview iframe.HTMLto switch back to the raw editor.Screenshots
Before
After
Case 1: Preview State
Case 2: Raw HTML
Use of AI Tools
AI was used to optimize the regex being used for stripping the CSS and JS wrapper tags.