Add drowl_paragraphs_styles_ui complex style selector as classes ui

Created on 8 March 2023, almost 2 years ago
Updated 9 March 2023, almost 2 years ago

Problem/Motivation

Entering classes for more complex styles manually isn't user-friendly.

Instead, predefined styles should be simply selectable in the UI. @thomas.frobieter prepared this wonderful screendesign:

Steps to reproduce

Proposed resolution

Provide the following building blocks in a drowl_paragraphs_styles_ui submodule:

  1. JavaScript classes UI (like in the screendesign), writing its classes into the existings Expert settings > classes field
  2. Provide an array / JS Object defined in the module which provides the styles definitions like this:
    $styleDefinitions = [
      'boxStyleBlack' => [
        'label' => $this->t('Box Style: Black'),
        'classesString' => 'box-style box-style--black',
        'description' => $this->t('Lorem ipsum dolar sit'),
        'iconPath' => 'images/boxStyleBlack.svg',
      ];
    ];
    

    Provide this as setting (Json) for the JS.

  3. Make the array alterable via an alter hook, so the definition can be adjusted (added, modified, removed) project-specific

In the future this may become obsolete, once we decide to switch to https://www.drupal.org/project/style_options β†’

Remaining tasks

  • [x] Add css and make it scoped on the widget
  • [x] JS:
    • Update the JS with your latest code, but only within the START - END.
    • Note that the functions are internal due to the nesting. If they can not be called, please contact me to rewrite the syntax.
    • styles has been renamed consistently to styleDefinitions, but please check the console.log first, if it's correctly passed from PHP
    • The classes-field query selector must be relative to the UI initialized and the UI must be scoped for each paragraph settings form, as of course it should work with * paragraph settings forms opened.
  • [x] PHP:
    • Define all default styles provided by the module in drowl_paragraphs_styles_ui.module
    • The iconPath needs to be provided absolute. See .api.php for examples, when implementing a hook in your theme. But be careful, it's also untested yet!

User interface changes

API changes

Data model changes

✨ Feature request
Status

Fixed

Version

4.0

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024