A Comprehensive View into Block Layout in Magento 2

Posted by

In Magento 2, the block layout is used to display content in a section-based manner. In the following example about standard block layout, the block names that can be used to refer to a block in the layout are black, while the block types (also known as block class paths) are blue. In this article, we will go through each of them and discover their specifications in order to use them wisely.  

Standard Block Layout

1. page/html

The block name is “root”. There are a few root blocks in Magento 2 and this is one of them. Each page can contain only one block of “root” block. This type of block can be created ourselves as long as it is named “root”.

2. page/html_head

The block name is “head”. Like “root” block, there is also only one block of this type in each page. This block is also considered as a child of the root block and must remain in the layout.

3. page/html_notices

The block name is “global_notices”. This block type is generally similar to “Head” block. The only difference between them is that this type can be removed from the layout. If admin do so, there would be no global notice on the page.

4. page/html_header

The name of this block is “header”. This block type is also resemble the “head” block. It is used to express the header which is illustrated on the the upper part of the page. There are some other standard blocks in this section, therefore it cannot be deleted.

5. page/html_wrapper

Despite the fact that this block type is mentioned in the standard block layout, it is unused and its only purpose is to prevent layout from backward conflict that might occur.

6. page/html_breadcrumbs

This block name is “breadcrumbs”. Each page can contain only one block of breadcrumbs. This is a part of the header block and is used to navigate the user’s location in the page.

7. page/html_footer

The name of this block  is “footer”. Generally, this one and header are the same, the only distinction between them is the location: while header is located at the top of the page, footer stays at the bottom.

8. page/template_links

There are two different blocks in this section: “top.links” and “footer_links”. As their name, the “top.links” refers to the top navigation menu in header block, while the “footer_links” is to illustrate the bottom navigation menu in the footer block. According to the examples, users are able to operate the template links.

9. page/switch

This block type contains two blocks: “store_language” and “store_switcher”. The “store_language” block is a part of header block and is used to express the top language switcher. The “store_switcher” is a part of footer block and is used to express the bottom store switcher.

10. core/messages

This block type separate the message into 2 different blocks as their name: global messages will be shown in “global_messages” block and other messages will be found in the “messages” box. These blocks are compulsory for customers to read the messages.

11. core/text_list

This block type acts as a placeholder to illustrate lower-level blocks in page, therefore it is commonly handled in Magento 2.

12. core/profiler

Each page can contain only one block of this type. Its only recommended function is to store internal Magento profiler.

Leave a Reply

Your email address will not be published. Required fields are marked *