POC: For Style Plugin, Support Automatic Tag

taccsite_cms/settings.py

@@ -349,6 +349,7 @@ def gettext(s): return s
                 # SEE: https://docs.djangoproject.com/en/3.1/howto/custom-template-tags/#code-layout
                 'custom_portal_settings': 'taccsite_cms.templatetags.custom_portal_settings',
                 'tacc_uri_shortcuts': 'taccsite_cms.templatetags.tacc_uri_shortcuts',
+                'preferred_tag_for_class': 'taccsite_cms.templatetags.preferred_tag_for_class',
             },
             'loaders': [
                 'django.template.loaders.filesystem.Loader',
@@ -594,15 +595,13 @@ def get_subdirs_as_module_names(path):
     'c-nav', # bare-bones instance
     'c-nav c-nav--boxed',
 ]
+DJANGOCMS_STYLE_TAGS_DEFAULT = 'Automatic'
 DJANGOCMS_STYLE_TAGS = [
-    # Even though <div> is often NOT the most semantic choice;
-    # CMS editor may neglect tag, any other tag could be inaccurate,
-    # and <div> is never inaccurate; so <div> is placed first 😞
-    # RFE: Support automatically choosing tag based on class name
-    # SEE: https://github.com/TACC/Core-CMS/pull/432
-    'div',
+    # CMS editor may neglect tag so we support intelligent tag choice
+    # SEE: taccsite_cms/templatetags/preferred_tag_for_class.py
+    DJANGOCMS_STYLE_TAGS_DEFAULT,
     # Ordered by expected usage
-    'section', 'article', 'header', 'footer', 'aside', 'nav',
+    'section', 'article', 'header', 'footer', 'aside', 'nav', 'div',
     # Not expected but not unreasonable
     'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
 ]
@@ -652,7 +651,7 @@ def get_subdirs_as_module_names(path):
 ]
 
 ########################
-# IMPORT & EXPORT
+# SETTINGS IMPORT & EXPORT
 ########################
 
 try:
@@ -688,6 +687,7 @@ def get_subdirs_as_module_names(path):
     'INCLUDES_SEARCH_BAR',
     'GOOGLE_ANALYTICS_PROPERTY_ID',
     'GOOGLE_ANALYTICS_PRELOAD',
+    'DJANGOCMS_STYLE_TAGS_DEFAULT'
     'TACC_BLOG_SHOW_CATEGORIES',
     'TACC_BLOG_SHOW_TAGS',
     'TACC_CORE_STYLES_VERSION',

taccsite_cms/templates/djangocms_style/default/style.html

@@ -0,0 +1,23 @@
+{% load preferred_tag_for_class %}
+
+{# SEE: https://github.com/django-cms/djangocms-style/blob/9e9ba9f/djangocms_style/templates/djangocms_style/default/style.html #}
+
+{# FAQ: CMS editor may not choose a semantic tag, so we'll do it for them #}
+{% load cms_tags %}<{# NOTE: (Begin) Change from original #}{% spaceless %}
+    {{ instance.tag_type|preferred_tag_for_class:instance.class_name }}{% endspaceless %}{# NOTE: (End) Change from original #} {% spaceless %}
+    {% endspaceless %}{% if instance.id_name %}id="{{ instance.id_name }}" {% endif %}{% spaceless %}
+    {% endspaceless %}{% if instance.class_name or instance.additional_classes %}class="{% spaceless %}
+        {{ instance.class_name }} {{ instance.get_additional_classes }}
+    {% endspaceless %}"{% endif %}{% spaceless %}
+    {% endspaceless %}{% if inline_styles %} style="{{ inline_styles }}"{% endif %}{% if instance.attributes_str %} {{ instance.attributes_str }}{% endif %}>{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% endfor %}</{# NOTE: (Begin) Change from original #}{{ instance.tag_type|preferred_tag_for_class:instance.class_name }}{# NOTE: (End) Change from original #}>{% comment %}
+    # The formatting of this file is very specific to remove unnecessary whitespaces
+    # Available variables:
+    {{ instance.label }}
+    {{ instance.tag_type }}
+    {{ instance.class_name }}
+    {{ instance.additional_classes }} or {{ instance.get_additional_classes }}
+    {{ instance.id_name }}
+    {{ instance.attributes_str }}
+    {{ instance.padding_top|right|bottom|left }} or {{ inline_styles }}
+    {{ instance.margin_top|right|bottom|left }} oe {{ inline_styles }}
+{% endcomment %}

taccsite_cms/templatetags/preferred_tag_for_class.py

@@ -0,0 +1,38 @@
+from django import template
+
+from django.conf import settings
+
+register = template.Library()
+
+def preferred_tag_for_class(tag, classname):
+    """
+    Custom Template Tag Filter `preferred_tag_for_class`
+
+    Use: Get the preferred HTML tag to use for a given class
+
+    Load custom tag into template:
+        {% load preferred_tag_for_class %}
+
+    Template inline usage:
+        {% fallback_tag|preferred_tag_for_class:classname %}
+
+    Example:
+        {% with tag=instance.tag_type|preferred_tag_for_class:classname %}
+            <{{ tag }}">{% instance.tag_type %}</{{ tag }}>
+        {% endwith %}
+    """
+    new_tag = tag
+
+    # If user chose div, they
+    if (tag == settings.DJANGOCMS_STYLE_TAGS_DEFAULT):
+        if      (classname == 'o-section o-section--style-light' or
+                 classname == 'o-section o-section--style-dark'):
+            new_tag = 'section'
+        elif    (classname == 'c-callout' or
+                 classname == 'c-recognition c-recognition--style-light' or
+                 classname == 'c-recognition c-recognition--style-dark'):
+            new_tag = 'aside'
+
+    return new_tag
+
+register.filter('preferred_tag_for_class', preferred_tag_for_class)