Does the block editor need a client side alternative to the render_block filter?

[bacoords]

If you want to modify/enhance core block functionality, it's pretty easy to change CSS inside the block editor, with custom attributes, block styles, etc. In fact, the serialized data of attributes (including className) is about the only thing you can safely modify on a core block.

If you want to change the HTML markup of a core block, that's also fairly doable with the render_block filters that run during the server-side render, typically by checking the values of your custom attributes.

However, if you want to see HTML markup changes inside the block editor, you have to be very careful. You can modify the block's HTML while inside the editor using existing filters, but that altered markup is then saved to the database, meaning once you disable your plugin, the markup is considered "invalid" and the block appears broken.

This makes it really hard to modify blocks in ways that might require structural changes, like adding SVGs (ex: adding an SVG arrow to a button variation).

Would a block editor version of render_block - a filter that modifies what you see in the editor but those modifications are not saved to the database- be useful? You'd have to replicate your work twice, (once in JS and once in PHP) but I guess we're all used to that now!

CC @ndiego

[simom]

Some other considerations:

1. The markup of core blocks is not standardized, and we must also consider the difference between normal blocks and blocks with innerBlocks.
2. How can we manage the blocks that have fields in the markup? (For example, the single button that has a RichText field)
3. We need to keep in mind the deprecated functionality that might overlap with the one present in the core block (perhaps this is not a serious problem)

[t-hamano]

I think this is a very difficult problem, because blocks that exist on the block editor are React components.

Gutenberg has a system called SlotFill, which allows us to inject new React elements through pre-prepared slots in React components. Examples include the block toolbar and inspector control. On the other hand, blocks on the block editor are Edit components, and no slots are prepared.

As far as I know, the only way to modify the Edit component is to replace the entire Edit component with our own component via the editor.BlockEdit hook.

[ndiego]

As far as I know, the only way to modify the Edit component is to replace the entire Edit component with our own component via the editor.BlockEdit hook.

Yeah, that's my conclusion as well. It makes extending Core blocks challenging if you want the Editor to be a one-to-one representation of the front end.