8 – Twig and CSS for custom block do not work

I'm working on a custom module that has a block. This block has a form in configuration in which the user enters the relative data; so far, it saves data and displays it, but without a template (twig). I'm trying to display it through a twig but that's not possible.

I read a lot of documentation but I did not manage to make it work. Not really sure what the problem is or what I miss

That's the structure of my module

module
------Customs
------------ onyx_experiencia
---------------------------- onyx_experiencia.info.yml
---------------------------- onyx_experiencia.libraries.yml
---------------------------- onyx_experiencia.module
---------------------------- css
------------------------------- onyx_serv_css.css
---------------------------- models
------------------------------------- onyx-experiencia.html.twig
---------------------------- src
-------------------------------Connect
-------------------------------------Block
------------------------------------------ onyx_experiencia.php

onyx_experiencia.info.yml

Name: Onyx Servicios
Description: Block of Servicios de OnyxGroup
Core: 8.x
package: customized
dependencies:
- block
type: module

onyx_experiencia.libraries.yml

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

onyx_experiencia.module

    [
& # 39; variables & # 39; =>[
& # 39; CardTitle & # 39; => NULL,
],
],
];
}

onyx_experiencia.php

getConfiguration ();
$ build = array ();

if (! empty ($ config['card_title'])) {
$ name = $ config['card_title'];
}
other {
$ name = $ this-> t (Onyx Group Map & # 39;);
}

if (! empty ($ config['card_text'])) {
$ cardText = $ config['card_text'];
}
other {
$ cardText = $ this-> t (& # 39; One Onyx Group Service & # 39;);
}

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

to build['CardTitle'] = table (
& # 39; # prefix & # 39; => & # 39;
& # 39; # markup & # 39; => $ name,
& # 39; # suffix & # 39; => & # 39;
)

to build['CardText'] = table (
& # 39; # prefix & # 39; => & # 39;
& # 39; # markup & # 39; => $ cardText,
& # 39; # suffix & # 39; => & # 39;
)

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

$ cardLink = $ this-> configuration['card_link'];
to build['CardLink'] = table (
& # 39; # markup & # 39; => $ cardLink,
)

return $ build;

}

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

$ config = $ this-> getConfiguration ();

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

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

$ form['card_image'] =[
& # 39; # type & # 39; => & # 39; managed_file & # 39;
& # 39; # title & # 39; => t ('Background of the map image'),
& # 39; # upload_validators & # 39; => array (
& # 39; file_validate_extensions & # 39; => array (& gt; gif png jpg jpeg & # 39;),
& # 39; file_validate_size & # 39; => table (25600000),
)
& # 39; # theme & # 39; => & # 39; image_widget & # 39;
& # 39; # preview_imgage_style & # 39; => & # 39 ;,
& # 39; # upload_location & # 39; => & # 39; private: // card_service_img & # 39;
& # 39; # progress_message & # 39; => For a moment while we save your file ...
& # 39; # default_value & # 39; => isset ($ this-> configuration['card_image'])? $ this-> configuration['card_image'] : & # 39;
& # 39; # required & # 39; => TRUE,
];

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

];

return $ form;
}

/ **
* Custom submission 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 (& # 39; card_image & # 39;);
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 (& # 39; card_title & # 39;);
$ this-> configuration['card_text'] = $ state_format-> getValue (& # 39; card_text & # 39;);
$ this-> configuration['card_image'] = $ state_format-> getValue (& # 39; card_view & # 39;);
$ this-> configuration['card_link'] = $ state_format-> getValue (& # 39; map_link & # 39;);
}

}

onyx_experiencia.html.twig

{#
/ **
* @file
* Profile of the onyx_experiencia block.
* /
#}
{{attach_library (& # 39; onyx_experiencia / onyx_serv_css & # 39;)}}

{{}} Form.CardTitle