WordPress.org

Making WordPress.org

Opened 20 months ago

Closed 13 months ago

Last modified 12 months ago

#5153 closed defect (fixed)

Theme Directory: Infinite Scroll makes it impossible to reach important links in the footer

Reported by: iandstewart Owned by: ryelle
Milestone: Priority: high
Component: Theme Directory Keywords: has-patch
Cc:

Description

To reproduce …

  1. Visit wordpress.org/themes
  2. Notice the add theme, create theme, and theme review blog link in the footer
  3. Scroll to the bottom of the page to click on one of those links …
  4. and notice that you can't :)

Gif of the bug in action …

https://cldup.com/y2901SteC3.gif

Attachments (3)

5153.diff (4.3 KB) - added by dingo_d 20 months ago.
Added a patch for load more functionality
5153.2.diff (328.5 KB) - added by dingo_d 19 months ago.
Added fix for the click event, minor styling fixes.
5153.3.diff (5.3 KB) - added by ryelle 15 months ago.

Download all attachments as: .zip

Change History (24)

#1 @iandstewart
20 months ago

A quick fix might be to move all that information to pages in the same menu as the "Commercial Themes" link. And just hide the footer on the infinite scrolling pages.

This ticket was mentioned in Slack in #themereview by iandstewart. View the logs.


20 months ago

#3 @dd32
20 months ago

We actually removed the links to those pages from the top header to try to get people to use it less (Lots of people uploading a theme they got elsewhere and wanted on their site)

It is possible to reach the bottom footer section (at least from Australia where the latency is slightly higher) by scrolling down fast.

This might be a good time to re-think the front page of the Theme Directory, and move it to be something more similar to the Plugin Directory.

#4 @dingo_d
20 months ago

I was thinking, for the first phase, just adding a load more button and show, say, 12 themes. Later on it would be a good idea to have sections that would showcase block-based themes or something like that (we've been discussing this for some time now).

We would need to add a special tag for this so that we can create sections like in plugins.

I'll see what I can do with the temporary fix for this current issue.

#5 @dd32
20 months ago

We would need to add a special tag for this so that we can create sections like in plugins.

We have categories for that, and the future Featured section will be based off of that, all other sections listed would simply be an existing WP_Query.

The only thing that would really need doing is copying the HTML/css over from the plugin directory and making the JS understand that the front-page is not it's territory.

#6 @dingo_d
20 months ago

The only thing that would really need doing is copying the HTML/css over from the plugin directory and making the JS understand that the front-page is not it's territory.

I've looked at plugins code, and all the interactions are done in React (there is still PHP code there, but the majority of it is in React), so I'm not 100% if it can be just copy/pasted over easily, especially if the APIs are different (which I kinda think they are 😅)

@dingo_d
20 months ago

Added a patch for load more functionality

#7 @dingo_d
20 months ago

  • Keywords has-patch added

I've added the initial patch, but I'll need somebody with Backbone.js knowledge. I've added a button and it will load new themes, but for some reason only on 2nd click.

Not sure why so any advice is welcomed.

Also, it loads 10 themes by default, not 100% sure how to change this to 9 or 12.

And once the functionality is fixed, I need to test it on mobile and adjust.

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


19 months ago

#9 @dufresnesteven
19 months ago

@dingo_d

Try adding a new event to re-render:

this.listenTo( self.collection, 'themes:rerender', function() {
    self.renderThemes( self.parent.page );
})

After the self.add( data.themes ); on line 295 trigger the rerender:

self.trigger( 'themes:rerender' );

I think this was an existing bug that we wouldn't have noticed since the scroll event gets called so often.

#10 @dingo_d
19 months ago

That did the trick! I'll update the patch after checking how it looks on mobile. Thanks!

@dingo_d
19 months ago

Added fix for the click event, minor styling fixes.

This ticket was mentioned in Slack in #meta by dingo_d. View the logs.


19 months ago

This ticket was mentioned in Slack in #meta by dingo_d. View the logs.


19 months ago

#13 @dingo_d
19 months ago

  • Priority changed from normal to high

#14 @dufresnesteven
19 months ago

This is looking pretty good. I just tested the patch. It seems to hold up in the cases I tested.

One thing left (I think):

  1. We need to hide the button when there are no themes remaining. We can use the total collection count to make that decision.

You can test by applying a number of filters until you get ~20 results.

This ticket was mentioned in Slack in #themereview by williampatton. View the logs.


16 months ago

@ryelle
15 months ago

#16 @ryelle
15 months ago

5153.3.diff iterates on the previous patch (thanks @dingo_d !) to hide the button when there are no more themes to load. It also moves focus from the Load More button to the first of the added themes, otherwise the themes are loaded above the viewport and you need to remember what the last theme you saw is.

#17 @ryelle
13 months ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 10451:

Theme Directory: Trigger scrolling with a Load More button.

Remove the automatic scroll-based trigger in favor of a Load More button. This will let people actually get to the content in the footer of the site.

Props iandstewart, dingo_d, dufresnesteven.
Fixes #5153.

#18 @poena
13 months ago

The button is also visible on single theme pages, do we reopen this or create a new issue?

https://wordpress.org/themes/twentytwenty/

#19 @ryelle
13 months ago

Can you create a new issue? I'll look into it.

#20 @ryelle
12 months ago

In 10457:

Theme Directory: Fix "Load More" button display.

Hide the "Load More" button on single theme pages, and when the feature drawer is open. Previously, the button would appear on single theme pages, and disappear when filters were applied.

See #5153.

#21 @ryelle
12 months ago

@poena The load more button should be fixed after r10457 - let me know if you see any other issues.

Note: See TracTickets for help on using tickets.