Wordpress function

Guttenburg Blocks 101: Everything you need to know to build beautiful pages in WordPress and Drupal

Gutenberg blocks are a new way of creating content in WordPress, named after Johannes Gutenberg, the inventor of the printing press. They allow you to create complex layouts and add various types of content, such as images, videos, and buttons, using pre-designed blocks.

To use Gutenberg blocks in WordPress, you will need to have the Gutenberg plugin installed on your site. Once you have the plugin installed, you can start creating content using blocks by going to the “Add New” page in the WordPress dashboard and clicking on the “Edit with Gutenberg” button. This will open the Gutenberg editor, which you can use to add blocks and create your content.

To add a block, you can either click on the “+” symbol in the editor or use the “Add Block” button in the top toolbar. This will open a menu with a list of available blocks that you can add to your content. You can then use the settings in the right-hand panel to customize the block, such as adding an image or changing the text color.

In Drupal, you can use the Gutenberg module to add Gutenberg blocks to your content. This module allows you to use the Gutenberg editor to create and edit content in Drupal, just like you would in WordPress. To install the Gutenberg module, you will need to download it from the Drupal website and follow the instructions to install it on your site. Once you have the module installed, you can use the Gutenberg editor to add blocks and create your content in Drupal.

How to create custom Gutenburg blocks in WordPress

To create custom Gutenberg blocks in WordPress, you will need to have some knowledge of web development and be familiar with technologies such as HTML, CSS, and JavaScript.

Here are the basic steps to create a custom Gutenberg block:

  1. Install the Gutenberg plugin on your WordPress site, if you haven’t already.
  2. Create a new plugin or add your block code to an existing plugin. To do this, you can use a code editor to create a new PHP file and save it with a unique name, such as “my-custom-block.php.”
  3. In your plugin file, use the register_block_type function to register your block. This function takes an object as an argument, which should include the block’s name, title, and other metadata.
  4. Define the block’s HTML structure using the render_callback parameter. This parameter should contain a callback function that returns the HTML for your block. You can use PHP functions and template tags to generate the HTML.
  5. Use the enqueue_block_assets action to load any CSS or JavaScript assets that your block needs.
  6. Activate your plugin in the WordPress dashboard to make your block available for use.

Here is an example of a simple custom Gutenberg block that displays a message:

function my_custom_block_register() {
    plugins_url( 'my-custom-block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' )

  register_block_type( 'my-plugin/my-custom-block', array(
    'editor_script' => 'my-custom-block',
    'render_callback' => 'my_custom_block_render'
  ) );
add_action( 'init', 'my_custom_block_register' );

function my_custom_block_render( $attributes ) {
  return '<p>Hello world!</p>';

I hope this helps! Let me know if you have any questions or need more information.


Matt has been working in the web industry for over 15 years, he is also an avid mountain biker. He discovered his love for the internet years ago and has since honed his skills to keep up with the latest trends and technologies in the industry. Matt has worked with a diverse range of clients, including small businesses, non-profits, and large corporations, delivering high-quality websites. Apart from his work, Matt loves to explore the outdoors and takes every opportunity to hit the trails on his mountain bike. His commitment to his work and passion for mountain biking have earned him a reputation as a talented and well-rounded individual. If you're in need of a skilled web developer or an adventure-seeking mountain biker, Matt is the perfect fit.