Skip to content
This repository has been archived by the owner on Jan 26, 2022. It is now read-only.

Update post, page, and index templates #136

Merged
merged 13 commits into from
Oct 20, 2021
Merged

Update post, page, and index templates #136

merged 13 commits into from
Oct 20, 2021

Conversation

kjellr
Copy link
Collaborator

@kjellr kjellr commented Oct 19, 2021

I've been tidying up many of our templates in Figma, and this is an attempt to put those new templates into action. (Apologies in advance for the larger PR, but one small change here and there led to another). A few general notes before I dive into specifics:

Index Template

This PR switches out the base index template with a fresh one that's more flexible. Previously, the default template was a grid, which looked pretty broken when someone had a mix of posts with featured images and without. This new layout is a bit more of a traditional blog layout, which scales a little better that way.

  • The PR makes sure that the index.html inherits the main query, and it also adds a Query Title block. Combined, that ensures that this same template can work for archive pages.
  • The old template is still available as a Query pattern, with the new title "Grid of posts". I did some light renaming of other query grid patterns to match.

Blog index:

Before After
Screen Shot 2021-10-19 at 15 43 21 Screen Shot 2021-10-19 at 15 42 43

Archive page:

Before After
Screen Shot 2021-10-19 at 16 05 40 Screen Shot 2021-10-19 at 16 05 31

Single & Page Templates

In the Figma file, I did some explorations around how to standardize spacing, eliminate the "boxy" feel we were getting from tons of dividers, and to better handle situations when there was no featured image. This PR implements those new changes.

Posts:

Before After
Screen Shot 2021-10-19 at 15 49 52 Screen Shot 2021-10-19 at 15 48 47

Pages:

Before After
Screen Shot 2021-10-19 at 15 51 43 Screen Shot 2021-10-19 at 15 52 27

Custom Templates

As introduced in the Figma file, I added a couple custom templates as well. These look identical to the normal ones, except that they do not have any separators. When testing these templates out, you may notice that all templates appear for all post types, even though they have specific postTypes defined. There's a Gutenberg bug already filed for this here: WordPress/gutenberg#31704

@kjellr kjellr requested a review from jffng October 19, 2021 20:14
@kjellr kjellr self-assigned this Oct 19, 2021
@kjellr
Copy link
Collaborator Author

kjellr commented Oct 19, 2021

I may end up making some small design changes to the index.html template, but the rest should be fair game for review.

@audrasjb
Copy link
Contributor

FWIW, those changes looks relevant to me 👍

@kjellr
Copy link
Collaborator Author

kjellr commented Oct 20, 2021

I may end up making some small design changes to the index.html template, but the rest should be fair game for review.

With eda696b, this is in a decent spot for now, and I can iterate later on if need be. The whole PR should be ready to review!


<!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
<!-- wp:group {"align":"wide","layout":{"inherit":true}} -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this block need to be align: wide?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I added a commit to remove some unnecessary alignment declarations.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you both!

Copy link
Collaborator

@jffng jffng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made a couple minor adjustments to the index template, I think this is looking good to bring in. Thanks @kjellr !

{
"name": "blank",
"title": "Blank",
"postTypes": [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that the post types do not work yet, but they will soon: WordPress/gutenberg#35802

@jffng jffng merged commit f3506d5 into trunk Oct 20, 2021
@jffng jffng deleted the update/templates branch October 20, 2021 15:39
@jffng jffng mentioned this pull request Oct 21, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants