POC: For Style Plugin, Support Automatic Tag

[wesleyboar]

Overview

Intelligently choose HTML tag for user choice of class (for example, in Django Style).

Tickets

• FP-1318, auto choose <section> tag for Sections created via:
  • FP-1318: Create Section Pattern via Style Plugin #430
  • FP-1318: Create Section Pattern via Bootstrap Container Plugin #431

Changes

To our default settings:

• Add preferred_tag_for_class template tag.
• Add DJANGOCMS_STYLE_TAGS_DEFAULT (custom setting).
  • to allow dev to define default tag (should probably always be div)
  • to ensure the default tag is defined in only one location
• (Optional) Add DJANGOCMS_STYLE_TAGS (docs).
  • to support a use case of DJANGOCMS_STYLE_TAGS_DEFAULT

New files:

• (Optional) Override djangocms-style template.
  • to use preferred_tag_for_class template tag
• Add preferred_tag_for_class template tag.

Screenshots

(pending)

Testing

local testing: instructions
remote testing: (not provided)

1. On any page, create a Style plugin.
2. Test default tag choice logic:
   1. Choose TAG TYPE div, CLASS NAME ---------.
   2. Confirm element added has tag of <div>.
3. Test automatic tag choice logic:
   1. Choose TAG TYPE div, CLASS NAME o-section o-section--style-light.
   2. Confirm element added has tag of <section>.
   3. Choose TAG TYPE div, CLASS NAME o-section o-section--style-dark.
   4. Confirm element added has tag of <section>.
   5. Choose TAG TYPE div, CLASS NAME c-callout.
   6. Confirm element added has tag of <aside>.
   7. Choose TAG TYPE div, CLASS NAME c-recognition c-recognition--style-light.
   8. Confirm element added has tag of <aside>.
   9. Choose TAG TYPE div, CLASS NAME c-recognition c-recognition--style-dark.
   10. Confirm element added has tag of <aside>.
4. Test manual tag choice logic:
   1. Choose TAG TYPE article, CLASS NAME o-section o-section--style-light.
   2. Confirm element added has tag of <article>.
   3. Choose TAG TYPE article, CLASS NAME o-section o-section--style-dark.
   4. Confirm element added has tag of <article>.
   5. Choose TAG TYPE article, CLASS NAME c-callout.
   6. Confirm element added has tag of <article>.
   7. Choose TAG TYPE article, CLASS NAME c-recognition c-recognition--style-light.
   8. Confirm element added has tag of <article>.
   9. Choose TAG TYPE article, CLASS NAME c-recognition c-recognition--style-dark.
   10. Confirm element added has tag of <article>.