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

Add more colorful header patterns, fix dark footer pattern #211

Merged
merged 11 commits into from
Nov 5, 2021
Merged

Add more colorful header patterns, fix dark footer pattern #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4915c14
Add new patterns
kjellr Nov 3, 2021
7c7a7b6
Rename bird icon.
kjellr Nov 3, 2021
1fedaea
Begin revising header patterns.
kjellr Nov 4, 2021
44f060c
Remove changes from #204
kjellr Nov 5, 2021
5c61e91
Delete unused image.
kjellr Nov 5, 2021
a0ea1c3
Merge branch 'trunk' into try/colorful-header-patterns
kjellr Nov 5, 2021
482a70d
Fix footer color variable.
kjellr Nov 5, 2021
198d9d6
Add colors to centered and social patterns.
kjellr Nov 5, 2021
b4b1669
Change pattern titles to sentence case.
kjellr Nov 5, 2021
00cd2c2
Allow for left/right padding in the dark footer pattern.
kjellr Nov 5, 2021
e179e7c
Remove navigationMenuId.
jffng Nov 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/images/icon-binoculars.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 assets/images/bird-icon.jpg → assets/images/icon-bird.jpg
View file
Open in desktop
File renamed without changes
13 changes: 6 additions & 7 deletions inc/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,17 @@ function twentytwentytwo_register_block_patterns() {
'header-default',
'header-large-dark',
'header-with-tagline',
'header-text-only-with-stacked-tagline',
'header-text-only-green-background',
'header-text-only-salmon-background',
'header-title-and-button',
'header-text-only',
'header-text-only-with-tagline',
'header-text-only-all-caps-with-tagline',
'header-logo-navigation',
'header-logo-navigation-social',
'header-text-only-with-tagline-black-background',
'header-logo-navigation-gray-background',
'header-logo-navigation-social-black-background',
'header-title-navigation-social',
'header-logo-navigation-offset-tagline',
'header-stacked',
'header-centered-logo',
'header-centered-logo-in-navigation',
'header-centered-logo-black-background',
'header-centered-title-navigation-social',
'header-title-and-button',
'hidden-404',
Expand Down
6 changes: 3 additions & 3 deletions inc/patterns/footer-dark.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
'title' => __( 'Dark footer with title and citation', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-footers' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-title /-->
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:site-title /-->

<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">' .
Expand Down
2 changes: 1 addition & 1 deletion inc/patterns/footer-title-tagline-social.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#1a4548","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org/","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->
Expand Down
22 changes: 22 additions & 0 deletions inc/patterns/header-centered-logo-black-background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?php
/**
* Header with centered logo and black background
*/
return array(
'title' => __( 'Header with centered logo and black background', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"max(1.25rem, 5vw)","top":"max(1.25rem, 5vw)"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw)"><!-- wp:navigation {"itemsJustification":"right"} -->
<!-- wp:navigation-link {"isTopLevelLink":true} /-->

<!-- wp:navigation-link {"isTopLevelLink":true} /-->

<!-- wp:site-logo {"width":90} /-->

<!-- wp:navigation-link {"isTopLevelLink":true} /-->

<!-- wp:navigation-link {"isTopLevelLink":true} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group -->',
);
22 changes: 0 additions & 22 deletions inc/patterns/header-centered-logo-in-navigation.php
View file
Open in desktop

This file was deleted.

14 changes: 6 additions & 8 deletions inc/patterns/header-centered-logo.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<?php
/**
* Header with centered Logo block pattern
* Header with centered logo block pattern
*/
return array(
'title' => __( 'Header with centered Logo', 'twentytwentytwo' ),
'title' => __( 'Header with centered logo', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}},"backgroundColor":"primary","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","textTransform":"uppercase"}}} /--></div>
<!-- /wp:column -->

Expand All @@ -17,9 +17,7 @@
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation --></div>
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
Expand Down
16 changes: 8 additions & 8 deletions inc/patterns/header-centered-title-navigation-social.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<?php
/**
* Centered title with Navigation and Social Links Header block pattern
* Centered header with navigation, social links, and salmon background block pattern
*/
return array(
'title' => __( 'Centered title with Navigation and Social Links Header', 'twentytwentytwo' ),
'title' => __( 'Centered header with navigation, social links, and salmon background', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"left","isResponsive":true} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}},"spacing":{"padding":{"top":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}},"backgroundColor":"secondary","textColor":"primary","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-primary-color has-secondary-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"left"} -->
<!-- wp:page-list /-->
<!-- /wp:navigation --></div>
<!-- /wp:column -->

Expand All @@ -19,7 +19,7 @@
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(--wp--preset--color--foreground)","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"right"}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
Expand Down
4 changes: 2 additions & 2 deletions inc/patterns/header-default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<?php
/**
* Default Header block pattern
* Default header block pattern
*/
return array(
'title' => __( 'Default Header', 'twentytwentytwo' ),
'title' => __( 'Default header', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
Expand Down
4 changes: 2 additions & 2 deletions inc/patterns/header-large-dark.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<?php
/**
* Large Header block pattern
* Large header block pattern
*/
return array(
'title' => __( 'Large Header', 'twentytwentytwo' ),
'title' => __( 'Large header', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","bottom":"8rem","right":"0px","left":"0px"},"margin":{"bottom":"8rem"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
Expand Down
18 changes: 18 additions & 0 deletions inc/patterns/header-logo-navigation-gray-background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php
/**
* Logo and navigation header with gray background
*/
return array(
'title' => __( 'Logo and navigation header with gray background', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}},"backgroundColor":"secondary","textColor":"foreground","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-foreground-color has-secondary-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"0rem","top":"0px","right":"0px","left":"0px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:0px;padding-right:0px;padding-bottom:0rem;padding-left:0px"><!-- wp:site-logo {"width":64} /-->

<!-- wp:navigation {"itemsJustification":"right"} -->
<!-- wp:page-list /-->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
4 changes: 2 additions & 2 deletions inc/patterns/header-logo-navigation-offset-tagline.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<?php
/**
* Logo, Navigation, and offset Tagline Header block pattern
* Logo, navigation, and offset tagline Header block pattern
*/
return array(
'title' => __( 'Logo, Navigation, and offset Tagline Header', 'twentytwentytwo' ),
'title' => __( 'Logo, navigation, and offset tagline Header', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem"}}}} -->
Expand Down
24 changes: 24 additions & 0 deletions inc/patterns/header-logo-navigation-social-black-background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?php
/**
* Logo, navigation, and social links header with black background block pattern
*/
return array(
'title' => __( 'Logo, navigation, and social links header with black background', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)"}}},"backgroundColor":"tertiary","textColor":"foreground","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-foreground-color has-tertiary-background-color has-text-color has-background has-link-color" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"0rem","top":"0px","right":"0px","left":"0px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:0px;padding-right:0px;padding-bottom:0rem;padding-left:0px"><!-- wp:site-logo {"width":64} /-->

<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->

<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(--wp--preset--color--foreground)","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->
<!-- /wp:navigation --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
22 changes: 0 additions & 22 deletions inc/patterns/header-logo-navigation-social.php
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions inc/patterns/header-logo-navigation.php
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions inc/patterns/header-stacked.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<?php
/**
* Logo and Navigation Header block pattern
* Logo and navigation header block pattern
*/
return array(
'title' => __( 'Logo and Navigation Header', 'twentytwentytwo' ),
'title' => __( 'Logo and navigation header', 'twentytwentytwo' ),
'categories' => array( 'twentytwentytwo-headers' ),
'blockTypes' => array( 'core/template-part/header' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
Expand Down
20 changes: 0 additions & 20 deletions inc/patterns/header-text-only-all-caps-with-tagline.php
View file
Open in desktop

This file was deleted.

Loading