GSoC'19 Coding Period | Week #10 | Icon API

The Google Summer of Code has reached the end of the week #10 of the coding period with my project "Complete porting of Icons API to Drupal 8" being progressing smoothly with interesting challenges along the way.

In my previous blog post, I had mentioned that I'll be finishing the Icon Field submodule and checking the whole project code to find the potential bugs or future errors.

During this week, I've implemented the Field Formatter and wrote a twig template to render the icon which was defined using the hook_theme() in the icon_field.module file. The twig template(defined in templates/icon-field.html.twig) to render the icons is as follows:

{#
  Icon Field Twig template for displaying the icon
#}
{% if link is not empty %}
  <a href="{{ link }}">
{% endif %}
<{{ wrapper }} class="fa fa-{{ icon }} {{ wrapper_classes|join(' ') }}"></{{ wrapper }}>
{% if link is not empty %}
  </a>
{% endif %}

In the previous week of the Coding Period I've implemented the field widget with the Icon Bundle as the select field to allow the list of icon bundles to choose from and the Search Icon textfield used the autocomplete to search for the icons from the selected icon bundle but the autocomplete of the search icon field was not providing the desired behavior so I've commented the old code to fix it in the future and for now I've replaced the select field with the textfield wherein the users needs to provide the icon bundle machine name.

The following code is the implementation of the hook_theme() function defined in the icon_field.module file:

/**
 * Implements hook_theme()
 */
function icon_field_theme($existing, $type, $theme, $path) {
  return [
    'icon_field' => [
      'variables' => [
        'bundle' => NULL,
        'icon' => NULL,
        'wrapper' => 'i',
        'wrapper_classes' => array(),
        'link' => '#',
      ],
      'template' => 'icon-field',
      ],
  ];
}

The annotation of the Field Formatter for the Icon Field sub-module is as follows:

/**
 * Plugin implementation of 'icon_field' formatter.
 *
 * @FieldFormatter(
 *  id = "icon_field_formatter",
 *  label = @Translation("Icon"),
 *  field_types = {
 *    "icon_field"
 *  }
 * )
 */

The Field Formatter is used to display the output in the drupal site where it is attached and the FormatterBase defines a method called viewElements() which is responsible for displaying the result to the end user. The following is the code snippet from the IconFieldFormatter class which uses the #theme as icon_field which was defined in the icon_field.module file in the hook_theme() function is as follows:

/**
 * {@inheritdoc}
 */

public function viewElements(FieldItemListInterface $items, $langcode) {
  $elements = [];

  foreach($items as $delta => $item) {
    $elements[$delta] = [
      '#theme' => 'icon_field',
      '#bundle' => $item->bundle,
      '#icon' => $item->icon,
      '#wrapper' => $item->wrapper,
      '#wrapper_classes' => explode(',', $item->wrapper_classes),
      '#link' => $item->link,
    ];
  }
  return $elements;
}

The following screenshot shows the Icon Field form fields and there are two icon fields in the article content type and I've set the first field with the ad icon and another field with camera icon:

The following screenshot shows the rendered icons which were specified in the article content type:

In this week, I've successfully implemented the Icon Field module in functionality and until this point the Icon API(the main module), Fontawesome Bundle(icon bundle), Icon Menu, Icon Block, Icon Filter, and Icon Field are all working as designed.

The project can be found in the Drupal's modules page (Click here to go to drupal's module page) and also there another repository on the Github (Click here to go to Github's repository).

The challenges faced during this week is to update the autocomplete of the Search Icon's textfield when there is a change in the Icon Bundle select field and also writing the twig template and rendering using the Field Formatter. The another difficulty faced during week was I've accidentally updated the schema of the Icon Field submodule while there was a field of type Icon Field in the Article content type and when I saved the schema and cleared the cache and tried to delete the field Drupal was throwing an error and I tried a lot of ways to delete it but the error was still there so I had to setup the new Drupal site to test this sub-module.

For the next week, I'll be fixing all the issues with the Icon Field module like the autocomplete textfield update when there is a change in the Icon Bundle select field for multiple fields and also creating and also looking for any remaining bugs in the project.