Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bundle new collection of Header and Footer block patterns #43157

Merged
merged 16 commits into from
Aug 18, 2022
Merged

Bundle new collection of Header and Footer block patterns #43157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f12e950
Bundle new collection of Header and Footer block patterns
mcsf Aug 11, 2022
f386096
i18n: Add 'gutenberg' textdomain to titles' _x() calls
mcsf Aug 15, 2022
c9bb594
Spacer block: pass height attribute as string with unit
mcsf Aug 15, 2022
cd0f9cb
i18n: Make pattern elements translatable when applicable
mcsf Aug 15, 2022
6d65313
Fix filename for pattern "Simple header"
mcsf Aug 15, 2022
4f8a535
Fix names: centered-logo <--> centered-logo-in-navigation
mcsf Aug 15, 2022
5d417cc
Fix curly quote
mcsf Aug 16, 2022
283d4a2
Update padding in simple-header-with-background-color
mcsf Aug 16, 2022
440e05e
Source image assets from s.w.org
mcsf Aug 16, 2022
8afb797
Wrap social media links' text with __()
mcsf Aug 17, 2022
cbadecd
Empty Navigation blocks to ensure fallback
mcsf Aug 17, 2022
1f41e45
Add `@access private` and `@since` to new compat function
mcsf Aug 17, 2022
8414c6a
logo-navigation-and-social-icons: use Navigation Links instead of Pag…
mcsf Aug 17, 2022
a641f63
Remove pattern: logo-navigation-and-social-icons
mcsf Aug 17, 2022
0a5d5b4
i18n: fix textdomain for social media links
mcsf Aug 18, 2022
44016e8
Fix markup for simple-header, simple-header-with-image
mcsf Aug 18, 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
45 changes: 45 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,48 @@ function gutenberg_register_theme_block_patterns() {
}
remove_action( 'init', '_register_theme_block_patterns' );
add_action( 'init', 'gutenberg_register_theme_block_patterns' );

/**
* Registers Gutenberg-bundled patterns, with a focus on headers and footers
* for site editing.
*
* @since 6.1.0
* @access private
*/
function gutenberg_register_core_block_patterns() {
$should_register_core_patterns = get_theme_support( 'core-block-patterns' );

if ( $should_register_core_patterns ) {
$core_block_patterns = array(
'centered-footer',
'centered-footer-with-social-links',
'centered-header',
'centered-logo-in-navigation',
'footer-with-background-color-and-three-columns',
'footer-with-credit-line-and-navigation',
'footer-with-large-font-size',
'footer-with-navigation-and-credit-line',
'footer-with-search-site-title-and-credit-line',
'footer-with-site-title-and-credit-line',
'header-with-large-font-size',
'left-aligned-footer',
'right-aligned-footer',
'simple-header',
'simple-header-inside-image',
'simple-header-with-background-color',
'simple-header-with-image',
'simple-header-with-tagline',
'simple-header-with-tagline-2',
'site-title-and-menu-button',
'site-title-and-vertical-navigation',
);

foreach ( $core_block_patterns as $core_block_pattern ) {
register_block_pattern(
'core/' . $core_block_pattern,
require __DIR__ . '/block-patterns/' . $core_block_pattern . '.php'
);
}
}
}
add_action( 'init', 'gutenberg_register_core_block_patterns' );
41 changes: 41 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/centered-footer-with-social-links.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<?php
/**
* Footer: Centered footer with social links.
*
* @package WordPress
*/

return array(
'title' => _x( 'Centered footer with social links', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->

<!-- wp:site-tagline {"textAlign":"center"} /-->

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

<!-- wp:social-links {"className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->

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

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->',
);
25 changes: 25 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/centered-footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php
/**
* Footer: Centered footer.
*
* @package WordPress
*/

return array(
'title' => _x( 'Centered footer', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
19 changes: 19 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/centered-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?php
/**
* Header: Centered header.
*
* @package WordPress
*/

return array(
'title' => _x( 'Centered header', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/header' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","bottom":"4em"}}}} -->
<div class="wp-block-group alignfull" style="padding-top:2em;padding-bottom:4em"><!-- wp:site-logo {"align":"center"} /-->

<!-- wp:site-title {"textAlign":"center","fontSize":"large"} /-->

<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"center"}} /--></div>
<!-- /wp:group -->',
);
25 changes: 25 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/centered-logo-in-navigation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php
/**
* Header: Centered logo in navigation.
*
* @package WordPress
*/

return array(
'title' => _x( 'Centered logo in navigation', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/header' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","bottom":"4em"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-group alignfull" style="padding-top:2em;padding-bottom:4em"><!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center"}} --><!-- wp:navigation-link {"label":"' . __( 'Home', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"' . __( 'About', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->

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

<!-- wp:navigation-link {"label":"' . __( 'Blog', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"' . __( 'Contact', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /--><!-- /wp:navigation -->

</div>
<!-- /wp:group -->',
);
53 changes: 53 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-background-color-and-three-columns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<?php
/**
* Footer: Footer with background color and three columns.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with background color and three columns', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":false}} -->
<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:4em;padding-bottom:2em"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>' . __( 'Social Media', 'gutenberg' ) . '</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">' . __( 'Facebook', 'gutenberg' ) . '</a><br><a href="#">' . __( 'Instagram', 'gutenberg' ) . '</a><br><a href="#">' . __( 'Twitter', 'gutenberg' ) . '</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>' . __( 'Where We Are', 'gutenberg' ) . '</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>' . __( '2020 Lomita Blvd, <br>Torrance, CA 90101<br>United States', 'gutenberg' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
28 changes: 28 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-credit-line-and-navigation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php
/**
* Footer: Footer with credit line and navigation.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with credit line and navigation', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph -->
<p>'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
</div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
25 changes: 25 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-large-font-size.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php
/**
* Footer: Footer with Large Font Size.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with Large Font Size', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"15px","padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
Copy link
Contributor

@carolinan carolinan Aug 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Not a blocker of course, but this inconsistency of some patterns using em and this pattern using px for the spacing is a bit strange.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll defer to @beafialho again. :)

Copy link

Choose a reason for hiding this comment

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

I usually work with px. Can we apply the equivalent em values?

<div class="wp-block-group alignfull" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;"><!-- wp:site-title {"textAlign":"center","fontSize":"large"} /-->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->',
);
27 changes: 27 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-navigation-and-credit-line.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php
/**
* Footer: Footer with navigation and credit line.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with navigation and credit line', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em">
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"}} /-->
<!-- wp:paragraph -->
<p>'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
47 changes: 47 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-search-site-title-and-credit-line.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<?php
/**
* Footer: Footer with search, site title, and credit line.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with search, site title, and credit line', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:search {"label":"' . __( 'Search', 'gutenberg' ) . '","showLabel":false,"width":100,"widthUnit":"%","buttonText":"' . __( 'Search', 'gutenberg' ) . '","buttonUseIcon":true} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
);
27 changes: 27 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/footer-with-site-title-and-credit-line.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php
/**
* Footer: Footer with site title and credit line.
*
* @package WordPress
*/

return array(
'title' => _x( 'Footer with site title and credit line', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/footer' ),
'categories' => array( 'footer' ),
'content' => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->

<!-- wp:paragraph -->
<p>'
. sprintf(
/* translators: %s: WordPress */
__( 'Proudly powered by %s', 'gutenberg' ),
'<a href="https://wordpress.org">WordPress</a>'
) .
'</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
);
17 changes: 17 additions & 0 deletions lib/compat/wordpress-6.1/block-patterns/header-with-large-font-size.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<?php
/**
* Header: Header with Large Font Size.
*
* @package WordPress
*/

return array(
'title' => _x( 'Header with Large Font Size', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/template-part/header' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"large"} /-->

<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"blockGap":"30px"}},"fontSize":"large"} /--></div>
<!-- /wp:group -->',
);
Loading