This issue has been created
There is 1 update.
 
 
XWiki Platform / cid:jira-generated-image-avatar-3f15ec7c-9b1c-4e2a-968e-f9a1ff37a11c XWIKI-25457 Open

Provide a field for CSS values in the Edit Macro dialog

 
View issue   ยท   Add comment
 

Issue created

 
cid:jira-generated-image-avatar-300fdcdd-c5ef-476d-9a39-f101b7cbeb66 Charpentier Lucas created this issue on 22/Oct/26 10:49
 
Summary: Provide a field for CSS values in the Edit Macro dialog
Issue Type: cid:jira-generated-image-avatar-3f15ec7c-9b1c-4e2a-968e-f9a1ff37a11c Improvement
Affects Versions: 17.10.14, 18.8.0
Assignee: Unassigned
Components: Rendering - Box Macro, Rendering - Gallery Macro, WYSIWYG Editor
Created: 22/Oct/26 10:49
Priority: cid:jira-generated-image-static-major-9b725988-187a-477c-a8e1-9d44670bd1cc Major
Reporter: Charpentier Lucas
Description:

Macro parameters that take a CSS value, like the width and height of the Box and Gallery macros, are plain text fields in the Edit Macro dialog. Nothing says what can be typed, and an invalid value is accepted silently: width="300" is output as style="width:300", which browsers ignore since a length needs a unit, and width="abc" is output as is.

Steps to reproduce

  1. Edit a page with the WYSIWYG editor.
  2. Insert a Box macro and open the advanced parameters.
  3. Type 300 in the Width field and submit.

Expected

The field helps to enter a valid CSS length, for example a number with a unit picked from a list, and rejects an invalid value.

Actual

The field is a plain text input. The box is rendered with style="width:300" and keeps its default width, with no message.

Proposal

A field for CSS lengths, and possibly for other CSS values, needs a brainstorming and a design before it is implemented. The parameters using it then need a dedicated type, so that the Edit Macro dialog can pick the right displayer.

The WYSIWYG usability audit of the macros found this on the Box and Gallery macros. The message macros, which are based on the Box macro, and the Code macro have the same width parameter.

 
 

1 update

 
cid:jira-generated-image-avatar-300fdcdd-c5ef-476d-9a39-f101b7cbeb66 Changes by Charpentier Lucas on 22/Oct/26 10:51
 
Description: Macro parameters that take a CSS value, like the {{width}} and {{height}} of the Box and Gallery macros, are plain text fields in the Edit Macro dialog. Nothing says what can be typed, and an invalid value is accepted silently: {{width="300"}} is output as {{style="width:300"}}, which browsers ignore since a length needs a unit, and {{width="abc"}} is output as is.

h2. Steps to reproduce
# Edit a page with the WYSIWYG editor.
# Insert a Box macro and open the advanced parameters.
# Type {{300}} in the Width field and submit.

h2. Expected
The field helps to enter a valid CSS length, for example a number with a unit picked from a list, and rejects an invalid value.

h2. Actual
The field is a plain text input. The box is rendered with {{style="width:300"}} and keeps its default width, with no message.

h2. Proposal
A field for CSS lengths, and possibly for other CSS values, needs a brainstorming and a design before it is implemented. The parameters using it then need a dedicated type, so that the Edit Macro dialog can pick the right displayer.

h2. Impact found by the audit
The [ WYSIWYG usability audit of the macros |https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/] found this on 8 parameters taking a CSS length in a plain text field: the {{width}} of [ Box |https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/box/], [Info Message|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/info/], [Warning Message|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/warning/], [Error Message|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/error/], [Success Message|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/success/] and [Code|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/code/], and the {{width}} and {{height}} of [ Gallery macros |https://design . The message macros xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Macros/gallery/].
* Criterion [C4
, which input-assistance|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Usability%20criteria/] was recorded OK on them, with a note pointing to this issue, only because no field for CSS values exists yet.
* Invalid values
are based accepted silently: {{abc}}, and {{300}} without a unit, are output as is, and the box or the gallery keeps its default size with no message. This fails criterion [C13, constraints|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Usability%20criteria/] on the Box macro and Gallery parameters , and criterion [E2, errors|https://design.xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Usability%20criteria/] on the Code macro have seven macros.
* Nothing tells
the same user what to type: the description of the Gallery {{width}} parameter , "The gallery width", does not say that a CSS length like {{620px}} or {{100%}} is expected, which fails criterion [C1, clarity|https://design . xwiki.org/xwiki/bin/view/Proposal/WYSIWYGusabilityofXWikimacros/Usability%20criteria/].