Framework: Try to render React based components on the frontend

[gziolo]

Description

This is just an experiment to explore how much work it is needed to make it possible to render blocks also on the frontend.

I was able to render an existing component with not that much code. I also disable the part that strips demarcation comment and renders callback for the Latest Posts block which allows producing the following code on the frontend.

<div class="entry-content">
  <!-- wp:paragraph -->
  <p>My test paragraph</p>
  <!-- /wp:paragraph -->
 
  <!-- wp:latest-posts {"postsToShow":9,"displayPostDate":true,"align":"wide","layout":"grid"} /-->	</div>

Next steps

• Find a way to render the Latest Posts block using client-side code only. The same way it happens at the moment in the editor with edit.

Issues discovered

withAPIData depends on the editor module's code because it uses context with some props declared there. It is going to be replaced soon with data module so we should rather focus on that at the moment. See #5219 for more info.

[gziolo]

We discussed this idea a bit at WordCamp Miami with @Shelob9 and @zgordon. This PR should be enough to play with element, component and data on the frontend.

[aduth]

Find a way to render the Latest Posts block using client-side code only. The same way it happens at the moment in the editor with edit.

I'm a bit worried about the idea of wanting or encouraging this behavior for a few reasons:

• Visitor experience impact in data not being ready to present by the time the page has loaded
• Semantic markup / scraping / SEO impact in that the content is not generated until after the initial server render
• Discourages sensible static fallback markup from save
  • To me, return null; from save should be a rare circumstance where there's simply no meaningful markup that can be produced to represent the value of the block. Latest Posts fits this criteria, but I'm not sure we should assume all other server-rendered blocks will.

Related: https://make.wordpress.org/core/2017/01/17/editor-technical-overview/

[zgordon]

Thanks for exploring this folks. I will follow your lead and ideas here, but my 2 cents for what it may be worth.

• This use case would have to come along with an understanding of the possible cons of not rendering directly from the server SEO and otherwise. Luckily it is still possible to render something from the server if needed.
• While this is in part about the server side / client side split / duplication of code, another important part is just finding a way for folks who want to create rich, interactive blocks on the frontend to do so using the React / Redux abstraction. We do hear the question after basic blocks are built: "Okay cool! Now how do I use React on the frontend of my block?"

Totally understand that this does break from the core convention of how block data is saved and displayed so it may just remain something people hack to make work on the frontend as needed, but since React is in Core it seemed something to explore.

Thanks! Know ya'll are crazy busy :)

[westonruter]

Find a way to render the Latest Posts block using client-side code only. The same way it happens at the moment in the editor with edit.

Note server-side rendering endpoint #780 and its PR #5602.

[gziolo]

I'm a bit worried about the idea of wanting or encouraging this behavior for a few reasons

@aduth, I probably shouldn't include the changes to the latest posts block to better express my intent :)

While this is in part about the server side / client side split / duplication of code, another important part is just finding a way for folks who want to create rich, interactive blocks on the frontend to do so using the React / Redux abstraction. We do hear the question after basic blocks are built: "Okay cool! Now how do I use React on the frontend of my block?"

What @zgordon said was the primary reason I started those explorations. I wanted to share an example how you can use wp.element, wp.data and other low-level modules on the frontend to add rich interactions on the frontend using the same set of components as you have in the admin. Actually, this was a question that people kept asking at the WC Miami:

Awesome thing with using React and Redux, can I use that also outside of WP Admin? :)

I wanted also to experiment with the block parsing on the frontend and find a way to add some interactions for the rendered HTML. Example use case would be the slideshow block, which is a mix of gallery and cover image. On the frontend users expect to have it animated. Our current setup would only generate HTML code and would defer the rest to the custom code which probably would need to be implemented with jQuery as of today.

Note server-side rendering endpoint #780 and its PR #5602.

@westonruter, as explained above. My concern wasn't about the latest posts block. It doesn't explain well what I was trying to achieve. It's a different discussion if we really need server-side rendering for a very small group of blocks which don't add too much value to the SEO score, which I don't think makes sense before we have 5.0 out :) Backwards compatibility should be our priority for the time being 👍

I'm closing this one as I don't plan to work on it in the upcoming weeks. However, I'm happy to help with any efforts to make it work. Feel free to ping me if you need any help. @zgordon, there should be a few of us at WC EU, we might use the contributor day to spend some time on this amazing idea.

Thanks for your feedback!