Creating custom blocks, layouts, and templates in Magento 2 is essential for customizing your store's frontend and adding unique functionality. In this blog, brought to you by Mavenbird, we will guide you through the step-by-step process of creating and integrating blocks, layouts, and templates in Magento 2.

What are Blocks, Layouts, and Templates in Magento 2?

Before diving into implementation, it's important to understand these key concepts:

  • Blocks: PHP classes that act as a bridge between the layout and template files. They handle logic and provide data to templates.
  • Layouts: XML files that define the structure of the page. Layouts determine which blocks and templates will appear on a specific page.
  • Templates: PHTML files that define the HTML structure and presentation of your block’s content on the frontend.

Step-by-Step Guide to Create Magento 2 Block, Layout, and Template

  • Create a Block

    Next, create a block class in the Block folder:

    app/code/Mavenbird/CustomBlock/Block
│
├── CustomBlock.php

    File: CustomBlock.php

    <?php
namespace Mavenbird\CustomBlock\Block;

use Magento\Framework\View\Element\Template;

class CustomBlock extends Template
{
    public function getCustomMessage()
    {
        return __('Welcome to Mavenbird Custom Block!');
    }
}

  • Create a Layout XML File

    Define where the block will appear using layout XML. Add the following file:

    app/code/Mavenbird/CustomBlock/view/frontend/layout
│
├── default.xml

    File: default.xml

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Mavenbird\CustomBlock\Block\CustomBlock" name="mavenbird.custom.block" template="Mavenbird_CustomBlock::customblock.phtml"/>
        </referenceContainer>
    </body>
</page>

  • Create a Template File

    Now, create a template file to display your block:

    app/code/Mavenbird/CustomBlock/view/frontend/templates
│
├── customblock.phtml

    File: customblock.phtml

    <div class="custom-block">
    <h2><?= $block->getCustomMessage(); ?></h2>
    <p>This is a custom block created by Mavenbird.</p>
</div>

  • Enable and Verify

    Run the following commands to enable your module and clear the cache:

    • Enable the module: php bin/magento module:enable Mavenbird_CustomBlock
    • Run setup upgrade: php bin/magento setup:upgrade
    • Clear the cache: php bin/magento cache:flush

    Visit your Magento frontend, and you should see the custom block displayed on the page.

Conclusion

By following these steps, you can easily create and customize blocks, layouts, and templates in Magento 2 to enhance your store’s frontend functionality and design. This flexibility is one of Magento’s strongest features, allowing developers to tailor stores to specific business needs. For any further assistance, feel free to contact Mavenbird.