Grouping options

Hi, i've made some progress with this but I'm stuck on one thing.

Steps i've made:
created a group plugin
add the group/s in the yml
add the option group: [group_name] in the yml of the others "options"
in the other plugins i've added the '#group' => ['group_name'] using this aproach

$form['fieldset_new'] = [
      '#type' => 'fieldset',
      '#title' => $this->t('Fieldset'),
];

$form['message'] = [
      '#type' => 'textarea',
      '#title' => $this->t('Message'),
      '#required' => TRUE,
      '#group' => 'fieldset_new',
];

https://zanzarra.com/blog/group-attribute-drupal-8-form-api-explained

I've tested this in another form and it works well, but in style options the fields are not grouped with their relative parent.

Anyone know what's going on?

I finally had time to figure out how to do it.

I attach some before and after screenshots, but in the end the difference is that it allows you to specify a new plugin group that you can use as an option in the other plugins to be displayed within the plugin group you have specified.

Example in the *.style_options.yml

  align_group:
    plugin: group
    label: Align

  align_box:
    plugin: css_class
    label: Box Align
    default: None
    group: align_group
    options:
      none:
        label: None
        image: /modules/contrib/mercury_editor/images/icons/align-none.svg
      left:
        label: Left
        class: u-align-left
        image: /modules/contrib/mercury_editor/images/icons/align-left.svg
      center:
        label: Center
        class: u-align-center
        image: /modules/contrib/mercury_editor/images/icons/align-center.svg
      right:
        label: Right
        class: u-align-right
        image: /modules/contrib/mercury_editor/images/icons/align-right.svg

  align_content:
    plugin: css_class
    label: Content Align
    default: None
    group: align_group
    options:
      none:
        label: None
        image: /modules/contrib/mercury_editor/images/icons/align-none.svg
      left:
        label: Left
        class: u-align-left
        image: /modules/contrib/mercury_editor/images/icons/align-left.svg
      center:
        label: Center
        class: u-align-center
        image: /modules/contrib/mercury_editor/images/icons/align-center.svg
      right:
        label: Right
        class: u-align-right
        image: /modules/contrib/mercury_editor/images/icons/align-right.svg

Without patch, and there are not a lot options, we have mora than 20 options.

With the patch

With only the style options the groups appear as the details element of the core, but I have also made an integration with the mercury editor so that they appear as tabs inside the tab style. I will edit this comment to put the issue to Mercury editor for this.

Also I have seen that the Drupal core now only supports some elements that can be children. For example a checkbox supports it, but not the Radios or a Select. This is a patch that makes it support it: https://www.drupal.org/project/drupal/issues/2190333 📌 Make #group FAPI / render feature work on all form/render #types out of the box Needs work

I've made one main change:

Tabs: Now the groups is viewed as tabs. I've used the same code as Mercury editor for the tabs (css and js) because i didn't want to make mercury editor a dependency of this feature.

Although i recommend using this with Mercury Editor because it's more usable:

I think it mostly works with the theme you're using for your backend.

Example in the my style_options.yml:

align_group:
  plugin: group
  label: Align

  align_box:
  plugin: css_class
  label: Box Align
  default: None
  group: align_group
  options:
    none:
      label: None
    left:
      label: Left
      class: u-align-left
    center:
      label: Center
      class: u-align-center
    right:
      label: Right
      class: u-align-right

align_content:
  plugin: css_class
  label: Content Align
  default: None
  group: align_group
  options:
    none:
      label: None
    left:
      label: Left
      class: u-align-left
    center:
      label: Center
      class: u-align-center
    right:
      label: Right
      class: u-align-right

paragraphs:
    _defaults:
      options:
        ...
        align_group: true
        align_content: true
        align_box: true

I'm using this with Mercury editor, i don't remember now, but maybe I'm basing it on something that's from the mercury.