Adding “aside” container tag to WYSIWYG & BLOCK post editors

Hi,

I wanted to have an <aside> container in my posts and found out that it was possible to add a  paragraph format by adding  custom formats  to the “customElements” in the theme’s config.json.

Add to "customElements" in config.json
----------
{
   label": "Aside block-right",
   cssClasses": "post__aside",
   selector": "aside"
}

Custom css
----------
.post__aside {
  margin-top: 1.7rem;
}
@media all and (min-width: 37.5em) {
  .post__aside {
    float: right;
    margin: 1.7rem 0 1.7rem 3.4rem;
    max-width: 40%;
    position: relative;
    z-index: 1;
  }
}
.post__aside > :nth-child(1) {
  margin: 0;
}

However, unlike the “Info”, “Highlight”, “Success” and “Warning” paragraph formats which worked on a <p> paragraph selector, the <aside> paragraph style works only if there was already a block of text marked out with <aside> and </aside> selectors. End result being <aside class=”post__aside”>

My question is: how can we add <aside> as a block format like the “Pre”, “Code” or “Blockquote” paragraph blocks.

Thanks