it-swarm.com.de

Hinzufügen von CSS-Stilen zu einem Block

[~ # ~] aktualisiert [~ # ~] Andere Dateien hinzugefügt, nur für den Fall, dass der Fehler woanders liegt

Ich habe gerade ein benutzerdefiniertes Modul für Drupal 8) erstellt, das einen Block definiert. Ich möchte dem Inhalt des Blocks einige CSS-Stile hinzufügen.

Mein letzter Versuch, dies zu erreichen, bestand darin, dem Modul, das die Datei block_header.css verknüpft, eine Datei library.yml hinzuzufügen. Im Render-Array habe ich #prefix und #suffix mit den CSS-Klassen hinzugefügt (<div class='foo'>).

Der Code gibt mir keinen Fehler, aber er wendet nicht die erwartete Schriftgröße an.

Könnten Sie mich in die richtige Richtung weisen?

Dies sind die Dateien.

block_header.info.yml

name: Block Header creator
type: module
description: 'Create block with a main header and a text on mouseover'
core: 8.x
package: Fussion Corp - Custom Modules
configure: block_header.settings

block_header.routing.yml

block.content:
  path: '/block'
  defaults:
    _controller: '\Drupal\block_header\Controller\BlockController::content'
    _title: 'Block Header'
  requirements:
    _permission: 'access content'

block_header.libraries.yml

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

BlockController.php

<?php
/**
 * @file
 * Contains \Drupal\block_header\Controller\BlockController.
 */
namespace Drupal\block_header\Controller;
class BlockController {
  public function content() {
    return array(
      '#type' => 'markup',
      '#markup' => t('Sample Text!'),
    );
  }
}

block_header.module

<?php

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

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 {

  /**
   * {@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');
  }
}

Dies ist die Struktur des Verzeichnisses, das das Modul enthält.

(My module structure

Was mache ich falsch?

2
Hawk

Hooks befinden sich in der .module-Datei.

block_header.module

<?php

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

Nur zu Ihrer Information, das hat nicht funktioniert:

    $variables['elements']['#attached']['library'][] = 'block_header/block_header';

block_header.libraries.yml

block_header:
  version: 1.x
  css:
    theme:
      css/block_header.css: {}
2
No Sssweat

Der Anhang sollte sich auf dem Block selbst befinden:

$block = [
        '#attached'=> ['library' => ['block_header/block_header']],
        '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,))
        ),
    ];

Und denken Sie daran, dass YAML empfindlich auf Leerzeichen reagiert. Stellen Sie sicher, dass Ihre Bibliotheksdatei korrekt formatiert ist:

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