- This topic has 22 replies, 3 voices, and was last updated 9 months, 3 weeks ago by David.
June 23, 2019 at 3:42 am #938419Jodie
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.
I have deactivated my caching plugin and it still happens.
What can I do please? Any help is appreciated.
Cheers JodieJune 23, 2019 at 3:47 am #938422Jodie
For some reason I can’t show this <a class=”button2″ in the above.June 23, 2019 at 3:49 am #938425Jodie
`<p style=”text-align:center”><a class=”button2″ href=”https://www.etsy.com/au/listing/562778458/yarn-bowl-blue-pottery-yarn-ball-bowl” 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” rel=”noopener nofollow noreferrer” target=”_blank”>Click To Learn More / Buy From Etsy</a></p>June 23, 2019 at 4:10 am #938436DavidStaffCustomer Support
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?June 23, 2019 at 4:24 am #938442Jodie
Thanks so much for your help.
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.June 23, 2019 at 4:31 am #938444DavidStaffCustomer SupportJune 23, 2019 at 4:44 am #938455Jodie
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.June 23, 2019 at 5:03 am #938466Jodie
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?June 23, 2019 at 5:08 am #938473Jodie
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 JodieJune 23, 2019 at 5:44 am #938486DavidStaffCustomer 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.June 23, 2019 at 5:50 am #938489Jodie
Thanks very much David for your help and suggestions.
Cheers JodieJune 23, 2019 at 6:18 am #938501DavidStaffCustomer SupportJuly 14, 2019 at 7:30 am #957401Jodie
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.
margin: 0 auto 10px;
margin-top: 60px; margin-bottom: 60px;
font-size: 19px !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8bc89c), to(#49a964));
color: #ffffff !important
background-color: #eaa355; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d5b1), to(#eaa355)) ;
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 JodieJuly 14, 2019 at 9:30 am #957595LeoStaffCustomer SupportJuly 14, 2019 at 5:43 pm #957894Jodie
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?
- You must be logged in to reply to this topic.