Named "convention" for embed with "extra classes" #109

cavasinf · 2022-09-12T12:18:26Z

cavasinf
Sep 12, 2022
Collaborator

I'm in a dead-end with how the modal embed is done.
I want to add multiple classes to modal-body but we can't.
The only way that is open to devs, is to use modal_body_attributes with style attribute (ugly ! ⚠️).

I was about to make a PR to solve this but there are some questions:

How to handle more classes than default `Bootstrap` or `Tabler` classes?

eg: I want to add more classes to modal-body like p-0

 <div class="modal-body {{bodyExtraClass}}">
    {% block modal_body %}{% endblock %}
 </div>

 {% set _bodyClasses = "modal-body " + bodyExtraClass %}

 <div class="{{ _bodyClasses }}">
    {% block modal_body %}{% endblock %}
 </div>

Depend of your answer to above but do we name Extra classes:

bodyExtraClass
bodyClass

Does `bodyClass` override default classes?

IMO, I will not understand if I use bodyClass option, I'll loose the default modal-body.. Kinda weird to me.
But that mean that we cannot remove the default modal-body 🤔

bodyExtraClass is good to understand, but maybe too long to write..

Block VS variables

I'm not a huge fan of "floating strings" inside block to defined parameters..
Like: modal_size or modal_body_attributes

{% embed '@Tabler/embeds/modal.html.twig' %}
+   {% block modal_size %}modal-xl{% endblock %}
    {% block modal_title %}
        {{ 'action.edit_interlocutors'|trans }}
    {% endblock %}
+   {% block modal_body_attributes %}
+      {{ parent() }}
+       style="padding:0; margin-bottom: 1rem; border-bottom: 1px solid rgba(98, 105, 118, 0.16)"
+  {% endblock %}
{% endembed %}

Is that OK to uses:

Options param like macros + blocks to template

{% embed '@Tabler/embeds/modal.html.twig' with {
  modalSize : 'xl',
  modalTitle : 'action.edit_interlocutors'|trans,
  modalBodyAttributes : 'style="padding:0; margin-bottom: 1rem; border-bottom: 1px solid rgba(98, 105, 118, 0.16)"'
} %}
   {% block modal_body %}
      <h1>Here's some common HTML!</h1>
  {% endblock %}
{% endembed %}

Or only blocks

{% embed '@Tabler/embeds/modal.html.twig' %}
    {% block modal_size %}modal-xl{% endblock %}
    {% block modal_title %}
        {{ 'action.edit_interlocutors'|trans }}
    {% endblock %}
    {% block modal_body_attributes %}
       {{ parent() }}
        style="padding:0; margin-bottom: 1rem; border-bottom: 1px solid rgba(98, 105, 118, 0.16)"
   {% endblock %}
{% endembed %}

Answered by cavasinf

Sep 14, 2022

To summarize:

How to handle more classes than default Bootstrap or Tabler classes?

<div class="modal-body {% block modal_body_class %}{% endblock %}"></div>

Depend of your answer to above but do we name Extra classes:
xxxxx_class
Does bodyClass override default classes?
No ❌
Block VS variables
Blocks inside templates AND variables for macros

View full answer

kevinpapst · 2022-09-13T17:05:12Z

kevinpapst
Sep 13, 2022
Maintainer

Wow, that must have taken ages to create, well explained 👍

I think an embed works with blocks and a macro works with parameter.

Is something wrong with adding a simple block:

            <div {% block modal_body_attributes %}{% endblock %} class="modal-body {% block modal_body_class %}{% endblock %}">
                {% block modal_body %}{% endblock %}
            </div>

But that mean that we cannot remove the default modal-body 🤔

Fine with me. If you have a very special use-case, you can always use plain html with the bootstrap classes.

2 replies

cavasinf Sep 14, 2022
Collaborator Author

Wow, that must have taken ages to create, well explained 👍

20/30 minutes maybe 😄

I think an embed works with blocks and a macro works with parameter.

Ok, I'll follow that way.

Is something wrong with adding a simple block:

I'm ok with blocks, but does that syntax works inside string ?

<div class="modal-body {% block modal_body_class %}{% endblock %}"></div>

We can use block() twig function,
but I stumble with the Symfony plugin:

Overriding {% block %} works, it gives me auto-completion with the block name.
But overriding block() doesn't work very well, sometimes auto-completion works and sometimes not..
So I am not in good agreement with it..

But that mean that we cannot remove the default modal-body 🤔

Fine with me. If you a very special use-case you can always use plain bootstrap.

Good to me 👍

kevinpapst Sep 14, 2022
Maintainer

Sometimes block() is the most convenient way to create the embed. But if you find places which can be re-written & improved: please do so! This bundle is really meant to make our lives easier.

cavasinf · 2022-09-14T08:20:56Z

cavasinf
Sep 14, 2022
Collaborator Author

To summarize:

How to handle more classes than default Bootstrap or Tabler classes?

<div class="modal-body {% block modal_body_class %}{% endblock %}"></div>

Depend of your answer to above but do we name Extra classes:
xxxxx_class
Does bodyClass override default classes?
No ❌
Block VS variables
Blocks inside templates AND variables for macros

4 replies

kevinpapst Sep 14, 2022
Maintainer

✔️
I didn't think it through entirely and it my be inconsistent in the existing files... but from what I remember my idea was: empty blocks are called xxx_class and yyy_classes if they already contain pre-set classes, which can be overwritten.
What do you mean?
That's how I used them. Not sure if there is some kind of "best practice" out there. It is really just something I am used to.

cavasinf Sep 14, 2022
Collaborator Author

✔️
I've never seen yyy_classes in TablerBundle, maybe for AdminLteBundle but not there..
But good idea 👍
AS you answer in "point 2", singular variable/block should not override default classes.
If it does, variable name will be in plural.

cavasinf said:
Does bodyClass override default classes?

bodyClass (singular) doesn't override default classes.

Card embed is the most chaotic template but the more complete!
Deeper dive into that for an example:

Blocks VS variables

I'm looking at the first <div> (L18)
We have a mix of everything in there:

Variables :
1. _id
2. _margin_bottom
Blocks:
1. block_class
2. block_attributes

kevinpapst said:
Is something wrong with adding a simple block

It's not the case here.. 🤐

Blocks usage: `box_class` VS `box_title`

`box_class`

Has no needs to be HTML (why block then ?)

Pros:

Auto-completion ✔️

Cons:

Condition is really long.......

{% if block('box_class') is defined %} {{ block('box_class') }}{% endif %}

`box_title`

Can be HTML

Pros:

Is contained in variable AND conditional (if not defined)

{% set _title = block('box_title') is defined ? block('box_title') : null %}

Short to use in templating

Cons:

No Auto-completion ❌

kevinpapst Sep 14, 2022
Maintainer

I totally agree with "the most chaotic"!

The history of the embed is terribly old. It came from the original AdminBundle, which I forked to AdminLTeBundle, then used for a couple of years and the re-used in TablerBundle. And I agree that it would need a refactor - but I am not going to do that. Switching my app from AdminLTE to Tabler was a pain and this embed is used literally on every page with all kind of usage combinations.

We can add a "better card" embed and/or try to create wrapper, but changing the current setup would mean hours of work due to BC breaks.

Regarding the unseen "yyy_classes" blocks: yep, you are right and I am wrong, seems I should check the bundle before writing publicly ... but I still like the idea 😁

cavasinf Sep 14, 2022
Collaborator Author

We can add a "better card" embed and/or try to create wrapper

"i know what i have to do but i don't know if i have the strength to do it" - Star wars

Final words..
Embeds should not have variables ? (not like card embed)
I'm not 100% convinced by that 😟

Back to modal embed for modal_size example:

<div class="modal-dialog {% block modal_size %}modal-lg{% endblock %}">

Why Using block for a class string ?
Why Have to set modal-sm or modal-md as block instead of sm or md
Reason : Because block will be ugly? 😉

<div class="modal-dialog modal-{% block modal_size %}lg{% endblock %}">

Why not simply use a variable to be more simple:

{% set _modalSize = "modal-" ~ modalSize|default("lg") %}

<div class="modal-dialog {{ _modalSize }}">

In a more complex template, it is hard to find which parameter is used to customize that embed.
But when everything is at the top of the file inside parameter, it's more fluid to read/find what you are looking for.

TablerBundle/templates/components/accordion.html.twig

Lines 1 to 10 in 908548e

    
           {% macro accordion(items, options) %} 
        
               {# Options #} 
        
               {% set _id = options.id ?? ('accordion-' ~ random(0, 999)) %} 
        
               {% set _raw = options.raw ?? true %} 
        
               {% set _flush = options.flush ?? false %} 
        
               {% set _always_open = options.alwaysOpen ?? false %} 
        
               {% set _extraClass = options.extraClass ?? '' %} 
        
               <div id="{{ _id }}" class="accordion {% if _flush == true %}accordion-flush{% endif %} {{ _extraClass }}">

Huge point for blocks is that they have auto-completion if used directly in HTML, not like variables.
BUT IMO:

blocks are a good way to defined that this "variable" can contain HTML
variables are for strings/arrays/... NOT HTML

I know we can do something like this:

{% block modal_size "modal-xl" %}

But I really don't like it! My dead ass brain 🧠 keep looking for the endblock tag..

kevinpapst · 2022-09-15T10:40:31Z

kevinpapst
Sep 15, 2022
Maintainer

The last example is really ugly, I never used that.

For 2 & 3 I would say: less flexible. You could use your own class for the sizing {% block modal_size %}mysize{% end block %} or even "hack" another class into it {% block modal_size %}modal-sm myclass{% end block %}.

I am really not an evangelist who preaches a way of doing something in a certain way, just trying to find a good solution that is understandable to bundle users. It is just my personal feeling, that it is counter-intuitive to pass variables to an embed.
But for me at the end it is about solving an requirement^^

If you find your force 😁 please post a rewritten embed and I will give it a try!

1 reply

cavasinf Sep 15, 2022
Collaborator Author

You could use your own class for the sizing

Good point if your custom class is not prefixed by modal-.

I am really not an evangelist who preaches a way of doing something in a certain way

Me neither, just here to discuss/exchange about what is the "better" way to do things 👍

it is counter-intuitive to pass variables to an embed

embed is like extend but with block in it.
embed is also like include but with blocks.
Both of them allows variables.

If you find your force 😁 please post a rewritten embed and I will give it a try!

Maybe when I have more time 😄 or holidays ? 🤔

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Named "convention" for embed with "extra classes" #109

{{title}}

Replies: 3 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Named "convention" for embed with "extra classes" #109

cavasinf Sep 12, 2022 Collaborator

How to handle more classes than default Bootstrap or Tabler classes?

Depend of your answer to above but do we name Extra classes:

Does bodyClass override default classes?

Block VS variables

Replies: 3 comments · 7 replies

kevinpapst Sep 13, 2022 Maintainer

cavasinf Sep 14, 2022 Collaborator Author

kevinpapst Sep 14, 2022 Maintainer

cavasinf Sep 14, 2022 Collaborator Author

kevinpapst Sep 14, 2022 Maintainer

cavasinf Sep 14, 2022 Collaborator Author

Blocks VS variables

Blocks usage: box_class VS box_title

box_class

Pros:

Cons:

box_title

Pros:

Cons:

kevinpapst Sep 14, 2022 Maintainer

cavasinf Sep 14, 2022 Collaborator Author

kevinpapst Sep 15, 2022 Maintainer

cavasinf Sep 15, 2022 Collaborator Author

cavasinf
Sep 12, 2022
Collaborator

How to handle more classes than default `Bootstrap` or `Tabler` classes?

Does `bodyClass` override default classes?

Replies: 3 comments 7 replies

kevinpapst
Sep 13, 2022
Maintainer

cavasinf Sep 14, 2022
Collaborator Author

kevinpapst Sep 14, 2022
Maintainer

cavasinf
Sep 14, 2022
Collaborator Author

kevinpapst Sep 14, 2022
Maintainer

cavasinf Sep 14, 2022
Collaborator Author

Blocks usage: `box_class` VS `box_title`

`box_class`

`box_title`

kevinpapst Sep 14, 2022
Maintainer

cavasinf Sep 14, 2022
Collaborator Author

kevinpapst
Sep 15, 2022
Maintainer

cavasinf Sep 15, 2022
Collaborator Author