Better Practice, Dec. 2018

16 \ December 2018 \ http://www.phparch.com

The Flexibility of Drupal 8

The savory.info.yml file includes a libraries attribute with

the savory-main-menu asset library listed.

name: Savory
type: theme
base theme: umami
description: 'A custom child theme of Umami for the demo site.'
version: VERSION
core: 8.x
libraries:

• savory/savory-main-menu

When Drupal renders a page for an end user, it now

includes the JavaScript and CSS in savory-main-menu. As

shown in Figure 11, this inclusion changes the display of the

main menu and highlights the currently active “Recipes” page.

Hooks
A hook is one of the fundamental paradigms of the Drupal
framework. It is a function that allows developers to alter data
while it passes through the Drupal stack. Hooks allow many
different kinds of data to be changed, from altering database
queries to processing variables before rendering in templates.
Drupal core defines many hook functions, as do modules and
themes. More information on hooks can be read at Under-
standing Hooks^6
The limitation of hook functions is that developers can
only implement them as defined by Drupal core, a specific
module, or a specific theme. The available hooks may load
data at a non-ideal time, either too early or late in a process.
The desired data may be wrapped in larger objects, making
manipulation of the specific piece difficult. In the worst case,
a hook may not be available for altering the needed data at
the needed time.

6 Understanding Hooks:
https://phpa.me/drupal-understanding-hooks

Implementing hooks requires a back-end developer who

knows PHP. Also, intermediate knowledge of Drupal is

needed to find the available hooks and invoke an instance of

them.

Locating Hooks

Developers can find hooks defined by modules by review-

ing the module code. A Drupal module that defines custom

hooks should contain a *.api.php file. This file lists each

defined hook with an example implementation.

A hook definition from the Drupal core field module

located in field.api.php (see Listing 5)

Twig debugging can also be helpful for finding hooks

related to rendered data. The debugging HTML markup lists

theme hooks for altering data used in the template.

An example of the Twig debug HTML comment, listing the

hook suggestion.

<!-- THEME DEBUG -->

<!-- THEME HOOK: 'menu__main' -->

<!-- FILE NAME SUGGESTIONS:

x menu--main.html.twig

x menu--main.html.twig

* menu.html.twig

-->

Implementing a Hook

Developers can implement hooks in two different ways.

The first way is to use a custom module and place the hook

Listing 4

1. /*


2. 
   
   
   
   • Defines custom Drupal behavior to add a new CSS class
   
   
   
   


3. 
   
   
   
   • to the current active menu item.
   
   
   
   


4. 
   
   
   
   • 
     
   
   
   
   


5. 
   
   
   
   • file: themes/custom/savory/js/menu-highlight.js
   
   
   
   


6. */


7. (function ($, Drupal) {


8. // Create a behavior to trigger when the DOM loads/changes.


9. Drupal.behaviors.savoryhighlight = {


10. attach: function attach(context) {


11. // Find active item in the main menu and then its first


12. // link element. Then add the class 'highlight'.


13. $(".menu-main__item--active-trail")


14. .find('a:first')


15. .addClass('highlight');


16. }


17. };


18. })(jQuery, Drupal);

Figure 11

Listing 5

1. /**


2. 
   
   
   
   • Perform alterations on Field API widget types.
   
   
   
   


3. 
   
   
   
   • 
     
   
   
   
   


4. 
   
   
   
   • @param array $info
   
   
   
   


5. 
   
   
   
   • An array of information on existing widget types, as
   
   
   
   


6. 
   
   
   
   • collected by the annotation discovery mechanism.
   
   
   
   


7. */


8. function hook_field_widget_info_alter(array &$info) {


9. // Let a new field type re-use an existing widget.


10. $info['options_select']['field_types'][] = 'my_field_type';


11. }