Lesson2: Containers and blocks in magento2

container block magento2

In Magento, the basic components of page design are layouts, containers, and blocks. A layout represents the structure of a web page (1). Containers represent the placeholders within that web page structure (2). And blocks represent the UI controls or components within the container placeholders (3). These terms are illustrated and defined below.

layouts block containers in magento 2

(1) Layouts provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page. The details of layout XML files are described later in this section.

(2) Containers assign content structure to a page using container tags within a layout XML file. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer.

(3) Blocks render the UI elements on a page using block tags within a layout XML file. Blocks use templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.


1. What are containers?

● For assigning content structure on a given page
● As the name suggests they contain other elements:
+  Blocks as well as other containers
● Their contents can be wrapped in an HTML element

● Examples:
+ Header
+ Left column
+ Main column
+ Footer

Container in magento 2

II. Blocks

1. What are blocks?

● An individual feature or view component on a page
● Their content is generally output in a template (.phtml file) and data passed from a Block class

● Examples:
○ Navigation menu
○ Product list
○ Media gallery
○ Newsletter signup