Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example Gutenberg block with server-side rendering. Gutenberg edit() block creates interface. Gutenberg saves settings automatically, the PHP function passed as `render_callback` to `register_block_type` is used to create HTML for front-end rendering of block.
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
registerBlockType( 'hiRoy/serverSide', {
title: __( 'Server Side Block', 'text-domain' ),
icon: 'networking',
category: 'common',
attributes: {
images : {
default: [],
type: 'array',
}
},
edit({attributes, setAttributes, className, focus, id}) {
//Put a user interface here.
},
save({attributes, className}) {
//gutenberg will save attributes we can use in server-side callback
return null;
},
} );
<?php
register_block_type('hiRoy/serverSide', array(
'render_callback' => 'hi_roy_render_callback',
'attributes' => array(
'images' => array(
'type' => 'array'
)
)
)
);
function hi_roy_render_callback( $attributes ){
$images = $attributes[ 'images' ];
return '<div><!-- put image gallery here--></div>';
}
@andykillen

This comment has been minimized.

Copy link

@andykillen andykillen commented Apr 17, 2018

great overview but perhaps it should have been hiroy_render_callback()

@emfluenceindia

This comment has been minimized.

Copy link

@emfluenceindia emfluenceindia commented Feb 4, 2019

I could not get to work. Here is what I tried.

block.js

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'hall/block-server-side-render', {
	title: __( 'Server Side Rendering' ),
	icon: 'shield',
	category: 'common',
        keywords: [
		__( 'Server Side Rendering' )
	],
    attributes: {
	  innerContent: {
	      type: 'array',
              source: 'children',
              selector: 'p'
      }
    },
   edit: function( props ) {
       function onChangeContent( content ) {
	        props.attributes( { innerContent: content } );
        }

	return (
		<div className={ props.className }>
                   <div class="gray-bg">
                      <RichText tagName="p" role="textbox" aria-multiline="true" value={props.attributes.innerContent} onChange={onChangeContent} />
                   </div>
		</div>
		);
	},
	save: function( props ) {
		return null;
	},
} );

init.php

register_block_type( 'hall/block-server-side-render', array(
	'render_callback' => 'hall_render_inner_content',
	'attributes' => array(
		'innerContent' => array(
			'type' => 'array'
		)
	)
));

function hall_render_inner_content( $attributes ) {
	$innerContent = $attributes['innerContent'];
	return '<div class="inner-content">' . $innerContent . '</div>';
}

When published the content didn't save. The post_content for me is <!-- wp:hall/block-server-side-render /-->.

I am new to Gutenberg development. Please let me know what went wrong! :(

@sagarseth9

This comment has been minimized.

Copy link

@sagarseth9 sagarseth9 commented Mar 31, 2019

How do we call the render_callback inside a php class? It doesn't work the usual way.

@rajogit

This comment has been minimized.

Copy link

@rajogit rajogit commented Apr 26, 2019

Hello,

I have the same issues on the gutenberg block. Nothing show on frontend! just
Is there no function we need to call on save() function JS to say wp that show content in render php function ?

WP: 5.1.1

@andrewlimaza

This comment has been minimized.

Copy link

@andrewlimaza andrewlimaza commented Apr 30, 2019

Your render_callback method will be output on the save() function so you don't need to call to render the PHP side of things @rajogit

@andrewlimaza

This comment has been minimized.

Copy link

@andrewlimaza andrewlimaza commented Apr 30, 2019

So the save method can just return null.

@sanzeeb3

This comment has been minimized.

Copy link

@sanzeeb3 sanzeeb3 commented May 6, 2019

Is there anyway to render the content for edit() method from the server side? Just like return null and render_callback similar to save()?

@JuanVqz

This comment has been minimized.

Copy link

@JuanVqz JuanVqz commented Dec 4, 2019

You need to register a method render_my_php_block in a public wordpress hook like:
add_action( 'wp_enqueue_scripts', 'render_my_php_block');
put register_block_type.... inside render_my_php_block

register_block_type( 'hall/block-server-side-render', array(
	'render_callback' => 'hall_render_inner_content',
	'attributes' => array(
		'innerContent' => array(
			'type' => 'array'
		)
	)
));
@latiosthinh

This comment has been minimized.

Copy link

@latiosthinh latiosthinh commented Feb 11, 2020

Can you show me how to use the example attribute on the serverside?

 register_block_type('hiRoy/serverSide', array(
        'render_callback' => 'hi_roy_render_callback',
        'attributes' => [
            'name' => [
                'type' => 'string'
            ]
        ],
        'example' => [ // <== THIS ONE
           'attributes' => [
               'name' => 'Thomas'
            ]
        ]
    )
);
@timotheemoulin

This comment has been minimized.

Copy link

@timotheemoulin timotheemoulin commented Feb 20, 2020

How do we call the render_callback inside a php class? It doesn't work the usual way.

You have to specify the class that is responsible for the render

'render_callback' =>[$this, 'render_function']

@mtoensing

This comment has been minimized.

Copy link

@mtoensing mtoensing commented Apr 10, 2020

Hi! This seems to be the exact same question and maybe answer to my question here: "How to use output of php render_callback function in the block editors backend?" https://wordpress.stackexchange.com/questions/363703/gutenberg-how-to-use-output-of-php-render-callback-function-in-the-block-editor Maybe someone can help?

@cre-mer

This comment has been minimized.

Copy link

@cre-mer cre-mer commented Aug 4, 2020

How do we call the render_callback inside a php class? It doesn't work the usual way.

As @timotheemoulin already said, or

'render_callback' => function($atts) {
    return $this->render_function($atts);
}
@sharif1752

This comment has been minimized.

Copy link

@sharif1752 sharif1752 commented Sep 23, 2020

`// const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { TextControl }= wp.components;

registerBlockType( 'mygutenberg-block/slide-title', {
title: __( 'Server Side Rendering' ),
icon: 'shield',
category: 'common',
keywords: [
__( 'Server Side Rendering' )
],
attributes: {
innerContent: {
type: 'string',
source: 'text',
}
},
edit( {attributes, setAttributes, className, focus, id} ) {
console.log(attributes);

return (
    <div className={ className }>
               <TextControl 
                    label={ __( 'innerContent', 'recipe' ) } 
                    value={ attributes.innerContent }
                    onChange={ ( new_val ) => {
                        setAttributes({ innerContent: new_val })
                    }} />
    </div>
    );
},
save( {attributes, className} ) {
    return null;
},

} );`

`// function hall_render_inner_content($attributes){

return print_r($attributes);

}

function my_custom_block_register_block(){
register_block_type(
'mygutenberg-block/slide-title',
array(
'render_callback' => 'hall_render_inner_content',
'attributes' => array(
'innerContent' => array(
'type' => 'string',
'default' => 'test',
)
)
)
);
}

add_action( 'init', 'my_custom_block_register_block' );`

but when i update or save the post give this error "Updating failed. The response is not a valid JSON response."
screenshot given bellow

https://prnt.sc/umgmzt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.