WordPress.org

Making WordPress.org

Opened 4 months ago

Last modified 3 months ago

#5153 new defect

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

Reported by: iandstewart Owned by:
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 (2)

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

Download all attachments as: .zip

Change History (16)

#1 @iandstewart
4 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.


4 months ago

#3 @dd32
4 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
4 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
4 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
4 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
4 months ago

Added a patch for load more functionality

#7 @dingo_d
4 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.


4 months ago

#9 @dufresnesteven
4 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
4 months ago

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

@dingo_d
4 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.


4 months ago

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


3 months ago

#13 @dingo_d
3 months ago

  • Priority changed from normal to high

#14 @dufresnesteven
3 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.

Note: See TracTickets for help on using tickets.