Tiled Gallery Block causes pointer cursor on every block that has nesting #13428

jasmussen · 2019-09-04T18:15:22Z

Steps to reproduce the issue

Go to block editor
Insert a Tiled Gallery block and add some images
Insert any block that features nesting. E.g. Group, Columns, Media & Text.
Preview the page and observe that every nesting block has a pointer cursor

Probably cause

The gallery appears to change the container divs of every block containing child blocks, not just the tiled gallery itself, and adds data-carousel-extra with a few image properties. This on its own seems a bit overreachy, but the actual cursor happens because this CSS is output by Jetpack:

[data-carousel-extra] { cursor: pointer }

Expected behavior

Tiled Gallery should probably just affect itself.

The text was updated successfully, but these errors were encountered:

Fixes #13428 Until now we would rely on 2 str_replace to add Carousel data to div and ul containers in post content. This worked, but wasn't smart enough to know to ignore specific divs like Columns blocks. By using DOMDocument, we can go through the post content in a more readable way, to detect gallery blocks as well as regular galleries and images.

…13446) * Carousel: improve detection of containers where we should add data Fixes #13428 Until now we would rely on 2 str_replace to add Carousel data to div and ul containers in post content. This worked, but wasn't smart enough to know to ignore specific divs like Columns blocks. By using DOMDocument, we can go through the post content in a more readable way, to detect gallery blocks as well as regular galleries and images. * Bail if the server does not support DOMDocument * Store and return value from libxml_use_internal_errors See https://github.com/Automattic/jetpack/pull/13446/files#r321866447 Co-Authored-By: Michael D Adams <michael.d.adams@gmail.com> * No need to escape data key See https://github.com/Automattic/jetpack/pull/13446/files#r321867238 Co-Authored-By: Michael D Adams <michael.d.adams@gmail.com> * Wrap DOM usage in libxml_disable_entity_loader See #13446 (review)

…uld add data (#13446) * Carousel: improve detection of containers where we should add data Fixes #13428 Until now we would rely on 2 str_replace to add Carousel data to div and ul containers in post content. This worked, but wasn't smart enough to know to ignore specific divs like Columns blocks. By using DOMDocument, we can go through the post content in a more readable way, to detect gallery blocks as well as regular galleries and images. * Bail if the server does not support DOMDocument * Store and return value from libxml_use_internal_errors See https://github.com/Automattic/jetpack/pull/13446/files#r321866447 Co-Authored-By: Michael D Adams <michael.d.adams@gmail.com> * No need to escape data key See https://github.com/Automattic/jetpack/pull/13446/files#r321867238 Co-Authored-By: Michael D Adams <michael.d.adams@gmail.com> * Wrap DOM usage in libxml_disable_entity_loader See #13446 (review)

donalirl · 2019-10-24T01:41:31Z

Seen in #16173198-hc

darnelldibbles-zz · 2019-12-05T19:53:42Z

Seen in https://wordpress.org/support/topic/carousel-and-pointer-cursor-over-text-problem/#post-12209854

lezama · 2019-12-10T19:16:17Z

Seen in 2548654-zen

khristiansnyder · 2020-03-04T22:28:06Z

Seen in #18730714-hc
A Tiled Gallery was within a column. Converting to Masonry Gallery fixed the issue.

happychait · 2020-03-16T18:22:13Z

Just had this report in 19440801-hc

tanjoymor · 2020-03-19T00:09:27Z

Another case here: #18635664-hc
Converting to Masonry Gallery fixed the issue.

swoodipto · 2020-03-26T18:58:07Z

Another report seen in 2820101-zen (during a 1:1 Support session)
I did not find the Masonry Gallery option there, but switching to a Slideshow fixes it.

ebinnion · 2020-03-31T01:26:32Z

I was just about to create a new issue and Github pointed me here. Here are some steps that I used to reproduce the issue.

Create a new Jetpack site
Enable carousel
Create a post that has columns, with content in each column
Add a cover block with a background image and some nested text
Add tiled gallery block, with or without media
Publish page
View page and observe that pointer cursor shows when hovering over column content

The root issue here seems to be that we're adding data-carousel-extra in a lot of places anddata-carousel-extra is what has the cursor: pointer; rule. Perhaps we should figure out how to not add data-carousel-extra in so many places.

Here's a screenshot of how I set up my test post:

ebinnion · 2020-03-31T01:42:38Z

Perhaps an easy win here would be to change the selector to something like .tiled-gallery__item that way we're specifically only applying the cursor to a Tiled Gallery item?

It seems like the latest patch above has been stalled for a bit.

sourourn · 2020-04-28T14:51:21Z

Another case reported here: #20603495-hc

jordesign · 2020-06-29T02:45:44Z

FWIW - I was able to use this CSS to work around the issue in the time being:

div.wp-block-columns, 
div.wp-block-column {
    cursor:default
}

fresatomica · 2020-07-07T13:12:56Z

Another report: https://wordpress.com/forums/topic/cover-block-hover-issue/

aleone89 · 2020-07-15T14:41:02Z

Another report: hc-22637348

I had to apply the css above, to pretty much every block on the page to help for the time being.

jasmussen · 2020-08-08T08:39:13Z

Could a bandaid fix be to simply remove the cursor CSS, or attach it to a class? That would fix the visual issue until the underlying issue can be addressed.

benchilcote · 2021-02-24T18:58:05Z

Another case surfaced in #27985992-hc

Gave this CSS as temporary workaround: [data-carousel-extra] {cursor: default !important;}

After I had a chance to check, it indeed was a gallery block that was present on the page. Changing to a masonry block fixed the issue.

Follow up: #3770531-zd

ivan-ottinger · 2021-04-27T07:23:12Z

Another report: 3939250-zd-woothemes

Applying @benchilcote's CSS workaround helped. Thanks!

davrox123 · 2021-05-17T23:24:15Z

Another report: zd 3987866

Applying @benchilcote's CSS workaround helped. Thanks!

happychait · 2021-06-02T04:24:15Z

4035130-zen

Can be worked around by the regular Gallery block to one of the other galleries that's not a Tiled Gallery block.

daria2303 · 2021-06-25T07:59:33Z

4092207-zd-woothemes

applied CSS

samiff · 2021-06-29T22:10:19Z

This is still an issue with JP 9.9-beta and either the Gallery or Tiled Gallery block.

Related: #7771

kbrown9 · 2021-08-31T16:19:46Z

I fixed the cursor problem in PR #20882 by making the CSS selector more specific. However, we're still adding data-carousel-extra to many elements that shouldn't have it. I'm leaving this issue open so we can continue investigating better gallery parsing.

jeherve · 2021-08-31T17:58:16Z

@kbrown9 Thanks for taking a look at this! ❤️ Do you think we could close this one now, and keep #13531 open for more improvements down the line?

kbrown9 · 2021-08-31T20:51:43Z

@kbrown9 Thanks for taking a look at this! ❤️ Do you think we could close this one now, and keep #13531 open for more improvements down the line?

I think that makes sense! That issue should cover the future improvements, so I'm closing this one.

jasmussen added the [Type] Bug When a feature is broken and / or not performing as intended label Sep 4, 2019

dereksmart added [Block] Tiled Gallery [Pri] High labels Sep 4, 2019

dereksmart added this to the 7.8 milestone Sep 4, 2019

jeherve added [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Feature] Carousel A fullscreen modal appearing when clicking on an image in a gallery or tiled gallery. labels Sep 5, 2019

jeherve self-assigned this Sep 6, 2019

jeherve mentioned this issue Sep 6, 2019

Carousel: improve detection of containers where we should add data #13446

Merged

jeherve closed this as completed in #13446 Sep 24, 2019

jeherve mentioned this issue Sep 27, 2019

Revert Carousel: improve detection of containers #13564

Merged

jeherve modified the milestones: 7.8, 7.9 Sep 27, 2019

jeherve reopened this Sep 27, 2019

jeherve removed this from the 7.9 milestone Oct 23, 2019

jeherve added [Pri] Normal and removed [Pri] High labels Oct 23, 2019

matticbot added the Customer Report Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report" label Dec 10, 2019

jeherve mentioned this issue Mar 17, 2020

Carousel: improve gallery parsing #13554

Closed

jeherve mentioned this issue Jun 2, 2020

[data-carousel-extra] cursor: pointer on all blocks #16031

Closed

lsl mentioned this issue Aug 14, 2020

Images with descriptions output HTML as well as image Automattic/wp-calypso#44897

Closed

jeherve mentioned this issue Oct 13, 2020

CoBlocks: Stacked Gallery Attachment Page option does nothing Automattic/wp-calypso#45236

Open

jeherve mentioned this issue Feb 8, 2021

Jetpack adds extra [data-carousels] with cursor: pointer to non-linked content in column blocks #18731

Closed

github-actions bot added the [Status] In Progress label May 20, 2021

jeherve mentioned this issue Jun 17, 2021

Carousel: issues modifying markup in some environments #13531

Open

jeherve mentioned this issue Jun 30, 2021

Jetpack Adds Data Attributes to Page/Post Images When Carousel Is Enabled #7771

Closed

kbrown9 mentioned this issue Aug 31, 2021

Carousel: add more specific selectors for the carousel cursor #20882

Merged

kbrown9 closed this as completed Aug 31, 2021

kraftbj removed the [Status] In Progress label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tiled Gallery Block causes pointer cursor on every block that has nesting #13428

Tiled Gallery Block causes pointer cursor on every block that has nesting #13428

jasmussen commented Sep 4, 2019

donalirl commented Oct 24, 2019

darnelldibbles-zz commented Dec 5, 2019

lezama commented Dec 10, 2019 •

edited by jeherve

Loading

khristiansnyder commented Mar 4, 2020

happychait commented Mar 16, 2020

tanjoymor commented Mar 19, 2020

swoodipto commented Mar 26, 2020

ebinnion commented Mar 31, 2020

ebinnion commented Mar 31, 2020

sourourn commented Apr 28, 2020

jordesign commented Jun 29, 2020

fresatomica commented Jul 7, 2020

aleone89 commented Jul 15, 2020

jasmussen commented Aug 8, 2020

benchilcote commented Feb 24, 2021

ivan-ottinger commented Apr 27, 2021

davrox123 commented May 17, 2021

happychait commented Jun 2, 2021

daria2303 commented Jun 25, 2021

samiff commented Jun 29, 2021

kbrown9 commented Aug 31, 2021

jeherve commented Aug 31, 2021

kbrown9 commented Aug 31, 2021

Tiled Gallery Block causes pointer cursor on every block that has nesting #13428

Tiled Gallery Block causes pointer cursor on every block that has nesting #13428

Comments

jasmussen commented Sep 4, 2019

Steps to reproduce the issue

donalirl commented Oct 24, 2019

darnelldibbles-zz commented Dec 5, 2019

lezama commented Dec 10, 2019 • edited by jeherve Loading

khristiansnyder commented Mar 4, 2020

happychait commented Mar 16, 2020

tanjoymor commented Mar 19, 2020

swoodipto commented Mar 26, 2020

ebinnion commented Mar 31, 2020

ebinnion commented Mar 31, 2020

sourourn commented Apr 28, 2020

jordesign commented Jun 29, 2020

fresatomica commented Jul 7, 2020

aleone89 commented Jul 15, 2020

jasmussen commented Aug 8, 2020

benchilcote commented Feb 24, 2021

ivan-ottinger commented Apr 27, 2021

davrox123 commented May 17, 2021

happychait commented Jun 2, 2021

daria2303 commented Jun 25, 2021

samiff commented Jun 29, 2021

kbrown9 commented Aug 31, 2021

jeherve commented Aug 31, 2021

kbrown9 commented Aug 31, 2021

lezama commented Dec 10, 2019 •

edited by jeherve

Loading