Block preview in editor

[iamalessiopaoletti]

Hi,

There is a way to display the preview in gutenberg exactly as the final result in the page?

[davidwebca]

One thing that I did to hide the extra "chrome" the plugin adds is that I removed it with CSS. It's far from ideal though and I'd appreciate a native function to accomplish that as well.

[biabel]

I am also looking for the possibility to display a generated preview in the backend. It would be nice to see the generated block in the backend and see the input fields when clicking on the block. Is it possible?

Currently it looks like this:

Backend:

Frontend:

[qaczy]

Hey, probably you can achive that with adding custom styling like for backend gutenberg blocks - example I'll work soon on this and update my progress.

[davidwebca]

Yup. Like @qaczy says, it's exactly what I've done. Lazy Blocks basically just adds native blocks so, just like them, you can add custom CSS on the front-end and back-end. In your example, @biabel, it seems like your CSS is not enqueued in the editor. It can be a specific

add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_style('mytheme/editor', get_template_directory_uri() . '/css/editor.css');
});

It can be possible to add your main CSS file to the admin, but sometimes they contain CSS resets and other generic styles that can bleed out on the admin styles.

It's also possible to add block-specific stylesheets with the register_block_type_args filter and editing the block's options on build. https://developer.wordpress.org/reference/classes/wp_block_type/__construct/

[ClarusDignus]

I posted the following support topic on WordPress.org. It's of relevance to this issue.

In the editor, Lazy Blocks blocks look different to the standard WordPress blocks, i.e. unlike standard blocks, Lazy Blocks’ block icon, block name, and settings cog icon are vertically stacked above the block preview.

This is inconsistent with how standard blocks look, e.g., it’s standard that when the block is clicked, the block icon is only seen in the the settings the that appear above the block and/or the editor sidebar.

Lazy Blocks allows for the preview to be turned on/off. Please allow for the everything but the preview (block icon, block name, and setting cog icon) to be turned on/off too. This will keep the editor looking more like a WYSIWIG as intended and will make Lazy Blocks blocks look more consistent with standard blocks.

I also recommend presenting the block icon, block name, and settings cog icon in a row rather than vertically stacking them so they take up less space.

Beyond these superficial concerns, thank you for an excellent plugin.

https://wordpress.org/support/topic/please-make-lazy-blocks-blocks-look-more-like-standard-blocks-in-editor

[nk-o]

In the Pro plugin will be available this option soon:

It will disable the block frame styles.