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 commented Apr 17, 2018

great overview but perhaps it should have been hiroy_render_callback()

@emfluenceindia

This comment has been minimized.

Copy link

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 commented Mar 31, 2019

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

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.