Managing custom blocks
If we want to edit the block content of a custom block, we will not find it by selecting the Configure block button in its context menu or by clicking on the Configure button next to the block from the Block layout page. Custom blocks can only be configured from the custom block library located at /admin/structure/block/block-content or by clicking on the Custom block library tab from the Block layout admin.
Exploring the custom block library
The Custom block library tab displays any custom blocks that have been created. It is from here that we can Edit any custom block:
Clicking on the Edit button will bring up the Edit custom block page where any content, including the Block description, Body, or additional fields, can be changed.
The Custom block library consists of both the Blocks tab, which displays all custom blocks, and the Types tab, which displays the various block types that have been created. A block type is similar to a content type and contains a lot of the same traits as a content type. Let's take a closer look at the custom block type.
Exploring block types
Selecting the Types tab from the Custom block library exposes that we currently have a single block type named Basic block.
A Basic block contains a title and a body field, similar to that of the Page content type. However, we now have the ability to manage both the View mode of a block as well as to manage the fields a block can have. This new functionality allows us to extend the normal block way further than before. Let's take a look at how we can manage the fields of a basic block by adding a new field.
Managing fields
The minute we click on the Manage fields button, we are seeing something quite familiar to us, the Fields UI. The Fields UI allows us to manage existing fields as well as add new fields, as shown in the following image:
The Fields UI consists of the following:
- LABEL: This is a descriptive name of our field that will be used as a label when inputting content into this field.
- MACHINE NAME: The machine name is a lower case field name used by Drupal to distinguish this field from others.
- FIELD TYPE: This allows us to choose from various field types, such as date, file, text, and more.
We can add an additional field to our basic block type now by following these steps:
- Click on the Add field button.
- Select Image from the Add a new field dropdown.
- Enter a Label of
Featured Image. - Click on the Save and continue button.
- Leave the default settings on the field settings page.
- Click on the Save field settings button.
- Leave the default settings on the Edit page.
- Click on the Save settings button.
- We have successfully added a new field to the Basic block type that all future custom blocks can use to add a Featured Image to, as shown in the following image:
We could continue to add additional fields as needed, but we will stop at this point and focus on how to manage the display of custom blocks and their respective View modes.
Managing display
The Custom block library not only allows us to manage fields using the Fields UI, but we can also manage the display of the fields. Continuing with Our custom block, we will click on the Manage display tab. Managing the display of a block is exactly like managing the display of a content type.
From the Manage display page, we can manage several display options ranging from showing or hiding the label to configuring the format of a field. The format options will vary based on the field type it is referring to. Feel free to play around with the various settings and preview the changes.
The final thing to point out is the custom display settings or view modes that a block can have. If we expand the CUSTOM DISPLAY SETTINGS field, we will only see one View mode which is called Full. Drupal 8 allows us to create additional View modes for use with custom blocks the same way we create content types.
If we navigate to /admin/structure/display-modes/view or using the Admin menu, click on Structure, Display Modes, and finally View modes. We will see all the options available to create additional View modes for Content as well as Custom blocks.
The View modes page contains several prebuilt displays based on Content, User, Taxonomy term, Comment, and Custom Block. If we scroll down to the Custom block section, we will see Full display. We can Edit or Delete this display or add additional displays by clicking on the Add new Custom Block view mode link. New view modes are simply containers to hold the display of our fields when we specify one to be used back on the Manage display page.