Research which elements are currently supported by Style Dropdown.

[Witoso]

To help us prioritize well the Styles Dropdown improvement, we need better visibility of which elements are currently supported. This information may be later used in our docs, also Drupal community mentioned they want to add additional validation on their side.

The outcome of this task is a description of which

• Block elements.
• Inline elements
• Table elements: table, td, th, tr, and others?

are currently supported with Styles Dropdown?

[Witoso]

(this is with GHS configuration that allows all elements)

Block elements

How does it works now?

When you apply the style, the class adds an attribute to the block element.

There are two behaviors specific behaviors that you need to keep in mind.

1. I cannot easily add content before/after a block if it's the only element in the editor.

   Screen.Recording.2023-03-28.at.15.15.26.mov

2. When I am inside the block (that doesn't have a visual indication I'm in it), I cannot see that I'm adding the content inside the block.

   Screen.Recording.2023-03-28.at.15.20.15.mov

Supported

<address>, <article> <aside>, <blockquote>, <dd>, <dl>,<dt>, <fieldset>, <footer>, <form>, <h1>-<h6>, <header>, <main>, <pre>, <p>, <nav>, <section>.

Partially Supported

• <li>: works in the basic Lists plugin, not in Document lists.
• <figure> works in model imageInline, not on imageBlock.
• <div>: supported but not the case below (model htmlDivParagraph).

<div>
    hello!
</div>

Not Supported

<canvas>, <figcaption>, <hr>, <ol>, <ul>, <video>.

Tables and their elements

Supported

Nothing.

Not Supported

• <table>, <thead>, <tr>,<th>,<tbody>, <td>, <caption>
• <tfoot>: we are not accepting this element
• <col> / <colgroup> (not selectable)

Inline elements

How does it works now?

Important behaviors to mention:

1. Picking an inline style of one element on another element transforms it, e.g. if I have a CTRL in a paragraph, and I will select, and apply kbd style, it will transform to CTRL.
2. You need to have a full selection of an element to apply a style precisely to it.
3. If you don't have a selection, but you're with the cursor in the element and you enable style, everything you type will be in a new style (this may be counterintuitive, sometimes you just want to style the element that you clicked w/o selection).

Supported

<a> , <abbr> , <b> ,<bdo> , <cite> , <code> , <dfn> ,<em> , <i> , <kbd> , <label> , <q> , <small> , <span>, <strong> , <sub> , <sup> , <time> , <tt> , <var> , <output> , <samp>

Not Supported

<br>, <button>, <img>, <input>, <map>,<object> ,<script>, <select>, <textarea>.

[Witoso]

@apadol-cksource is this something we should add to the docs in the Style dropdown?

[wimleers]

Thanks for doing this research! That will help us over at https://www.drupal.org/project/drupal/issues/3347721.

Note that there's two limitations/bugs related to links:

1. when NOT using GHS: a style for <a> is applicable to all elements: https://www.drupal.org/project/drupal/issues/3326261#comment-14987670 😳
2. when using GHS: styles for <a> do not work depending on what kind of element they wrap. See https://www.drupal.org/project/drupal/issues/3349893.

[Witoso]

As for no. 1, we will fix it in #11709. No.2 was created in a #13803 as I couldn't find related issues.

[wimleers]

Note that the research in #13763 (comment) is partially outdated: <table class="something"> and <caption class="something"> now work fine 👍 Explicit test coverage was added downstream for these in Drupal: https://www.drupal.org/node/3326261