Inconsistent use of language regarding plugins

Created on 3 September 2024, 2 months ago
Updated 20 September 2024, about 2 months ago

Problem/Motivation

In the CKEditor configuration, plugins are referred to inconsistently in the interface. This means it is not clear that each toolbar button is a plugin. This can lead to confusion with regard to following instructions or resolving errors, if the administrator does not realize that the toolbar icon represents a plugin.

Tagging for accessibility, as this adds to cognitive load.

Steps to reproduce

1. Go to /admin/config/content/formats/manage/basic_html

Expected result:

Move a button into the Active toolbar to enable that plugin, or into the list of Available buttons to disable it. Buttons may be moved with the mouse or keyboard arrow keys.

The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.

Available buttons/plugins

Active toolbar plugins

Actual result:

Move a button into the Active toolbar to enable it, or into the list of Available buttons to disable it. Buttons may be moved with the mouse or keyboard arrow keys.

The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.

Available buttons

Active toolbar

2. Click Source Editing

(Update Sept. 17, 2024: This item appears to have been resolved separately from the current issue.)

Expected result, if Source Editing is a plugin:

A list of HTML tags that can be used while editing source. It is only necessary to add tags that are not already supported by other enabled plugins. For example, if "Bold" is enabled, it is not necessary to add the <strong> tag, but it may be necessary to add <dl><dt><dd> in a format that does not have a definition list plugin, but requires definition list markup.

There might be other edits needed to this text per Make CKEditor be forgiving of enabling something that's already enabled Active .

Expected result, if Source Editing is not a plugin:

A list of HTML tags that can be used while editing source. It is only necessary to add tags that are not already supported by enabled plugins. For example, if "Bold" is enabled, it is not necessary to add the <strong> tag, but it may be necessary to add <dl><dt><dd> in a format that does not have a definition list plugin, but requires definition list markup.

There might be other edits needed to this text per Make CKEditor be forgiving of enabling something that's already enabled Active .

Actual result:

A list of HTML tags that can be used while editing source. It is only necessary to add tags that are not already supported by other enabled plugins. For example, if "Bold" is enabled, it is not necessary to add the <strong> tag, but it may be necessary to add <dl><dt><dd> in a format that does not have a definition list plugin, but requires definition list markup.

Proposed resolution

Consistently refer to plugins throughout the interface, since error and warning messages refer to plugins.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs review

Version

11.0 🔥

Component
CKEditor 5 

Last updated 1 day ago

Created by

🇺🇸United States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @charles belov
  • 🇺🇸United States charles belov San Francisco, CA, US
  • First commit to issue fork.
  • Pipeline finished with Success
    about 2 months ago
    Total: 5517s
    #285249
  • Status changed to Needs work about 2 months ago
  • First commit to issue fork.
  • Status changed to Needs review about 2 months ago
  • 🇮🇳India KumudB Ahmedabad

    I have verified the changes and have raised a MR to address the issue of inconsistent plugin representation in the CKEditor configuration interface. Please review the PR at your convenience. Thank you!

  • 🇺🇸United States charles belov San Francisco, CA, US

    Reviewed and tested in simplytest.me, thank you!

    I didn't change the status because I don't know whether my test is sufficient to be considered Reviewed and Tested by the Community.

    The part above about adding "other" to the Source Editing instructions is out of date because that change has already been made to core code. It is correctly not part of the current MR.

  • 🇺🇸United States charles belov San Francisco, CA, US
  • The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • 🇺🇸United States benjifisher Boston area

    Usability review

    We discussed this issue at 📌 Drupal Usability Meeting 2024-10-25 Active . That issue has a link to a recording of the meeting.

    For the record, the attendees at the usability meeting were @benjifisher, @rkoller, @shaal, @amazingrando, @rosendo.fig, @simohell, and @worldlinemine.

    We agree that the language here is inconsistent, but we think the right way to fix this is to remove references to "plugins", not add more. The word "plugin" has too many meanings (in Drupal, CKEditor, and WordPress, for example) and someone configuring the toolbar is more likely to think of "features", "buttons", or "toolbar items".

    We also think we should use something more generic, like "toolbar items", instead of "buttons", since the toolbar also includes drop-down lists and separators.

    We suggest making the following changes to the interface text:

    1. Change the label "Toolbar buttons" to "Toolbar items".
    2. Change the text "Move a button into the Active toolbar to enable it, or into the list of Available buttons to disable it." to "Move a button into the Active toolbar to enable it, or into the list of Available items to disable it. "
    3. Change the text "The toolbar buttons that don't fit ..." to "The toolbar items that don't fit ...".
    4. Change the header "CKEditor 5 plugin settings" to "Settings".
    5. Change the help text for "Manually editable HTML tags" (under the "Source editing" vertical tab) to
      A list of HTML tags that can be used while editing source. It is only necessary to add tags that are not already supported by other enabled toolbar configuration. For example, if "Bold" is enabled, it is not necessary to add the tag. If there is no "Definition list" item, then it may be necessary to add

    If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.

  • 🇺🇸United States charles belov San Francisco, CA, US

    Did some HTML in that last comment get rendered as HTML instead? There appears to be blank space between "necessary to add" and the period.

  • 🇺🇸United States benjifisher Boston area

    Thanks for pointing out that problem. I edited Comment #15.

Production build 0.71.5 2024