Contrib.social

Add drowl_paragraphs_styles_ui complex style selector as classes ui

Open on Drupal.org →
Created on 8 March 2023, over 1 year ago
Updated 9 March 2023, over 1 year 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

  • Issue created by @Anybody
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica
  • @anybody opened merge request.
  • Assigned to thomas.frobieter
  • Status changed to Needs work over 1 year ago
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica

    @thomas.frobieter: This should be more or less ready! :)

    I didn't test it, as setting it up in this state wouldn't make much sense, so please first finish the implementation and then let's have a look again together.

    Important to consider:
    - [ ] Add css and make it scoped on the widget
    - [ ] 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.
    - [ ] 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!
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica
  • Comment over 1 year ago →
    thomas.frobieter EU

    thomas.frobieter → made their first commit to this issue’s fork.

  • Issue was unassigned.
  • Status changed to Needs review over 1 year ago
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica
  • Comment over 1 year ago →
    System Message
    • Anybody → committed 3f8d59b7 on 4.x 
      Issue #3346661: Add drowl_paragraphs_styles_ui complex style selector as...
  • Status changed to Fixed over 1 year ago
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica

    Merged! :)
    Nice work @thomas.frobieter!

  • Comment over 1 year ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024