[Support request] Close Button for Elements?

[Junior Gong]

Hey guys

is there any way to add a close button for an element that I added via hook? In my specific case I added a block element above header.

for my readers I wanna add an X button top right to dismiss it and not show anymore.

You can see my element on the private link provided

[David]

Hi there,

tricky one – and this is very experimental – so it may not work lol

1. Edit your elements Container Block and give it an ID/HTML Anchor in Advanced setting of:

dismissible-banner

2. Add another button to your container for the dismiss button. Give this an ID/HTML Anchor of:

dismiss

3. Now add a HTML Block after the Container, and add this Script and styles code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    let dismissed = sessionStorage.getItem("dismissed");
    let dismissBanner = document.getElementById("dismissible-banner");
    let dismissButton = document.getElementById("dismiss");
    if(dismissed){
        dismissBanner.parentNode.removeChild(dismissBanner);
    } else {
        dismissBanner.classList.add("show");
    }
    dismissButton.addEventListener("click", function(){
        sessionStorage.setItem("dismissed", true);
        dismissBanner.parentNode.removeChild(dismissBanner);
    });
});
</script>
<style>
#dismissible-banner {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

#dismissible-banner.show {
    transition: all 0.3s ease-in;
    transition-delay: 1s;
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
}
</style>

On initial load the height of the banner is set to 0 and after a 1s delay it transitions to full height. Once the dismiss button is clicked it adds a dismissed variable to the browsers sessionStorage – which will remove the actual Element from the HTML. If a user starts a new session ( ie. closes the browser and revists the site ) then the banner will be re-displayed.

The purpose of the transition is purely there to minimise Content Layout Shift that can’t be avoided when the banner has been dismissed.

[Junior Gong]

Thx for the input.

It’s a bit too much too manage in the long run, especially when working with multiple elements.

For now I would leave it as feature request for the elements module 🙂

[David]

Sorry i thought you were after a solution for your current site ?

I am not a feature like that would be possible, as the JS and CSS required to make this happen will vary from one design to another – hence it is better a custom solution is provided like the one above. It may be something we look at in the GenerateBlocks plugin…

[Author]

Posts