GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
641 stars 228 forks source link

Correctly import mjml with composed attributes #197

Closed aki-ks closed 4 years ago

aki-ks commented 4 years ago

If currently a composed attribute such as "padding: 10px 20px 30px 40px" is contained in an imported template, the default values are loaded and the value from the template is ignored.

This is caused by the "style-default" attribute containing "padding-left", "padding-right", "padding-top" and "padding-bottom" for many components. These default attributes are merged with the values of the imported templates. The more specific "padding-top/bottom/left/right" attributes containing the default values will have precedence over the "padding" attribute from the template.


To reproduce the error import the following code with the latest revision of grapes-mjml and the default padding will be set for the section instead of 100px.

<mjml>
  <mj-body>
    <mj-section background-color="red" padding="100px">
      <mj-column>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Now in comparison import the following mjml which displays with a padding of 100px. If you compile both examples with the mjml compiler or at https://mjml.io/try-it-live/, both will have a padding of 100px.

<mjml>
  <mj-body>
    <mj-section background-color="red" padding-left="100px" padding-right="100px" padding-top="100px" padding-bottom="100px">
      <mj-column>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
DRoet commented 4 years ago

thanks! released in v0.2.6