Skip to content

Instantly share code, notes, and snippets.

@eudesgit
Created April 3, 2018 18:25
Show Gist options
  • Save eudesgit/c3aac2755495a658fdad0796ea169887 to your computer and use it in GitHub Desktop.
Save eudesgit/c3aac2755495a658fdad0796ea169887 to your computer and use it in GitHub Desktop.
Registers the scripts and styles to create a WordPress Gutenberg block that is rendered on PHP
<?php
/**
* Registers the dynamic server side block JS script and its styles
*
* @since 1.0.0
* @return void
*/
public function register_dynamic_block_action ( ) {
$block_name = 'block-dynamic';
$block_namespace = 'gutenberg-blocks-sample/' . $block_name;
$script_slug = $this->plugin_name . '-' . $block_name;
$style_slug = $this->plugin_name . '-' . $block_name . '-style';
$editor_style_slug = $this->plugin_name . '-' . $block_name . '-editor-style';
// The JS block script
wp_enqueue_script(
$script_slug,
plugin_dir_url( __FILE__ ) . $block_name . '/block.build.js',
['wp-blocks', 'wp-i18n', 'wp-element'], // Required scripts for the block
filemtime(plugin_dir_path(__FILE__) . $block_name . '/block.build.js')
);
// The block style
// It will be loaded on the editor and on the site
wp_register_style(
$style_slug,
plugin_dir_url( __FILE__ ) . $block_name . '/css/style.css',
['wp-blocks'], // General style
filemtime(plugin_dir_path(__FILE__) . $block_name . '/css/style.css')
);
// The block style for the editor only
wp_register_style(
$editor_style_slug,
plugin_dir_url( __FILE__ ) . $block_name . '/css/editor.css',
['wp-edit-blocks'], // Style for the editor
filemtime(plugin_dir_path(__FILE__) . $block_name . '/css/editor.css')
);
// Registering the block
register_block_type(
$block_namespace, // Block name with namespace
[
'style' => $style_slug, // General block style slug
'editor_style' => $editor_style_slug, // Editor block style slug
'editor_script' => $script_slug, // The block script slug
'render_callback' => [$this, 'block_dynamic_render_cb'], // The render callback
]
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment