Better Documentation and Sample Use-cases

This module would be so useful if we had a clue how to use it. Just one page of documentation would make all the difference, please.

Just wanted to support this suggestion.

Better documentation would be/have been really nice.

An few examples of how it's used would make all the difference.

First step would be to create Classy paragraphs styles.
Go to Structure / Classy paragraphs style and click on "Add Classy paragraphs style" and configure the new style.

Second step is to add a new field to reference the style just created. This can be done by editting a paragraph type and add a new "Reference" field (select Other...). In the next page select Configuration / Classy paragraphs style.

This would be a first draft. If we agree upon the content I will create a new patch to update the README.txt file within the module.

Here is a more complete README.txt draft using markdown which builds on your D7 documentation comments and @mfernea comment.

# Overview

Classy paragraphs adds a new configuration entity called Classy Paragraphs Style. Styles (list of classes) can be added (/admin/structure/classy_paragraphs_style) and then referenced via a reference field on the paragraph type. Adding the reference to this configuration entity will inject the list of classes into the {{ attributes.class }} array.

# Installation

- Install classy_paragraphs
- Add Classy paragraphs style (/admin/structure/classy_paragraphs_style)
- Add new "Reference" field on Paragraph Type using "Reference > Other..."
- Select type of item to reference: "Configuration > Classy Paragraphs Style"

# Usage

By default, the class list will added to the {{ attributes.class }} twig variable array. Insure this is added to your twig template markup. Note: if {{ attributes }} is already in your template, there is no need to add the additional .class object.

# Dependencies

- paragraphs

As per https://www.drupal.org/docs/develop/documenting-your-project/module-docu... the README file can be an md file, so I changed the file extension. There it says that the Overview should match the one on the module's page, so I used that one.
I used https://www.drupal.org/node/2181737 as a model. I merged the texts from the module's page and from #6 and added more sections.

Comments and suggestions are welcomed. :)

This is much better, the patch applied cleanly and helped a great deal, thank you.

@bdanin: Maybe it's best then to mark it as RTBC :).

+1 RTBC

Thanks!

This might not get seen, but I'm going to add to the instructions for others that end up finding this. I'd really like to see the Drupal Community putting out more guides with this level of granularity and ideally with screenshots.

Here's my workflow:

• Install classy Paragraphs: composer require drupal/classy_paragraphs
• Enable the module, either through UI or Drush:drush pm:enable classy_paragraphs
• Go to the Classy Pargraphs Config page: /admin/structure/classy_paragraphs_style or Admin Menu > Structure > Classy Paragraphs Style
• Add some styles, you can add a single class at a time or a grouping of classes. For example: a background color (single) or a default set of responsive widths for a card element (width 50% desktop, 50% tablet, 100% on mobile)
  • click the + Add Classy paragraphs style button
  • The label field is what the content builder/admin is going to see when creating paragraphs in the back end
  • The classes field will hold the classes you're going to add to the paragraph, add one per line.
  • Save the Style
  • After adding new Styles in the Classy Paragraphs Config page, clear your cache for them to become available on the front end.
• Edit your Paragraph's fields (under Admin Menu > Structure > Paragraphs or /admin/structure/paragraphs_type)
  • Go to the Manage Fields page for the paragraph you want
    • Add a new Reference Field
    • Choose Reference > Other...
    • I like to name my field "Paragraph Classes," but name it what makes sense for your team
    • Under Type of item to reference choose Configuration > Classy paragraphs style
    • Under Allowed number of values, choose Unlimited items
    • Save the field settings
    • On the Field Edit page, verify that the field name is what you want site builders to see, add help text if you want, and click Save Settings
    • The field has now been added to your field list.
  • Now head over to the Manage form display page/tab
    • Place/Order the Classy Paragraph's reference field where you want it in your field list
    • Select the type of widget you want to use (I prefer "checkboxes" or "select list" so site builders can see all the options available to them)
    • Save the Manage form display page
  • Go to the Manage display page/tab
    • Place/Order the Classy Paragraph's reference field in the Disabled section
    • Save the Manage display page
  • If you DON'T have customized TWIG templates for the paragraphs on your site, you should be done. Add some paragraphs with classes, refresh the front end and you should see your classes show up.
  • IF YOU DO HAVE CUSTOMIZED TWIG TEMPLATES for your paragraphs:
    • Note that this is what you need to check to make sure Classy Paragraphs will work properly for you.
    • Enable your services.yml file in your /web/sites/default folder, make sure it has TWIG debug turned on.
    • Clear your cache
    • Now when you inspect the code on the front-end of your site, you should be seeing the HTML comments telling you the location and name of the TWIG file you care about. Create a new TWIG file if you need to get more specific. This guide isn't going to go into a ton of TWIG detail, that's for other tutorials which are easy to find.
    • (Example below) In the file, there should be a div with {{ attributes.addClass(classes) }} as part of it. This variable is what's going to pick up the Classy Paragraphs classes, so if you've removed it or hidden it in your file, you may need to do some work to add it back in. It cannot be included in the lines: {% block paragraph %} or {% block content %}. It has to be on an HTML element.
    • Save the TWIG file, upload it back to your site
    • Clear the cache: drush cr
    • Refresh the front of the website and everything should be all good.

This is a rough example of a paragraph's twig file:

PLEASE verify with what TWIG is showing on your site. This one may be different than your site.

{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}
<div {{ attributes.addClass(classes) }}>
{% block paragraph %}
    {% block content %}
      {{ content }}
    {% endblock %}
{% endblock paragraph %}
</div>

Final Note:

After adding new Styles in the Classy Paragraphs Config page, clear your cache for them to become available on the front end.

#17 did it for me. Thank you very much! This was impenetrable otherwise.

Thanks for documenting the configuration of the module @rex.barkdoll, it's very helpful.

I have created a Merge Request for the project README.md based on your detailed documentation in #3268322: Add more detailed documentation. You can preview it at https://git.drupalcode.org/project/classy_paragraphs/-/blob/10b7efe774e1....