Position:Sticky Breaks Embedded WordPress Block

Hi Aeryn –

I’m going to work on replicating this so I can file it for the team.

Do you have any screen shots that you can pass along? Use Snaggy or imgBB to post a link here. I can include those in the report in addition to what I find.

I’ve worked on other issues where the alignment breaks in the boxes and won’t carry through to a preview or published post.

I’m coming back with some more questions…

1. What’s the URL that is getting embedded when you experience the reported issue?
2. Could you share the full code of position:sticky element and block type as I cannot reproduce it yet.

Thanks!

Hi Liz,

Sorry for not getting back to you sooner. I wasn’t anywhere near my computer yesterday to respond.

Here are the screenshots:
Without sticky position, WP Block: https://ibb.co/i5CHap
Broken WP Block with sticky: https://ibb.co/ebvs89

1. WordPress URL embedded: https://www.ads-software.com/plugins/health-check/
2. Sticky code:

h2.sticky, h3.sticky, h4.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
    padding: 10px;
    background: white;
    border: 2px solid #ccc;
	  z-index:100;
	  margin: 0 -45px;
}

3. I’ve also stylized the blockquote quite a bit, which is what the WordPress Block is also using, so perhaps it’s part of the conflict when position:sticky is also in use.

blockquote,blockquote::before {color:#888;}
blockquote {margin-left:60px;}
blockquote::before {
font-family:FontAwesome;
content:"\f044";
font-size:50px;
float:left;
margin-top:-5px;
margin-left:-60px;}
.entry-content .wp-block-quote p:before {
content: "Quote...";
display: block;
font-style:italic;
font-size:2em}
blockquote::after{
font-family:FontAwesome;
content:"\f10e";
float:right;
margin-top:-50px;}

4. Code from editor that I used to replicate issue:

<!-- wp:paragraph -->
<p>Testing WordPress block embed.</p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/wordpress {"url":"https://www.ads-software.com/plugins/health-check/","type":"wp-embed","providerNameSlug":"plugin-directory"} -->
<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-plugin-directory">
https://www.ads-software.com/plugins/health-check/
</figure>
<!-- /wp:core-embed/wordpress -->

<!-- wp:paragraph -->
<p>Lots more text</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":12430} -->
<figure class="wp-block-image"><img src="https://www.geeklife.ca/wp-content/uploads/2018/08/Does-Your-Web-Developer-Know-What-They-Are-Doing-sm.jpg" alt="" class="wp-image-12430"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"className":"sticky"} -->
<h3 id="" class="sticky">Here's a Sticky Header</h3>
<!-- /wp:heading -->

I put all that CSS in custom CSS and copied post exactly and it all looks fine, so I suspect a theme issue is the culprit at this point.

Try adding this on another theme to see what happens.