3

I am currently registering custom blocks via javascript only. I am building a site with lots of custom layouts and widgets, and I'm using the new custom blocks of Gutenberg to facilitate content creation using these custom layouts.

I have a few Custom Blocks, but I did not want to create a Plugin for each block, so I decided to group all the blocks together inside my theme. I created directory for each block, and each directory has an block.js file, which registers the block via the javascript function wp.blocks.registerBlockType.

Sample block.js

const { registerBlockType } = wp.blocks;
registerBlockType( 'myguten/test-block', {
    title: 'Basic Example',
    icon: 'smiley',
    category: 'layout',
    edit() {
        return <div>Hola, mundo!</div>;
    },
    save() {
        return <div>Hola, mundo!</div>;
    },
} );

Here is the sample folder structure for my blocks:

 /my-theme
    /src
        /blocks
            /a-custom-block
                block.js
                styles.scss
            /another-custom-block
                block.js
                styles.scss
      index.js
  functions.php
  webpack.config.js

I have webpack configured to bundle all my block.js files into one file called dist/blocks.build.js. And in my functions.php, I load my blocks.build like so:

function enqueue_custom_blocks() {
    wp_enqueue_script('custom_blocks', get_stylesheet_directory_uri() . '/dist/blocks.js', array('wp-blocks'));

}

add_action( 'enqueue_block_editor_assets', 'enqueue_custom_blocks');

This setup totally works. I am able to work on my custom blocks right in my theme folder, and I have no problem using these custom blocks on my pages and posts.

Therefore, I am curious, what is the purpose of the php function register_block_type? Furthermore, is there anyway I could use register_block_type to register blocks in bulk? My only real reason for wanting to use register_block_type is to leverage the render_callback option if, for example, [my block needed to be dynamic and leverage server-side rendering. Can I apply a filter to a block?

1

1.: The register_block_type lets you load additional stylesheets and scripts for your block in the frontend

2.: As you yourself wrote, register_block_type lets you define a dynamic php render_callback function

3.: If you use a render_callback, you can of course use filters within it.

EDIT: As the comments pointed out, there is some clarification needed on how to use custom filters

Firstly, you can make the whole function pluggable just by wrapping it into a function_exists like this

...
'render_callback' => 'my_awesome_block_render'));

if(!function_exists('my_awesome_block_render')){
  function my_awesome_block_render($attributes,$context){
      //whatever
  }
}

Secondly: Filters.

Wordpress filters are an interesting thing. The long and short is the following: Whenever you call $var =apply_filters('my_cool_filter_name',$var);, Wordpress looks into its global filter function array if a function is registered for the filter "my_cool_filter_name". So for using a custom filter, you just think of a name that hopefully isn't taken by any other plugin/function and apply_filters to it.

So, to use filters to change some aspects of your blocks render, you just use apply_filters with whatever you wish. Let's have an example with a slider block:

function my_awesome_slider_block_render_function($attributes){ //do whatever stuff you want $slider_speed = apply_filters('my_awesome_slider_block_slider_speed',$attributes['slider_speed']); //whatever else }

if nobody added a filter to "my_awesome_slider_block_slider_speed", the variable $slider_speed contains now $attributes['slider_speed'].

However, if for some reason you need to change this speed, (let's say, you use a child theme for mobile devices and the slider should be slower on mobile devices), you can just add a filter in your functions.php like this:

add_filter('my_awesome_slider_block_slider_speed','change_the_mobile_speed');
function change_the_mobile_speed($slider_speed){
  return 800;
}

The same works for actions, too.

Happy Coding!

  • What are exactly those filters? I found this demo which is helping me understand the inner workings of custom blocks. He is using a filter, ie: add_filter( 'gutenberg_post_list_render_filter', 'render_guten_post_list_filter', 10, 2 ); I don't understand how he came up with the name of that hook. Nonetheless, this explanation is helpful in understanding the role of register_block_types – Jeff Wilkerson Feb 26 at 19:51
  • @JeffWilkerson that is a custom filter he is using for that plugin, you can see it applied using apply_filters( 'gutenberg_post_list_render_filter'... in the render.php file. I'm also interested in knowing what is @kuchenundkakao meaning in point 3. – Alvaro Feb 26 at 22:57
  • @Alvaro Yes I know that is a custom function, I am curious how he registers the filter. Obviously, Wordpress is sniffing for filters named {my_cool_block}_render_filter, and calling it if the function exists. I've seen this type of thing before, where you can hook into some functionality by just suffixing your function with a common identifier. I just don't know how he came up with that exact name. I don't see the key 'gutenberg-post-list' being defined anywhere. – Jeff Wilkerson Feb 28 at 2:09
  • On second thought, I see comments in the repo that the demo no longer works. So it seems that there is not a filter that I can tap into on the fly, and the only way I can control whats rendered is to leverage the render_callback option when registering the block – Jeff Wilkerson Feb 28 at 2:14
  • I edited the answer and i hope this clarifies the usage of filters ;) – kuchenundkakao Feb 28 at 7:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.