Saving HTML to be displayed outside editor

[fernandomm]

Not sure if this is within the scope of the project, but are there any plans of allowing HTML to be saved in a format that can be displayed without the editor?

One of the issues is the inline CSS that is generated for some blocks. Example, for a core/buttons with justify content set, the following HTML is returned:

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-green-cyan"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-green-cyan-background-color has-background wp-element-button">Example</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

When rendered within the editor, an inline CSS is generated:

.editor-styles-wrapper .wp-container-25 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

Also, the HTML is changed for some blocks in order to add the CSS classes and sometimes adding an external/wrapper div.

If you simply display the generated HTML, it will have lots of differences when comparing to what is displayed at the editor.

[johngodley]

Sorry for the lateness of the reply.

The HTML is whatever Gutenberg itself supplies, which includes block markup. Yep, the editor wraps this up with other modifications, and ensures it looks correct for the editor.

For display outside of the editor you will need to supply the appropriate CSS to make things look as you want on your site. You might be able to use some of the editor CSS here (and a lot of it probably leaks out anyway), but there are no plans to provide anything outside of the editor itself.

I know there is a Gutenberg PHP function to remove block markup, but I'm not sure about in JS.

[johngodley]

Closing this for now as I don't think it applies to this repo, but if you have more context then feel free to reopen.