How to define custom configurable properties/styles for a block

[CROSP]

Hi, great application first of all.

I tried to find a way to define custom configurable properties for a custom block, so these properties are available for configuration on the Content or Style tabs.

Let's consider a sample button block, I want to make a background color configurable by a user in Mosaico Template Editor.

I tried the following code:

<mj-mosaico-property property-id="buttonColor" label="Button Color" type="color" default="#2BAADF"/>

<!-- Add/Update mj-mosaico-button to use buttonColor property -->
<mj-mosaico-block block-id="button_section" label="Button">
  <mj-section align="center" mj-class="button-cta-section">
    <mj-column align="center" mj-class="button-cta-section">
      <mj-mosaico-button align="center" property-id="ctaButton" font-family="Playfair, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" padding-left="10px" font-size="20px" padding-bottom="15px" padding-top="15px" background-color="{{ buttonColor }}">Read more ...</mj-mosaico-button>
    </mj-column>
  </mj-section>
</mj-mosaico-block>

However, I only see the link configuration option on the Content Tab and nothing else, as well as on the style tab.

Is there a way to achieve this? I haven't found any related articles/wikis on this matter