Add class to TR element that wraps around a paragraph bundle on node edit form

Apparently the recent paragraphs sprint has produced quite a lot of activity around the question of how edit, preview and collapse are implemented. @miro_dietiker has said he will write it up and create some meta issues, so you might want to watch for that and postpone fixing for now.

Let's first check in 8.x.

I think the edit / preview / closed / delete state should be indicated per row so you can address them in CSS.

But we don't have an active concept, such as all are collapsed except one.
If multiple are open, we would need to track focus to determine what element is active.
Also, we would need to support nesting similar to menus and indicate parents as active-parent or so.
That said, does core have this concept? If not, i think it's not our job to invent it. We first should open a core issue to discuss it, also with focus on the accessibility aspects.

I've managed to do a bit of UX improvement..

Please always include a screenshot of an improvement, otherwise the proposals don't allow us to efficiently discuss the effect and you risk no one finds time to apply the patch and test everything to find the change you propose...

Thank you for the video. It's a nice alternative perspective on the Paragraphs experience. Will need to think a bit about it.

I don't understand yet though, what "active" means. In my understanding, only one item should be active and that would be the one with the last interaction.
What would you propose if i open / edit multiple paragraphs should be "active" in that case?

Yeah a changed indicator indeed makes sense.

The issue scope here shifted with the discussion.

Meanwhile we have a change indicator (icon) in the new widget.
This issue should be limited to offering a class indicating the Paragraph type per row. This already allows easy CSS styling per Paragraph Type as a first step.

If something else is still a requirement, let's create dedicated follow-ups.

Fixed the part which makes the test fail.

And now we want to check the class presence. :-)

Added the test to check if the class is present.

We're trying to avoid adding more test cases to the old WebTestBase based classes and instead write new test coverage when possible in BrowserTestBase tests.

None of the existing tests there seem like a good match, so maybe just start a new test class there for generic UI/Widget tests, maybe just do a second ParagraphsExperimentalUiTest in tests/src/Functional and then in a follow-up, we can convert the existing to a browser test as well.

Switching to Functional test. :)

+++ b/paragraphs.module
@@ -344,6 +344,15 @@ function paragraphs_preprocess_field_multiple_value_form(&$variables) {
+    if (isset($variables['element'][0]['#paragraph_type'])) {

Do we need this if here? We are checking two lines below anyway.

+++ b/paragraphs.module
@@ -344,6 +344,15 @@ function paragraphs_preprocess_field_multiple_value_form(&$variables) {
+          $variables['table']['#rows'][$key]['class'][] = 'paragraph-type-' . str_replace('_', '-', $row['data'][1]['data']['#paragraph_type']);

We decided for paragraph-type--* .. After long religious BEM discussions, we stated that a specific type is considered a type modifier... and we don't consider it worth to repeat any of the parent block names to avoid overlength... ;-)

About the check: We first need to check if we are really inside a Paragraphs widget. We can not blindly loop over the table... Maybe check the key that is used for foreach?

Updating tests, class and adding back the condition I removed. It makes sense to have it if that's the reason. :)

Great, now we can start to play with it in CSS. :-)

I'm new to Paragraphs. I came across this issue when searching a way to add "closed" or "edit" classes, as @capellic had requested. However it seems the topic has drifted away. I'll drop my solution below for anyone interested.

I needed the "edit" class to highlight the section that is open. We use nested paragraphs. Even though all are set to "Autocollapse: All", the structure would be cleaner if we could change the border color of the open paragraph.

So I brute forced my way;

in ParagraphsWidget.php, to function formElement, around line 511

  $element += array(
        '#type' => 'container',
        '#element_validate' => array(array($this, 'elementValidate')),
        '#paragraph_type' => $paragraphs_entity->bundle(),
        'subform' => array(
          '#type' => 'container',
          '#parents' => $element_parents,
        ),
+       '#attributes' => [
+         'class' => [
+           'item-mode-' . $item_mode,
+          ],
+       ],
      );

Couple of questions:
1) Is there a better, more drupal-friendly way to do this? e.g., with a hook in my custom module.

2) I tried adding the class in paragraphs_preprocess_field_multiple_value_form similar to @arpad.rozsa'sa patch above, but could not get the item mode information there. Is it possible?

ps. Sorry for the mess! I'm not a professional programmer. I go around copying and tweaking other's codes.

edit: This does not add the class to the TR element, but to a div a few steps below. It misses only the tabledrag cell, good enough for our use. But it would be nice to style the complete TR line.