{"id":16359,"date":"2018-07-26T16:25:39","date_gmt":"2018-07-26T14:25:39","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=16359"},"modified":"2026-07-08T13:21:51","modified_gmt":"2026-07-08T11:21:51","slug":"working-with-block-templates-root-templates-empty-xml-and-page_layout-in-m2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/working-with-block-templates-root-templates-empty-xml-and-page_layout-in-m2.html","title":{"rendered":"How Do Magento Blocks and Layouts Work In 2026?"},"content":{"rendered":"\n

In Magento 2, the frontend is built around layouts, containers, blocks, and templates. Layouts define the page structure through XML, containers organize structural areas of the page, blocks provide PHP logic and data, and templates (.phtml files) generate the HTML output. This system allows developers to modify pages through modules and themes without editing Magento core files.<\/p>\n

<\/p>\n

Magento 2 continued the idea of separating frontend elements into reusable components, but introduced a different layout system based on XML merging, dependency injection, and module-based customization. How is it implemented in Magento 2?<\/p>\n

Here some definitions for a better understanding of the topic of this article:<\/p>\n

    \n
  1. Layout – defines the structure of the page using XML layout files. Magento provides default page layouts such as empty.xml, 1column.xml, 2columns-right.xml, 2columns-left.xml, and 3columns.xml, but themes and modules can introduce custom layouts.<\/li>\n
  2. Container – defines structural areas of a page and organizes child blocks and containers. Containers can add HTML wrappers and control the position of their child elements.<\/li>\n
  3. Block is a PHP class that provides data and logic to a template. The related template file (.phtml) is responsible for generating HTML output.<\/li>\n<\/ol>\n

    \"Page<\/a><\/p>\n

    To understand how this works, let’s take a look at the basic Magento_Theme module.<\/p>\n

    How page structures are defined<\/span><\/strong><\/h2>\n

    \"Folder<\/a><\/p>\n

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

    <layout xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_layout.xsd\">\r\n  <container name=\"root\">\r\n      <container name=\"after.body.start\" as=\"after.body.start\" before=\"-\" label=\"Page Top\"\/>\r\n      <container name=\"page.wrapper\" as=\"page_wrapper\" htmlTag=\"div\" htmlClass=\"page-wrapper\">\r\n          <container name=\"global.notices\" as=\"global_notices\" before=\"-\"\/>\r\n          <container name=\"main.content\" htmlTag=\"main\" htmlId=\"maincontent\" htmlClass=\"page-main\">\r\n              <container name=\"columns.top\" label=\"Before Main Columns\"\/>\r\n              <container name=\"columns\" htmlTag=\"div\" htmlClass=\"columns\">\r\n                  <container name=\"main\" label=\"Main Content Container\" htmlTag=\"div\" htmlClass=\"column main\"\/>\r\n              <\/container>\r\n          <\/container>\r\n          <container name=\"page.bottom.container\" as=\"page_bottom_container\" label=\"Before Page Footer Container\" after=\"main.content\" htmlTag=\"div\" htmlClass=\"page-bottom\"\/>\r\n          <container name=\"before.body.end\" as=\"before_body_end\" after=\"-\" label=\"Page Bottom\"\/>\r\n      <\/container>\r\n  <\/container>\r\n<\/layout>\r\n<\/pre>\n
    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”. A container is different from a block. It is a structural element that organizes child blocks and containers. Unlike blocks, containers normally do not have a PHP class or template file. A block with the container<\/em> type will automatically output html from the blocks that refer to it.<\/p>\n
    Blocks such as 1column.xml, 2columns-right.xml, 2columns-left.xml, 3columns.xml<\/em> have a similar structure and complement empty.xml<\/em>. For example, 1column.xml<\/em> adds a header and a footer:<\/p>\n
    <layout xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_layout.xsd\">\r\n  <update handle=\"empty\"\/>\r\n  <referenceContainer name=\"page.wrapper\">\r\n      <container name=\"header.container\" as=\"header_container\" label=\"Page Header Container\" htmlTag=\"header\" htmlClass=\"page-header\" before=\"main.content\"\/>\r\n      <container name=\"page.top\" as=\"page_top\" label=\"After Page Header\" after=\"header.container\"\/>\r\n      <container name=\"footer-container\" as=\"footer\" before=\"before.body.end\" label=\"Page Footer Container\" htmlTag=\"footer\" htmlClass=\"page-footer\"\/>\r\n  <\/referenceContainer>\r\n<\/layout><\/pre>\n
    Similarly, 2columns-left.xml<\/em> will add a container to display the left column with additional information: sidebar_main, sidebar_additional.<\/em><\/p>\n
    Considering all the above mentioned, you can identify the main containers that are used in Magento 2:<\/p>\n
    container name = “root”— is used to add basic containers;<\/p>\n
    container name = “header.container” — displays the top of the page, the so-called “header”;<\/p>\n
    container name = “main.content” — displays the main content of the page (body);<\/p>\n
    container name = “footer-container” — is responsible for displaying content in footer.<\/p>\n
    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.<\/p>\n
    The role of blocks and templates in the request flow<\/span><\/strong><\/h2>\n
    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. Blocks separate PHP logic from HTML markup. Each block is represented by a PHP class and can be connected to a template file. The block prepares data, while the template generates the final HTML output. You can see this more clearly if you look at the connection of the blocks. For example, consider the layout – default.xml<\/em> file of the Magento_Customer<\/em> module and the part that is responsible for adding the authorization link.<\/p>\n
    \/**\r\n*vendor\/magento\/module-customer\/view\/frontend\/layout\/default.xml\r\n*\/\r\n<referenceBlock name=\"top.links\">\r\n……..\r\n  <block class=\"Magento\\Customer\\Block\\Account\\AuthorizationLink\" name=\"authorization-link\"\r\n         template=\"account\/link\/authorization.phtml\"\/>\r\n<\/referenceBlock><\/pre>\n
    When rendering a Magento 2 page, it will call the Magento\\Customer\\Block\\Account\\AuthorizationLink<\/em> class, which in its turn calls the account\/link\/authorization.phtml<\/em> template indicated in the layout.<\/p>\n
    Now, from the account\/link\/authorization.phtml<\/em> template, you can access all the open methods of the Magento\\Customer\\Block\\Account\\AuthorizationLink<\/em> class using the $block<\/em> variable.<\/p>\n
    \/**\r\n*vendor\/magento\/module-customer\/view\/frontend\/templates\/account\/link\/authorization.phtml\r\n*\/\r\n$dataPostParam = '';\r\nif ($block->isLoggedIn()) {\r\n  $dataPostParam = sprintf(\" data-post='%s'\", $block->getPostParams());\r\n}\r\n?>\r\n<li class=\"authorization-link\" data-label=\"<?php echo $block->escapeHtml(__('or')); ?>\">\r\n  <a <?php \/* @escapeNotVerified *\/ echo $block->getLinkAttributes(); ?><?php \/* @escapeNotVerified *\/ echo $dataPostParam; ?>>\r\n      <?php echo $block->escapeHtml($block->getLabel()); ?>\r\n  <\/a>\r\n<\/li><\/pre>\n
    \/**\r\n*vendor\/magento\/module-customer\/Block\/Account\/AuthorizationLink.php\r\n*\/\r\nclass AuthorizationLink extends \\Magento\\Framework\\View\\Element\\Html\\Link\r\n{\r\n…………...\r\n     * Is logged in\r\n   *\r\n   * @return bool\r\n   *\/\r\n……………...\r\n  public function isLoggedIn()\r\n  {\r\n      return $this->httpContext->getValue(Context::CONTEXT_AUTH);\r\n  }\r\n}<\/pre>\n
    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.<\/p>\n
     <\/p>\n
    When to create a new block or a new template<\/span><\/strong><\/h2>\n
    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.<\/p>\n
    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.<\/p>\n
    <\/a>
    \"magento_ico_1.9_layered_navigation
    Layered Navigation<\/h3>
    Take your online store to the next level with BelVG extensions<\/p>Download here<\/span><\/a><\/div><\/div><\/div>\n
    Check out BelVG’s quality Magento extensions at our official store<\/a>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"How does html output work in Magento 2","protected":false},"author":42,"featured_media":30779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[491,389],"tags":[],"class_list":["post-16359","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento-2","category-magento2-development","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t