module
------custom
------------onyx_experiencia
----------------------------onyx_experiencia.info.yml
----------------------------onyx_experiencia.libraries.yml
----------------------------onyx_experiencia.module
----------------------------css
-------------------------------onyx_serv_css.css
----------------------------templates
-------------------------------------onyx-experiencia.html.twig
----------------------------src
-------------------------------Plugin
-------------------------------------Block
------------------------------------------onyx_experiencia.php

name: Onyx Servicios
description: Block de Servicios de OnyxGroup
core: 8.x
package: Custom
dependencies:
- block
type: module

onyx-experiencia-style:
  version: 1.x
  css:
    theme:
      css/onyx_serv_css.css: {}

<?php
/**
 * Implements hook_theme().
 */
function onyx_experiencia_theme() {
  return [
    'onyx-experiencia' => [
      'variables' => [
        'CardTitle' => NULL,
      ],
    ],
  ];
}

<?php

namespace Drupalonyx_experienciaPluginBlock;



use DrupalCoreBlockBlockBase;
use DrupalCoreBlockBlockPluginInterface;
use DrupalCoreFormFormStateInterface;
use DrupalfileEntityFile;
use DruapimageEntityImageStyle;



/**
 * Provides a 'Onyx' Block.
 *
 * @Block(
 *   id = "onyx_experiencia",
 *   admin_label = @Translation("Servicios OnyxGroup"),
 *   category = @Translation("Servicios OnyxGroup"),
 * )
 */
class onyx_experiencia extends BlockBase implements BlockPluginInterface {

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

    if (!empty($config['card_title'])) {
      $name = $config['card_title'];
    }
    else {
      $name = $this->t('Onyx Group Card');
    }

    if (!empty($config['card_text'])) {
      $cardText = $config['card_text'];
    }
    else {
      $cardText = $this->t('A service of Onyx Group');
    }

    //$build[]['#attached']['library'][] = 'onyx_experiencia/onyx_serv_css';
    $build = array(
    '#theme' => 'onyx-experiencia',
    );

    $build['CardTitle'] = array(
            '#prefix' => '',
            '#markup' => $name,
            '#suffix' => '',
        );

    $build['CardText'] = array(
            '#prefix' => '',
            '#markup' => $cardText,
            '#suffix' => '',
        );

    $cardImage = $this->configuration['card_image'];
    if (!empty($cardImage[0])) {
        if ($file = File::load($cardImage[0])) {
            $build['CardImg'] = array(
                '#theme' => 'image_style',
                '#style_name' => 'medium',
                '#uri' => $file->getFileUri(),
            );
        }
    }

    $cardLink = $this->configuration['card_link'];
    $build['CardLink'] = array(
        '#markup' => $cardLink,
    );

    return $build;

  }

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

    $config = $this->getConfiguration();

    $form['card_title'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Card Title'),
      '#description' => $this->t('Type title of the service card.'),
      '#default_value' => isset($config['card_title']) ? $config['card_title'] : '',
    ];

    $form['card_text'] = [
      '#type' => 'textarea',
      '#title' => $this->t('Card Text'),
      '#format' => 'full_html',
      '#description' => $this->t('Type the list of the services.'),
      '#default_value' => isset($config['card_text']) ? $config['card_text'] : '',
    ];

    $form['card_image'] = [
        '#type' => 'managed_file',
        '#title' => t('Card image background'),
        '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(25600000),
        ),
        '#theme' => 'image_widget',
        '#preview_imgage_style' => 'medium',
        '#upload_location' => 'private://card_service_img',
        '#progress_message' => 'One moment while we save your file...',
        '#default_value' => isset($this->configuration['card_image']) ? $this->configuration['card_image'] : '',
        '#required' => TRUE,
    ];

    $form['card_link'] = [
        '#title' => t('Type card link. Example: /erp_cloud'),
        '#type' => 'url',
        '#default_value' => isset($this->configuration['card_link']) ? $this->configuration['card_link'] : '',

    ];

    return $form;
  }

 /**
   * Custom submit actions
   */
  public function custom_submit_form($form, FormStateInterface $form_state) {
    $values = $form_state->getValues();
    //Perform the required actions
  }

 /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {

      $cardImage = $form_state->getValue('card_image');
      if ($cardImage != $this->configuration['card_image']) {
          if (!empty($cardImage[0])) {
              $file = File::load($cardImage[0]);
              $file->setPermanent();
              $file->save;
          }
      }

    $this->configuration['card_title'] = $form_state->getValue('card_title');
    $this->configuration['card_text'] = $form_state->getValue('card_text');
    $this->configuration['card_image'] = $form_state->getValue('card_image');
    $this->configuration['card_link'] = $form_state->getValue('card_link');
  }

}

{#
/**
 * @file
 * Profile for onyx_experiencia block.
 */
#}
{{ attach_library('onyx_experiencia/onyx_serv_css')}}

<div class="cardTitle">
 {{form.CardTitle}}
</div>