Skip to content

Instantly share code, notes, and snippets.

@Shelob9

Shelob9/1.php

Last active December 4, 2020 09:48
Show Gist options
  • Save Shelob9/2de742838ae0b9da29386cf2f572be41 to your computer and use it in GitHub Desktop.
Save Shelob9/2de742838ae0b9da29386cf2f572be41 to your computer and use it in GitHub Desktop.
Download ZIP
These are step by step examples for converting a WordPress shortcode to a Gutenberg block. Read the tutorial here: https://calderaforms.com/2019/01/convert-shortcode-gutenberg-block/ Completed example here: https://github.com/caldera-learn/basic-blocks/tree/master/blocks/post-title
Raw
1.php
<?php
/**
* Handler for [cl_post_title] shortcode
*
* @param $atts
*
* @return string
*/
function caldera_learn_basic_blocks_post_title_shortcode_handler($atts)
{
$atts = shortcode_atts([
'id' => 0,
'heading' => 'h3',
], $atts, 'cl_post_title');
return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
/**
* Output the post title wrapped in a heading
*
* @param int $post_id The post ID
* @param string $heading Allows : h2,h3,h4 only
*
* @return string
*/
function caldera_learn_basic_blocks_post_title($post_id, $heading)
{
if (!in_array($heading, ['h2', 'h3', 'h4'])) {
$heading = 'h2';
}
$title = get_the_title(absint($post_id));
return "<$heading>$title</$heading>";
}
/**
* Register Shortcode
*/
add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');
Raw
10.js
const {ServerSideRender} = wp.components; //WordPress Server-Side Renderer
Raw
11.js
const {ServerSideRender} = wp.components; //WordPress Server-Side Renderer
//Preview a block with a PHP render callback
createElement( ServerSideRender, {
block: 'caldera-learn-basic-blocks/post-title',
attributes: attributes
} ),
Raw
12.js
const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
const {TextControl,SelectControl,ServerSideRender} = wp.components; //WordPress form inputs and server-side renderer
registerBlockType( 'caldera-learn-basic-blocks/post-title', {
title: __( 'Show a post title' ), // Block title.
category: __( 'common' ), //category
attributes: {
id : {
default: 1,
},
heading: {
default: 'h2'
}
},
//display the post title
edit(props){
const attributes = props.attributes;
const setAttributes = props.setAttributes;
//Function to update id attribute
function changeId(id){
setAttributes({id});
}
//Function to update heading level
function changeHeading(heading){
setAttributes({heading});
}
//Display block preview and UI
return createElement('div', {}, [
//Preview a block with a PHP render callback
createElement( ServerSideRender, {
block: 'caldera-learn-basic-blocks/post-title',
attributes: attributes
} ),
//Block inspector
createElement( InspectorControls, {},
[
//A simple text control for post id
createElement(TextControl, {
value: attributes.id,
label: __( 'Post Title' ),
onChange: changeId,
type: 'number',
min: 1,
step: 1
}),
//Select heading level
createElement(SelectControl, {
value: attributes.heading,
label: __( 'Heading' ),
onChange: changeHeading,
options: [
{value: 'h2', label: 'H2'},
{value: 'h3', label: 'H3'},
{value: 'h4', label: 'H4'},
]
})
]
)
] )
},
save(){
return null;//save has to exist. This all we need
}
});
Raw
13.php
<?php
/**
* Handler for post title block
* @param $atts
*
* @return string
*/
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
Raw
14.php
<?php
/**
* Handler for [cl_post_title] shortcode
*
* @param $atts
*
* @return string
*/
function caldera_learn_basic_blocks_post_title_shortcode_handler($atts)
{
$atts = shortcode_atts([
'id' => 0,
'heading' => 'h3',
], $atts, 'cl_post_title');
return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
/**
* Register Shortcode
*/
add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');
/**
* Handler for post title block
* @param $atts
*
* @return string
*/
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
/**
* Output the post title wrapped in a heading
*
* @param int $post_id The post ID
* @param string $heading Allows : h2,h3,h4 only
*
* @return string
*/
function caldera_learn_basic_blocks_post_title($post_id, $heading)
{
if (!in_array($heading, ['h2', 'h3', 'h4'])) {
$heading = 'h2';
}
$title = get_the_title(absint($post_id));
return "<$heading>$title</$heading>";
}
/**
* Register block
*/
add_action('init', function () {
// Skip block registration if Gutenberg is not enabled/merged.
if (!function_exists('register_block_type')) {
return;
}
$dir = dirname(__FILE__);
$index_js = 'index.js';
wp_register_script(
'caldera-learn-basic-blocks-post-title',
plugins_url($index_js, __FILE__),
array(
'wp-blocks',
'wp-i18n',
'wp-element',
'wp-components'
),
filemtime("$dir/$index_js")
);
register_block_type('caldera-learn-basic-blocks/post-title', array(
'editor_script' => 'caldera-learn-basic-blocks-post-title',
'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
'attributes' => [
'id' => [
'default' => 1
],
'heading' => [
'default' => 'h2'
]
]
));
});
Raw
2.php
<?php
/**
* Register block
*/
add_action('init', function () {
// Skip block registration if Gutenberg is not enabled/merged.
if (!function_exists('register_block_type')) {
return;
}
$dir = dirname(__FILE__);
$index_js = 'index.js';
wp_register_script(
'caldera-learn-basic-blocks-post-title',
plugins_url($index_js, __FILE__),
array(
'wp-blocks',
'wp-i18n',
'wp-element',
'wp-components'
),
filemtime("$dir/$index_js")
);
register_block_type('caldera-learn-basic-blocks/post-title', array(
'editor_script' => 'caldera-learn-basic-blocks-post-title',
'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
'attributes' => [
'id' => [
'default' => 1
],
'heading' => [
'default' => 'h2'
]
]
));
});
Raw
3.php
<?php
register_block_type('caldera-learn-basic-blocks/post-title', array(
'editor_script' => 'caldera-learn-basic-blocks-post-title',
'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
'attributes' => [
'id' => [
'default' => 1
],
'heading' => [
'default' => 'h2'
]
]
));
Raw
4.js
const attributes = {
post_id : {
default: 1,
},
heading: {
default: 'h2'
}
};
Raw
5.js
const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
registerBlockType( 'caldera-learn-basic-blocks/post-title', {
title: __( 'Show a post title' ), // Block title.
category: __( 'common' ), //category
//display the edit interface + preview
edit(attributes,setAttributes){
return createElement('div', {}, 'Hello from block edit callback' )
},
save(){
return null;//save has to exist. This all we need
}
});
Raw
6.1.js
const {InspectorControls} = wp.editor; //Block inspector wrapper
Raw
6.js
const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
registerBlockType( 'caldera-learn-basic-blocks/post-title', {
title: __( 'Show a post title' ), // Block title.
category: __( 'common' ), //category
//display the post title
edit(attributes,setAttributes){
return createElement('div', {}, [
createElement( 'div', {}, 'Put Preview here' ),
createElement( InspectorControls, {}, 'Inspector Controls' )
] )
},
save(){
return null;//save has to exist. This all we need
}
});
Raw
7.js
const attributes = props.attributes;
const setAttributes = props.setAttributes;
//Function to update id attribute
function changeId(id){
setAttributes({id});
}
//Function to update heading level
function changeHeading(heading){
setAttributes({heading});
}
Raw
8.js
const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
const {TextControl,SelectControl} = wp.components; //Block inspector wrapper
registerBlockType( 'caldera-learn-basic-blocks/post-title', {
title: __( 'Show a post title' ), // Block title.
category: __( 'common' ), //category
attributes: {
id : {
default: 1,
},
heading: {
default: 'h2'
}
},
//display the post title
edit(props){
const attributes = props.attributes;
const setAttributes = props.setAttributes;
//Function to update id attribute
function changeId(id){
setAttributes({id});
}
//Function to update heading level
function changeHeading(heading){
setAttributes({heading});
}
//Display block preview and UI
return createElement('div', {}, [
//preview will go here
createElement( 'div', {}, 'Put Preview here' ),
//Block inspector
createElement( InspectorControls, {},
[
//A simple text control for post id
createElement(TextControl, {
value: attributes.id,
label: __( 'Post Title' ),
onChange: changeId,
type: 'number',
min: 1,
step: 1
}),
//Select heading level
createElement(SelectControl, {
value: attributes.heading,
label: __( 'Heading' ),
onChange: changeHeading,
options: [
{value: 'h2', label: 'H2'},
{value: 'h3', label: 'H3'},
{value: 'h4', label: 'H4'},
]
})
]
)
] )
},
save(){
return null;//save has to exist. This all we need
}
});
Raw
9.php
/**
* Handler for post title block
* @param $atts
*
* @return string
*/
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
return 'Hello From The Server';
}
register_block_type('caldera-learn-basic-blocks/post-title', array(
'editor_script' => 'caldera-learn-basic-blocks-post-title',
'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
'attributes' => [
'id' => [
'default' => 1
],
'heading' => [
'default' => 'h2'
]
]
));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment