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

Add page block patterns #104

Merged
merged 17 commits into from Oct 14, 2021
Merged

Add page block patterns #104

merged 17 commits into from Oct 14, 2021

Conversation

MaggieCabrera
Copy link
Collaborator

@MaggieCabrera MaggieCabrera commented Oct 13, 2021

Description

Closes #19

This PR creates a blank page template that only adds the post-content block and the 3 page layout patterns from #19

Testing Instructions

  1. Create a new page
  2. Select the Blank page template on the sidebar
  3. Insert one of the new patterns under the Twenty Twenty-Two Page layouts category and check that everything works and looks as intended

<!-- /wp:heading -->

<!-- wp:image {"align":"full","style":{"color":{}}} -->
<figure class="wp-block-image alignfull"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/img/patterns/watching-birds.png" alt="' . esc_attr__( 'TBD', 'twentytwentytwo' ) . '"/></figure>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@melchoyce @kjellr I'm missing the alt text for the 2 images on these patterns.

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.

Thanks for picking these up @MaggieCabrera !

When used with the blank template, it looks like each of these patterns could use some top and bottom padding:

Screen Shot 2021-10-13 at 1 58 19 PM

@melchoyce
Copy link

Thanks for picking these up @MaggieCabrera !

When used with the blank template, it looks like each of these patterns could use some top and bottom padding

In my test site, I made my own blank template with a 100px spacer above and below the page content, fwiw.

@kjellr
Copy link
Collaborator

kjellr commented Oct 13, 2021

In my test site, I made my own blank template with a 100px spacer above and below the page content, fwiw.

I think we can just add something like that to each of these patterns. Maybe borrow the padding values used around our header templates?

@MaggieCabrera
Copy link
Collaborator Author

I added a group to all of these patterns and the 8rem vertical padding that the header and footer of the theme applies is applied here too:

Screenshot 2021-10-14 at 09-31-39 Test blank – tt2

Screenshot 2021-10-14 at 09-33-37 Test blank – tt2

@MaggieCabrera
Copy link
Collaborator Author

this should be ready for another review, pending my comments about the colors and the missing alt texts, I think these patterns should be ready now.

@kjellr
Copy link
Collaborator

kjellr commented Oct 14, 2021

I left some font size updates above. One other small comment: Some of these bump up against the edges of the screen:

Screen Shot 2021-10-14 at 7 58 32 AM

We should apply the same (admittedly weird) left + right padding values to these that we use for the main body content in our templates:

<!-- wp:group {"style":{"spacing":{"padding":{"right":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}}} -->

(this should apply to the interior left/right padding of the green group container as well.)

inc/block-patterns.php Outdated Show resolved Hide resolved
@jffng jffng mentioned this pull request Oct 14, 2021
Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>
@MaggieCabrera
Copy link
Collaborator Author

I added the lateral paddings and changed the font sizes as suggested

@kjellr
Copy link
Collaborator

kjellr commented Oct 14, 2021

Thanks, Maggie! I made a few adjustments:

  • Added alt text where it was missing.
  • Changed the padding around so that the full-width bird images could go full-width.
  • Switched away from using a Cover block for the green one, for better responsive behavior.
  • Indented to match the format of existing patterns.
  • Compressed/trimmed the video so it's 3.6mb (it was over 20mb before!)
  • Changed the category name from "Layout Pages" to simply "Pages".
  • Added more complete image credits.

This should be in a good spot for another review!

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.

👏 So nice.

@kjellr kjellr merged commit 69bb33d into trunk Oct 14, 2021
@kjellr kjellr deleted the add-page-block-patterns branch October 14, 2021 19:31
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.

Block Patterns: Add Page Layout Patterns
4 participants