Additional classes for Paragraph items

[TobyWild]

Paragraphs main wrapper class is only "field__item", which is also a class given to children.

So for a page that has a number of components down the page, and one of those items is an 'Item List', which has two generic 'Items' that are displayed as a two column layout.

However this means the main container has .fielditem, the item list has .fielditem, the item has .field__item

So if you target .field__item, it ends up cascading into all the fields, but this is also the only effective selector to control the layout of the elements.

It would be ideal if a delta for the paragraph could be added at this level, in order to more easily target specific containers.

Thoughts?

[Benjen]

@TobyWild I was having a similar issue on a project where I needed to style a particular page component on a page. I was not easily able to target that particular component as there was more than one component on the page. I ended up creating a preprocess function which adds a class "paragraph-id-ID" (e.g. paragraph-id-12) to the paragraph container.

/**
 * Implements hook_preprocess_HOOK().
 */
function govcms8_uikit_starter_preprocess_paragraph(array &$variables) {
  // Add class "paragraph-id-ID" to paragraph wrapper.
  $variables['attributes']['class'][] = 'paragraph-id-' . $variables['paragraph']->id();
}

I have created a pull request to include this functionality in the govcms8_uikit_starter theme.