Can we combine the blade view with the blocks?

radicle
1

Hello everyone !

I would like to know if it is possible to combine blade views with blocks defined in typescript.

To be clearer, let’s imagine I create a partials test.blade.php, would there be a way to make @includeIf('partials.test') in the block?

Thanks in advance for all your answers !

2

You mean using a Blade view as Gutenberg block?
This should be possible, as Gutenberg blocks support server-side rendering, the Blade-PHP template can therefore be rendered as HTML and printed as block.

3

I’m doing something sort-of like this (though very out of date) with ACF Gutenberg blocks here. It should be possible to loop over any Blade views an register blocks, right?

4

Can you give me a little more information?

5

The goal is to use the npm libraries @roots/wordpress-hmr and @wordpress/block-editor to create the guntenberg blocks and to be able to link these blocks generated by my typescript with the blade view.

Here is an example of what I am trying to do :
https://topaz.github.io/paste/#XQAAAQBhAwAAAAAAAAAyngpEyqrozfDTIEszY+uHpnr+dlYttoM9WMLZiIr6nh02tPCh4IQ8zPSpgHtiHzYsaMyA3X8m21fZmxyO+LD2OminVh71gZHtd7gq6egAh7rNNE7kGS3BF2hv6J9lg5YQBwmlSBxcr7Y5ByMgrmK3NlZVKLOjwoIRjymDF0beWYvrnXk3tsMZG/cKW2L8iV63e9LZoJE7zKRu39LDkj1KDrWmKzgPeaWpYE/mP+Shv4ac8TvnQ/BTz3ABMISeRDAwa+BxRYqzXwko6CIeQyD/idRT6rmJASNCfBmKYd6ualEE8dLzmhdwsHkzjDRmEBENVbzS6sm1jaebhPg5sJzYwj8OjGxFFo7IXXkJ/bbuwH7CRZrMcLwFgPlZXzMr89VfSvBo1Stlkkh5v8g+zSjhoHQSLkcsYOajpwB7AoU9s0ZnXLft18YHxDx2pZwBa0gDW26vexNKif5w7BH/gjtHyGfQkZv9u2K8S5TVwjmRBJ/L//uSgYg=

6

If you want to use the rendered Blade-PHP templates as actual markup to be saved by a Gutenberg block (not server-side rendered), you have to render the Blade-PHP template first on the server and then pass it to Gutenberg frontend on the browser as a string (e.g. JavaScript template literals).

I had a similar task, letting the theme inject decorative elements into the editor DOM (not polluting the actual post content). I used HTML <template>s for this, rendered from server-side.

IMHO markup for the theme/decorative purposes should be added server-side, either by post-processing from the theme and injecting DOM into the editor, than hard-saving it as page content. When the theme is changed, those elements would then simply disappear, without any need for changing the post content.

1 Like
7

Thanks for your answer, I will try to investigate this method!