Skip to content
This repository was archived by the owner on Feb 17, 2025. It is now read-only.

Blockbase: refactor footers to patterns #5245

Merged
pbking merged 12 commits into from
Jan 13, 2022
Merged

Blockbase: refactor footers to patterns #5245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9e3f070
refactor blockbase and skatepark's footers into patterns
MaggieCabrera Dec 22, 2021
d025f9b
refactored videomaker's footer to a pattern
MaggieCabrera Dec 22, 2021
780371b
removed skatepark's pattern
MaggieCabrera Dec 22, 2021
177ab5b
refactored arbutus
MaggieCabrera Dec 22, 2021
e39553b
renamed arbutus footer
MaggieCabrera Dec 22, 2021
a656d7a
quadrat, zoologist, geologist + variations
MaggieCabrera Dec 22, 2021
2f90c57
Kingsley and Mayland footers
MaggieCabrera Dec 22, 2021
c36e1b4
Seedlet blocks footer
MaggieCabrera Dec 22, 2021
9f076ed
fix vertical footer pattern
MaggieCabrera Dec 22, 2021
0afada4
added spacer to videomaker
MaggieCabrera Dec 22, 2021
9b45e81
block style for search and new footer pattern
MaggieCabrera Dec 22, 2021
3705f72
tagline on columns pattern
MaggieCabrera Jan 10, 2022
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
14 changes: 1 addition & 13 deletions arbutus/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1 @@
<!-- wp:group {"style":{"spacing":{"padding":{"top":"60px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:60px"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"20px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="padding-bottom:20px"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><meta charset="utf-8"><strong>Proudly Powered by <a rel="nofollow" href="https://wordpress.org">WordPress</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"itemsJustification":"center","overlayMenu":"never","__unstableSocialLinks":"social"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"blockbase/footer-separator"} /-->
12 changes: 12 additions & 0 deletions blockbase/assets/ponyfill.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 1 addition & 11 deletions blockbase/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","right":"0px","bottom":"30px","left":"0px"}}}} -->
<div class="wp-block-group" style="padding-top:80px;padding-right:0px;padding-bottom:30px;padding-left:0px">
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} -->
<p class="has-text-align-center" style="font-size:var(--wp--custom--font-sizes--tiny);">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"blockbase/footer-simple"} /-->
8 changes: 8 additions & 0 deletions blockbase/inc/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ function blockbase_register_block_patterns() {
if ( function_exists( 'register_block_pattern' ) ) {
$block_patterns = array(
'404',
'footer-columns',
'footer-left',
'footer-primary',
'footer-search',
'footer-separator',
'footer-simple',
'footer-small',
'footer-vertical-menu',
);

foreach ( $block_patterns as $block_pattern ) {
Expand Down
8 changes: 8 additions & 0 deletions blockbase/inc/block-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ function blockbase_register_block_styles() {
'style_handle' => 'post-category-icon',
)
);
register_block_style(
'core/search',
array(
'name' => 'small-search',
'label' => __( 'Small', 'blockbase' ),
'style_handle' => 'small-search',
)
);
}
}
endif;
Expand Down
38 changes: 26 additions & 12 deletions skatepark/inc/patterns/pre-footer.php → blockbase/inc/patterns/footer-columns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<?php
/**
* Pre Footer.
* Footer with 3 columns
*
* @package Skatepark
* @package Blockbase
*/

return array(
'title' => __( 'Footer', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"className":"pre-footer"} -->
<div class="wp-block-group alignwide pre-footer" style="padding-top:60px;padding-bottom:60px"><!-- wp:columns -->
'title' => __( 'Footer with 3 columns', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"className":"pre-footer"} -->
<div class="wp-block-group alignwide pre-footer" style="padding-top:60px;padding-bottom:60px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"large"} /-->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">' . esc_html__( "Skatepark's coaches will work with you to develop and improve your skating abilities.", 'skatepark' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:site-tagline {"fontSize":"small"} /-->

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--foreground)","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"http://twitter.com","service":"twitter"} /-->
Expand All @@ -28,16 +30,28 @@

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"14px"}}} -->
<h3 style="font-size:14px;"><strong>' . esc_html__( 'More info', 'skatepark' ) . '</strong></h3>
<h3 style="font-size:14px;"><strong>' . esc_html__( 'More info', 'blockbase' ) . '</strong></h3>
<!-- /wp:heading -->

<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"textDecoration":"underline"}},"fontSize":"small"} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"14px"}}} -->
<h3 style="font-size:14px"><strong>' . esc_html__( 'Search', 'skatepark' ) . '</strong></h3><!-- /wp:heading --><!-- wp:search {"label":"' . esc_html__( 'Search', 'skatepark' ) . '","showLabel":false,"buttonText":"' . esc_html__( 'Search', 'skatepark' ) . '","buttonPosition":"button-inside"} /--></div>
<h3 style="font-size:14px"><strong>' . esc_html__( 'Search', 'blockbase' ) . '</strong></h3><!-- /wp:heading --><!-- wp:search {"label":"' . esc_html__( 'Search', 'blockbase' ) . '","showLabel":false,"buttonText":"' . esc_html__( 'Search', 'blockbase' ) . '","buttonPosition":"button-inside"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
<!-- /wp:group -->

<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"bottom":"30px"}}}} -->
<div class="wp-block-group site-footer" style="padding-bottom: 30px">

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} -->
<p class="has-text-align-center" style="font-size:var(--wp--custom--font-sizes--tiny)">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->',
);
24 changes: 24 additions & 0 deletions blockbase/inc/patterns/footer-left.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?php
/**
* Left aligned footer
*
* @package Blockbase
*/

return array(
'title' => __( 'Left aligned footer', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="padding-top:30px;padding-bottom:30px">
<!-- wp:navigation {"__unstableLocation":"primary","fontSize":"small"} /-->

<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group"><!-- wp:site-title {"fontSize":"small"} /-->

<!-- wp:paragraph {"fontSize":"small","fontFamily":"heading-font"} -->
<p class="has-text-align-left has-small-font-size has-heading-font-font-family">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
25 changes: 25 additions & 0 deletions blockbase/inc/patterns/footer-primary.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php
/**
* Footer with menu
*
* @package Blockbase
*/

return array(
'title' => __( 'Footer with menu', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"32px","right":"32px","bottom":"32px","left":"32px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-title {"fontSize":"small"} /-->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><meta charset="utf-8">Proudly Powered by <a rel="nofollow" href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
26 changes: 26 additions & 0 deletions blockbase/inc/patterns/footer-search.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?php
/**
* Footer with Search Block
*
* @package Blockbase
*/

return array(
'title' => __( 'Footer with Search Block', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"30px"}}}} -->
<div class="wp-block-group" style="padding-bottom:30px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","className":"is-style-small-search"} /--></div>
<!-- /wp:group -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->',
);
25 changes: 25 additions & 0 deletions blockbase/inc/patterns/footer-separator.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php
/**
* Footer with menu and separator
*
* @package Blockbase
*/

return array(
'title' => __( 'Footer with menu and separator', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"60px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:60px"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"20px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="padding-bottom:20px"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><meta charset="utf-8"><strong>Proudly Powered by <a rel="nofollow" href="https://wordpress.org">WordPress</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"itemsJustification":"center","overlayMenu":"never","__unstableSocialLinks":"social"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
23 changes: 23 additions & 0 deletions blockbase/inc/patterns/footer-simple.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?php
/**
* Simple footer
*
* @package Blockbase
*/

return array(
'title' => __( 'Simple footer', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->',
);
23 changes: 23 additions & 0 deletions blockbase/inc/patterns/footer-small.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?php
/**
* Small footer
*
* @package Blockbase
*/

return array(
'title' => __( 'Small footer', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}}}} -->
<div class="wp-block-group" style="padding-top:20px;padding-bottom:20px">
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->',
);
32 changes: 32 additions & 0 deletions blockbase/inc/patterns/footer-vertical-menu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<?php
/**
* Footer with a vertical menu
*
* @package Blockbase
*/

return array(
'title' => __( 'Footer with a vertical menu', 'blockbase' ),
'categories' => array( 'blockbase' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '<!-- wp:group {"layout":{"inherit":"true"}} -->
<div class="wp-block-group">
<!-- wp:group {"align":"wide","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"space-between"},"style":{"spacing":{"padding":{"top":"30px","bottom":"min(30px, 5vw)"}}}} -->
<div class="wp-block-group alignwide" style="padding-top: 30px;padding-bottom: min(30px, 5vw)"> <!-- wp:group -->
<div class="wp-block-group">
<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"footer","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"textTransform":"uppercase"},"spacing":{"blockGap":"0px"}}} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"footer-credit"} -->
<div class="wp-block-group footer-credit">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
',
);
8 changes: 8 additions & 0 deletions blockbase/sass/blocks/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,12 @@
opacity: 0.66;
}
}

/* Block Styles */
&.is-style-small-search{
--wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
.wp-block-search__input {
padding: calc( 0.5 * var(--wp--custom--form--padding) );
}
}
}
14 changes: 7 additions & 7 deletions geologist-blue/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
<div class="wp-block-group site-footer" style="padding-top:150px;padding-bottom: 150px">
<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
<!-- wp:pattern {"slug":"blockbase/footer-simple"} /-->

</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":120} -->
<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
14 changes: 7 additions & 7 deletions geologist-cream/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
<div class="wp-block-group site-footer" style="padding-top:150px;padding-bottom: 150px">
<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
<!-- wp:pattern {"slug":"blockbase/footer-simple"} /-->

</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":120} -->
<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
Loading