Issue #1872206 by jessebeach, quicksketch, Wim Leers, mgifford: Fixed Improve...

Issue #1872206 by jessebeach, quicksketch, Wim Leers, mgifford: Fixed Improve CKEditor toolbar configuration accessibility.

core/modules/ckeditor/ckeditor.admin.inc

@@ -30,18 +30,29 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
       $buttons[$button_name] = $button;
     }
   }
+  $button_groups = array();
   $variables['active_buttons'] = array();
-  foreach ($editor->settings['toolbar']['buttons'] as $row_number => $row) {
-    foreach ($row as $button_name) {
-      if (isset($buttons[$button_name])) {
-        $variables['active_buttons'][$row_number][] = $buttons[$button_name];
-        if (empty($buttons[$button_name]['multiple'])) {
-          unset($buttons[$button_name]);
+  foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
+    $button_groups[$row_number] = array();
+    foreach ($row as $group) {
+      foreach ($group['items'] as $button_name) {
+        if (isset($buttons[$button_name])) {
+          // Save a reference to the button's configured toolbar group.
+          $buttons[$button_name]['group'] = $group['name'];
+          $variables['active_buttons'][$row_number][] = $buttons[$button_name];
+          if (empty($buttons[$button_name]['multiple'])) {
+            unset($buttons[$button_name]);
+          }
+          // Create a list of all the toolbar button groups.
+          if (!in_array($group['name'], $button_groups[$row_number])) {
+            array_push($button_groups[$row_number], $group['name']);
+          }
         }
       }
     }
   }
   $variables['disabled_buttons'] = array_diff_key($buttons, $variables['multiple_buttons']);
+  $variables['button_groups'] = $button_groups;
 }
 
 /**
@@ -66,7 +77,7 @@ function theme_ckeditor_settings_toolbar($variables) {
         '#uri' => $button['image' . $rtl],
         '#title' => $button['label'],
       );
-      $value = '<a href="#" class="cke_button" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">' . drupal_render($image) . '</span></a>';
+      $value = '<a href="#" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">' . drupal_render($image) . '</span></a>';
     }
     else {
       $value = '?';
@@ -80,8 +91,13 @@ function theme_ckeditor_settings_toolbar($variables) {
     // Build the button item.
     $button_item = array(
       'value' => $value,
-      'data-button-name' => $button['name'],
+      'data-drupal-ckeditor-button-name' => $button['name'],
+      'class' => array('ckeditor-button'),
     );
+    // If this button has group information, add it to the attributes.
+    if (!empty($button['group'])) {
+      $button_item['group'] = $button['group'];
+    }
     if (!empty($button['attributes'])) {
       $button_item = array_merge($button_item, $button['attributes']);
     }
@@ -110,6 +126,7 @@ function theme_ckeditor_settings_toolbar($variables) {
   $print_buttons = function($buttons) {
     $output = '';
     foreach ($buttons as $button) {
+      unset($button['group']);
       $value = $button['value'];
       unset($button['value']);
       $attributes = (string) new Attribute($button);
@@ -118,6 +135,19 @@ function theme_ckeditor_settings_toolbar($variables) {
     return $output;
   };
 
+  $print_button_group = function($buttons, $group_name, $print_buttons) {
+    $group = drupal_html_class($group_name);
+
+    $output = '';
+    $output .= "<li class=\"ckeditor-toolbar-group\" role=\"presentation\" data-drupal-ckeditor-type=\"group\" data-drupal-ckeditor-toolbar-group-name=\"{$group_name}\" tabindex=\"0\">";
+    $output .= "<h3 class=\"ckeditor-toolbar-group-name\" id=\"ckeditor-toolbar-group-aria-label-for-{$group}\">{$group_name}</h3>";
+    $output .= "<ul class=\"ckeditor-buttons ckeditor-toolbar-group-buttons\" role=\"toolbar\" data-drupal-ckeditor-button-sorting=\"target\" aria-labelledby=\"ckeditor-toolbar-group-aria-label-for-{$group}\">";
+    $output .= $print_buttons($buttons);
+    $output .= "</ul></li>";
+
+    return $output;
+  };
+
   // We don't use theme_item_list() below in case there are no buttons in the
   // active or disabled list, as theme_item_list() will not print an empty UL.
   $output = '';
@@ -125,43 +155,45 @@ function theme_ckeditor_settings_toolbar($variables) {
   $output .= '<legend id="ckeditor-button-configuration">' . t('Toolbar configuration') . '</legend>';
   $output .= '<div class="fieldset-wrapper">';
 
-  // aria-live region for outputing aural information about the state of the
-  // configuration.
-  $output .= '<div id="ckeditor-button-configuration-aria-live" class="visually-hidden" aria-live="polite"></div>';
-
-  $output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Use dividers to create button groups. Buttons may be moved with the mouse or keyboard arrow keys.') . '</div>';
+  $output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Toolbar group names are provided to support screen reader users. Empty toolbar groups will be removed upon save.') . '</div>';
 
   $output .= '<div class="ckeditor-toolbar-disabled clearfix">';
+  // Available buttons.
+  $output .= '<div class="ckeditor-toolbar-available">';
+  $output .= '<label for="ckeditor-available-buttons">' . t('Available buttons') . '</label>';
+  $output .= '<ul id="ckeditor-available-buttons" class="ckeditor-buttons" role="form" data-drupal-ckeditor-button-sorting="source">';
+  $output .= $print_buttons($disabled_buttons);
+  $output .= '</ul>';
+  $output .= '</div>';
+  // Dividers.
   $output .= '<div class="ckeditor-toolbar-dividers">';
-  $output .= '<label id="ckeditor-multiple-label">' . t('Dividers') . '</label>';
-  $output .= '<ul class="ckeditor-multiple-buttons" role="form" aria-labelledby="ckeditor-multiple-label">';
+  $output .= '<label for="ckeditor-multiple-buttons">' . t('Button divider') . '</label>';
+  $output .= '<ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">';
   $output .= $print_buttons($multiple_buttons);
   $output .= '</ul>';
   $output .= '</div>';
-  $output .= '<label id="ckeditor-available-buttons">' . t('Available buttons') . '</label>';
-  $output .= '<ul class="ckeditor-buttons" role="form" aria-labelledby="ckeditor-available-buttons">';
-  $output .= $print_buttons($disabled_buttons);
-  $output .= '</ul>';
   $output .= '</div>';
-
-  $output .= '<label id="ckeditor-active-toolbar">' . t('Active toolbar') . '</label>';
-
-  $output .= '<div data-toolbar="active" class="ckeditor-toolbar-active clearfix">';
-  foreach ($active_buttons as $button_row) {
-    $output .= '<ul class="ckeditor-buttons" role="form" aria-labelledby="ckeditor-active-toolbar">';
-    $output .= $print_buttons($button_row);
+  // Active toolbar.
+  $output .= '<div class="clearfix"><label id="ckeditor-active-toolbar">' . t('Active toolbar') . '</label></div>';
+  $output .= '<div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix">';
+  $output .= '<ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="' . t('CKEditor toolbar and button configuration.') . '">';
+  foreach ($active_buttons as $row_number => $button_row) {
+    $output .= '<li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">';
+    $output .= '<ul class="ckeditor-toolbar-groups clearfix">';
+    foreach ($variables['button_groups'][$row_number] as $group_name) {
+      $buttons = array_filter($button_row, function ($button) use ($group_name) {
+        return $button['group'] === $group_name;
+      });
+      $output .= $print_button_group($buttons, $group_name, $print_buttons);
+    }
     $output .= '</ul>';
+    $output .= '</li>';
   }
   if (empty($active_buttons)) {
     $output .= '<ul class="ckeditor-buttons">';
     $output .= '</ul>';
   }
 
-  $output .= '<div class="ckeditor-row-controls">';
-  $output .= '<a href="#" role="button" aria-label="' . t('Remove last button row') . '" class="ckeditor-row-remove" title="' . t('Remove row') . '">-</a>';
-  $output .= '<a href="#" role="button" aria-label="' . t('Add additional button row') . '" class="ckeditor-row-add" title="' . t('Add row') . '">+</a>';
-  $output .= '</div>';
-
   $output .= '</div>';
 
   $output .= '</div>';

core/modules/ckeditor/ckeditor.module

@@ -76,9 +76,11 @@ function ckeditor_library_info() {
       array('system', 'jquery.ui.sortable'),
       array('system', 'jquery.ui.draggable'),
       array('system', 'jquery.ui.touch-punch'),
+      array('system', 'backbone'),
+      array('system', 'drupal.dialog'),
+      array('system', 'drupal.announce'),
       array('ckeditor', 'ckeditor'),
       array('editor', 'drupal.editor.admin'),
-      array('system', 'underscore'),
       // Depend on Vertical Tabs, so that Vertical Tabs' JavaScript is executed
       // first, which ensures its behavior runs first.
       array('system', 'drupal.vertical-tabs'),

core/modules/ckeditor/config/schema/ckeditor.schema.yml

@@ -8,15 +8,25 @@ editor.settings.ckeditor:
       type: mapping
       label: 'Toolbar configuration'
       mapping:
-        buttons:
+        rows:
           type: sequence
           label: 'Rows'
           sequence:
             - type: sequence
-              label: 'Buttons'
+              label: 'Button groups'
               sequence:
-                - type: string
-                  label: 'Button'
+                - type: mapping
+                  label: 'Button group'
+                  mapping:
+                    name:
+                      type: string
+                      label: 'Button group name'
+                    items:
+                      type: sequence
+                      label: 'Buttons'
+                      sequence:
+                        - type: string
+                          label: 'Button'
     plugins:
       type: sequence
       label: 'Plugins'

core/modules/ckeditor/lib/Drupal/ckeditor/CKEditorPluginManager.php

@@ -65,7 +65,14 @@ public function __construct(\Traversable $namespaces, CacheBackendInterface $cac
    */
   public function getEnabledPluginFiles(Editor $editor, $include_internal_plugins = FALSE) {
     $plugins = array_keys($this->getDefinitions());
-    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($editor->settings['toolbar']['buttons']));
+    // Flatten each row.
+    $toolbar_rows = array();
+    foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
+      $toolbar_rows[] = array_reduce($editor->settings['toolbar']['rows'][$row_number], function (&$result, $button_group) {
+        return array_merge($result, $button_group['items']);
+      }, array());
+    }
+    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($toolbar_rows));
     $enabled_plugins = array();
     $additional_plugins = array();
 

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/CKEditorPlugin/DrupalImageCaption.php

@@ -77,11 +77,17 @@ function isEnabled(Editor $editor) {
     // text editor uses the filter_caption filter and the DrupalImage button is
     // enabled.
     if (isset($filters['filter_caption']) && $filters['filter_caption']->status) {
-      foreach ($editor->settings['toolbar']['buttons'] as $row) {
-        if (in_array('DrupalImage', $row)) {
-          return TRUE;
+      $enabled = FALSE;
+      foreach ($editor->settings['toolbar']['rows'] as $row) {
+        foreach ($row as $group) {
+          foreach ($group['items'] as $button) {
+            if ($button === 'DrupalImage') {
+              $enabled = TRUE;
+            }
+          }
         }
       }
+      return $enabled;
     }
 
     return FALSE;

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/CKEditorPlugin/Internal.php

@@ -55,7 +55,13 @@ public function getConfig(Editor $editor) {
     $config['allowedContent'] = $this->generateAllowedContentSetting($editor);
 
     // Add the format_tags setting, if its button is enabled.
-    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($editor->settings['toolbar']['buttons']));
+    $toolbar_rows = array();
+    foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
+      $toolbar_rows[] = array_reduce($editor->settings['toolbar']['rows'][$row_number], function (&$result, $button_group) {
+        return array_merge($result, $button_group['items']);
+      }, array());
+    }
+    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($toolbar_rows));
     if (in_array('Format', $toolbar_buttons)) {
       $config['format_tags'] = $this->generateFormatTagsSetting($editor);
     }
@@ -220,17 +226,14 @@ public function getButtons() {
         'label' => t('Maximize'),
         'image_alternative' => $button('maximize'),
       ),
-      // No plugin, separator "buttons" for toolbar builder UI use only.
-      '|' => array(
-        'label' => t('Group separator'),
-        'image_alternative' => '<a href="#" role="button" aria-label="' . t('Button group separator') . '" class="ckeditor-group-separator"></a>',
-        'attributes' => array('class' => array('ckeditor-group-button-separator')),
-        'multiple' => TRUE,
-      ),
+      // No plugin, separator "button" for toolbar builder UI use only.
       '-' => array(
         'label' => t('Separator'),
         'image_alternative' => '<a href="#" role="button" aria-label="' . t('Button separator') . '" class="ckeditor-separator"></a>',
-        'attributes' => array('class' => array('ckeditor-button-separator')),
+        'attributes' => array(
+          'class' => array('ckeditor-button-separator'),
+          'data-drupal-ckeditor-type' => 'separator',
+        ),
         'multiple' => TRUE,
       ),
     );

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/Editor/CKEditor.php

@@ -94,13 +94,29 @@ public static function create(ContainerInterface $container, array $configuratio
   public function getDefaultSettings() {
     return array(
       'toolbar' => array(
-        'buttons' => array(
+        'rows' => array(
+          // Button groups.
           array(
-            'Bold', 'Italic',
-            '|', 'DrupalLink', 'DrupalUnlink',
-            '|', 'BulletedList', 'NumberedList',
-            '|', 'Blockquote', 'DrupalImage',
-            '|', 'Source',
+            array(
+              'name' => t('Formatting'),
+              'items' => array('Bold', 'Italic',),
+            ),
+            array(
+              'name' => t('Links'),
+              'items' => array('DrupalLink', 'DrupalUnlink',),
+            ),
+            array(
+              'name' => t('Lists'),
+              'items' => array('BulletedList', 'NumberedList',),
+            ),
+            array(
+              'name' => t('Media'),
+              'items' => array('Blockquote', 'DrupalImage',),
+            ),
+            array(
+              'name' => t('Tools'),
+              'items' => array('Source',),
+            ),
           ),
         ),
       ),
@@ -132,10 +148,11 @@ public function settingsForm(array $form, array &$form_state, EditorEntity $edit
       ),
       '#attributes' => array('class' => array('ckeditor-toolbar-configuration')),
     );
-    $form['toolbar']['buttons'] = array(
+
+    $form['toolbar']['button_groups'] = array(
       '#type' => 'textarea',
       '#title' => t('Toolbar buttons'),
-      '#default_value' => json_encode($editor->settings['toolbar']['buttons']),
+      '#default_value' => json_encode($editor->settings['toolbar']['rows']),
       '#attributes' => array('class' => array('ckeditor-toolbar-textarea')),
     );
 
@@ -177,8 +194,17 @@ public function settingsForm(array $form, array &$form_state, EditorEntity $edit
       'format' => $editor->id(),
       'editor' => 'ckeditor',
       'settings' => array(
-        // Single toolbar row that contains all existing buttons.
-        'toolbar' => array('buttons' => array(0 => $all_buttons)),
+        // Single toolbar row, single button group, all existing buttons.
+        'toolbar' => array(
+         'rows' => array(
+           0 => array(
+             0 => array(
+               'name' => 'All existing buttons',
+               'items' => $all_buttons,
+             )
+           )
+         ),
+        ),
         'plugins' => $editor->settings['plugins'],
       ),
     ));
@@ -212,7 +238,10 @@ public function settingsFormSubmit(array $form, array &$form_state) {
     // editor_form_filter_admin_format_submit().
     $toolbar_settings = &$form_state['values']['editor']['settings']['toolbar'];
 
-    $toolbar_settings['buttons'] = json_decode($toolbar_settings['buttons'], FALSE);
+    // The rows key is not built into the form structure, so decode the button
+    // groups data into this new key and remove the button_groups key.
+    $toolbar_settings['rows'] = json_decode($toolbar_settings['button_groups'], TRUE);
+    unset($toolbar_settings['button_groups']);
 
     // Remove the plugin settings' vertical tabs state; no need to save that.
     if (isset($form_state['values']['editor']['settings']['plugins'])) {
@@ -352,22 +381,12 @@ public function getLibraries(EditorEntity $editor) {
    */
   public function buildToolbarJSSetting(EditorEntity $editor) {
     $toolbar = array();
-    foreach ($editor->settings['toolbar']['buttons'] as $row) {
-      $button_group = array();
-      foreach ($row as $button_name) {
-        // Change the toolbar separators into groups.
-        if ($button_name === '|') {
-          $toolbar[] = $button_group;
-          $button_group = array();
-        }
-        else {
-          $button_group['items'][] = $button_name;
-        }
+    foreach ($editor->settings['toolbar']['rows'] as $row) {
+      foreach ($row as $group) {
+        $toolbar[] = $group;
       }
-      $toolbar[] = $button_group;
       $toolbar[] = '/';
     }
-
     return $toolbar;
   }
 

core/modules/ckeditor/lib/Drupal/ckeditor/Tests/CKEditorAdminTest.php

@@ -77,13 +77,29 @@ function testAdmin() {
     // Ensure the CKEditor editor returns the expected default settings.
     $expected_default_settings = array(
       'toolbar' => array(
-        'buttons' => array(
+        'rows' => array(
+          // Button groups
           array(
-            'Bold', 'Italic',
-            '|', 'DrupalLink', 'DrupalUnlink',
-            '|', 'BulletedList', 'NumberedList',
-            '|', 'Blockquote', 'DrupalImage',
-            '|', 'Source',
+            array(
+              'name' => t('Formatting'),
+              'items' => array('Bold', 'Italic',),
+            ),
+            array(
+              'name' => t('Links'),
+              'items' => array('DrupalLink', 'DrupalUnlink',),
+            ),
+            array(
+              'name' => t('Lists'),
+              'items' => array('BulletedList', 'NumberedList',),
+            ),
+            array(
+              'name' => t('Media'),
+              'items' => array('Blockquote', 'DrupalImage',),
+            ),
+            array(
+              'name' => t('Tools'),
+              'items' => array('Source',),
+            ),
           ),
         ),
       ),
@@ -98,8 +114,8 @@ function testAdmin() {
 
     // Ensure the toolbar buttons configuration value is initialized to the
     // expected default value.
-    $expected_buttons_value = json_encode($expected_default_settings['toolbar']['buttons']);
-    $this->assertFieldByName('editor[settings][toolbar][buttons]', $expected_buttons_value);
+    $expected_buttons_value = json_encode($expected_default_settings['toolbar']['rows']);
+    $this->assertFieldByName('editor[settings][toolbar][button_groups]', $expected_buttons_value);
 
     // Ensure the styles textarea exists and is initialized empty.
     $styles_textarea = $this->xpath('//textarea[@name="editor[settings][plugins][stylescombo][styles]"]');
@@ -131,12 +147,13 @@ function testAdmin() {
     // done via drag and drop, but here we can only emulate the end result of
     // that interaction). Test multiple toolbar rows and a divider within a row.
     $this->drupalGet('admin/config/content/formats/manage/filtered_html');
-    $expected_settings['toolbar']['buttons'] = array(
-      array('Undo', '|', 'Redo'),
-      array('JustifyCenter'),
+    $expected_settings['toolbar']['rows'][0][] = array(
+      'name' => 'Action history',
+      'items' => array('Undo', '|', 'Redo'),
+      array('JustifyCenter')
     );
     $edit = array(
-      'editor[settings][toolbar][buttons]' => json_encode($expected_settings['toolbar']['buttons']),
+      'editor[settings][toolbar][button_groups]' => json_encode($expected_settings['toolbar']['rows']),
     );
     $this->drupalPostForm(NULL, $edit, t('Save configuration'));
     $editor = entity_load('editor', 'filtered_html');

core/modules/ckeditor/lib/Drupal/ckeditor/Tests/CKEditorPluginManagerTest.php

@@ -103,8 +103,8 @@ function testEnabledPlugins() {
     // cause the LlamaContextual and LlamaContextualAndButton plugins to be
     // enabled. Finally, we will add the "Strike" button back again, which would
     // cause all three plugins to be enabled.
-    $original_toolbar = $editor->settings['toolbar']['buttons'][0];
-    $editor->settings['toolbar']['buttons'][0][] = 'Llama';
+    $original_toolbar = $editor->settings['toolbar'];
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Llama';
     $editor->save();
     $file = array();
     $file['b'] = 'core/modules/ckeditor/tests/modules/js/llama_button.js';
@@ -113,13 +113,13 @@ function testEnabledPlugins() {
     $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual_and_button' => $file['cb']);
     $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.');
-    $editor->settings['toolbar']['buttons'][0] = $original_toolbar;
-    $editor->settings['toolbar']['buttons'][0][] = 'Strike';
+    $editor->settings['toolbar'] = $original_toolbar;
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Strike';
     $editor->save();
     $expected = $enabled_plugins + array('llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb']);
     $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The  LLamaContextual and LlamaContextualAndButton plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LlamaContextual and LlamaContextualAndButton plugins are enabled.');
-    $editor->settings['toolbar']['buttons'][0][] = 'Llama';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Llama';
     $editor->save();
     $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb']);
     $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton, LlamaContextual and LlamaContextualAndButton plugins are enabled.');

core/modules/ckeditor/lib/Drupal/ckeditor/Tests/CKEditorTest.php

@@ -109,12 +109,11 @@ function testGetJSSettings() {
     $this->container->get('plugin.manager.editor')->clearCachedDefinitions();
     $this->ckeditor = $this->container->get('plugin.manager.editor')->createInstance('ckeditor');
     $this->container->get('plugin.manager.ckeditor.plugin')->clearCachedDefinitions();
-    $editor->settings['toolbar']['buttons'][0][] = 'Strike';
-    $editor->settings['toolbar']['buttons'][1][] = 'Format';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Strike';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Format';
     $editor->save();
-    $expected_config['toolbar'][count($expected_config['toolbar'])-2]['items'][] = 'Strike';
-    $expected_config['toolbar'][]['items'][] = 'Format';
-    $expected_config['toolbar'][] = '/';
+    $expected_config['toolbar'][0]['items'][] = 'Strike';
+    $expected_config['toolbar'][0]['items'][] = 'Format';
     $expected_config['format_tags'] = 'p;h4;h5;h6';
     $expected_config['extraPlugins'] .= ',llama_contextual,llama_contextual_and_button';
     $expected_config['drupalExternalPlugins']['llama_contextual'] = file_create_url('core/modules/ckeditor/tests/modules/js/llama_contextual.js');
@@ -208,17 +207,20 @@ function testBuildToolbarJSSetting() {
     $this->assertIdentical($expected, $this->ckeditor->buildToolbarJSSetting($editor), '"toolbar" configuration part of JS settings built correctly for default toolbar.');
 
     // Customize the configuration.
-    $editor->settings['toolbar']['buttons'][0][] = 'Strike';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Strike';
     $editor->save();
-    $expected[count($expected)-2]['items'][] = 'Strike';
+    $expected[0]['items'][] = 'Strike';
     $this->assertIdentical($expected, $this->ckeditor->buildToolbarJSSetting($editor), '"toolbar" configuration part of JS settings built correctly for customized toolbar.');
 
     // Enable the editor_test module, customize further.
     $this->enableModules(array('ckeditor_test'));
     $this->container->get('plugin.manager.ckeditor.plugin')->clearCachedDefinitions();
-    $editor->settings['toolbar']['buttons'][0][] = 'Llama';
+    // Override the label of a toolbar component.
+    $editor->settings['toolbar']['rows'][0][0]['name'] = 'JunkScience';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Llama';
     $editor->save();
-    $expected[count($expected)-2]['items'][] = 'Llama';
+    $expected[0]['name'] = 'JunkScience';
+    $expected[0]['items'][] = 'Llama';
     $this->assertIdentical($expected, $this->ckeditor->buildToolbarJSSetting($editor), '"toolbar" configuration part of JS settings built correctly for customized toolbar with contrib module-provided CKEditor plugin.');
   }
 
@@ -253,7 +255,7 @@ function testInternalGetConfig() {
     $this->assertIdentical($expected, $internal_plugin->getConfig($editor), '"Internal" plugin configuration built correctly for default toolbar.');
 
     // Format dropdown/button enabled: new setting should be present.
-    $editor->settings['toolbar']['buttons'][0][] = 'Format';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Format';
     $expected['format_tags'] = 'p;h4;h5;h6';
     $this->assertIdentical($expected, $internal_plugin->getConfig($editor), '"Internal" plugin configuration built correctly for customized toolbar.');
   }
@@ -266,7 +268,7 @@ function testStylesComboGetConfig() {
     $stylescombo_plugin = $this->container->get('plugin.manager.ckeditor.plugin')->createInstance('stylescombo');
 
     // Styles dropdown/button enabled: new setting should be present.
-    $editor->settings['toolbar']['buttons'][0][] = 'Styles';
+    $editor->settings['toolbar']['rows'][0][0]['items'][] = 'Styles';
     $editor->settings['plugins']['stylescombo']['styles'] = '';
     $editor->save();
     $expected['stylesSet'] = array();
@@ -367,12 +369,27 @@ protected function getDefaultAllowedContentConfig() {
 
   protected function getDefaultToolbarConfig() {
     return array(
-      0 => array('items' => array('Bold', 'Italic')),
-      1 => array('items' => array('DrupalLink', 'DrupalUnlink')),
-      2 => array('items' => array('BulletedList', 'NumberedList')),
-      3 => array('items' => array('Blockquote', 'DrupalImage')),
-      4 => array('items' => array('Source')),
-      5 => '/'
+      array(
+        'name' => t('Formatting'),
+        'items' => array('Bold', 'Italic',),
+      ),
+      array(
+        'name' => t('Links'),
+        'items' => array('DrupalLink', 'DrupalUnlink',),
+      ),
+      array(
+        'name' => t('Lists'),
+        'items' => array('BulletedList', 'NumberedList',),
+      ),
+      array(
+        'name' => t('Media'),
+        'items' => array('Blockquote', 'DrupalImage',),
+      ),
+      array(
+        'name' => t('Tools'),
+        'items' => array('Source',),
+      ),
+      '/',
     );
   }
 

core/modules/ckeditor/tests/modules/lib/Drupal/ckeditor_test/Plugin/CKEditorPlugin/LlamaContextual.php

@@ -28,9 +28,11 @@ class LlamaContextual extends Llama implements CKEditorPluginContextualInterface
    */
   function isEnabled(Editor $editor) {
     // Automatically enable this plugin if the Underline button is enabled.
-    foreach ($editor->settings['toolbar']['buttons'] as $row) {
-      if (in_array('Strike', $row)) {
-        return TRUE;
+    foreach ($editor->settings['toolbar']['rows'] as $row) {
+      foreach ($row as $group) {
+        if (in_array('Strike', $group['items'])) {
+          return TRUE;
+        }
       }
     }
     return FALSE;

core/modules/ckeditor/tests/modules/lib/Drupal/ckeditor_test/Plugin/CKEditorPlugin/LlamaContextualAndButton.php

@@ -31,9 +31,11 @@ class LlamaContextualAndButton extends Llama implements CKEditorPluginContextual
    */
   function isEnabled(Editor $editor) {
     // Automatically enable this plugin if the Strike button is enabled.
-    foreach ($editor->settings['toolbar']['buttons'] as $row) {
-      if (in_array('Strike', $row)) {
-        return TRUE;
+    foreach ($editor->settings['toolbar']['rows'] as $row) {
+      foreach ($row as $group) {
+        if (in_array('Strike', $group['items'])) {
+          return TRUE;
+        }
       }
     }
     return FALSE;

core/profiles/standard/config/editor.editor.basic_html.yml

@@ -2,21 +2,32 @@ format: basic_html
 editor: ckeditor
 settings:
   toolbar:
-    buttons:
+    rows:
       -
-        - Bold
-        - Italic
-        - '|'
-        - DrupalLink
-        - DrupalUnlink
-        - '|'
-        - BulletedList
-        - NumberedList
-        - '|'
-        - Blockquote
-        - DrupalImage
-        - '|'
-        - Source
+        -
+          name: Formatting
+          items:
+            - Bold
+            - Italic
+        -
+          name: Linking