-
-
Save chandrapatel/b3f0a4a6a2d1d03d4f3e9b1e5e61eec7 to your computer and use it in GitHub Desktop.
Converting a shortcode to a block: this method is fast to do, but a mediocre UX. You should only use this as a stopgap until you can implement a full block UI.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// License: GPLv2+ | |
var el = wp.element.createElement, | |
registerBlockType = wp.blocks.registerBlockType, | |
ServerSideRender = wp.components.ServerSideRender, | |
TextControl = wp.components.TextControl, | |
InspectorControls = wp.editor.InspectorControls; | |
/* | |
* Here's where we register the block in JavaScript. | |
* | |
* It's not yet possible to register a block entirely without JavaScript, but | |
* that is something I'd love to see happen. This is a barebones example | |
* of registering the block, and giving the basic ability to edit the block | |
* attributes. (In this case, there's only one attribute, 'foo'.) | |
*/ | |
registerBlockType( 'pento/php-block', { | |
title: 'PHP Block', | |
icon: 'megaphone', | |
category: 'widgets', | |
/* | |
* In most other blocks, you'd see an 'attributes' property being defined here. | |
* We've defined attributes in the PHP, that information is automatically sent | |
* to the block editor, so we don't need to redefine it here. | |
*/ | |
edit: function( props ) { | |
return [ | |
/* | |
* The ServerSideRender element uses the REST API to automatically call | |
* php_block_render() in your PHP code whenever it needs to get an updated | |
* view of the block. | |
*/ | |
el( ServerSideRender, { | |
block: 'pento/php-block', | |
attributes: props.attributes, | |
} ), | |
/* | |
* InspectorControls lets you add controls to the Block sidebar. In this case, | |
* we're adding a TextControl, which lets us edit the 'foo' attribute (which | |
* we defined in the PHP). The onChange property is a little bit of magic to tell | |
* the block editor to update the value of our 'foo' property, and to re-render | |
* the block. | |
*/ | |
el( InspectorControls, {}, | |
el( TextControl, { | |
label: 'Foo', | |
value: props.attributes.foo, | |
onChange: ( value ) => { props.setAttributes( { foo: value } ); }, | |
} ) | |
), | |
]; | |
}, | |
// We're going to be rendering in PHP, so save() can just return null. | |
save: function() { | |
return null; | |
}, | |
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
Plugin Name: PHP Block | |
Description: A sample PHP rendered block, showing how to convert a shortcode to a block. | |
Author: Gary Pendergast | |
Version: 0.1 | |
Author URI: https://pento.net/ | |
License: GPLv2+ | |
*/ | |
/* | |
* Here's a little sample plugin that shows how to easily convert an existing shortcode | |
* to be a server-side rendered block. This lets you get your existing plugin functionality | |
* running in the block editor as quickly as possible, you can always go back later and | |
* improve the UX. | |
* | |
* In this case, we have an imaginary shortcode, [php_block], which accepts one argument, 'foo'. | |
* This shortcode would be used like so: | |
* | |
* [php_block foo=abcde] | |
* | |
* Because the block editor uses the same function signature when doing server-side rendering, we | |
* can reuse our entire shortcode logic when creating the block. | |
*/ | |
/** | |
* Register our block and shortcode. | |
*/ | |
function php_block_init() { | |
// Register our block editor script. | |
wp_register_script( | |
'php-block', | |
plugins_url( 'php-block.js', __FILE__ ), | |
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ) | |
); | |
// Register our block, and explicitly define the attributes we accept. | |
register_block_type( 'pento/php-block', array( | |
'attributes' => array( | |
'foo' => array( | |
'type' => 'string', | |
), | |
), | |
'editor_script' => 'php-block', // The script name we gave in the wp_register_script() call. | |
'render_callback' => 'php_block_render', | |
) ); | |
// Define our shortcode, too, using the same render function as the block. | |
add_shortcode( 'php_block', 'php_block_render' ); | |
} | |
add_action( 'init', 'php_block_init' ); | |
/** | |
* Our combined block and shortcode renderer. | |
* | |
* For more complex shortcodes, this would naturally be a much bigger function, but | |
* I've kept it brief for the sake of focussing on how to use it for block rendering. | |
* | |
* @param array $attributes The attributes that were set on the block or shortcode. | |
*/ | |
function php_block_render( $attributes ) { | |
return '<p>' . print_r( $attributes, true ) . '</p>'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment