DCF Layouts: Add section title and CSS class options

[ericras]

1) Add dcf_classes module that stores DCF classes as config 2) Add Chosen module to make multi-select better 3) Add settings to dcf_layouts layout builder form that stores a section title, title css classes, and section classes (or a package of section classes).

Not in scope: A) background images B) background patterns - these need defined by unl/wdntemplates and then the relevant classes can be easily added to config

[macburgee1]

Take a look at https://www.drupal.org/project/layout_builder_styles

[ericras]

That module gets us this:

That's useful since we could create "packages" of classes. But then when we want to add images and titles (?) to sections then we're adding more stuff on anyway.

This is the Drupalcon Lullabot presentation: https://youtu.be/84ioyh2QPBw?t=651 and I'm going to take a look at what they did with https://github.com/Lullabot/custom_layouts

[ericras]

Chosen doesn't look great in the slide out settings tray, but since we're moving to the modal eventually I ignored it

[ericras]

Also note that .dcf-inverse only affects text and not headings nor links. Something that either the unl/wdntemplates project will solve or we'll add custom CSS

[macburgee1]

UI

Newb question - Are CMS users expected to be familiar with DCF? For example, if a non-technical user is presented a list of potential classes to add to the section title, s/he probably won't know what to make of the list.

There's also one typo:

- Package of classes to apply to section.
+ Package of classes to apply to the section.

Theming

Chosen doesn't look great in the slide out settings tray, but since we're moving to the modal eventually I ignored it

I don't believe the Layout Builder Modal module moves section settings forms to a modal. If we were to override some core CSS, the Chosen interface would be usable. I'm fine deferring it to #72.

Heading Color (.dcf-inverse)

Also note that .dcf-inverse only affects text and not headings nor links. Something that either the unl/wdntemplates project will solve or we'll add custom CSS

Let's submit an issue upstream to address headings and links.

Schema

In dcf_classes.schema.yml, 'section_packages' is a sequence, not a mapping. (Its keys are unknown.) After:

    section_packages:
      type: sequence
      label: 'Section packages'
      sequence:
        type: string
        label: 'Section classes'

Before:

    section_packages:
      type: mapping
      label: 'Section packages'
      mapping:
        classes:
          type: string
          label: 'Section classes'

[macburgee1]

$ phpcs --standard=Drupal,DrupalPractice dcf_classes/

FILE: ...2/Sites/project-herbie/web/modules/custom/dcf_classes/dcf_classes.info.yml
--------------------------------------------------------------------------------
FOUND 1 ERROR AND 1 WARNING AFFECTING 2 LINES
--------------------------------------------------------------------------------
 1 | WARNING | [ ] Remove "version" from the info file, it will be added by
   |         |     drupal.org packaging automatically
 8 | ERROR   | [x] Expected 1 newline at end of file; 2 found
--------------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY
--------------------------------------------------------------------------------

FILE: .../Sites/project-herbie/web/modules/custom/dcf_classes/src/Form/Settings.php
--------------------------------------------------------------------------------
FOUND 3 ERRORS AFFECTING 3 LINES
--------------------------------------------------------------------------------
 75 | ERROR | [x] Inline comments must end in full-stops, exclamation marks,
    |       |     colons, question marks, or closing parentheses
 85 | ERROR | [x] Inline comments must end in full-stops, exclamation marks,
    |       |     colons, question marks, or closing parentheses
 95 | ERROR | [x] Inline comments must end in full-stops, exclamation marks,
    |       |     colons, question marks, or closing parentheses
--------------------------------------------------------------------------------
PHPCBF CAN FIX THE 3 MARKED SNIFF VIOLATIONS AUTOMATICALLY
--------------------------------------------------------------------------------

Time: 94ms; Memory: 8MB

The version warning can be ignored.

$ phpcs --standard=Drupal,DrupalPractice dcf_layouts/

FILE: ...2/Sites/project-herbie/web/modules/custom/dcf_layouts/dcf_layouts.info.yml
--------------------------------------------------------------------------------
FOUND 0 ERRORS AND 1 WARNING AFFECTING 1 LINE
--------------------------------------------------------------------------------
 1 | WARNING | Remove "version" from the info file, it will be added by
   |         | drupal.org packaging automatically
--------------------------------------------------------------------------------

Time: 112ms; Memory: 8MB

Looks good. The version warning can be ignored.

[macburgee1]

Re Theming, Layout Builder Restrictions does not move the off-canvas section forms to a modal. We'll need to make some CSS fixes to the forms.

[ericras]

Regarding schema, I was using the names for keys:

section_packages:
  Cream: 'dcf-bleed dcf-wrapper unl-bg-cream dcf-pt-5 dcf-pb-5'
  Scarlet: 'dcf-bleed dcf-wrapper unl-bg-scarlet dcf-inverse dcf-pt-5 dcf-pb-5'
  'Darkest Gray': 'dcf-bleed dcf-wrapper unl-bg-darkest-gray dcf-inverse dcf-pt-5 dcf-pb-5'
  'Darker Gray': 'dcf-bleed dcf-wrapper unl-bg-darker-gray dcf-inverse dcf-pt-5 dcf-pb-5'
  'Dark Gray': 'dcf-bleed dcf-wrapper unl-bg-dark-gray dcf-inverse dcf-pt-5 dcf-pb-5'
  'Light Gray': 'dcf-bleed dcf-wrapper unl-bg-light-gray dcf-pt-5 dcf-pb-5'
  'Lighter Gray': 'dcf-bleed dcf-wrapper unl-bg-lighter-gray dcf-pt-5 dcf-pb-5'
  'Lightest Gray': 'dcf-bleed dcf-wrapper unl-bg-lightest-gray dcf-pt-5 dcf-pb-5'

That's probably not ideal since the keys are what is getting stored when a user picks one during content editing. Therefore, the names (keys) will not be able to be changed. I'm not sure how this could be improved though.

[macburgee1]

Names are fine for keys. Mappings are used when you know they key value. Sequences are used when you don't. If we change section_packages to a sequence, then it doesn't matter what they key values are; they just need to be strings.

[ericras]

Follow up with Chosen CSS fixes in #80