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! :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment