+44 0330 223 3428
Call Us
+44 0330 223 3428

WPTavern: WordPress Developers: Learn How to Convert Shortcodes to Gutenberg Blocks

WPTavern: WordPress Developers: Learn How to Convert Shortcodes to Gutenberg Blocks

Gutenberg contributor Gary Pendergast has published a handy sample plugin that demonstrates how to convert shortcode functionality to a Gutenberg block.

The first file shows a basic example of how to register a block with JavaScript and add block inspector controls to the sidebar. The second file is the PHP code for the plugin that converts the existing shortcode logic into a block that will work inside the new editor.

“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.


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 The first file shows a basic example of how to register a block with JavaScript and add block inspector controls to the sidebar. The second file is the PHP code for the plugin that converts the existing shortcode logic into a block…

Source: WordPress

Related Post
WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets

WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets WordPress Trac is one of the more utilitarian and uninspiring interfaces that many contributors have to contend with in the process of giving back to the project. After growing tired of Trac’s mediocre search functionality, William Earnhardt set out to improve it with a new […]

Read more
WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers

WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers The following is a guest post written by Jennifer Bourn. With 21 years experience as a graphic designer, 15 years experience as a web designer, 14 years as a creative agency owner, and 11 years as a blogger, Jennifer Bourn has […]

Read more
WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage

WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage Storefront, WooCommerce’s free flagship theme, has just released version 2.5.0 with updates that make it easier to setup and customize the homepage. In 2017, WooCommerce 2.2 introduced starter content to help users set up the homepage template, menus, widgets, and add some demo products. This content has […]

Read more