Skip to content

Instantly share code, notes, and snippets.

@pdclark
Last active November 21, 2023 16:40
Show Gist options
  • Save pdclark/95fc9a568ea5d3054b8dae1765726232 to your computer and use it in GitHub Desktop.
Save pdclark/95fc9a568ea5d3054b8dae1765726232 to your computer and use it in GitHub Desktop.
The shortest possible example PHP-rendered WordPress block.
<?php
/**
* Plugin Name: Block — Hi Test
* Description: The shortest possible example PHP-rendered WordPress block.
* Author: Paul Clark
* Author URI: https://pdclark.com
*
* @package hi
*/
/**
* Register: PHP.
*/
add_action(
'init',
function() {
wp_register_script(
'hi-test',
add_query_arg( [ 'action' => 'block-hi.js', ], admin_url( 'admin-ajax.php' ) ),
[ 'wp-blocks', 'wp-element', 'wp-editor' ],
microtime(),
true
);
register_block_type(
'hi/test',
[
'editor_script' => 'hi-test',
'render_callback' => function( $attributes, $content ) {
ob_start();
do_action( 'hi/test/render_callback', $attributes, $content );
return ob_get_clean();
},
]
);
}
);
/**
* Render: PHP.
*
* @param array $attributes Optional. Block attributes. Default empty array.
* @param string $content Optional. Block content. Default empty string.
*/
add_action(
'hi/test/render_callback',
function( $attributes, $content ) {
?>
<h1>Hello world.</h1>
<?php
$q = new WP_Query(
[
'post_type' => 'post',
'numberposts' => 3,
]
);
while ( $q->have_posts() ) {
$q->the_post();
?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php
}
wp_reset_postdata();
},
10,
2
);
/**
* Register: JavaScript.
*
* @see https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/
*/
add_action(
'wp_ajax_block-hi.js',
function() {
header( 'Content-Type: text/javascript' );
?>
( function ( blocks, element, serverSideRender, blockEditor ) {
var el = element.createElement,
registerBlockType = blocks.registerBlockType,
ServerSideRender = serverSideRender,
useBlockProps = blockEditor.useBlockProps;
registerBlockType( 'hi/test', {
apiVersion: 2,
title: 'Hi Test',
icon: 'megaphone',
category: 'widgets',
edit: function ( props ) {
var blockProps = useBlockProps();
return el(
'div',
blockProps,
el( ServerSideRender, {
block: 'hi/test',
attributes: props.attributes,
} )
);
},
} );
} )(
window.wp.blocks,
window.wp.element,
window.wp.serverSideRender,
window.wp.blockEditor
);
<?php
exit;
}
);
@ducktype
Copy link

add_action('init',function(){
  $sn = 'block-test-test';
  $block_meta = [
    'name' => 'test/test',
    'title' => 'Test',
    //"description" => "Shows warning, error or success notices...",
    //'icon' => 'networking',
    //'category' => 'common',
    'editor_script_handles'   => $sn,
    'render_callback' => function($attrs,$content,$block){
      //return "XXX2".print_r(func_get_args(),true);
      //return "XXX2".print_r($attrs,true).print_r($content,true);
      return "TEST2";
    }
  ];
  $ret = register_block_type($block_meta['name'],$block_meta);
  $sd = <<<EOD
    var block = {
      apiVersion: 3,
      edit: function(props) {
        var bn = props.name
        var bp = wp.blockEditor.useBlockProps()
        
        var bp_ssr = {
          block: bn,
          attributes: props.attributes
        }
        var ss_el = wp.element.createElement(wp.serverSideRender,bp_ssr)
        
        var bp_inner = {
          templateLock: 'all',
          template: [
            [ 'core/image', {} ],
            [ 'core/heading', { placeholder: 'Book Title' } ],
            [ 'core/paragraph', { placeholder: 'Summary' } ],
          ],
        }
        var inner_el = wp.element.createElement(wp.blockEditor.InnerBlocks,bp_inner)
        
        var ret = wp.element.createElement('div',bp,ss_el,inner_el)
        return ret
      },
      save: function(props) {
        //return null
        var bp = wp.blockEditor.useBlockProps.save()
        var inner_el = wp.element.createElement(wp.blockEditor.InnerBlocks.Content)
        
        //var ret = wp.element.createElement('div',bp,inner_el)
        ret = inner_el
        return ret
      }
    }
    wp.blocks.registerBlockType('{$block_meta['name']}',block)
  EOD;
  wp_register_script($sn,'',[ 'wp-blocks', 'wp-element', 'wp-editor' ]);
  wp_enqueue_script($sn);
  wp_add_inline_script($sn,$sd);
});

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