[Week 10] Fixing embedding issues and improving UI

Hello everyone!

I have already mentioned in my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (​slashrsm) and Tadej Baša (​paranojik) under Google Summer Of Code 2016.

This week I worked with my mentors on two issues:

1) Enabling the embedding functionality when the module is installed.

Last week, I created the embed button and entity browser for the media module. The users had to enable the button and filters from settings. To make things easier for users, we wanted to enable the button by default.

The editor module doesn’t provide any hook to add buttons to toolbar. I tried to add the buttons using the hook_editor_js_settings_alter().

/**
 * Implements hook_editor_js_settings_alter().
 */
function media_editor_js_settings_alter(array &$settings) {
  $settings['editor']['formats']['basic_html']['editorSettings']['DrupalEntity_buttons']['media'] = [
    'id' => 'media',
    'name' => 'Media',
    'label' => 'Media',
    'image' => file_create_url('public://media_embed_icon.png'),
    'entity_type' => 'media',
  ];
  $settings['editor']['formats']['basic_html']['editorSettings']['drupalExternalPlugins']['drupalentity'] = base_path() . drupal_get_path('module', 'entity_embed') . '/js/plugins/drupalentity/plugin.js';
  $extraPlugins = $settings['editor']['formats']['basic_html']['editorSettings']['extraPlugins'];
  if (!strpos($extraPlugins, 'drupalentity')) {
    $settings['editor']['formats']['basic_html']['editorSettings']['extraPlugins'] .= ',drupalentity';
  }
  $settings['editor']['formats']['basic_html']['editorSettings']['toolbar'][3]['items'][] = 'media';
}

This code showed the embed button, but it gave an access denied error when I tried to open the entity browser. I found a way to enable the button via the editor settings. I added the following code in the media.install file:

  // Enable the media embed button and modify filters.
  $editor_names = [
    'basic_html',
    'full_html',
  ];
  foreach ($editor_names as $editor_name) {
    $editor = Editor::load($editor_name);
    if ($editor) {
      // Make the changes to editor and filters only if editor type exists.
      $editor_settings = $editor->getSettings();
      $editor_settings['toolbar']['rows'][0][3]['items'][] = 'media';
      $editor->setSettings($editor_settings);
      $editor->save();
      $format = $editor->getFilterFormat();
      $format->filters('filter_html')->settings['allowed_html'] .= '<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-settings data-align data-caption data-embed-button>';
      $format->setFilterConfig('entity_embed', ['status' => 1]);
      $format->setFilterConfig('filter_html_image_secure', ['status' => 0]);
      $format->save();
    }
  }

This enabled the embed button as soon as the media module is installed. The pull request for this is available here.

2) Improving UI to make the module more easier and intuitive to use.

There are a lot of places where improvement is required. We made few irrelevant fields hidden in the display and improved the help texts at some places. The pull request for this is available here.

Next week, I need to work on the cropping functionality and prepare documentation for the module. If you have been following the weekly progress on this blog, you must have already got an idea that the media module is almost complete. Get ready to find the media module on drupal.org really soon! ;)

I’ll post more updates about the module next week. Stay tuned!

:)