GSoC 2017 | Week 2: Port Vote Up/Down

This is my second weekly blog post update on the progress of my GSoC project: Port Vote Up/Down. Last week's update can be found here. The coding period started on 30th May. As described in this post, I will be working with marvil07 and Palashvijay4O this summer. 

Agenda for the week

The agenda for Week 2 was to create a custom plugin type named vud_widget and a plugin named plain for the module. Widgets in Drupal 7 version of the modules were implemented using ctools, but due to the introduction of Plugins API in Drupal 8, we decided to use Plugins API to create custom plugin type for the module.

I started off last week to implement the new Plugins API and I got stuck immediately. I was using drupalize.me to learn about the API, it had only one tutorial about creating a new plugin type and I was not able to figure out Vote Up/Down oriented use case. Then, I took it to Google, started searching around the keywords "custom plugin type drupal 8" and to my surprise, they were actually all the same. Again, I had no clue about what to do.

Then I started watching videos about Plugin System from Drupal meetups, Drupalcon, Drupal camps, some of them are:

Again the same problem, no similar use case. They explained more about the existing plugin types but less about custom plugin type. And if they did, it was too precise and limited to understand. There is no as such documentation on Drupal 8 about 'creating custom plugin type' like that about 'create custom module'. The documentation on d.o. is scarce about the Plugins API. After struggling, I started looking at the codes of contributed modules from this list. I picked up the modules from this list which seemed to have custom plugin type. Voila!, I found a similar module named votingapi_widgets. This module helped a lot. But I still had doubts, so I contacted Kristopher VanderwaterJoshua Bolduc and Helior Colorado looking out for help. And I want to thank them for the quick response they gave strengthening my faith in Open Source Community.

After porting the remaining plugins to D8, I'll be writing a blog post explaining the process of creating custom plugin types in Drupal 8. It will certainly help the community in building custom plugin types. 

The steps taken by me are as follows:

  • Create the sub-module 'vud_widget'


    In this part, I ended up with only one file. No .module file or Form class was required as the module doesn't provide any functionality but defines just the plugin type.
    • .info.yml
      This file contains basic info about the module like module name, description, core version, package type and dependencies.
File structure after generating the vud_widget sub-module
  • Next, I created the files necessary for plugin type creation


    For creating a plugin type, I defined four different classes:
    • VoteUpDownWidget.php(location: root/src/Annotation/): Most of the plugin types created in Drupal 8 are implemented using Annotation discovery. I used the same for vud_widget. This file contains the schema for the module. This file contains $plugin_id: ID of a plugin and $label: Human readable label of the plugin
    • VoteUpDownWidgetManager.php(location: root/src/Plugin/): It is the central controlling class that defines how the plugins of a particular type will be discovered and instantiated.
    • VoteUpDownWidgetInterface.php(location: root/src/Plugin/): It defines an interface for Vote Up/Down Widget plugins. This class contains the method declaration/prototype.
    • VoteUpDownWidgetBase.php(location: root/src/Plugin/): It is the base class for the plugin type. It contains the method definitions and construction. 
  • The last part was to create a plugin


    My mentor asked me to create the 'plain' widget first. For this, I had to create the following files:
    • vud_widget.libraries.yml(location: root): This file contains configuration for the libraries used by various plugins ranging from css to js to dependencies
    • plain.php(location: root/src/Plugin/VoteUpDownWidget): This is the main plugin file. It contains the plugin schema and builds the view for the widget.
    • plain.html.twig(location: root/templates): This file contains the html twig template for the plugin.
    • plain.css: This file contains the css stylesheets corresponding to the plugin as specified in the libraries.yml file.

Project progress

By the end of this week, the directory structure looks like this:

Directory structure fo vud_widget

Note: Default values are assumed in various places. They will be replaced with functional code, once the vud module is ported and votingAPI is implemented.

The code written for the week could be found here

Agenda for next week

The agenda for the next week is to port the remaining widgets(i.e. updown, thumbs, voteupdown, etc) to Drupal 8.