Create configurable block in Drupal8

How to Create Configurable Block programmatically In Drupal 8

Blocks are the boxes of content that can be displayed in regions like sidebar first, sidebar second, content. This functionality is provided by the Block module in drupal 8. Here describing to creating Configurable Block programmatically in drupal 8 by using the drupal console.

Configurable Block module & skeleton files created by following drupal console commands:

$drupal generate: module

By using drupal console to generate configurable block module it create configure_block.info.yml file like,

Configure_block.info.yml file contain the following information:

The .info.yml file contains metadata about the project like the name of the project (configure_block), type (module), description (This is an example of configurable block programmatically in drupal 8), core (8.x), packages (Custom) and dependencies etc.

Next, we need to create a plugin for Block Module. Create folder Plugin under src, create Block folder under Plugin then create DefaultBlock.php file under Block folder.

• The path should be /src/Plugin/Block/DefaultBlock.php

(or)

Next, we need to generate Block module using following drupal console command,

$drupal generate:plugin:block

After generated configurable block module by using drupal console, it should be like,

The Configurable block module Skeleton in drupal 8 is like this:

• module/custom/configure_block/src/Plugin/Block/DefaultBlock.php
• module/custom/configure_block/configure_block.info.yml

where configure_block is a module name for our custom configurable block. The plugin of configurable block module file will have following code where we are defining our configurable fields in drupal 8.

DefaultBlock.php:

<?php
namespace Drupal\Defaultblock\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Block\BlockPluginInterface;
/** 
 * Provides a ‘CustomBlock’ block. 
 * 
 * @Block( * id = “id_custom_block”, 
 * admin_label = @Translation(“labelcustomblock”), 
 * ) 
 */
class DefaultBlock extends BlockBase implements BlockPluginInterface { 
/** 
 * {@inheritdoc} 
 */ 
public function blockForm($form, FormStateInterface $form_state) { $form = parent::blockForm($form, $form_state); 
$config = $this->getConfiguration(); 
$form[‘hello_block_name’] = array ( ‘#type’ => ‘textfield’, ‘#title’ => $this->t(‘Who’), ‘#description’ => $this->t(‘Who do you want to say hello to?’), ‘#default_value’ => isset($config[‘name’]) ? $config[‘name’] : ‘’, ); 
$form[‘mobile_number’] = array ( ‘#type’ => ‘textfield’, ‘#title’ => $this->t(‘your number’), ‘#description’ => $this->t(‘enter your personal mobile number’), ‘#default_value’ => isset($config[‘number’]) ? $config[‘number’] : ‘’, ); 
$form[‘address’] = array ( ‘#type’ => ‘textfield’, ‘#title’ => $this->t(‘your address’), ‘#description’ => $this->t(‘enter your home town’), ‘#default_value’ => isset($config[‘town’]) ? $config[‘town’] : ‘’, );
 return $form; 
} 
/** 
 * {@inheritdoc} 
 */ 
public function blockSubmit($form, FormStateInterface $form_state) { $this->setConfigurationValue(‘name’, $form_state->getValue(‘hello_block_name’)); 
$this->setConfigurationValue(‘number’, $form_state->getValue(‘mobile_number’)); 
$this->setConfigurationValue(‘town’, $form_state->getValue(‘address’)); 
} 
public function build() { $
config = $this->getConfiguration(); 
if (!empty($config[‘name’])) { 
$name = $config[‘name’]; 
} 
else { 
$name = $this->t(‘to no one’); 
} 
if (!empty($config[‘number’])) { 
$number = $config[‘number’]; 
} 
else { 
$number = $this->t(‘mobile number’); 
} 
if (!empty($config[‘town’])) { 
$town = $config[‘town’]; 
} 
else { 
$town = $this->t(“@town”); 
} 
return array( ‘#markup’ => $this->t(‘Hi my number is @number!,@name and my address @town’, array ( ‘@number’ => $number, ‘@name’ => $name, ‘@town’ => $town, ) ), ); 
}
}

view rawDefaultBlock.php: hosted with ❤ by GitHub

Here we take three fields of the configurable block which are hello_block_name, mobile_number and address. The message is to be displayed, based on what you enter in those fields of block module in drupal 8.

Next, install your configurable block module in drupal 8.

Goto

Extend >select install module>select your module name>click install.

Next place the configurable Block module in any regions are presented in drupal 8.

Goto

Structure>Block Layout>click place block icon>select your block name>select region>save block.

Goto

Configuration block>enter in the following field what you need to display output.

Then go to the main page,

Configurable block Module displayed in some region (selected region example: sidebar second). It shows following output.

I hope this was helpful in getting you started with Custom configurable block in Drupal 8.

Reference:
https://github.com/munavlakshmi/create-configure-block-in-drupal-8
How to Create Configurable Block programmatically In Drupal 8