Add portfolio archive template with custom query variation

[carolinan]

Description

• Adds a full page pattern for the portfolio archive template, includes header and footer template parts.
• Registers a block variation of the query loop that only includes posts with featured images.

For #351
Figma: https://www.figma.com/file/AlYr03vh4dVimwYwQkTdf6/Twenty-Twenty-Four?node-id=492%3A1303&mode=dev

Screenshots

Testing Instructions
Remove all the blocks in an archive template like home, archive or index, and insert the portfolio archive pattern.

Todo:

I am not sure if I picked the correct aspect ratio for the featured images.
Query for only featured images needs fixing

[carolinan]

@greenshady Hi! I am testing a custom query variation for Twenty Twenty-Four, where only posts with featured imaqes should show. I can't quiet get it to work on the front. The variation is printing empty li elements for posts that does not have featured images.

This is an experiment, I understand if it is decided that a block variation is not suitable for a bundled theme.

[carolinan]

I'm not sure this is working correctly perhaps it should be aspectRatio: '2/3',

[carolinan]

Let me ping the correct username 😆 @justintadlock

[MaggieCabrera]

I think this is interesting to explore on a default theme, as long as we keep it clean and simple, but I'd love others opinions. /cc @richtabor

I like the idea that default themes started showcasing how much the editor can do without adding the extra work but now we can also explore how much a little extra can bring to the theme too. We just don't wanna lean on adding functionality where it shouldn't be.

[richtabor]

Interesting. :)

How is this different from the alternate portfolio template and pattern?

[carolinan]

@richtabor Which is that? The portfolio home? https://www.figma.com/file/AlYr03vh4dVimwYwQkTdf6/Twenty-Twenty-Four?node-id=536%3A4185&mode=dev

[carolinan]

Removing the sticky helped with the problem I was seeing with the variation: but not with the pattern issue.

[carolinan]

After discussions and troubleshooting with help from Ryan Welcher, Fränk Klein and Ari Stathopoulos, I have not been able to make the block variation work well enough.

It works OK as a block variation when the query loop inherit setting is set to false. But since it is meant to be an archive and search result that will not work.
When it is set to true, it does not display the correct posts in the editor or front.

The problem

When the post template only contains the featured image, it still outputs the list item for posts that do not have featured images. This leaves large gaps in the list of blog posts.

Options

1. Ignore this and let there be gaps when the user forgot to add the image. That is the approach taken with the existing pattern with the image offset.
2. Hide the list items with a small amount of CSS. Side effect: There may be archive pages that doesn't output any content because all posts in the result are missing images.
3. Use a PHP filter for the front of the website that removes the list items. Side effect: There may be archive pages that doesn't output any content because all posts in the result are missing images.
4. Try to get the featured image place holder feature into 6.4

[luminuu]

I assume you're referring to featured images of a post here, not images within the content of a post, correct?

I'd prefer either option 1 or 4.

[carolinan]

Yes, featured images

[carolinan]

Lets try to get pattern + templates in for 1. That is the simplest way right now.

( Of course there are options to show texts but it would be a totally different design. )

[carolinan]

Also, there was feedback that "portfolio" is confusing and that it could be called "archive with featured images" or similar.

[MaggieCabrera]

Yeah, I wonder if there's a bug to report after you went through all this effort? It was really great that you tried this. I'd also say go for 1 but I'm not sure I understand how placeholders would be a solution? what is the issue related?

[carolinan]

I tried searching for the Gutenberg issue quickly, I need some more time to find it.

basically, it is about setting an image that is used when a post type item does not have a featured image. A fallback.

[carolinan]

Yes I plan to submit a bug report or a question once I am able to put words to describe the bugs 😆

[MaggieCabrera]

I tried searching for the Gutenberg issue quickly, I need some more time to find it.

basically, it is about setting an image that is used when a post type item does not have a featured image. A fallback.

Oh, I thought it was something just for the editor. That sounds like a great idea.

[carolinan]

WordPress/gutenberg#34865

[luminuu]

Linked in that issue there's a workaround via the functions.php: WordPress/gutenberg#32447 (comment)

[carolinan]

Linked in that issue there's a workaround via the functions.php: WordPress/gutenberg#32447 (comment)

Interesting

[carolinan]

We are going to come back to the following aren't we:

1. Selecting an image that doesn't look like the site is half broken (designers)
2. Making that match with all style variations

[luminuu]

If it's possible to conditionally show fallback images based on the selected style variation, you'd only need one master fallback image in most likely grey colors, so it fits with every style variation. Or just pick that one in general.

[carolinan]

It would be possible IF this can be merged before the RC today.. WordPress/gutenberg#51512

[MaggieCabrera]

It would be possible IF this can be merged before the RC today.. WordPress/gutenberg#51512

I'm not sure I understand what you need to do here. Can't you target the variation with CSS now?

[luminuu]

Nope, that's currently not possible to target a style variation via CSS.

[MaggieCabrera]

I'm thinking that since this is not the main archive pattern and it's something that users will choose to use because it fits their website, it's fine if we go with option 1 and let the user fix their featured images. It would be nice to have this kind of functionality be easier to include on a website.
I'm also thinking how pagination really doesn't work with this implementation, which is something most people with this kind of page would want to have.

[justintadlock]

I would avoid Query Loop variations altogether if this is meant for the main query on archive pages. This is because the main query is going to take hold here.

As just a general pattern, I think it's OK to just let users worry about featured images if nothing can be done about the issue with variations + patterns or there's no good way to do default featured images.

Linked in that issue there's a workaround via the functions.php: WordPress/gutenberg#32447 (comment)

I was just going to suggest this. :)

I'm not sure I understand what you need to do here. Can't you target the variation with CSS now?

You can't target a variation with CSS. But you can potentially build something via settings.custom in theme.json. All it does is create CSS custom properties, which can be overwritten in style variations.

[carolinan]

Has anyone tried using the post_thumbnail_html filter? I assume we want to insert the markup for the featured image block with the correct src: including the figure, link, class names, style, sizes and srcset.

[luminuu]

@carolinan I don't think anyone has tried this yet.