Some extra's for block components.

Better classes

The classes on block has been changed to:

{%
  set classes = [
    'block',
    'block--' ~ configuration.provider|clean_class,
    'block--' ~ plugin_id|clean_class,
    'block--' ~ elements['#id']|clean_class,
  ]
%}

Which gives you the following classes:

.block {}
.block--my-custom-module {}
.block--my-block-id-block {}
.block--myblockid {} 

Extra functions

Create the possibility to have plugin-specific preprocess functions.

So inside block--page-title-block.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_block__page_title_block(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the page-title block. 
}

(Docs: Extending hooks yourself)

Some extra's for form components.

Better classes

The classes on a form has been changed to:

{%
  set classes = [
    'form',
    'form--' ~ element['#form_id']|clean_class
  ]
%}

Which gives you the following classes:

.form {}
.forn--user-login-form {}

Extra template suggestions

Added a more specific template suggestion. One based upon the ID of the form.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form' -->
<!-- FILE NAME SUGGESTIONS:
   x form--user-login-form.html.twig
   * form.html.twig
-->

In above example:

• user-login-form is the ID of the form

Extra functions

Create the possibility to have form-specific preprocess functions.

So inside form--user-login-form.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_form__user_login_form(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the user-login-form. 
}

(Docs: Extending hooks yourself)

Some basic styling for local menu inks with a toggle for smaller screens.

Some extra's for node components.

Better classes

The classes on node has been changed to:

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.bundle|clean_class,
    node.isPromoted() ? node.bundle|clean_class ~ '--promoted',
    node.isSticky() ? node.bundle|clean_class ~ '--sticky',
    not node.isPublished() ? node.bundle|clean_class ~ '--unpublished',
    view_mode ? node.bundle|clean_class ~ '--' ~ view_mode|clean_class,
  ]
%}

Which gives you the following classes:

.node {}
.node--type--faq {}
.faq {}
.faq--promoted {} 
.faq--sticky {} 
.faq--unpublished {} 
.faq--full {} 

Extra functions

Create the possibility to have content-type-specific preprocess functions.

So inside node--faq.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_node__faq(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for FAQ nodes. 
}

(Docs: Extending hooks yourself)

A flat approach to theming Drupal's status messages by the use of emoji SVG's.