wrap a block in a div with custom html
-
this breaks whenever i reload the page editor into visual
<!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:html --> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/cobblestone-and-person-with-shadow-e1662327745888.jpg" alt="It's a picture of a stark brickwork lot with a woman in a black blazer and pants facing away from the camera casting a seven o clock shadow on the brick ground." class="headerImage"> <div id="pageHeader"> <h1 id="seeClear" class="pageHeaderText">See Things Clearly with Sammy & Be Inspired to Look at it this Way</h1> <a href="https://www.amazon.com/dp/1954968612/ref=cm_sw_r_sms_api_glt_i_SS83Z2PJH7AJ9RT72QC2" class="cta">Look at it this way</a> </div> <div class="pContainer"> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/Copy-of-6-e1662329100303.jpg" alt="It's a picture of Sammy with her million dollar smile! She is sporting a pair of semi wrap around sunglasses. Around her neck is four necklaces, the large medium and small ones are made of perl beads and the last is a medium size chain with two rows of large dark cut and polished stones. She is wearing a top with a post modernism plants in different shades of blue" class="imageL"> <h1 class="pTagTitle">About Sammy</h1> <p class="justified"> Sammy SweetSpirit is an author, motivational speaker, accessibility consultant, and singer/songwriter. Her album, Something For Everyone, was released to digital music stores in 2019. Her powerful message in her book Look At It This Way, invites us to have a clearer understanding of people who are blind, and a deeper experience of connecting with each other. </p> <a href="https://sammysweetspirit.com/about/" class="cta">Read More</a> </div> <div class="clear"></div> <div class="line"></div> <div class="carousel"> <h1 class="pTagTitle">Sammy has been featured on...</h1> [slide-anything id="257"] </div> <div class="line"></div> <div class="pContainer"> <h1 class="pTagTitle">Look at it This Way</h1> <p class="justified bottomGap"> <b>Look at it This Way</b> is a powerful book that creates a conversation around the topic of blindness. It answers questions we all may have been reluctant to ask, it gives us a glimpse into what blind people experience living in a sighted world, and it breaks through barriers that may cause people to think that differences equate to superiority or inferiority. There is an open discussion about the challenges blind people face, and how those challenges can be overcome, by creating a space of understanding and awareness between people who are sighted and people who are blind. This book invites us to remember how connected all of us truly are, and gives us ways to strengthen our bonds with each other, whether we can see or not. </p> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/03/Book-Cover.jpg" alt="The front cover of Sammy's book Look at it This Way. It shows the sun peeking over the second O in look with at it This Way in a zany cursive below the bold LOOK. Below the cursive it states The Blind Leading the Sighted in smaller block lettering. below that is a woman with long blond hair wearing a white blouse and a black long skirt looking out over a body of water. at the bottom of the cover is Sammy SweetSpirit in bold block with Foreword By Neale Donald Walsch"> <a href="https://www.amazon.com/dp/1954968612/ref=cm_sw_r_sms_api_glt_i_SS83Z2PJH7AJ9RT72QC2" class="cta">Buy Now!</a> </div> <div class="pContainer"> <p class="justified bottomGap"> I am inspired by and grateful to the author - a young lady whose lack of sight has caused her no lack of insight at all. </p> <p> - Neale Donald Walsch, Author of the <i>Conversations with God</i> series </p> </div> <div class="line"></div> <div class="contactContainer"> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/contact1.jpg" alt="It's a picture of 2 arrows pointing at a phone with a contact form on the screen. the phone is on a desk with various office supplies scattered around it." class="imageR"> <p class="justified bottomGap"> Interested in interviewing Sammy? Want to inquire about ways to make your company more accessible to the blind community as employees and users? Need a motivational speaker for your upcoming event? Let’s talk! </p> <!-- /wp:html --> <!-- wp:jetpack/contact-form {"subject":"[SammySweetSpirit.com contact form] Home","to":"(email visible only to moderators and staff)"} --> <div class="wp-block-jetpack-contact-form"><!-- wp:jetpack/field-text {"label":"Security Question: What's Sammy's first name? Hint: Sammy","required":true} /--> <!-- wp:jetpack/field-name {"label":"First Name","required":true} /--> <!-- wp:jetpack/field-name {"label":"Last Name","required":true} /--> <!-- wp:jetpack/field-telephone {"required":true} /--> <!-- wp:jetpack/field-email {"required":true} /--> <!-- wp:jetpack/field-text {"label":"Subject","required":true} /--> <!-- wp:jetpack/field-textarea {"required":true} /--> <!-- wp:jetpack/button {"element":"button","text":"Let's Talk!","borderRadius":0,"lock":{"remove":true}} /--></div> <!-- /wp:jetpack/contact-form --> <!-- wp:html --> </div> <!-- /wp:html --> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph -->i know it doesnt like the 2 wphtmls broken around another block without being closed themselves but there is no way to just put the form up there without the visual editor and there isnt any way to next wp calls inside each other so saving
<!-- wp:html --> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/cobblestone-and-person-with-shadow-e1662327745888.jpg" alt="It's a picture of a stark brickwork lot with a woman in a black blazer and pants facing away from the camera casting a seven o clock shadow on the brick ground." class="headerImage"> <div id="pageHeader"> <h1 id="seeClear" class="pageHeaderText">See Things Clearly with Sammy & Be Inspired to Look at it this Way</h1> <a href="https://www.amazon.com/dp/1954968612/ref=cm_sw_r_sms_api_glt_i_SS83Z2PJH7AJ9RT72QC2" class="cta">Look at it this way</a> </div> <div class="pContainer"> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/Copy-of-6-e1662329100303.jpg" alt="It's a picture of Sammy with her million dollar smile! She is sporting a pair of semi wrap around sunglasses. Around her neck is four necklaces, the large medium and small ones are made of perl beads and the last is a medium size chain with two rows of large dark cut and polished stones. She is wearing a top with a post modernism plants in different shades of blue" class="imageL"> <h1 class="pTagTitle">About Sammy</h1> <p class="justified"> Sammy SweetSpirit is an author, motivational speaker, accessibility consultant, and singer/songwriter. Her album, Something For Everyone, was released to digital music stores in 2019. Her powerful message in her book Look At It This Way, invites us to have a clearer understanding of people who are blind, and a deeper experience of connecting with each other. </p> <a href="https://sammysweetspirit.com/about/" class="cta">Read More</a> </div> <div class="clear"></div> <div class="line"></div> <div class="carousel"> <h1 class="pTagTitle">Sammy has been featured on...</h1> [slide-anything id="257"] </div> <div class="line"></div> <div class="pContainer"> <h1 class="pTagTitle">Look at it This Way</h1> <p class="justified bottomGap"> <b>Look at it This Way</b> is a powerful book that creates a conversation around the topic of blindness. It answers questions we all may have been reluctant to ask, it gives us a glimpse into what blind people experience living in a sighted world, and it breaks through barriers that may cause people to think that differences equate to superiority or inferiority. There is an open discussion about the challenges blind people face, and how those challenges can be overcome, by creating a space of understanding and awareness between people who are sighted and people who are blind. This book invites us to remember how connected all of us truly are, and gives us ways to strengthen our bonds with each other, whether we can see or not. </p> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/03/Book-Cover.jpg" alt="The front cover of Sammy's book Look at it This Way. It shows the sun peeking over the second O in look with at it This Way in a zany cursive below the bold LOOK. Below the cursive it states The Blind Leading the Sighted in smaller block lettering. below that is a woman with long blond hair wearing a white blouse and a black long skirt looking out over a body of water. at the bottom of the cover is Sammy SweetSpirit in bold block with Foreword By Neale Donald Walsch"> <a href="https://www.amazon.com/dp/1954968612/ref=cm_sw_r_sms_api_glt_i_SS83Z2PJH7AJ9RT72QC2" class="cta">Buy Now!</a> </div> <div class="pContainer"> <p class="justified bottomGap"> I am inspired by and grateful to the author - a young lady whose lack of sight has caused her no lack of insight at all. </p> <p> - Neale Donald Walsch, Author of the <i>Conversations with God</i> series </p> </div> <div class="line"></div> <div class="contactContainer"> <img src="https://sammysweetspirit.com/wp-content/uploads/2022/09/contact1.jpg" alt="It's a picture of 2 arrows pointing at a phone with a contact form on the screen. the phone is on a desk with various office supplies scattered around it." class="imageR"> <p class="justified bottomGap"> Interested in interviewing Sammy? Want to inquire about ways to make your company more accessible to the blind community as employees and users? Need a motivational speaker for your upcoming event? Let’s talk! </p> <!-- wp:jetpack/contact-form {"subject":"[SammySweetSpirit.com contact form] Home","to":"(email visible only to moderators and staff)"} --> <div class="wp-block-jetpack-contact-form"><!-- wp:jetpack/field-text {"label":"Security Question: What's Sammy's first name? Hint: Sammy","required":true} /--> <!-- wp:jetpack/field-name {"label":"First Name","required":true} /--> <!-- wp:jetpack/field-name {"label":"Last Name","required":true} /--> <!-- wp:jetpack/field-telephone {"required":true} /--> <!-- wp:jetpack/field-email {"required":true} /--> <!-- wp:jetpack/field-text {"label":"Subject","required":true} /--> <!-- wp:jetpack/field-textarea {"required":true} /--> <!-- wp:jetpack/button {"element":"button","text":"Let's Talk!","borderRadius":0,"lock":{"remove":true}} /--></div> <!-- /wp:jetpack/contact-form --> </div> <!-- /wp:html -->that eliminates all the jetpack calls
and even more frusterating is there is no way to add blocks into the code editor or atleast I have not seen any way to do it similar to the way the visual editor does it. would love to be able to plunk the cursor down in code editor then hit pllus and place a block anywhere the cursor is sitting.
The blog I need help with is: (visible only to logged in users)
-
Hello there,
This site is not hosted with us on WordPress.com, but using the open source WordPress software at another hosting provider. This is a bit different to a site hosted on WordPress.com. You can read about these differences here: https://en.support.wordpress.com/com-vs-org/
This means our support are limited with this site.
Are you copying and pasting content from outside of WordPress into the editor?
-
yes this is on a hosted wordpress account the default one that is deployed with softaculous on a2 hosting … but the question is why cant i wrap a bloock inside 2 different custom html tags to make a very simple easy wrapper.
for people who are fine with coding this seems like a no brainer but when you save and reload the page you are editing with a wrapped div such as the one above the interface breaks and asks if you want to try and recover rather than realizing the closing div tag is in a separate html tag in a different custom html block.
the other option would be to have the plus button to add blocks appear in the code view and place a new pbloock wherever the cursor sits. this would add a ton of useability to wordpress.
-
if you know of a way to get the custom html tags to not break when reloading the page that woulld be great.
-
Hello there,
The support is limited for self-hosted WordPress sites from the get go on this forum, but I’ll do my best.
but the question is why cant i wrap a bloock inside 2 different custom html tags to make a very simple easy wrapper.
It really all comes down to the combination of the content that’s in use here. The editor is still very quite new, so this could very well be a new quirk.
I’m curious as to why you’re looking to wrap blocks into a div? The reason being is that generally, you wouldn’t need to do this.
What is this div doing exactly?
- The topic ‘wrap a block in a div with custom html’ is closed to new replies.
WordPress.com Forums 