Controlling ckeditor styling options with hook_editor_js_settings_alter

This code snippet not only tailors CKEditor's behavior for different content fields but also prioritizes accessibility (a11y). By adjusting the available formatting options based on the field context, it ensures that content creators always have appropriate styling choices, enhancing usability for all users. For instance, by disabling certain heading elements like h1 or h2 in specific fields, it promotes consistency in document structure and prevents potential accessibility issues related to incorrect heading hierarchy. This proactive approach aligns with best practices for web accessibility, ensuring that users of all abilities can navigate and comprehend the content effectively. This customization helps streamline content creation and maintain a cohesive style across different parts of the website.

/**
 * Implements hook_field_widget_single_[WIDGET_TYPE]_form_alter.
 *
 * {@inheritdoc}
 */
function pixelthis_paragraphs_field_widget_single_element_text_textarea_form_alter(array &$element, FormStateInterface $form_state, array $context) {
  \Drupal::state()->set('pixelthis_paragraphs_ckeditor_hooks', $context['items']->getFieldDefinition()->getName());
}

/**
 * Implements hook_editor_js_settings_alter().
 */
function pixelthis_paragraphs_editor_js_settings_alter(array &$settings) {

  $field_name = \Drupal::state()->get('pixelthis_paragraphs_ckeditor_hooks');
  if ($field_name === 'field_randomized1') {
    $settings['editor']['formats']['full_html']['editorSettings']['format_tags'] = "p;pre";
  }

  // Remove h5 and h6 from the ckeditor format tags for the following fields.
  $fields_without_h5h6 = [
    'field_randomized2',
    'field_randomized3',
    'field_randomized4',
    'field_randomized5',
    'field_randomized6',
    'field_randomized7',
  ];

  if (in_array($field_name, $fields_without_h5h6)) {
    $settings['editor']['formats']['full_html']['editorSettings']['format_tags'] = "p;pre;h1;h2;h3;h4";
  }

  // Advice body field should have only p, pre, h3, h4 tags.
  if ($field_name === 'field_randomized8') {
    $settings['editor']['formats']['full_html']['editorSettings']['format_tags'] = "p;pre;h3;h4";
    $stylesSet = $settings['editor']['formats']['full_html']['editorSettings']['stylesSet'];
    $removeStyles = ['h2', 'h5', 'h6'];
    foreach ($stylesSet as $key => $styleSet) {
      if (isset($styleSet['element']) && in_array($styleSet['element'], $removeStyles)) {
        unset($stylesSet[$key]);
      }
    }
    $settings['editor']['formats']['full_html']['editorSettings']['stylesSet'] = array_values($stylesSet);
  }

  // Icon block description field should have only p, pre tags.
  if ($field_name === 'field_randomized9') {
    $settings['editor']['formats']['full_html']['editorSettings']['format_tags'] = "p;pre";
    $stylesSet = $settings['editor']['formats']['full_html']['editorSettings']['stylesSet'];
    $removeStyles = ['h2', 'h3', 'h4', 'h5', 'h6'];
    foreach ($stylesSet as $key => $styleSet) {
      if (isset($styleSet['element']) && in_array($styleSet['element'], $removeStyles)) {
        unset($stylesSet[$key]);
      }
    }
    $settings['editor']['formats']['full_html']['editorSettings']['stylesSet'] = array_values($stylesSet);
  }

}