Get the classic WordPress HTML block view back

I normally don’t usually publish technical articles in here, not because they are not part of my daily life, but because it’s a choice I consciously make.
For this co created space to be a reflection of my life experience and the way i see the world around me.
Beyond computers, screens and logic.

Ironically.. or not so much, this kind of blends with the exact reason that lead me to write this simple, yet deeply powerful blog post today.

For the last few years, i have been publishing and editing a live app on the weather of the island I live in.
A topic I’m deeply passionate about.
and countless times I chose the portability of the phone to make simple or even complex changes on the go, to that platform.
until..
the last WordPress update, to version 7

If you are here you probably already know what I’m talking about.
That easy ctrl+F followed by a simple edit and preview live, was gone overnight.

Replaced by a nonsense live site preview right inside the visual editor.
Which makes simple edits take at least 10 times the effort they did before.

Click edit, perform the search, make the change, click update.. and then, because the preview inside the editor doesn’t render exactly like the live site does, we still need to preview it live.
And after seeing what other changes need to be made, there we go again, to the exact same steps all over again..
until we completed all the changes.

That changes today!

Found with Gemini’s help, a js php script code, that you can simply paste inside the Code Snippets plugin and have your precious workflow restored.
B.t.w. if you don’t have Code Snippets already, you definitely should consider it, I have it on all my WordPress platforms and it has been a true Blessing for me.

Here is the script that you can save with the PHP default settings:

add_action( 'enqueue_block_editor_assets', 'force_html_block_always_edit' );

function force_html_block_always_edit() {
    $custom_js = "
    wp.hooks.addFilter(
        'editor.BlockEdit',
        'custom-tweaks/always-show-html',
         function( BlockEdit ) {
         return function( props ) {
 // Define the element creator OUTSIDE the if-statement so all blocks can use it
         var el = wp.element.createElement;

 // Intercept the core HTML block
         if ( props.name === 'core/html' ) {
var blockProps = wp.blockEditor.useBlockProps ? wp.blockEditor.useBlockProps() : {};
                    
 // Return a permanent textarea instead of Gutenberg's preview UI
         return el( 'div', blockProps,
         el( 'textarea', {
         value: props.attributes.content,
onChange: function( e ) { props.setAttributes( { content: e.target.value } ); },
         style: { 
         width: '100%', 
         minHeight: '200px', 
         fontFamily: 'monospace', 
         padding: '15px', 
         border: '1px solid #757575', 
         borderRadius: '4px', 
         backgroundColor: '#f0f0f1',
         fontSize: '14px',
         lineHeight: '1.5'
  },
 placeholder: 'Write HTML here...'
                        })
                    );
                }
                
 // Safely render all other blocks (images, buttons, etc.) exactly as normal
                return el( BlockEdit, props );
            };
        }
    );
    ";
    
    // Attach the script to the editor
    wp_add_inline_script( 'wp-edit-post', $custom_js );
}