Drupal-8, Adding CSS to a custom Module

Question

Updated I fixed the preprocess_html hook as adviced, and added a pic of the structure of the module, maybe is something wrong there??

I just created a custom module for drupal-8 that ad a customizable block. Very simple, is currently working but now i want to add some look to the content of the block.

So my last attempt to achieve this was adding a libraries.yml to the module linking the block_header.css file and at the render array i added #prefix and #suffix with the css tags (div class='foo').

The code doesn't give me any error but it's not applying the font-weight of the css file.

Could you point me to the right direction?

This are the files:

block_header.libraries.yml

block_header:
version: 1.x
css:
    theme:
        css/block_header.css: {}

BlockHeader.php

<?php

namespace Drupal\block_header\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Header' Block.
 *
 * @Block(
 *   id = "block_header",
 *   admin_label = @Translation("Block Header"),
 *   category = @Translation("Block Header"),
 * )
 */
class BlockHeader extends BlockBase implements BlockPluginInterface {

    function block_header_preprocess_html(&$variables) {
        $variables['page']['#attached']['library'][] = 'Fussion_Modules/block_header/block_header';
    }


  /**
   * {@inheritdoc}
   */
  public function build() {
    $config = $this->getConfiguration();

    if (!empty($config['block_header_title']) && ($config['block_header_text'])) {
      $title = $config['block_header_title'];
      $descp = $config['block_header_text'];
    }
    else {
      $title = $this->t('<div>Atención! Titulo no configurado!</div> </p>');
      $descp = $this->t('<div>Atención! Descripción no configurada!</div>');
    }
    $block = array
        (
            'title' => array
            (
             '#prefix' => '<div class="title"><p>',
             '#suffix' => '</p></div>',
             '#markup' => t('@title', array('@title' => $title,)),
            ),
            'description' => array
            (
             '#prefix' => '<div class="descp"><p>',
             '#suffix' => '</p></div>',
             '#markup' => t('@descp', array('@descp' => $descp,))
            ),
        );
    return $block;  

  }


/**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['block_header_title'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Titulo del Bloque'),
      '#description' => $this->t('Titulo del Bloque'),
      '#default_value' => isset($config['block_header_title']) ? $config['block_header_title'] : '',
    );

    $form['block_header_text'] = array(
      '#type' => 'textarea',
      '#title' => $this->t('Descripción'),
      '#description' => $this->t('Descripción del bloque'),
      '#default_value' => isset($config['block_header_text']) ? $config['block_header_text'] : '',
    );

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['block_header_title'] = $values['block_header_title'];
    $this->configuration['block_header_text'] = $values['block_header_text'];
    $this->configuration['block_header_title'] = $form_state->getValue('block_header_title');
    $this->configuration['block_header_text'] = $form_state->getValue('block_header_text');
  }
}

block_header.css

.title{
    font-weight: 500;
    color:darkblue;
}

This is my module structure

Any ideas what i'm doing wrong?

Answer 1

Try updating your $block array that is being returned and remove the preprocess function:

    $block = array
(
    'title' => array
    (
     '#prefix' => '<div class="title"><p>',
     '#suffix' => '</p></div>',
     '#markup' => t('@title', array('@title' => $title,)),
    ),
    'description' => array
    (
     '#prefix' => '<div class="descp"><p>',
     '#suffix' => '</p></div>',
     '#markup' => t('@descp', array('@descp' => $descp,))
    ),
    '#attached' => array
    (
      'library' => array
      (
        'block_header/block_header'
      )
    )
);

Answer 2

Rewrite following function in module file

function block_header_preprocess_html(&$variables)       { $variables['page']['#attached']['library'][] =     'block_header/block_header'; }

Answer 3

So, i finally found the problem. The HOOK i was trying to implement to attach the *.css file it's need to be at the *.module file, wich i didn't had.

So i created the block_header.module with this HOOK:

<?php

/**
 * Implements hook_preprocess_HOOK()
 */
function block_header_preprocess_block(&$variables) {
  if ($variables['plugin_id'] == 'block_header') {
    $variables['#attached']['library'][] = 'block_header/block_header';
  }
}

After that i just deleted the HOOK i was using, so the final versión of the BlockHeader.php is:

<?php

namespace Drupal\block_header\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Header' Block.
 *
 * @Block(
 *   id = "block_header",
 *   admin_label = @Translation("Block Header"),
 *   category = @Translation("Block Header"),
 * )
 */

class BlockHeader extends BlockBase implements BlockPluginInterface {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $config = $this->getConfiguration();

    if (!empty($config['block_header_title']) && ($config['block_header_text'])) {
      $title = $config['block_header_title'];
      $descp = $config['block_header_text'];
    }
    else {
      $title = $this->t('<div>Atención! Titulo no configurado!</div> </p>');
      $descp = $this->t('<div>Atención! Descripción no configurada!</div>');
    }
    $block = array
        (
            'title' => array
            (
             '#prefix' => '<div class="title"><p>', /* HERE I ADD THE CSS TAGS */
             '#suffix' => '</p></div>',
             '#markup' => t('@title', array('@title' => $title,)),
            ),
            'description' => array
            (
             '#prefix' => '<div class="descp"><p>', /* HERE I ADD THE CSS TAGS */
             '#suffix' => '</p></div>',
             '#markup' => t('@descp', array('@descp' => $descp,))
            ),
        );
    return $block;  

  }


   /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['block_header_title'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Titulo del Bloque'),
      '#description' => $this->t('Titulo del Bloque'),
      '#default_value' => isset($config['block_header_title']) ? $config['block_header_title'] : '',
    );

    $form['block_header_text'] = array(
      '#type' => 'textarea',
      '#title' => $this->t('Descripción'),
      '#description' => $this->t('Descripción del bloque'),
      '#default_value' => isset($config['block_header_text']) ? $config['block_header_text'] : '',
    );

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['block_header_title'] = $values['block_header_title'];
    $this->configuration['block_header_text'] = $values['block_header_text'];
    $this->configuration['block_header_title'] = $form_state->getValue('block_header_title');
    $this->configuration['block_header_text'] = $form_state->getValue('block_header_text');
  }
}

And that's it, now i'm getting the *.css file i created applied to the block created by the module.

Special thanks to @No Sssweat

Answer 4

An alternative following the advice on this page at drupal.org is to attach the css file in the build array of the block. So in block_header.libraries.yml you could write

block_header.tree:
  css:
    theme:
      css/block_header.css: {}

And in BlockHeader.php

public function build() {
  [...]
  block = array (
    '#attached' => array(
      'library' => array(
        'block_header/block_header.tree',
      ),
    ),
    [...]
  ),
}

Answer 5

One way to do it is to:

1. Add libraries to block_header.info.yml file in your module:

   libraries:
   
     - block_header/block_header
   

2. Create block_header.libraries.yml file and add:

   block_header:
   version: 1.x
   css:
     module:
       css/block_header.css: {}
   

3. Place css file you want to attach to css/block_header.css

4. Include css to custom form statement

5. Place the following line in form building part of the module:$form['#attached']['library'][] = 'block_header/block_header';