Gutenberg contributor Gary Pendergast has published a handy sample plugin that demonstrates how to convert shortcode functionality to a Gutenberg block.
Do you have a bunch of shortcodes that you’d like to really easily turn into blocks? Here’s a sample plugin showing how to re-use your exisiting shortcode functionality in a block!https://t.co/bppHcumBlB
— Gary (@GaryPendergast) July 29, 2018
“This sample uses the ServerSideRender element,” Pendergast said. “It’s critical to remember that ServerSideRender is a stepping stone to a full block editing experience: having to call back to the server to re-render is a worse UX than native JS rendering. Use ServerSideRender to get your existing functionality ready for WordPress 5.0 now, and plan to phase it out over time.”
With WordPress 4.9.8’s “Try Gutenberg” callout just around the corner, this sample plugin may be helpful for developers who have created custom shortcode plugins for clients. If you’re not sure where to start, Pendergast’s sample plugin makes Gutenberg block creation more approachable. The Gutenberg handbook has more in-depth documentation for developers who want to improve their blocks beyond this basic example.