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

[iandstewart]

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 …

[iandstewart]

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.

[dd32]

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.

[dingo_d]

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.

[dd32]

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.

[dingo_d]

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]

Added a patch for load more functionality

[dingo_d]

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.

[dufresnesteven]

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

[dingo_d]

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

[dingo_d]

Added fix for the click event, minor styling fixes.

[dufresnesteven]

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.

[ryelle]

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.