What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

I have a problem regarding the WYSIWYG editor in `Zed > Content > Block > Edit Placeholder`

Options
U03D9KKPK2T
U03D9KKPK2T Posts: 29 🧑🏻‍🚀 - Cadet

I have a problem regarding the WYSIWYG editor in Zed > Content > Block > Edit Placeholder Pages.
It changes my twig loops on save or if I change back to normal view after editing the code in code view.

Is there a place in the code where I can look into its reformatting behaviour or disable it altogether?
I'll put a code example in the thread.

Comments

  • U03D9KKPK2T
    U03D9KKPK2T Posts: 29 🧑🏻‍🚀 - Cadet
    edited September 2022
    Options

    Just to demonstrate what's happening:

    {% for shipmentGroup in mail.shipmentGroups %}
      <p>lot of</p><span>valid html</span>
      {% for item in shipmentGroup.items %}
        <more> valid </html>
      {% endif %}
    {% endif %}
    

    That is transformed into this:

    {% for shipmentGroup in mail.shipmentGroups %}
      {% for item in shipmentGroup.items %}
      {% endif %}
      <p>lot of</p><span>valid html</span>
      <more> valid </html>
    {% endif %}
    

    I checked the html for validity using html linting tools after removing twig tags.

  • U03D9KKPK2T
    U03D9KKPK2T Posts: 29 🧑🏻‍🚀 - Cadet
    Options

    This is the complete file if anyone's wondering.

    <table class="sprykerBoxedTextBlock"  width="100%" cellspacing="0" cellpadding="0" border="0">
        <!--[if gte mso 9]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">   <![endif]-->
        <tbody class="sprykerBoxedTextBlockOuter">
        <tr>
            <td class="sprykerBoxedTextBlockInner" valign="top" >
                <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]-->
                <table  class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tbody>
                    <tr>
                        <td >
                            <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                                <tbody>
                                <tr>
                                    <td class="sprykerTextContent"  valign="top">
                                        <h1 ></h1>
                                        <h1 >
                                            <br />
                                            <span >
                                  <strong>{{ 'mail.trans.order_confirmation.title' | trans }}</strong>
                              </span>
                                        </h1>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!--[if gte mso 9]>         </td>         <![endif]-->
                <!--[if gte mso 9]>         </tr>         </table>         <![endif]-->
            </td>
        </tr>
        <tr>
            <td class="sprykerBoxedTextBlockInner" valign="top" >
                <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]-->
                <table  class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tbody>
                    <tr>
                        <td >
                            <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                                <tbody>
                                <tr>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p >
                                            {{ 'mail.trans.common.hello_for_first_name' | trans }} {{ mail.order.customer.firstName }},
                                        </p>
                                        <p >
                                            {{ 'mail.trans.order_confirmation.subtitle' | trans }}
                                        </p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!--[if gte mso 9]>         </td>         <![endif]-->
                <!--[if gte mso 9]>         </tr>         </table>         <![endif]-->
            </td>
        </tr>
        </tbody>
    </table>
    <table class="sprykerTextBlock"  width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody class="sprykerTextBlockOuter">
        <tr>
            <td class="sprykerTextBlockInner"  valign="top">
                <!--[if mso]>
                <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" >
                    <tr>         <![endif]-->
                <!--[if mso]>
                <td valign="top" width="600" >         <![endif]-->
                {% for shipmentGroup in mail.shipmentGroups %}
                <table  class="sprykerTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tbody>
                    <tr>
                        <td class="sprykerTextContent"  valign="top">
                            <div ><span ></span></div>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                                <tbody>
                                <tr>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p>{{ 'mail.trans.order.order_reference' | trans }}: {{ mail.order.orderReference }}</p>
                                        <p>{{ 'mail.trans.order.order_date' | trans }}: {{ mail.order.createdAt | date }}</p>
                                        <p>
                                            {{ 'mail.trans.order.billing_address' | trans }}: {{ mail.order.billingAddress.address1 }} {{ mail.order.billingAddress.address2 }} {{
                                            mail.order.billingAddress.address3 }} {{ mail.order.billingAddress.zipCode }} {{ mail.order.billingAddress.city }} {{ mail.order.billingAddress.region }}
                                        </p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                                <tbody>
                                <tr>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p>{{ 'mail.trans.order.subtotal' | trans }}</p>
                                        <p>{{ 'mail.trans.order.shipment_costs_total' | trans }}</p>
                                        {% for shipmentGroup in mail.shipmentGroups %}
                                        <p >{{ shipment_method(shipmentGroup.shipment.method) }}</p>
                                        {% endfor %}
                                        <p>{{ 'mail.trans.order.discounts_total' | trans }}</p>
                                        {% for discount in mail.order.calculatedDiscounts %}
                                        <p >{{ discount.displayName }}</p>
                                        {% endfor %}
                                        <p>{{ 'mail.trans.order.taxes' | trans }}</p>
                                        <p ><strong>{{ 'mail.trans.order.grand_total' | trans }}</strong></p>
                                    </td>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p ><strong>{{ mail.order.totals.subtotal | default(0) | money }}</strong></p>
                                        <p ><strong>{{ mail.order.totals.expenseTotal | default(0) | money }}</strong></p>
                                        {% for shipment in mail.order.expenses %}
                                        <p ><strong>{{ shipment.sumPriceToPayAggregation | default(0) | money }}</strong></p>
                                        {% endfor %}
                                        <p>‎‏‏‎ ‎</p>
                                        <!-- Invisible character to get the proper space -->
                                        {% for discount in mail.order.calculatedDiscounts %}
                                        <p ><strong>- {{ discount.sumAmount | default(0) | money }}</strong></p>
                                        {% endfor %}
                                        <p ><strong>{{ mail.order.totals.taxTotal.amount | default(0) | money }}</strong></p>
                                        <p ><strong>{{ mail.order.totals.grandTotal | default(0) | money }}</strong></p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="sprykerTextContent"  valign="top">
                            <div >
                      <span >
                          {{ 'mail.trans.order.shipment_for_number.part1' | trans }} {{ loop.index }} {{ 'mail.trans.order.shipment_for_number.part2' | trans }} {{ mail.shipmentGroups.count() }}
                      </span>
                            </div>
                            <p >
                                {{ 'mail.trans.order.delivery_address' | trans }}: {{ shipmentGroup.shipment.shippingAddress.firstName }} {{ shipmentGroup.shipment.shippingAddress.lastName }},
                                {{ shipmentGroup.shipment.shippingAddress.address1 }} {{ shipmentGroup.shipment.shippingAddress.address2 }} {{ shipmentGroup.shipment.shippingAddress.address3 }}
                                {{ shipmentGroup.shipment.shippingAddress.zipCode }} {{ shipmentGroup.shipment.shippingAddress.city }} {{ shipmentGroup.shipment.shippingAddress.region }}
                            </p>
                            <p >{{ 'mail.trans.order.delivery_method' | trans }}: {{ shipment_method(shipmentGroup.shipment.method) }}</p>
                        </td>
                    </tr>
                    {% for item in shipmentGroup.items %}
                    <tr>
                        <td >
                            <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                                <tbody>
                                <tr>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p><strong>{{ item.name }} - {{ 'customer.order.item_sku' | trans }}: {{ item.sku }}</strong></p>
                                        <p >{{ 'mail.trans.order.quantity' | trans }}: {{ item.quantity }}</p>
                                    </td>
                                    <td class="sprykerTextContent"  valign="top">
                                        <p ><strong>{{ item.sumPrice | default(0) | money }}</strong></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="sprykerTextContent" colspan="2"  valign="top">
                                        {% for option in item.productOptions %}
                                        <p >+ {{ option.groupName }}: {{ option.sumPrice | default(0) | money }}</p>
                                        {% endfor %}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% endfor %}
                <!--[if mso]>         </td>         <![endif]-->
                <!--[if mso]>         </tr>         </table>
                <![endif]-->
            </td>
        </tr>
        </tbody>
    </table>
    <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
    <!-- // END TEMPLATE -->
    
  • U03D9KKPK2T
    U03D9KKPK2T Posts: 29 🧑🏻‍🚀 - Cadet
    Options

    For future reference:
    The WYSIWYG editor uses proper JS methods to let the browser render the html before saving (.append() and .innerHTML )
    So the browser fails at interpreting twig for loops and such and thus, rearranges the html.

    All in all: Zed CMS Blocks are not really made for usage with twig.