Sign in

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

  • This topic has 1 reply, 2 voices, and was last updated 5 days, 17 hours ago by .
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6565
    shaun2k

    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

    #6579
    Tomasz Dziuda

    Hi,

    You can try to override field:

    block_formats: ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre;Code=code;Blockquote=blockquote’,
    In the TinyMCE config – maybe it will help for your case

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.