This is the eighth chapter of the Drupal 8 Theming: Getting Started series. In this chapter, you are going to learn about how to manage custom blocks.

How to manage custom blocks

If you want to edit the content of custom blocks, you can only do it from the Custom block library, which is located at admin / structure / block / block-content (you can also get there by clicking the Custom block library tab from the Block layout administration page).

The custom block library

The custom block library displays any custom block you have created with Drupal 8. Because you have not created any yet, you can read the following message: “There are no custom blocks available. Add a custom block.”

Let's create one custom block by clicking the Add custom block button.

1. Click on the Add custom block button.
2. Type a brief description of your block in the Block description text box.
3. Type any piece of text in the Body text area.
4. Ignore the other settings and click the Save button.

Once the custom block has been created, you can edit its description, body, or additional fields from the Custom block library page, under the Blocks tab, by clicking its Edit button.

In addition to the Blocks tab, the custom block library has other tab named Block types, which shows the different block types available for use.

By default, there is only one single block type named Basic Block. A Basic Block contains a title and a body field.

If the Basic Block does not meet your requirements, then you can create your custom block type by clicking on the Add custom block type button.

At this point, if you are not new to Drupal, you may have already noticed that Block Types and Content Types are pretty much the same in Drupal 8. That’s right! Now you have the ability to manage the fields of a block as well as its view mode.

Creating a custom block type

In order to understand this new functionality completely, let’s create a custom block type and then let’s add some fields to it.

1. Click on the Add custom block type button.
2. Type Date block in the Label text box (Figure A).
3. Type a description in the Description textarea (Figure B).
4. Ignore the other settings and click on the Save button.
5. Click on the Manage fields button of the Date block.
6. Right after clicking the Manage fields button, you will see the Fields User Interface, which let you both manage the fields of a block and add new fields to it.
7. There are three columns on the Manage fields screen:
   • LABEL: This is the name that will be used as a label for this field. Please, use a descriptive name to let the user know what this field is used for.
   • MACHINE NAME: This is the name used by Drupal to identify the field (the machine name is always displayed in lowercase letters.).
   • FIELD TYPE: This is the field type you will work with. There are a lot of them to choose from (email, link, file, etc.).
8. Click on the Add field button.
9. Select the Date field from the Add a new field drop-down menu (Figure C).
10. Type Date in the Label text box and click on the Save and continue button (Figure C).
11. On the Date screen, select the type of date to create from the Date type drop-down menu. Let’s choose Date only (Figure D).
12. Ignore the other settings and click on the Save field settings button.
13. If you go back to the Block types tab on the Custom block library page, you will see that the block type you have just created is available for use (Figure E).

Managing the display and view modes of a custom block

Once that the Date block type is ready for use, let’s have a look at its Manage display tab. In order to do so, please go to ‘admin / structure / block / block-content / manage / date_block / display’.

As you might expect, managing the display of a custom block is pretty much the same as managing the display of a content type. From this page, you can arrange the fields, choose how the labels are displayed, change the format as well as select a view mode by clicking on CUSTOM DISPLAY SETTINGS.

If you go back to the previous image, you will see that the label Date is displayed above the date. In addition, the date string displays the current time, which is fake, because you selected Date only when creating the type of date. Because the Manage display tab lets you change these display options, let’s hide the label Date and get rid of the current time displayed by the date string:

1. Locate the LABEL column for the Date field and then select Hidden from the drop-down menu (Figures F and G).
2. Click on the cogwheel for the Date field and then choose a Date format appropriate for it (you have to select HTML Date because, as said above, you chose Date only as the type of date to create) (Figure H).
3. Click on the Update button and then click on the Save button to save your settings.

This is what the Date block looks like after changing the display settings for the label and format:

Lastly, Drupal 8 lets you create view modes for custom blocks the same way as you create them for content types. Think of a view mode as a container that holds the display settings of your custom blocks.

By default, there is only one view mode (Full) for use with custom blocks:

If you want to create new view modes or edit existing ones, you can do it by clicking the Manage view modes link located in the CUSTOM DISPLAY SETTINGS box (as shown in the previous image) or going to admin / structure / display-modes.