Drupal 8 - Basic HTML Block

Drupal 8 Basic HTML Block can be used for displaying any HTML content on your Drupal 8 pages. Drupal 8 enables you to display the preconfigured block on pages according to your choice.

In my example I am using Basic HTML Block for displaying Google ads. The block is displayed on every page in the left panel.

You can download Drupal 8 Basic HTML Block from this link


Installation instruction

  • Unpack and copy downloaded basic_html_block.zip to your Drupal 8 instalation under /modules folder in your
  • Log in to your Drupal 8 web site as admin user
  • Click on Extend menu
  • Check checkbox Basic HTML Block Module
  • Click on Save Configuration button

Basic HTML Block Module is enabled now.  Next step is to configure block so the block will display some HTML code. We also want the block to be rendered on every page in the left sidebar.


Configuration

  • Click on Structure / Block Layout menu
  • In the right sidebar you can see Basic HTML Block link under LISTS (VIEWS) section, click on the link
  • "Configure block" popup window shoud be displayed
  • Enter HTML code you would like to display in the block (in my example it is code generated from Google Ads service)
  • Select Region "Sidebar First"
  • Click o Save block button
And work is done. :-)

If you would like to develop it by yourself please follow instructions below.

Module development

The process of creating Drupal 8 Basic HTML block is as follows:

Create basic_html_block.info.yml

name: Basic HTML Block Module
description: Displays block with configured HTML content 
package: Custom
type: module
version: 1.0
core: 8.x
dependencies:
  - node

Create empty php file basic_html_block.module

//empty file

Create BasicHtmlBlock.php class

namespace Drupal\basic_html_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Basic Html' block.
 *
 * @Block(
 * id = "basic_html_block",
 * admin_label = @Translation("Basic HTML Block"),
 * category = @Translation("Lists (Views)")
 * )
 */
class BasicHtmlBlock extends BlockBase {
	
	/**
	 * Returns the configuration form elements specific to this block plugin.
	 * 
	 */
	public function blockForm($form, FormStateInterface $form_state) {
		$form = parent::blockForm ( $form, $form_state );
		
		// Retrieve existing configuration for this block.
		$config = $this->getConfiguration();
		
		// Replace with relevant adsense script
		$defaultHTML = ''.
						''.
						'';
		
		// Add a form field to the existing block configuration form.
		$form ['block_html'] = array (
				'#type' => 'textarea',
				'#title' => t ( 'Block HTML' ),
				'#default_value' => $defaultHTML 
		);
		return $form;
	}
	
	/**
	 * Process configuration form
	 *
	 * @see \Drupal\Core\Block\BlockBase::blockSubmit()
	 */
	public function blockSubmit($form, FormStateInterface $form_state) {
		
		// Save our custom settings when the form is submitted.
		$this->setConfigurationValue ('block_html', $form_state->getValue ( 'block_html' ) );
	}
	
	/**
	 * Returns html markup displayed in the block
	 */
	public function build() {	
			
		// Retrieve existing configuration for this block.
		$config = $this->getConfiguration();
		$html = isset ( $config ['block_html'] ) ? $config ['block_html'] : '

'.t('HTML content not yet configured.').'

'; return array( '#markup' => $html, '#allowed_tags' => array('style', 'script', 'a', 'abbr', 'acronym', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'cite', 'code', 'col', 'colgroup', 'command', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt', 'em', 'figcaption', 'figure', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'mark', 'menu', 'meter', 'nav', 'ol', 'output', 'p', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'small', 'span', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'time', 'tr', 'tt', 'u', 'ul', 'var', 'wbr'), ); } }