Custom Block: Create fast and simple

Blocks are individual pieces of your site’s web page layout. They are placed inside the regions of your theme, and can be created, removed, and rearranged in the Block layout (admin/structure/block) administration page.

Examples of blocks include the Who’s online listing, the main navigation menu, and the breadcrumb trail. The main page content is also a block.

Sometime we need a specific block with specific type of information and structure, so there is plenty of custom blocks management tool, but in some cases you need a programmer skills.

How do we make a simple, fast modular block, here are my steps and tips:

Step 1: Create a simple module

Create a module folder / project ( I use NetBeans, but you can use and textual editor)

The folder name is the module name.

Create in this folder file: <module name>.info.yml

Edit this file and add to it the following lines:

name: My Module

description: what my module does in general

type: module

core_version_requirement: ^10

package: My Custom Modules

version: 10.1.04

Drupal 10 comes with new folder strategy, so new module should be placed under /modules/custom/

Upload the module (with all its directory structure) and enable it.

Step 2: Create the block class

According to new directory structure let's create sub folder src under the module main directory

in src lets create sub folder Plugin, and in it lets create sub folder Block

The new php class should be created in 'src/Plugin/Block  (case sensitive is mandatory )

create class in file which have the same base name, for example: BasicBlock.php, should have class BasicBlock

<?php

namespace Drupal\basic_module\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Block annotation
 * 
 * @Block(
 *      id = "basic_block",
 *      admin_label = @Translation("Basic Block"),
 * )
 */
class BasicBlock extends BlockBase {
    //put your code here
}

Step 3: Implement the block content

In order to implement the block content there are few methods that should be implemented:

    /**
     * {@inheritDoc}
     */
    public function build() {
        $markup = '';
        $markup .= '<div>';
        $markup .= '    <p>Anything can come here: code, variables, html, etc.  </p>' ;
        $markup .= '</div>';
        return [
            '#type' => 'markup',
            '#markup' => $markup,
        ];
    }

Here we are displaying a markup in the block.

Implementing Block with Custom Theme

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#theme' => 'hello_block',
      '#data' => ['age' => '31', 'DOB' => '2 May 2000'],
    ];
  }

In case you set custom block with '#theme', you need supporting pipe which is done by updating the my_module.module 
with the following code

/**
 * Implements hook_theme().
 */
function my_module_theme() {
  return [
    'hello_block' => [
      'variables' => [
        'data' => [],
      ],
    ],
  ];
}

Notification:
Event though you defined the theme name: hello_block, the system will look for the following block twig :
templates/hello-block.html.twig