Problem/Motivation

In issue #2098071: Disable filter guidelines for a text format if that text format has a text editor enabled the formatting guidelines for WYSIWYG-enabled text fields was removed. The patch included javascript that showed the formatting guidelines for text fields without a WYSIWYG editor. This javascript is currently broken because a selector is missing from the guidelines.

Proposed resolution

Fix the selector in the formatting guidelines so the guidelines are shown correctly for text fields without a WYSIWYG editor.

Remaining tasks

  1. Write a patch
  2. Review

User interface changes

The formatting guidelines are shown correctly for text fields without a WYSIWYG editor.

API changes

None

Original report by likin

TextFormat element - Guidelines are not show
Image

Comments

Anonymous’s picture

Status: Active » Needs review
StatusFileSize
new5.17 KB

The class name was incorrect. JavaScript was not able to show the selected guideline.

diff --git a/core/themes/classy/templates/filter/filter-guidelines.html.twig b/core/themes/classy/templates/filter/filter-guidelines.html.twig
index 783992b..9459c1a 100644
--- a/core/themes/classy/templates/filter/filter-guidelines.html.twig
+++ b/core/themes/classy/templates/filter/filter-guidelines.html.twig
@@ -22,7 +22,7 @@
...
-    'filter-guidelines-' ~ format.format,
+    'filter-guidelines-' ~ format.id,

There was a funy situation. Renderer set #access to false, so few guidelines were not rendered.
I added a prefix. It works well.

diff --git a/core/modules/filter/src/Element/TextFormat.php b/core/modules/filter/src/Element/TextFormat.php
index aaff8b4..4b213d8 100644
--- a/core/modules/filter/src/Element/TextFormat.php
+++ b/core/modules/filter/src/Element/TextFormat.php
@@ -161,7 +161,7 @@ public static function processFormat(&$element, FormStateInterface $form_state,
...
-      $element['format']['guidelines'][$format->id()] = array(
+      $element['format']['guidelines']['format-' . $format->id()] = array(

Added test cases to check if guidelines were rendered.

diff --git a/core/modules/filter/src/Tests/TextFormatElementFormTest.php b/core/modules/filter/src/Tests/TextFormatElementFormTest.php
index b889c4a..2851e34 100644
--- a/core/modules/filter/src/Tests/TextFormatElementFormTest.php
+++ b/core/modules/filter/src/Tests/TextFormatElementFormTest.php
@@ -117,10 +117,16 @@ public function testTextFormatElement() {
+    // It tests if guidelines are included.
...
+    $this->assertRaw('filter-guidelines-full_html');
+    $this->assertRaw('filter-guidelines-filtered_html');
+    $this->assertRaw('filter-guidelines-filter_test');

Also moved filter twig templates from classy theme to the module to make the site and tests working the same.

The idea has been born: Let's move renderer items instead the twig templates he in the filter module. It will look more simple and standart.

Status: Needs review » Needs work

The last submitted patch, 1: 2427095-filter-guidelines-1.patch, failed testing.

Anonymous’s picture

Status: Needs work » Needs review
StatusFileSize
new12.26 KB
new6.98 KB

Because templates were copiedd to the module folder, extra classes appeared.

-    $expected = '<figure><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
idebr’s picture

The additional classes were removed in #2349677: Copy filter templates to Classy

Anonymous’s picture

@idebr Yes, I saw the issue. It seems I do not understand the purpose of the theme classy. I see that theme - bartik reuses the classy. Tests use module templates. So I copied templates from classy to the module and corrected tests. Advise me how to correct templates right to make tests workable.

idebr’s picture

Status: Needs review » Needs work
Issue tags: +Usability, +Regression, +Novice, +JavaScript

The formatting guidelines were purposefully removed in #2098071: Disable filter guidelines for a text format if that text format has a text editor enabled. The reasoning is that elements that a user can add through the text editor match the allowed elements.

This leaves us with the issue where the guidelines are currently now shown for text fields without a WYSIWYG, such as Restricted HTML.

+++ b/core/themes/classy/templates/filter/filter-guidelines.html.twig
@@ -22,7 +22,7 @@
-    'filter-guidelines-' ~ format.format,
+    'filter-guidelines-' ~ format.id,

This is the only change required in this patch.

It seems I do not understand the purpose of the theme classy. I see that theme - bartik reuses the classy. Tests use module templates. So I copied templates from classy to the module and corrected tests. Advise me how to correct templates right to make tests workable.

Classy was added to Drupal core to give themers the ability to opt-out of classes included by core. For more information have a look at the wiki: https://www.drupal.org/theme-guide/8/classy or the change notice: https://www.drupal.org/node/2337467

idebr’s picture

Title: TextFormat element - Guidelines are not show » Formatting guidelines are not shown for textareas without WYSIWYG
Issue summary: View changes

Updated the issue summary to clarify the problem and proposed resolution.

Anonymous’s picture

There is an idea to move "guidelines" from templates to renderable array. It will look more clear and common.

prateekMehta’s picture

StatusFileSize
new517 bytes

Used approach mentioned in #6,

Only local images are allowed.

Only local images are allowed.

prateekMehta’s picture

Status: Needs work » Needs review
idebr’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new70.24 KB
new64.34 KB

Thanks @prateekMehta for picking this up! I did a manual test to confirm the formatting guidelines are shown correctly for textareas without a WYSIWYG editor:

Before patch:

After patch:

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 9: 2427095_Missing_formatting_guidlines_9.patch, failed testing.

idebr’s picture

Status: Needs work » Needs review
StatusFileSize
new541 bytes
Shivam Agarwal’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new82.6 KB
new76.63 KB

Using patch mentioned in comment #13, problem resolved in D8 UI. After applying patch guidelines for formatting is available in textarea. Attached images are screenshots of UI before and after applying patch.

Shivam Agarwal’s picture

Patch same as mentioned in comment #13. This patch is added here just for learning purpose. I am not the author of this patch.
Thanks

wim leers’s picture

Yet another case where front-end tests would've helped.

#15: You've reuploaded an identical patch. That's not cool. Please don't do that again.

Shivam Agarwal’s picture

#16 Yes I have done that intentionally for learning purpose and that's why I have mentioned the reference from where it has been taken and said that I am not the author. In any way I have not claimed or tried to own this patch. Sorry if still this is wrong.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 2a4f4d2 and pushed to 8.0.x. Thanks!

Given #15 was uploaded for "learning purpose" I have not credited @Shivam Agarwal on the commit message.

  • alexpott committed 2a4f4d2 on 8.0.x
    Issue #2427095 by likin, idebr, prateekMehta: Formatting guidelines are...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.