How Do Magento Blocks and Layouts Work In 2025?

Photo of Aliaksei Hryharenka
Aliaksei Hryharenka
Senior Backend Developer at BelVG
Jul 26, 2018 13199 Updated: April 30, 2025
How Do Magento Blocks and Layouts Work In 2025?

In Magento 2, the frontend is built on a structure of layouts, containers, and blocks. Layouts define the overall page structure, containers group blocks within the structure, and blocks generate the actual HTML output. This system provides flexibility and modularity, allowing developers to build and modify pages without directly changing the templates.

Convenient division of the frontend 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.

Page structure

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

How page structures are defined

Folder structure

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:

Andrey_Dubina
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.

magento_ico_1.9_layered_navigation (1)

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.

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

FAQs for Magento Blocks and Layouts

What is a block in Magento 2?

A Magento block is a PHP class that connects backend logic with frontend templates. It prepares data and passes it to PHTML files to display content on the page.

How do I create a custom block in Magento 2?

To create a Magento custom block, first create a PHP class that extends \Magento\Framework\View\Element\Template. Then, define the block in a layout XML file and link it to a custom PHTML template. In the template, you can use methods from the block class to display dynamic content. This setup lets you control your custom feature's logic and frontend output.

How can I add a block to a layout XML in Magento 2?

You can add a block using the tag in a layout XML file, such as default.xml. Specify the block's PHP class, a unique name, and the path to its PHTML template. Wrap it inside a to control where it appears on the page. For example, placing it inside content will render it in the main content area.

Post a new comment