[Resolved] Code being stripped when converting to blocks

Home Forums Support Code being stripped when converting to blocks

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #938419
    Jodie

    Hi David, Leo and Tom

    Hope all is well with you guys.

    I am at a loss to understand why this happens.

    If I add html to a custom html block in Gutenberg and then convert to blocks, this code is stripped out style=”text-align:center”

    So in the custom html block it looks like this:
    <p style=”text-align:center”>Click To Learn More / Buy From Etsy</p>
    And if I convert to a paragraph block the style=”text-align:center”> is stripped out.
    It looks like this when looking at the code editor for the paragraph block.

    <p Click To Learn More / Buy From Etsy</p>

    I have deactivated my caching plugin and it still happens.

    What can I do please? Any help is appreciated.

    Cheers Jodie

    #938422
    Jodie

    For some reason I can’t show this <a class=”button2″ in the above.

    #938425
    Jodie

    `<p style=”text-align:center”><a class=”button2″ href=”https://www.etsy.com/au/listing/562778458/yarn-bowl-blue-pottery-yarn-ball-bowl&#8221; rel=”noopener nofollow noreferrer” target=”_blank”>Click To Learn More / Buy From Etsy</a></p>

    <p <a class=”button2″ href=”https://www.etsy.com/au/listing/182131136/emerald-green-yarn-bowl-knitting-bowl&#8221; rel=”noopener nofollow noreferrer” target=”_blank”>Click To Learn More / Buy From Etsy</a></p>

    #938436
    David
    Staff
    Customer Support

    Hi there,

    the Gutenberg Blocks have a very specific HTML structure ( and clever way this is managed in the editor ). So converting a HTML block to another block will strip any ‘alien’ markup or not allow you to do it.

    Why not just use the normal paragraph block and use the Link button to create this link? Or am i missing something?

    #938442
    Jodie

    Hi David.
    Thanks so much for your help.
    I understand.

    This link with the css shows up as a button not just a link.

    What I am doing is that I use a google doc, that has a html constructor app attached to it.
    I run the script and I get the bulk html code that I then paste into Gutenberg.

    I need to convert to blocks as I add images later.

    Another solution I have found is that if I center align that paragraph block after conversion, it works.

    I was trying to streamline all the formatting. Looking at what you said, this is not possible.

    #938444
    David
    Staff
    Customer Support

    Sorry to ask ( dumb ) questions – whats wrong with using the button block?

    #938455
    Jodie

    Hi David

    You never ask dumb questions, I am pretty sure I do!

    I just had a play with the button block in Gutenberg.

    I am guessing you would you have to set up CSS to for this – wp-block-button, so it looks the way I want.

    #938466
    Jodie

    I have had another play. I got the colors and size of the button to change with CSS but not the size of the text.
    Any ideas of how to change the text size?

    #938473
    Jodie

    I’ve worked it out!! I will keep thinking on this David.

    Thanks for letting me know about WP getting rid of what it deems alien.

    Cheers Jodie

    #938486
    David
    Staff
    Customer Support

    Awesome – glad to hear you found a solution.
    If a lot of cusomization is required i use the Additional CSS field that is provided in the Settings Sidebar > Advanced for every block. Once i am happy i would save the block as a Re-usable block, then you can just add the re-useable block each time you need one and convert it to a regular block and make the URL or content changes required.

    #938489
    Jodie

    Thanks very much David for your help and suggestions.

    Cheers Jodie

    #938501
    David
    Staff
    Customer Support

    Glad to be of ( some ) help 🙂

    #957401
    Jodie

    URRGH!! David can you please help!! I thought I was so clever and made css styling to the wp-button but now I realise that my comments button is transparent.

    If I go into Customize- Appearance- Colors- Buttons and change the button color, it affects my buttons that I have in this post – https://knitlikegranny.com/yarn-bowl/

    How the buttons look now is how I want them to look for that post.

    This is the CSS I have in my additional CSS section in Customize.

    .wp-block-button {
    width: 100%;
    max-width: 480px;
    border-radius: 100px;
    margin: 0 auto 10px;
    margin-top: 60px; margin-bottom: 60px;
    display: block;
    font-size: 19px !important;
    font-weight: 600;
    background-color: #49a964;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8bc89c), to(#49a964));
    text-decoration: none;
    color: #ffffff !important
    }
    .wp-block-button:hover{
    background-color: #eaa355; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d5b1), to(#eaa355)) ;
    color: #ffffff
    }

    How can I have a green background for button for the Comments section for all my posts?

    As always I really appreciate your help.

    Cheers Jodie

    #957595
    Leo
    Staff
    Customer Support

    David is on vacation 🙂

    I’m a little bit confused. What is the CSS above for?

    Can you please clear and disable the caching plugin first?

    #957894
    Jodie

    Hi Leo

    Hope David is enjoying his vacation 🙂

    I disabled cache plugin as you asked.

    I have been trying to automate uploading my html for posts using a custom Google script.
    Gutenberg was stripping out code it thought was alien in a paragraph block.

    I experimented with David’s suggestion of the button block.
    I added the above CSS to the additional css section in the customizer, so that the wp-block-button had this styling.

    What I then realised is that in the button settings in Generate Press, I had transparent for the background for buttons and white text, so the “Post Comment” button at the bottom of every post was “invisible”

    If I try and change the colors for buttons in the Generate press settings, this also affects the wp-block-button I was trying to style with CSS in my post.

    I was hoping there was a solution to making the Post Comment buttons have a colored background but this not affect the wp-button-block css styling.

    Does that make any more sense?

    Cheers Jodie

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