Rough starting template for month in WP #81
Conversation
tellyworth
added
Good First Issue
tellyworth
changed the title
| <!-- This is a hack to ensure content isn't covered by the fixed header --> | ||
| <!-- wp:template-part {"slug":"header","align":"full","className":"site-header-offset"} /--> | ||
|
|
||
| <!-- wp:query {"tagName":"main","className":"site-content-container","displayLayout":{"type":"flex","columns":4},"query":{"perPage":"10000","inherit":false}} --> |
There was a problem hiding this comment.
I'm not sure of a good way to put the blue paintbrush strokes in-between the years 🤔
We can't group the posts into years and then loop through each group, since Gutenberg doesn't support dynamic templates - WordPress/gutenberg#32939
Aside: That one issue is responsible for 70% of the difficulties I've run into :/ . I've been tracking them at https://github.com/WordPress/wporg-news-2021/issues?q=is%3Aissue+is%3Aopen+label%3A%22blocked%3A+external%22, so it'd be good to add this one as well if we don't figure out a solution.
We could maybe try something with CSS, like
body.category.month-in-wordpress .entry-header nth-of-type(12)::after {
background-image: url(...)
}...but that would need to account for how the current won't have 12 months, and previous years won't always have 12 months.
There was a problem hiding this comment.
At 1300px some of the columns jump off the screen.
I'm guessing some of the CSS alignment that's applied to typical categories is causing that. some of the containers might need alignwide to avoid that.
you might also need to change some of the alignment/post-content styles to apply to body.category:not(.month-in-wordpress) or something.
I'm happy to dig in more if you run into any questions about how it's currently setup or anything.
There was a problem hiding this comment.
I think the query will also need categoryIDs to limit it to just the MIW cat.
There was a problem hiding this comment.
( er, I meant these to be 3 separate threads, but all related to the query block. I guess GH combines them if they're for the same line 🙁 )
There was a problem hiding this comment.
After tinkering a bit, the best idea I have for the spacer between years is with a PHP filter that hooks post_class, and adds conditional classes to the post for various special contexts that we need. For instance a first-in-year or last-in-year class. Then use ::after to deal with it in CSS.
A similar hack might work for other situations where conditional formatting is needed but the logic is too complex for CSS. Like the conditional blue backgrounds for #76.
It's not a great solution but would move things along. Do you see any problems with that?
There was a problem hiding this comment.
Yeah, that that sounds like a good workaround 👍🏻
...content/themes/wporg-news-2021/block-template-parts/content-category-month-in-wordpress.html
Show resolved
Hide resolved
| <!-- wp:post-template --> | ||
| <!-- wp:template-part {"slug":"content-category-month-in-wordpress","tagName":"article","layout":{"inherit":true}} /--> | ||
| <!-- /wp:post-template --> | ||
|
|
There was a problem hiding this comment.
We could leave it off for this template, since there's only ~100 posts, but we'll have to get it working for other templates, and I'm guessing the same solution would work here too
This is a starting point for the month-in-wordpress templates. There's no CSS changes yet, just the markup. Some notes: * The wp:query block has some limitations and oddities. I've set columns to 4 because otherwise it was only showing 2. Could be an off-by-one bug or just some quirky layout stuff. * I used perPage:10000. 0/-1 don't work like WP_Query. I'd prefer to set the limit to something like 60 (5 years per page), but it seems that the pagination block doesn't pay attention to the query block's page parameters and that would mean putting a magic number in two places. Probably there's a sensible way to handle that, but for now I've just removed the pagination altogether.
tellyworth
force-pushed
the
add/month-in-wp-rough
branch
from
30c0a54
to
73d06e9
Compare
This uses the `category` pseudo-attribute from #88.
There's a weird bug or unexpected behaviour around setting the query vars in this context. This isn't right but it'll look better for the demo.
|
This isn't complete but it might be possible to polish it up in time for the demo. |
This is a starting point for the month-in-wordpress templates. There's no CSS changes yet, just the markup.
Some notes:
Fixes #77.