Templatetag component with blocks

Using Django Templates & Frontend
1

I have a modal which I want to turn into a templatetag component. The template needs to ammodate parameters, blocks, and extra content. An example of the template is below. I have something working for the args, and extract content (which is just injected to a {{ content }} tag. But I’m not sure how to do the blocks. Can anyone help?

template

<div id="{{ id|default:'modal-0' }}"
     data-modal-placement="{{ placement|default:'center-center' }}"
     {% include 'common/components/attrs.html' %}>
  <div class="relative h-full w-full p-4 md:h-auto {{ size|default:'max-w-2xl' }}">
    <div class="relative rounded-lg bg-white shadow">
      {% block modal_header %}
        <div class="flex items-start justify-between rounded-t border-b p-4">
          <h3 class="text-xl font-semibold text-gray-900">{{ title }}</h3>
          {% block modal_close %}
            <button type="button" class="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-toggle="{{ id|default:'modal-0' }}">
              {% heroicon_outline 'x-mark' stroke_width=2 size=20 %}
              <span class="sr-only">Close modal</span>
            </button>
          {% endblock modal_close %}
        </div>
      {% endblock modal_header %}
      {% block modal_body %}
        <div class="p-6">
          {{ content }}
          {% block modal_content %}
            <p class="response-message text-base leading-relaxed text-gray-500"></p>
          {% endblock modal_content %}
        </div>
      {% endblock modal_body %}
      {% block modal_footer %}
        <div class="flex justify-end space-x-2 rounded-b border-t border-gray-200 p-6">
          {% block modal_buttons %}
          {% endblock modal_buttons %}
        </div>
      {% endblock modal_footer %}
    </div>
  </div>
</div>

class RenderComponentNode(template.Node):

    def __init__(self, template_name, context_args, context_kwargs, nodelist):
        self.template_name = template_name
        self.context_args = context_args or {}
        self.context_kwargs = context_kwargs or {}
        self.nodelist = nodelist

    def render(self, context):
        resolved_context_args = {
            key: (value.resolve(context) if not isinstance(value, str) else value)
            for key, value in self.context_args.items() if value
        }
        resolved_context_kwargs = {
            key: (value.resolve(context) if not isinstance(value, str) else value)
            for key, value in self.context_kwargs.items() if value
        }
        content = self.nodelist.render(context)

        ctx = {'content': content, 'attrs': resolved_context_kwargs}
        ctx.update(resolved_context_args)

        return render_to_string(self.template_name, ctx)


@register.tag
def render_component(parser, token, template_name, context_args):
    try:
        tag_name, *args = token.split_contents()
    except ValueError:
        raise template.TemplateSyntaxError(f"{tag_name} tag requires at least one argument.")

    context_kwargs = {}

    for arg in args:
        try:
            name, value = arg.split('=')
            if name in context_args.keys():
                context_args[name] = parser.compile_filter(value)
            else:
                context_kwargs[name] = parser.compile_filter(value)
        except ValueError:
            context_args[arg] = None

    nodelist = parser.parse(('end_' + tag_name,))
    parser.delete_first_token()

    return RenderComponentNode(template_name, context_args, context_kwargs, nodelist)
2

any ideas on how to get blocks to pass as context via a tag?

I thought you’d be all over this @KenWhitesell?

3

Hello there!
Do you know this package django-components already? It’s pretty much what you’re trying to solve here

4

Since you tagged me, I’ll go ahead and respond.

Honestly? I don’t believe I’m understanding what you’re trying to do here. (It may just be an issue that you’re using terminology in a manner that I’m unfamiliar with.)

My gut reaction to your post was that if you’re trying to do what I think you’re trying to do, I’d be taking a completely different approach. I’d define the modal as a separate html file that would be included in the page’s html. What I think you might be trying to do with these blocks would be better represented as nested includes. I wouldn’t be approaching this as a new or custom tag.

But, you’ve been around here long enough that I would also assume that the straight-forward solution is inadequate for what you’re trying to do - and so I’m kinda stuck with no direct advice to give.

5

I wasn’t aware of django-components. Does indeed seem to do what I need, and much more. I could try and strip out the block context injection piece. Or just use it direct if that’s too difficult. Thanks for that!

6

Yeh, that’s right. I could use the template as an includes. That’s how I’m currently using it. But I’ve already converted over custom fields and other simpler components (e.g. buttons without blocks) to templatetags. And wanted to use that system for everything component wise.

Didn’t realize it would be so difficult to extract blocks from provided templatetag context, and then render my template blocks accordingly. As you say, Django does this if I use as an includes anyway.

I’ll look at django-components, and see if I can target exactly what code I need. As I already have a workable solution for how I deal with defined/ undefined parameters and other nested context tags.