[Resolved] Code being stripped when converting to blocks

[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

[Jodie]

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

[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>

[David]

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?

[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.

[David]

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

[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.

[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?

[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

[David]

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.

[Jodie]

Thanks very much David for your help and suggestions.

Cheers Jodie

[David]

Glad to be of ( some ) help 🙂

[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

[Leo]

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?

[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

[Author]

Posts