Support » Plugin: Gutenberg » Position:Sticky Breaks Embedded WordPress Block

  • Resolved Aeryn

    (@aeryn_lynne)


    Hi there,

    Came across something weird while trying to write a post today with Gutenberg installed.

    In a post, I have embedded a WordPress block and added the CSS style position:sticky to an H3 element that is further down the page.

    Using position:sticky seems to break the WordPress block. The blockquote part of the WordPress block is no longer set to display:none, and “Get This Plugin” button is no longer clickable.

    I’ve yet to figure out how I can patch the block so that I can use sticky on the same post.

    I’m using the Genesis Magazine Pro child-theme if this issue isn’t outright reproducible.

    EDIT: The WordPress block seems to be pretty fragile. Just adding a bit of CSS to centre align the box breaks the block too.

    Regards,

    Aeryn

    • This topic was modified 5 years, 6 months ago by Aeryn.
Viewing 4 replies - 1 through 4 (of 4 total)
  • 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!

    Thread Starter Aeryn

    (@aeryn_lynne)

    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://wordpress.org/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://wordpress.org/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://wordpress.org/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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Position:Sticky Breaks Embedded WordPress Block’ is closed to new replies.