Adding a class to block Magento 2

Question

I have the following custom xml inside of my Magento_theme > layout > default.xml

<referenceBlock name="top.links">

            <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link"  after="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">Contact Us</argument>
                    <argument name="path" xsi:type="string" translate="false">contact-us</argument>
                </arguments>
            </block>

            <block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">About Us</argument>
                    <argument name="path" xsi:type="string" translate="false">about-us</argument>
                </arguments>
            </block>

            <referenceBlock name="register-link" remove="true" />
            <referenceBlock name="authorization-link" remove="true" />
            <referenceBlock name="wish-list-link" remove="true" />
            <reeferenceBlock name="my-account-link" remove="false" />

        </referenceBlock>

Im removing blocks and adding custom ones in.

What I'd like to to is add a class to the two custom blocks - aboutus.link and contactus.link - how do i go about doing this? Or can it not be done with xml.

Answer 1

You can add css as described below by the element

name="class"

    <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
        <arguments>
            <argument name="label" xsi:type="string" translate="false">Text</argument>
           <argument name="path" xsi:type="string" translate="false">Text</argument>
            <argument name="class" xsi:type="string">header links</argument>
        </arguments>
    </block>

Answer 2

There are 2 ways to do that:-

1- Add wrapping container to your block, like :-

<container name="div.header.links" htmlTag="div" htmlClass="header_links" after="-">
     <block class="Magento\Framework\View\Element\Html\Links" name="header.links" >

     </block>
</container>

2:- Add referenceContainer tag, like :-

<referenceContainer name="header.links" htmlClass="css_class" htmlTag="div">
<block class="Magento\Cms\Block\Block" name="header.links">
   <arguments>

   </arguments>
</block>

Answer 3

Looking at the Magento\Framework\View\Element\Html\Link\Current code for version 2.2.6, there is no class argument supported (as documented in the previously accepted answer). However class is an accepted attribute. It can be used to set the css_class as follows:

<block class="Magento\Framework\View\Element\Html\Link\Current">
  <arguments>
    <argument name="label" xsi:type="string" translate="true">My Link</argument>
    <argument name="path" xsi:type="string">my_page</argument>
    <argument name="attributes" xsi:type="array">
       <item name="class" xsi:type="string">the-class</item>
    </argument>
   </arguments>
</block>