How to create a custom block in Drupal 8?

Member

by larissa , in category: PHP Frameworks , 2 years ago

How to create a custom block in Drupal 8?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by darrion.kuhn , 2 years ago

@larissa 

To create a custom block in Drupal 8, you can use one of the following methods:

  1. Use the Drupal Console to generate a block plugin:
1
drupal generate:plugin:block


  1. Create a block plugin manually:
  • Create a folder for your custom module, if it doesn't already exist.
  • Create a src folder in your custom module folder.
  • Create a Plugin folder in the src folder.
  • Create a Block folder in the Plugin folder.
  • Create a PHP file for your custom block in the Block folder. The file name should follow the pattern {BLOCK_NAME}Block.php.
  • Define your custom block class in the PHP file. The class should extend the BlockBase class and implement the BlockPluginInterface interface.
  • Annotate the block class with @Block annotation.
  • Implement the build() method, which should return the content (formatted as a render array) that you want to display in the block.


Here is an example of a custom block class:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php

namespace DrupalmymodulePluginBlock;

use DrupalCoreBlockBlockBase;
use DrupalCoreBlockBlockPluginInterface;
use DrupalCoreFormFormStateInterface;

/**
 * Provides a 'MyCustomBlock' block.
 *
 * @Block(
 *   id = "mycustom_block",
 *   admin_label = @Translation("My custom block"),
 *   category = @Translation("Custom"),
 * )
 */
class MyCustomBlock extends BlockBase implements BlockPluginInterface {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [];
    $build['mycustom_block']['#markup'] = 'Hello World!';

    return $build;
  }

}


  1. Use the Drupal user interface to create a custom block:
  • Go to the "Structure" menu and click on the "Block layout" link.
  • Click on the "Place block" button for the region where you want to add the custom block.
  • In the "Add custom block" section, enter a name and a description for your custom block.
  • In the "Block body" field, enter the content that you want to display in the block.
  • Click on the "Save block" button.


I hope this helps! Let me know if you have any further questions.

by darrion.kuhn , a year ago

@larissa 

To create a custom block in Drupal 8, you need to follow these steps:

  1. Create a custom module: Create a new custom module in your Drupal installation by creating a folder under the "modules" directory and naming it something relevant to your module.
  2. Define the module: Inside your module folder, create a file named "module_name.info.yml" (replace "module_name" with the actual name of your module). In this file, define the basic information about your module, including the name, type, description, core version, and dependencies. For example:
1
2
3
4
5
6
7
name: 'Custom Block Module'
type: module
description: 'A custom module to create a custom block.'
core_version_requirement: ^8 || ^9
package: Custom
dependencies:
  - block


  1. Create the block file: Inside your module folder, create a "src/Plugin/Block" directory. In this directory, create a PHP file with a name indicative of your block, like "CustomBlock.php". This file will define the block class and its functionality.
  2. Define the block class: Open the block file you just created and define a custom block class that extends the DrupalCoreBlockBlockBase class. Give your class a relevant name. For example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
namespace Drupalmodule_namePluginBlock;

use DrupalCoreBlockBlockBase;

/**
 * Provides a custom block.
 *
 * @Block(
 *   id = "custom_block",
 *   admin_label = @Translation("Custom Block"),
 *   category = @Translation("Custom")
 * )
 */
class CustomBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    // Build the content of the block.
    // You can use any HTML or render arrays here to define the block's output.
    return [
      '#markup' => $this->t('This is a custom block.'),
    ];
  }
}


  1. Clear the Drupal cache: After creating the module and the block file, clear the Drupal cache to ensure your changes are recognized by the system.
  2. Install and enable the module: Go to the Extend page in your Drupal administration panel and find your custom module in the list of available modules. Check the box next to your module and click the "Install" button. After installation, click the "Enable" button to enable the module.
  3. Place the block: Now that your custom block is created and enabled, you can place it on your site's pages. Go to the Block Layout page in your Drupal administration panel and drag your custom block to the desired region. Save the changes, and your custom block will be displayed on the front end of your site.


That's it! You have successfully created a custom block in Drupal 8.