Shelob9/serve-side-block.js

andykillen · 2018-04-17T13:08:28Z

great overview but perhaps it should have been hiroy_render_callback()

emfluenceindia · 2019-02-04T10:47:13Z

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 .

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

sagarseth9 · 2019-03-31T02:05:26Z

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

rajo-vilo · 2019-04-26T13:53:12Z

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 · 2019-04-30T11:17:29Z

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 · 2019-04-30T11:17:48Z

So the save method can just return null.

sanzeeb3 · 2019-05-06T04:20:28Z

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 · 2019-12-04T17:31:10Z

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 · 2020-02-11T10:29:37Z

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 · 2020-02-20T14:54:46Z

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 · 2020-04-10T18:35:02Z

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 · 2020-08-04T00:12:10Z

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 · 2020-09-23T12:56:19Z

`// 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

wpexplorer · 2021-06-16T01:22:40Z

Is there any conditional check we can use to check if we are rendering the element in the Gutenberg editor as opposed to the live site? For example I'm showing a form but I want the button disabled when viewing in Gutenberg, thanks!

eliot-akira · 2021-12-22T16:03:29Z

@wpexplorer Here's a way to check if a block is being rendered inside the Gutenberg editor.

$in_gutenberg_editor = defined('REST_REQUEST') && REST_REQUEST && !empty($_REQUEST['context']) && $_REQUEST['context']==='edit';

Reference:

wpexplorer · 2021-12-26T17:39:58Z

@eliot-akira - thanks!

bizm · 2022-02-15T10:52:42Z

How is it supposed to work without calling wp_enqueue_script? Below is the example how i do it in my custom wordpress theme:

<?php
  // this is probably your functions.php file

  function register_hiroy_serverside_block() {
    $script_path = get_template_directory_uri() . '/path/to/your/block/index.js';
    $asset_file = include( '/path/to/your/block/index.asset.php' );

    wp_enqueue_script(
      'hiroy-server-side',
      $script_path,
      $asset_file['dependencies'],
      $asset_file['version']
    );

    register_block_type('hiRoy/serverSide', array(
            'render_callback' => 'hi_roy_render_callback',
            'attributes' => array(
                'images' => array(
                    'type' => 'array'
                )
            )
        )
    );
  }

  function hiroy_render_callback( $attributes ){
    $images = $attributes[ 'images' ];
    return '<div><!-- put image gallery here--></div>';
  }

  add_action( 'init', 'register_hiroy_serverside_block' );
?>

That is the only way i could've got it working. All the tutorials and articles i found did not help me. I still don't understand how your example above can work at all. I mean it is in fact not registering anything, thus no blocks should appear in UI. Please anyone explain me what is it that i'm missing here. The whole wordpress architecture is driving me mad!

wpexplorer · 2022-02-15T20:40:20Z

@bizm - This gist isn't intended to explain how to register blocks it's just an example showing how to use the render_callback argument. Now, you don't actually have to use wp_enqueue_script to load your block JS file - you can and probably should be loading the file via your block.json file, see here: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/ and scroll down to "Editor Script".

Shelob9 · 2022-02-16T15:35:58Z

@bizm Here is a more up to date example of how to set up a server-side rendered block: https://github.com/imaginarymachines/everything-all-of-the-time/blob/main/blocks/php-block/init.php

Two issues with your snippet that need corrected:

Use wp_register_script instead of wp_enqueue_script
- https://github.com/imaginarymachines/everything-all-of-the-time/blob/main/blocks/php-block/init.php#L8
Pass the handle of the register script to "editor_script" argument of register_block_type(). WordPress will enqueue the script when block is used.
- https://github.com/imaginarymachines/everything-all-of-the-time/blob/main/blocks/php-block/init.php#L20

ducktype · 2023-11-21T02:43:14Z

add_action('init',function(){
  $block_meta = [
    'name' => 'test/test',
    'title' => 'Test',
    'render_callback' => function($attrs,$content,$block){
      return "TEST";
    }
  ];
  register_block_type($block_meta['name'],$block_meta);
  add_action('enqueue_block_editor_assets',function()use($block_meta){
    $screen = get_current_screen();
    if(!$screen->is_block_editor()) return;
    add_action('admin_print_footer_scripts',function()use($block_meta){
      echo "
       <script>
        var block = {
          edit: function({attributes, setAttributes, className, focus, id}) {
            return "HELLO"
          },
          save: function({attributes, className}) {
            return
          }
        }
        wp.blocks.registerBlockType('{$block_meta['name']}',block)
      </script>
      ";
    });
  });
});

1ucay · 2023-12-03T23:23:59Z

$block_metas = array(
    array(
        'name'  => 'domain/faq',
        'title' => __( 'FAQ', 'domain' ),
        'description' => '',
        'category' => 'text',
        'icon'  => 'star-filled',
        'api_version' => 2
    ),
    array(
        'name'  => 'domain/accordion',
        'title' => __( 'Accordion', 'domain' ),
        'description' => '',
        'category' => 'text',
        'icon'  => 'star-filled',
        'api_version' => 2
    )
);
foreach( $block_metas as $block_meta ) {

    $block_meta['render_callback'] = function ( $block_attributes, $content ) use ( $block_meta ) {
        ob_start();

        $file = ( str_contains( $block_meta['name'], '/' ) ) ? explode( '/', $block_meta['name'] )[1] : $block_meta['name'];

        if ( ob_get_level() ) {
            // https://wordpress.stackexchange.com/questions/4462/passing-variables-through-locate-template
            if ( $filepath = locate_template( "blocks/{$file}/{$file}.php", true, true, array_merge( $_REQUEST, $block_meta, $block_attributes ) ) )
                include_once( $filepath );

            $output = ob_get_contents();
            ob_end_clean();
        }

        return $output;
    };
    register_block_type( $block_meta['name'], $block_meta );

    add_action( 'enqueue_block_editor_assets', function() use ( $block_meta ) {
        add_action( 'admin_print_footer_scripts', function() use ( $block_meta ) {
            echo "
            <script>
                wp.blocks.registerBlockType('{$block_meta['name']}', {
                    edit: function( props ) {
                        return wp.element.createElement(
                            wp.serverSideRender, {
                                block: props.name
                            }
                        );
                    },
                    save: function({attributes, className}) {
                        return null;
                    }
                })
            </script>
            ";
        });
    });
}

	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>';
	}

Shelob9/serve-side-block.js

andykillen commented Apr 17, 2018

Uh oh!

emfluenceindia commented Feb 4, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sagarseth9 commented Mar 31, 2019

Uh oh!

rajo-vilo commented Apr 26, 2019

Uh oh!

andrewlimaza commented Apr 30, 2019

Uh oh!

andrewlimaza commented Apr 30, 2019

Uh oh!

sanzeeb3 commented May 6, 2019

Uh oh!

JuanVqz commented Dec 4, 2019

Uh oh!

latiosthinh commented Feb 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timotheemoulin commented Feb 20, 2020

Uh oh!

mtoensing commented Apr 10, 2020

Uh oh!

cre-mer commented Aug 4, 2020

Uh oh!

sharif1752 commented Sep 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpexplorer commented Jun 16, 2021

Uh oh!

eliot-akira commented Dec 22, 2021

Uh oh!

wpexplorer commented Dec 26, 2021

Uh oh!

bizm commented Feb 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpexplorer commented Feb 15, 2022

Uh oh!

Shelob9 commented Feb 16, 2022

Uh oh!

ducktype commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

1ucay commented Dec 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emfluenceindia commented Feb 4, 2019 •

edited

Loading

latiosthinh commented Feb 11, 2020 •

edited

Loading

sharif1752 commented Sep 23, 2020 •

edited

Loading

bizm commented Feb 15, 2022 •

edited

Loading

ducktype commented Nov 21, 2023 •

edited

Loading

1ucay commented Dec 3, 2023 •

edited

Loading