Magento 2 Views & Layouts

Magento 2 follows a flexible MVC (Model-View-Controller) architecture, where Views define how content is displayed to the user. Views include Layout XML files, Blocks, and PHTML Templates.

—

📁 Magento 2 View Folder Structure

Each module or theme has its own view directory containing:

  • view/frontend – For frontend view files
  • view/adminhtml – For admin panel view files

—

🧩 Magento 2 Layout XML

Layout XML files define the structure of the page: what blocks should load, where they go, and what templates to use.

—

🧱 Block Class

The block class connects business logic to the template.

// Block/Hello.php
namespace Bcn\Blog\Block;

use Magento\Framework\View\Element\Template;

class Hello extends Template
{
    public function getMessage()
    {
        return "Hello from Block!";
    }
}

—

🎨 PHTML Template

The PHTML file is the actual HTML output shown to the user.




  getMessage(); ?>

—

📌 How Magento Renders Views

  1. Controller matches the route
  2. Layout XML defines what blocks/templates load
  3. Block class passes logic to template
  4. PHTML renders HTML using block data

—

🧠 Summary

  • Layout XML: Defines structure & block placements
  • Blocks: Acts as logic provider for templates
  • Templates (PHTML): Contains actual HTML output

This flow is powerful and modular, allowing developers to easily control what shows where and how it behaves in Magento 2.