Begin by navigating to /admin/structure/block or by clicking on Structure and then Block layout from the Admin menu. The Block layout page provides an interface in order to manage block content and place them into regions, as shown in the following image:

A block can be thought of as a chunk of content as small as a single line of HTML markup or as complicated as a listing of content types. Blocks can be categorized based on their functionality with the most common types of blocks categorized:

If blocks consist of content, regions are the containers that hold blocks and make up a themes layout.

Drupal 8 provides the following regions:

Also, each theme can define its own regions. An example of this is the Bartik theme, which implements additional regions for the footer. We will look at how to add custom regions later in Chapter 3, Dissecting a Theme.

To view defined regions within a theme, we can click on the Demonstrate block regions link located on the Block layout page. Clicking on this link will take us to the homepage with the regions highlighted, as shown in the following image:

To return to the Block layout page, we click on the Exit block region demonstration link located at the top of the page.

If we scroll down the Block layout page and locate the Sidebar second region, we can see that it is currently empty. Empty regions will not output anything until we have placed a block within it. To place a block, we can follow these steps:

Let's verify that the Powered by Drupal block is displaying properly by navigating to our homepage. Since the Sidebar second region now contains a block, we will see the content appear in the right-hand column of the page, as shown in the following image:

So far, we have placed a block successfully within a region, but we can also configure a block based on the type of block it is.

Although we can navigate back and forth between the specific page a block is located on and the Block layout screen, it is much easier to use the context menu provided by the block. If we hover over a block, we will see a Configure block link as, shown in the following image:

Clicking on this link takes us directly to the Configure block screen for the block, as shown in the following image:

All blocks contain three common areas of configuration: Title, Visibility, and Region. Keep in mind that additional configuration options may be available based on the type of block. We will only be covering the basic configuration options.

Sometimes, we may want to control the visibility of a particular block of content based on various contexts. If we navigate back to the Configure block screen and scroll down to the Visibility section, we will see three different contexts to restrict visibility based on Content types, Pages, and Roles.

Content types restriction

Content types' visibility allows us to determine whether a block is displayed based on the content type of the node or page that the block is placed on. For example, if we have a block listing of recent articles that we only want to display in the sidebar on an Article Detail node, we could specify Article for the Content types restriction. This restriction would ensure that the same block did not accidentally show on a Basic page node.

Page restriction

Page restriction allows us to whitelist or blacklist blocks of content based on the path to a specific page or set of pages. The path to the page needs to be entered one line at a time and can utilize a wildcard "*" character to specify all children pages. Once we have entered the path, we can choose to negate the condition by either selecting Show for the listed pages or Hide for the listed pages.

Page restriction visibility is probably the most common visibility setting used for blocks. Especially with Drupal 8 introducing the ability to reuse blocks, being able to control what page a block displays on is important to make sure that a block is not duplicated.

Role restriction

The last way to restrict block content is by role. A role is defined by the site administrator and generally consists of an administrator, editor, contributor, an authenticated user, and an anonymous user. Visibility to block content can be restricted by selecting the specific role, as shown in the following image:

Role-specific visibility can be useful to display admin-only content or membership content to authenticated users without the anonymous user seeing it.

So far, we have worked with system-generated blocks. However, with the introduction of fieldable blocks in Drupal 8, we now have the ability to create custom blocks. Custom blocks are quite powerful and will be used to display content in ways not possible previously without a contributed module.

We can create a custom block by navigating back to the Block layout admin located at /admin/structure/block and following these steps:

We are now presented with the Add custom block screen that will allow us to create a default custom block that includes a Block description and a Body field, as shown in the following image:

We can continue filling out our custom block by entering the following values:

Click on the Save button to proceed to the Configure block screen as follows:

We can complete the creation of our custom block by leaving the defaults and clicking on the Save block button.

We have now created our first custom block, and if we scroll to the bottom of the Block layout admin, we will see our block displayed in the Disabled section, as shown in the following image:

At this point, we can place our custom block within any region by using another method of placing blocks, the Region dropdown. The Region dropdown is visible within each region and allows a block to quickly move another region by selecting the specified region from the dropdown.

Let's move our custom block into the Sidebar second region by following these steps:

If we navigate to the homepage, we will see our new custom block displayed in the right sidebar directly under our other block.