Sorry if this question derives subjective answers. I figure that asking on WP-SE makes this a little more forgivable. If I had asked on SO I would have had to explain why I couldn't change the block markup.

I have some large (wide) images that I would like to be scrollable. They need to be responsive and I would also like them to have a border across the whole of the scrollable image and the caption to not be scrollable. This rules out applying below css to the figure.wp-block-image

    <figure class="wp-block-image scrollable"> 
       <img class="wp-img">
       <figcaption>
         Something about the image
       </figcaption>           
    </figure>



   .scrollable{
     border: 5px solid black;
     overflow: auto;
   }

As the caption would also be scrolled.

I figure there are two realistic potential options.

1: Build a new Gutenberg Block as a plugin. This would enable me to wrap the image in a div. I have already had some success with this but am a little worried about using it live as I am not a very experienced block developer and it has not been tested. Perhaps it is overkill.

2: Not sure on whether this is possible or not. I'll probably make a stack-overflow question on this later. I have seen similar q's but specifically about text.

Could I use CSS and pseudo selectors to achieve the desired affect? IE a scrollable image but not scrollable caption

There are quite a lot of these across the site, so it's important that they work, are easy to maintain and implement.

I'm happy with the Gutenberg block I have. It just seems wrong if I could apply my own additional-css-class to the basic img-block.

Apologies if this question isn't to the community standard, I know it's really a CSS question.

Sorry if this question derives subjective answers. I figure that asking on WP-SE makes this a little more forgivable. If I had asked on SO I would have had to explain why I couldn't change the block markup.

I have some large (wide) images that I would like to be scrollable. They need to be responsive and I would also like them to have a border across the whole of the scrollable image and the caption to not be scrollable. This rules out applying below css to the figure.wp-block-image

    <figure class="wp-block-image scrollable"> 
       <img class="wp-img">
       <figcaption>
         Something about the image
       </figcaption>           
    </figure>



   .scrollable{
     border: 5px solid black;
     overflow: auto;
   }

As the caption would also be scrolled.

I figure there are two realistic potential options.

1: Build a new Gutenberg Block as a plugin. This would enable me to wrap the image in a div. I have already had some success with this but am a little worried about using it live as I am not a very experienced block developer and it has not been tested. Perhaps it is overkill.

2: Not sure on whether this is possible or not. I'll probably make a stack-overflow question on this later. I have seen similar q's but specifically about text.

https://stackoverflow/questions/45624147/use-pseudo-element-to-overlay-a-scrolling-div

Could I use CSS and pseudo selectors to achieve the desired affect? IE a scrollable image but not scrollable caption

There are quite a lot of these across the site, so it's important that they work, are easy to maintain and implement.

I'm happy with the Gutenberg block I have. It just seems wrong if I could apply my own additional-css-class to the basic img-block.

Apologies if this question isn't to the community standard, I know it's really a CSS question.

• plugins
• images
• css
• block-editor

1 Answer 1

I was implemented it for images, which shows lists of images inside a container like pdf viewer..I just overide the css property of bloc gallery class, and adding an additional class...

.image-list{
    position: relative !important;
    padding-bottom: 140% !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}
.blocks-gallery-grid{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
}
.blocks-gallery-grid::-webkit-scrollbar{
    width: 10px;
}
.blocks-gallery-grid::-webkit-scrollbar-thumb {
    background: #888;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(224, 224, 224);
}