Add header block patterns #74

kjellr · 2021-10-08T18:43:41Z

Description

Addresses #14. (Probably closes it for now at least). As per #12, we may move these to the directory at some point, but I think it makes sense to start building them in here to get started.

This PR adds 12 of the block patterns from the initial designs:

The four that are marked with an ❌ were not possible to create with the current block controls. I think that's fine though... we can leave them out for now.

Some technical notes:

I added these to a "Twenty Twenty-Two Headers" category. We'll have a lot of block patterns in this theme, so I think it makes sense to have multiple, specific categories.
This includes the default header and header-large-dark patterns as used in our block template parts. Theme template parts don't currently show up in the theme carousel, so I think this is a sound strategy? That should probably change though.
A few of these don't wrap super-nicely on smaller screens. 😕
- Header with Tagline (Screenshot)
- Text-only Header with Tagline (Screenshot)
- Text-only Header with Tagline and all-caps Title (Screenshot)
~~The vertical gap between the title and tagline on Header with Tagline and Text-only Header with stacked Tagline is clearly too big. I'm not sure if we can adjust that yet though?~~
I opted not to include any left/right padding around the patterns themselves. In our templates I've been adding that to the parent template part, since it needs to match up with the padding around the main template too. Keeping left/right padding out of the patterns seems more versatile than having it in there.
While editing this I realized that the Site Title in our header.html and header-large-black.html template parts is supposed to be italic in order to match the comps. I made that change here to sync things up.

Screenshots

Testing Instructions

Add a "Header" block.
Choose "New header"
Scroll through the carousel, insert the new patterns, and test them out.

inc/patterns/header-logo-navigation-social.php

jffng · 2021-10-08T19:04:50Z

inc/patterns/header-default.php

+					<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->


If I update the navigation in the standard header, and I go to insert a new header from one of these patterns, it pulls in the old / original navigation. Is there a way to get the pattern to pull in a navigation template part, i.e. the nav that I've updated already?

Not yet! But there's some early work in WordPress/gutenberg#35418 to help make that sort of thing happen. I suggest we hold on and see how that shakes out before implementing any sort of workarounds here.

kjellr · 2021-10-11T12:15:55Z

The vertical gap between the title and tagline on Header with Tagline and Text-only Header with stacked Tagline is clearly too big. I'm not sure if we can adjust that yet though?

Fixed in b047708 via some block margin adjustments. 👍

kjellr · 2021-10-11T14:07:10Z

After chatting on slack with @mtias and @jasmussen, I've pushed mostly-working versions of the four patterns that were marked with an ❌ to this PR as well. I've added them to the end of the patterns list. Let's merge them in for now and open a followup issue to address issues. For now, here they are along with the known bugs:

Header with centered Logo

Current issues:

This wraps poorly on small screens. (GIF)

Header with centered Logo in Navigation

Current issues:

The site logo disappears on smaller screens. (Screenshot)
The layout of the expanded menu looks weird. (Screenshot)
Depending on the number/length of menu items, the logo is not necessarily located in the exact center. (Screenshot)

Centered title with Navigation and Social Links Header

Current issues:

The items wrap oddly on small screens. (Screenshot)
The navigation items start stacking in a weird way on medium breakpoints. (Screenshot)

Title and Button Header

Current issues:

This one is supposed to have the hamburger icon visible by default on all breakpoints. Requires a resolution to [Navigation Block] Add option to use the "responsive menu" at all times gutenberg#34783.

This should be ready for a review. If they generally look good, I suggest we follow up with issues for everything above and work from there.

…ess/twentytwentytwo into add/header-block-patterns

mtias · 2021-10-11T14:27:24Z

The ones that stack awkwardly in mobile are good ways to test solutions for auto-collapsing containers.

scruffian · 2021-10-11T15:50:38Z

Quite a lot of the patterns use the same spacing values. What do you think about making these variables in the custom part of theme.json?

scruffian · 2021-10-11T15:55:23Z

For the header and the header patterns, what do you think about using a<header> tag? You have to add "tagName":"header" to the block....

kjellr · 2021-10-11T16:44:39Z

Quite a lot of the patterns use the same spacing values. What do you think about making these variables in the custom part of theme.json?

I considered this, but in the interest of portability, I though we should put numerical values in there for now. If we do make these patterns available in the directory, we can't guarantee that a users' theme has that variable defined. In any case, if we decide to add that later, it's a quick find and replace.

For the header and the header patterns, what do you think about using a
tag? You have to add "tagName":"header" to the block....

I thought about this too. We can't guarantee where the user places these patterns, so I wasn't sure if it made sense to mark them as headers? We can probably expect that these are headers since they're labeled as such. I'll update so that it uses the header tag.

inc/patterns/header-centered-logo-in-navigation.php

jffng · 2021-10-11T21:02:47Z

inc/patterns/header-centered-logo.php

+	'title'      => __( 'Header with centered Logo', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","tagName":"header","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->


Most of these header patterns do not have a left / right padding, so when I insert them at the root level, this is how they appear:

Yeah, I'm unsure of the best way to handle left-right padding for these, but I think leaving it out makes the most sense for now. As I mentioned above:

I opted not to include any left/right padding around the patterns themselves. In our templates I've been adding that to the parent template part, since it needs to match up with the padding around the main template too. Keeping left/right padding out of the patterns seems more versatile than having it in there.

... which I still feel is true. Because for instance, the user will want the same padding around the entire page — the footer, page content, etc.

Should the new site padding be used?

Yes, it should. 😄 I'll work that into a separate PR.

FWIW, I tried this, but it currently leaves us in a worse state than we were in before — the header with the background color isn't possible yet: #88

jffng · 2021-10-11T21:03:46Z

inc/patterns/header-centered-title-navigation-social.php

+	'title'      => __( 'Centered title with Navigation and Social Links Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","tagName":"header","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->


With all of these patterns and running Gutenberg trunk, I am getting a header nested inside a header in the markup:

Oh that's weird. This only happens if you add a header block first, and then choose these from the carousel. Then they appear wrapped in a header. I guess the solution is to remove the header tagName here.

Should be all set as of 473937b.

jffng

I think this is a good spot to bring in and we can iterate, since other PRs are relying on it too.

@westonruter

Note that some of the references below are not the only contributions (commits, PR review, helpful issue input, etc.) from these folks, but merely the first ones I encountered while reviewing items committed to `trunk` since the initial branch commit. @westonruter via WordPress#51 @ntwb via WordPress#73 @juricav via WordPress#113 @Sandstromer via WordPress#69 @jasmussen via WordPress#74 @melchoyce via WordPress#16 @Riyadh1734 via WordPress#182 @desrosj via WordPress#223 @beafialho via WordPress#172 @clucasrowlands via WordPress#171 @Otto42 via WordPress#28 @luminuu via WordPress#107 @felixarntz via WordPress#240

@westonruter

* add missing props to CONTRIBUTORS.md Note that some of the references below are not the only contributions (commits, PR review, helpful issue input, etc.) from these folks, but merely the first ones I encountered while reviewing items committed to `trunk` since the initial branch commit. @westonruter via #51 @ntwb via #73 @juricav via #113 @Sandstromer via #69 @jasmussen via #74 @melchoyce via #16 @Riyadh1734 via #182 @desrosj via #223 @beafialho via #172 @clucasrowlands via #171 @Otto42 via #28 @luminuu via #107 @felixarntz via #240 * add dotorg handles to CONTRIBUTORS.md * Fix Rich's WP.org username. Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

kjellr added 3 commits October 8, 2021 14:09

Add header block patterns

9de6fd9

Remove empty paragraph block.

f69b1fc

Register title nav social pattern.

7ccc96d

kjellr added [Type] Enhancement New feature or request [Component] Block Patterns labels Oct 8, 2021

kjellr added this to the Feature Freeze milestone Oct 8, 2021

kjellr requested a review from jffng October 8, 2021 18:43

kjellr self-assigned this Oct 8, 2021

kjellr added 3 commits October 8, 2021 14:47

Add text-only header with stacked tagline.

dee270b

Fix pattern slug.

e958956

Reorder patterns, add missing comma.

6963f75

jffng reviewed Oct 8, 2021

View reviewed changes

inc/patterns/header-logo-navigation-social.php Outdated Show resolved Hide resolved

jffng reviewed Oct 8, 2021

View reviewed changes

Use preset color variables for the social links block.

65da3c1

This was referenced Oct 8, 2021

Social Icons: Preset colors do not stay in sync with Global Styles presets WordPress/gutenberg#35480

Closed

Add fontStyle control to Site Tagline block WordPress/gutenberg#35507

Merged

Tidy up margin for stacked title/tagline patterns.

b047708

Add additional patterns.

bcbdc32

kjellr and others added 4 commits October 11, 2021 10:23

Merge branch 'trunk' into add/header-block-patterns

f2c40d6

Merge branch 'trunk' into add/header-block-patterns

09965f5

Fix PHPCS errors.

b63766f

Merge branch 'add/header-block-patterns' of https://github.com/WordPr…

7bd25ea

…ess/twentytwentytwo into add/header-block-patterns

Fix PHPCS errors.

060b0fa

Update all patterns to use a header tagName.

d32c73a

jasmussen reviewed Oct 11, 2021

View reviewed changes

inc/patterns/header-centered-logo-in-navigation.php Outdated Show resolved Hide resolved

Use links instead of two page lists.

ec40e46

This was referenced Oct 11, 2021

Add query block patterns #84

Merged

Add footer patterns #85

Merged

jffng reviewed Oct 11, 2021

View reviewed changes

Remove tagNames to avoid duplication.

473937b

jffng approved these changes Oct 12, 2021

View reviewed changes

kjellr merged commit 82114d0 into trunk Oct 12, 2021

kjellr deleted the add/header-block-patterns branch October 12, 2021 14:10

kjellr restored the add/header-block-patterns branch October 12, 2021 14:12

kjellr deleted the add/header-block-patterns branch October 12, 2021 14:14

This was referenced Oct 12, 2021

Header Patterns: Followup Fixes #89

Closed

Block Patterns: Add Header Patterns #14

Closed

jeffpaul mentioned this pull request Nov 16, 2021

add missing props to CONTRIBUTORS.md #246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add header block patterns #74

Add header block patterns #74

kjellr commented Oct 8, 2021 •

edited

Loading

jffng Oct 8, 2021

kjellr Oct 8, 2021

kjellr commented Oct 11, 2021

kjellr commented Oct 11, 2021 •

edited

Loading

mtias commented Oct 11, 2021

scruffian commented Oct 11, 2021

scruffian commented Oct 11, 2021

kjellr commented Oct 11, 2021

jffng Oct 11, 2021

kjellr Oct 11, 2021

mtias Oct 12, 2021

kjellr Oct 12, 2021

kjellr Oct 12, 2021

jffng Oct 11, 2021

kjellr Oct 11, 2021

kjellr Oct 11, 2021

jffng left a comment

Add header block patterns #74

Add header block patterns #74

Conversation

kjellr commented Oct 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Oct 11, 2021

kjellr commented Oct 11, 2021 • edited Loading

mtias commented Oct 11, 2021

scruffian commented Oct 11, 2021

scruffian commented Oct 11, 2021

kjellr commented Oct 11, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jffng left a comment

Choose a reason for hiding this comment

kjellr commented Oct 8, 2021 •

edited

Loading

kjellr commented Oct 11, 2021 •

edited

Loading