Blocks and Containers are heart of layout. Whenever we want to customise the page layout we do change in layout files or alter templates. Today we gonna list down all the attributes used in the layout xml.
Common layout instructions
Use the following layout instructions to customise your layout:
- <block>
- <container>
- before and after attributes
- <action>
- <referenceBlock> and <referenceContainer>
- <move>
- <remove>
- <update>
- <argument>
block
Defines a block.
Details: A block is a unit of page output that renders some distinctive content – a piece of information, a user interface element – anything visually tangible for the end-user.
| Attribute | Description | Values | Required? |
|---|---|---|---|
| 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. | class name | no (2.2.1 onwards) |
| name | Name that can be used to address the block to which this attribute is assigned. The name must be unique per generated page. If not specified, an automatic name will be assigned in the format ANONYMOUS_n |
0-9, A-Z, a-z, underscore (_), period (.), dash (-). Should start with a letter. Case-sensitive. | no |
| before | Used to position the block
before an element under the same parent. The element name or alias name is specified in the value. Use dash (-) to position the block before all other elements of its level of nesting. See before and after attributes for details. |
Possible values: element name or dash (-) | no |
| after | Used to position the block after an element under the same parent. The element name or alias name is specified in the value. Use dash (-) to position the block after all other elements of its level of nesting. See before and after attributes for details. | Possible values: element name or dash (-) | no |
| template | A template that represents the functionality of the block to which this attribute is assigned. | template file name | no |
| as | An alias name that serves as identifier in the scope of the parent element. | 0-9, A-Z, a-z, underscore (_), period (.), dash (-). Case-sensitive. | no |
| cacheable | Defines whether a block element is cacheable. This can be used for development purposes and to make needed elements of the page dynamic. | true or false |
no |
container
A structure without content that holds other layout elements such as blocks and containers.
Details: A container renders child elements during view output generation. It can be empty or it can contain an arbitrary set of <container> and <block>elements.
| Attribute | Description | Values | Required? |
|---|---|---|---|
name |
A name that can be used to address the container in which this attribute is assigned. The name must be unique per generated page. | A-Z, a-z, 0-9, underscore (_), period (.), dash (-). Should start with a letter. Case-sensitive. | no |
label |
An arbitrary name to display in the web browser. | any | no |
before |
Used to position the container before an element under the same parent. The element name or alias name is specified in the value. Use dash (-) to position the block before all other elements of its level of nesting. See before and after attributes for details. | Possible values: element name or dash (-). | no |
after |
Used to position the container after an element under the same parent. The element name or alias name is specified in the value. Use dash (-) to position the block after all other elements of its level of nesting. See before and after attributes for details. | Possible values: element name or dash (-). | no |
as |
An alias name that serves as identifier in the scope of the parent element. | 0-9, A-Z, a-z, underscore (_), period (.), dash (-). Case-sensitive. | no |
output |
Defines whether to output the root element. If specified, the element will be added to output list. (If not specified, the parent element is responsible for rendering its children.) | Any value except the obsolete toHtml. Recommended value is 1. |
no |
htmlTag |
Output parameter. If specified, the output is wrapped into specified HTML tag. | Any valid HTML 5 tag. | no |
| htmlId | Output parameter. If specified, the value is added to the wrapper element. If there is no wrapper element, this attribute has no effect. | Any valid HTML 5 id value. |
no |
htmlClass |
Output parameter. If specified, the value is added to the wrapper element. If there is no wrapper element, this attribute has no effect. | Any valid HTML 5 class value. |
no |