How do Blocks and Layouts Work in Magento 2?

Convenient division of front end into separate blocks was implemented back in Magento 1. On the whole, the approach to organizing the display of the front end part was largely taken from the first edition of the platform. How is it implemented in Magento 2?

Here some definitions for a better understanding of the topic of this article:

1. Layout – defines the structure of the page using XML. By default — empty.xml, 1column.xml, 2columns-right.xml, 2columns-left.xml, 3columns.xml;
2. Container – is used to fill the structure of layouts in the form of more general blocks (header, left, main, footer …);
3. Block is a smaller part of the page structure and is used to generate html. These parts are placed directly in containers.

To understand how this works, let’s take a look at the basic Magento_Theme module.

How page structures are defined

First of all, when building a page Magento 2 reads the “page_layout” directory, which contains xml instructions. Let’s consider how “emtpy.xml” works since other layout files use it as a parent one.

As you can see, this layout file consists of parts called “container”. This file contains more general page blocks and does not include the container “header”. In fact, a container is the same block as the rest of the page blocks, but with the container type. A block with the container type will automatically output html from the blocks that refer to it.

Blocks such as 1column.xml, 2columns-right.xml, 2columns-left.xml, 3columns.xml have a similar structure and complement empty.xml. For example, 1column.xml adds a header and a footer:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

Similarly, 2columns-left.xml will add a container to display the left column with additional information: sidebar_main, sidebar_additional.

Considering all the above mentioned, you can identify the main containers that are used in Magento 2:

container name = “root”— is used to add basic containers;

container name = “header.container” — displays the top of the page, the so-called “header”;

container name = “main.content” — displays the main content of the page (body);

container name = “footer-container” — is responsible for displaying content in footer.

Of course, these are not all the containers that are used to build a page, but knowing where these files (empty.xml, 1column.xml, 2columns-right.xml, 2columns-left.xml, 3columns.xml, etc.,) are located, you can always look up the names of the required containers.

The role of blocks and templates in the request flow

Now that the page structure from the basic containers is defined, you can add smaller parts of the page. In Magento 2 they are called blocks. Block is a powerful tool for separating application logic and html output. The output of each template is performed by a separate block. In fact, a block is a php class. You can see this more clearly if you look at the connection of the blocks. For example, consider the layout – default.xml file of the Magento_Customer module and the part that is responsible for adding the authorization link.

When rendering a Magento 2 page, it will call the Magento\Customer\Block\Account\AuthorizationLink class, which in its turn calls the account/link/authorization.phtml template indicated in the layout.

Now, from the account/link/authorization.phtml template, you can access all the open methods of the Magento\Customer\Block\Account\AuthorizationLink class using the $block variable.

Blocks also have various types: for generating lists, forms, tables, etc., but the main purpose of blocks is to separate the business logic and the html output.

When to create a new block or a new template

Whenever you need to change or add the basic functionality of Magento 2, you should use your own blocks or templates, depending on what you need to do. To add new blocks or containers, use the following instructions: referenceBlock, referenceContainer.

The best option is to add new blocks as a separate module, which can be turned on and off without affecting the system as a whole.

Layered Navigation

Take your online store to the next level with BelVG extensions

Download here

Check out BelVG’s quality Magento extensions at our official store.