[Meta] Rebuild using Bootstrap 5 and Single Directory Components

@thejimbirch: What do you think of replacing some of the bp fields with paragraphs behavior plugins? Data for these plugins are directly stored in paragraphs item table, which reduce amount of DB load to get data from each field table to grep all paragraphs related data.

For example of possible fields for replacement with paragraphs behavior plugin:

• Background field
• Width field
• Accordion: Show fields
• Carousel: Slide Interval field
• ...

That would be cool. We were trying to keep the data structure the same to be able to try an upgrade path, but that is getting harder and harder.

Do you have an example of paragraphs behavior plugins? I have never done that before.

@thejimbirch If you have time, we could do a Slack huddle in the next days, than I could show you how we integrated them in our projects. They are not BP related, but to get a first overview it helps also I think.

For a possible upgrade path and other best practices with these plugins I think we need to connect with @Berdir, @miro_dietiker as paragraphs module maintainers to get some input from them.

Here an example paragraphs behavior size plugin from on of our projects.

src/Plugin/paragraphs/Behavior/ParagraphsSizePlugin.php

<?php

namespace Drupal\example\Plugin\paragraphs\Behavior;

use Drupal\Component\Utility\Html;
use Drupal\Core\Entity\Display\EntityViewDisplayInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\paragraphs\Entity\Paragraph;
use Drupal\paragraphs\ParagraphInterface;
use Drupal\paragraphs\ParagraphsBehaviorBase;

/**
 * Provides different sizes for paragraphs.
 *
 * @ParagraphsBehavior(
 *   id = "size",
 *   label = @Translation("Size of paragraph"),
 *   description = @Translation("Allows to choose pre-defined size of a paragraph."),
 *   weight = 0
 * )
 */
class ParagraphsSizePlugin extends ParagraphsBehaviorBase {

  /**
   * Const for default paragraphs size.
   */
  const DEFAULT_SIZE = 'medium';

  /**
   * Get paragraphs sizes.
   *
   * @return string[]
   *   Return assoc array with possible paragraphs sizes.
   */
  protected function getParagraphsSizes() {
    return [
      'small' => 'Small',
      'medium' => 'Medium',
      'large' => 'Large',
      'xlarge' => 'X-Large',
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function defaultConfiguration() {
    return [
      'paragraph_size' => self::DEFAULT_SIZE,
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function buildBehaviorForm(ParagraphInterface $paragraph, array &$form, FormStateInterface $form_state) {
    $size_options = $this->getParagraphsSizes();

    // Create a unique id for the wrapper.
    $wrapper_id = Html::getUniqueId('size-wrapper');
    $form['size_wrapper'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => [
          'paragraphs-plugin-inline-container',
          'paragraphs-size-select',
        ],
        'id' => $wrapper_id,
      ],
    ];
    $form['size_wrapper']['size'] = [
      '#type' => 'select',
      '#title' => $this->t('Size'),
      '#options' => $size_options,
      '#default_value' => $paragraph->getBehaviorSetting($this->getPluginId(), 'size', self::DEFAULT_SIZE),
      '#attributes' => ['class' => ['paragraphs-plugin-form-element']],
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function submitBehaviorForm(ParagraphInterface $paragraph, array &$form, FormStateInterface $form_state) {
    $paragraph->setBehaviorSettings($this->pluginId, $form_state->getValues()['size_wrapper']);
  }

  /**
   * {@inheritdoc}
   */
  public function settingsSummary(Paragraph $paragraph) {
    $summary = [];
    $sizes = $this->getParagraphsSizes();
    if ($size = $paragraph->getBehaviorSetting($this->getPluginId(), 'size', self::DEFAULT_SIZE)) {
      $summary = [
        [
          'label' => $this->t('Size'),
          'value' => $sizes[$size],
        ],
      ];
    }
    return $summary;
  }

  /**
   * {@inheritdoc}
   */
  public function view(array &$build, Paragraph $paragraph, EntityViewDisplayInterface $display, $view_mode) {
    // @todo Implement view() method for non-GraphQL.
    return [];
  }

}

kerrymick → closed merge request !13