Drupal-8, Adding CSS to a custom Module - css

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

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 3

One way to do it is to:
Add libraries to block_header.info.yml file in your module:
libraries:
- block_header/block_header
Create block_header.libraries.yml file and add:
block_header:
version: 1.x
css:
module:
css/block_header.css: {}
Place css file you want to attach to css/block_header.css
Include css to custom form statement
Place the following line in form building part of the module:$form['#attached']['library'][] = 'block_header/block_header';

Answer 4

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

Answer 5

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