Layout Overview in Magento 2
By: Aryan Srivastava
Tags: Tutorial, Frontend Development, Layout, Magento 2

Welcome back to Magento 2 Tutorial series. In the previous article, we have discussed the basic Theme Concept in Magento 2. Today’s topic is the Layout overview in Magento.

In Magento, the basic concept of page building is Layout, Container and Block. Before creating a page structure we should know the layout, container and block.

Let’s Continue…

What is layouts?

Layouts are responsible for structure of any web page using an XML file that identifies all the containers and blocks composing the page.

Let me explain it in other simple way. In image , there is a page with just some lines which are dividing it into different sections, that section is describing the structure of a web page.

By default, Magento provides 5 page layout for frontend i.e, empty, 1column, 2columns-left, 2columns-right, and 3columns.

And 3 page layout for backend/admin i.e, admin-empty, admin-1column, and admin-2columns-left.

What is Container?

Container is basically a wrapper. It contains or group of <block /> and <container />.

Let me explain it, in above image there are different section like header, footer, left and main. Basically these sections are containers, there can be many of the items in each section.

For example,

Header(container) can have logo, navigation link, minicart, etc.

Attribute for container :

name : This can be used to address the container in layout . The name must be unique per generated page. For example, <container name=“custom.container” /> htmlTag : This specify the HTML tag to wrap the output. It can be aside, dd, div, dl, fieldset, main, nav, header, footer, ol, p, section, table, tfoot, ul. For example, <container name=“custom.container” htmlTag=“div” />. htmlClass : This specify the class(es) to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” /> htmlId : This specify the id to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” htmlId=“custom-container” />

Sample of container in layout:

<container name=" custom.container " htmlTag="div" htmlClass=" custom-container " htmlId=" custom-container " >

your code goes here...

</container>

What is block?

Blocks are a foundational building unit for layout in Magento. Blocks can have children and grandchildren (and so on). Information can be passed from layout XML into the block via the <arguments/>.

In other way, see in above image there are many blocks under containers which are highlighted with dark color.

For example,

logo, header links, category filter, compare list, etc are block which is wrapped into respective container i.e, header, footer, main, etc .

Attribute for block :

name : This can be used to address the block in layout. The name must be unique per generated page. For example, <block name=“custom.block” /> class : Name of a class that implements rendering of a particular block. An object of this class is responsible for actual rendering of block output. For example, <block class=“Vendor\Module\Block\Class” /> template : This specify the template path for particular block. Notation for specifying path Tutorial_Simple::template.phtml. Here, Tutorial is vendor name , Simple is module name and template.phtml is name of template file. For example, <block template=“Vendor_Module::tempate.phtml” /> cacheable : This specify the cache property for that particular block. By default it is true, if false the entire page will not be cached with Full Page Cache. For example, <block cacheable=“false” /> ifconfig : Makes the block’s visibility dependent on a system configuration field. For example, <block ifconfig=“contact/contact/enabled” />

Sample of block in layout:

<block class=“Vendor\Module\Block\Class” name=" custom.block " cacheable=“false” ifconfig=“contact/contact/enabled” template=" Vendor_Module::tempate.phtml " />

Common Attribute used in container and block :

after/before : This is use toplaces the block before or after another element, as identified by its name. remove : This is used to remove the element from rendering to frontend. By default, it is false. move : This is used to move element in layout.

Sample of layout file :

Let’s create a new layout file with name new_layout_index.xml.

In above file name,

new is front name of a module

layout is name of controller

index is name of controller class.

Actually this is a part of Module development. We will learn about it in detail.

Under new_layout_index.xml lets create a structure of web page:

Output of above layout on browser :

<div class="new-container" id="custom-container">

Content of block goes here...

</div>

Additional points which are used in layout :

referenceContainer : It is use to reference any existing container throughout the layout file. We can use existing container in our layout by its name within <referenceContainer />.

For example, if we need to add any content in main section of page

2. referenceBlock : It is use to reference any existing block throughout the layout file. We can use existing block in our layout by its name within <referenceBlock />.

For example, if we want to remove product sku from product detail page