Skip to content

Commit a7f0352

Browse files
kjellrkjellr
committed
Add header & footer patterns.
1 parent 6a843df commit a7f0352

File tree

1 file changed

+218
-1
lines changed

1 file changed

+218
-1
lines changed

‎lib/block-patterns.php‎

Lines changed: 218 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
function register_gutenberg_patterns() {
1212
// Register categories used for block patterns.
1313
register_block_pattern_category( 'query', array( 'label' => __( 'Query', 'gutenberg' ) ) );
14+
register_block_pattern_category( 'page-header', array( 'label' => __( 'Page Header', 'gutenberg' ) ) );
15+
register_block_pattern_category( 'page-footer', array( 'label' => __( 'Page Footer', 'gutenberg' ) ) );
1416

1517
// Initial Query block patterns.
1618
register_block_pattern(
@@ -182,6 +184,222 @@ function register_gutenberg_patterns() {
182184
<!-- /wp:social-links -->',
183185
)
184186
);
187+
188+
// Initial Template Part block patterns.
189+
register_block_pattern(
190+
'template-part/header-site-title-navigation',
191+
array(
192+
'title' => __( 'Header with title and navigation', 'gutenberg' ),
193+
'categories' => array( 'page-header' ),
194+
'blockTypes' => array( 'core/template-part/header' ),
195+
'content' => '<!-- wp:columns {"verticalAlignment":"center","align":"full","style":{"color":{"link":"#ffffff","text":"#ffffff","background":"#000000"}}} -->
196+
<div class="wp-block-columns alignfull are-vertically-aligned-center has-text-color has-background has-link-color" style="--wp--style--color--link:#ffffff;background-color:#000000;color:#ffffff"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
197+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"fontSize":"normal"} /--></div>
198+
<!-- /wp:column -->
199+
<!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
200+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} /--></div>
201+
<!-- /wp:column --></div>
202+
<!-- /wp:columns -->',
203+
)
204+
);
205+
206+
register_block_pattern(
207+
'template-part/header-two-navigation-areas',
208+
array(
209+
'title' => __( 'Header with two navigation areas and logo', 'gutenberg' ),
210+
'categories' => array( 'page-header' ),
211+
'blockTypes' => array( 'core/template-part/header' ),
212+
'content' => '<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
213+
<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"33.34%"} -->
214+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.34%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} /--></div>
215+
<!-- /wp:column -->
216+
<!-- wp:column {"verticalAlignment":"center","width":"120px"} -->
217+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:120px"><!-- wp:site-logo {"width":80,"className":"is-style-rounded"} /--></div>
218+
<!-- /wp:column -->
219+
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
220+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"left"} /--></div>
221+
<!-- /wp:column --></div>
222+
<!-- /wp:columns -->',
223+
)
224+
);
225+
226+
register_block_pattern(
227+
'template-part/header-with-social-links',
228+
array(
229+
'title' => __( 'Header with social links', 'gutenberg' ),
230+
'categories' => array( 'page-header' ),
231+
'blockTypes' => array( 'core/template-part/header' ),
232+
'content' => '<!-- wp:columns {"verticalAlignment":"center","align":"full","style":{"color":{"background":"#e7ecde"}}} -->
233+
<div class="wp-block-columns alignfull are-vertically-aligned-center has-background" style="background-color:#e7ecde"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
234+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"left"} /--></div>
235+
<!-- /wp:column -->
236+
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
237+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"textAlign":"center"} /--></div>
238+
<!-- /wp:column -->
239+
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
240+
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","customIconBackgroundColor":"#e7ecde","iconBackgroundColorValue":"#e7ecde"} -->
241+
<ul class="wp-block-social-links has-icon-color has-icon-background-color items-justified-right"><!-- wp:social-link {"url":"#","service":"twitter"} /-->
242+
<!-- wp:social-link {"url":"#","service":"instagram"} /-->
243+
<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
244+
<!-- /wp:social-links --></div>
245+
<!-- /wp:column --></div>
246+
<!-- /wp:columns -->',
247+
)
248+
);
249+
250+
register_block_pattern(
251+
'template-part/header-large-image',
252+
array(
253+
'title' => __( 'Header with large image', 'gutenberg' ),
254+
'categories' => array( 'page-header' ),
255+
'blockTypes' => array( 'core/template-part/header' ),
256+
'content' => '<!-- wp:cover {"url":"https://s.w.org/images/core/5.8/forest.jpg","id":2613,"minHeight":600,"contentPosition":"center center","align":"full"} -->
257+
<div class="wp-block-cover alignfull has-background-dim" style="min-height:600px"><img class="wp-block-cover__image-background wp-image-2613" alt="" src="https://s.w.org/images/core/5.8/forest.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
258+
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
259+
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title {"style":{"color":{"link":"#ffffff"}}} /--></div>
260+
<!-- /wp:column -->
261+
262+
<!-- wp:column -->
263+
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","fontSize":"normal"} /--></div>
264+
<!-- /wp:column --></div>
265+
<!-- /wp:columns -->
266+
267+
<!-- wp:spacer {"height":400} -->
268+
<div style="height:400px" aria-hidden="true" class="wp-block-spacer"></div>
269+
<!-- /wp:spacer -->
270+
271+
<!-- wp:columns {"align":"wide"} -->
272+
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"75%"} -->
273+
<div class="wp-block-column" style="flex-basis:75%"><!-- wp:heading {"style":{"typography":{"fontSize":"48px"}}} -->
274+
<h2 style="font-size:48px">' . esc_html__( 'A stable climate, a sustainable diverse life, and a source of culture.', 'default' ) . '</h2>
275+
<!-- /wp:heading -->
276+
277+
<!-- wp:button {"style":{"color":{"text":"#000000","background":"#ffffff"},"border":{"radius":0}}} -->
278+
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" href="#" style="background-color:#ffffff;color:#000000">' . esc_html__( 'Learn more.', 'default' ) . '</a></div>
279+
<!-- /wp:button --></div>
280+
<!-- /wp:column --></div>
281+
<!-- /wp:columns -->
282+
283+
<!-- wp:column -->
284+
<div class="wp-block-column"></div>
285+
<!-- /wp:column --></div></div>
286+
<!-- /wp:cover -->',
287+
)
288+
);
289+
290+
register_block_pattern(
291+
'template-part/footer-navigation-credit',
292+
array(
293+
'title' => __( 'Footer with navigation and credit line', 'gutenberg' ),
294+
'categories' => array( 'page-footer' ),
295+
'blockTypes' => array( 'core/template-part/footer' ),
296+
'content' => '<!-- wp:columns {"align":"full","style":{"color":{"background":"#000000","text":"#ffffff"}}} -->
297+
<div class="wp-block-columns alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff"><!-- wp:column -->
298+
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","fontSize":"normal"} /--></div>
299+
<!-- /wp:column -->
300+
<!-- wp:column -->
301+
<div class="wp-block-column"><!-- wp:paragraph {"align":"right","fontSize":"normal"} -->
302+
<p class="has-text-align-right has-normal-font-size">' . esc_html__( 'Proudly powered by WordPress', 'default' ) . '</p>
303+
<!-- /wp:paragraph --></div>
304+
<!-- /wp:column --></div>
305+
<!-- /wp:columns -->',
306+
)
307+
);
308+
309+
register_block_pattern(
310+
'template-part/footer-centered-navigation',
311+
array(
312+
'title' => __( 'Centered footer with navigation', 'gutenberg' ),
313+
'categories' => array( 'page-footer' ),
314+
'blockTypes' => array( 'core/template-part/footer' ),
315+
'content' => '<!-- wp:navigation {"orientation":"horizontal","fontSize":"normal"} /-->
316+
<!-- wp:spacer {"height":10} -->
317+
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
318+
<!-- /wp:spacer -->
319+
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"16px"}}} -->
320+
<p class="has-text-align-center" style="font-size:16px">' . esc_html__( 'Powered by WordPress', 'default' ) . '</p>
321+
<!-- /wp:paragraph -->
322+
<!-- /wp:paragraph -->',
323+
)
324+
);
325+
326+
register_block_pattern(
327+
'template-part/footer-latest-posts',
328+
array(
329+
'title' => __( 'Footer with latest posts', 'gutenberg' ),
330+
'categories' => array( 'page-footer' ),
331+
'blockTypes' => array( 'core/template-part/footer' ),
332+
'content' => '<!-- wp:group {"align":"full","style":{"color":{"background":"#e7ecde"}}} -->
333+
<div class="wp-block-group alignfull has-background" style="background-color:#e7ecde"><!-- wp:spacer {"height":10} -->
334+
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
335+
<!-- /wp:spacer -->
336+
<!-- wp:latest-posts {"postsToShow":3,"displayPostContent":true,"excerptLength":12,"postLayout":"grid","displayFeaturedImage":true,"featuredImageSizeWidth":150,"featuredImageSizeHeight":150,"addLinkToFeaturedImage":true} /-->
337+
<!-- wp:spacer {"height":20} -->
338+
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
339+
<!-- /wp:spacer -->
340+
<!-- wp:columns {"verticalAlignment":"bottom","align":"wide"} -->
341+
<div class="wp-block-columns alignwide are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom","width":"33.33%"} -->
342+
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:33.33%"><!-- wp:site-title {"fontSize":"large"} /--></div>
343+
<!-- /wp:column -->
344+
<!-- wp:column {"verticalAlignment":"bottom","width":"66.67%"} -->
345+
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:66.67%"><!-- wp:paragraph {"align":"right","fontSize":"extra-small"} -->
346+
<p class="has-text-align-right has-extra-small-font-size">' . esc_html__( '© 2021 Nature, The Earth', 'default' ) . '</p>
347+
<!-- /wp:paragraph --></div>
348+
<!-- /wp:column --></div>
349+
<!-- /wp:columns -->
350+
<!-- wp:spacer {"height":10} -->
351+
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
352+
<!-- /wp:spacer --></div>
353+
<!-- /wp:group -->',
354+
)
355+
);
356+
357+
register_block_pattern(
358+
'template-part/footer-modern',
359+
array(
360+
'title' => __( 'Modern footer with description and logo', 'gutenberg' ),
361+
'categories' => array( 'page-footer' ),
362+
'blockTypes' => array( 'core/template-part/footer' ),
363+
'content' => '<!-- wp:columns {"align":"full","style":{"color":{"background":"#f8f4e4"}}} -->
364+
<div class="wp-block-columns alignfull has-background" style="background-color:#f8f4e4"><!-- wp:column {"width":"33%"} -->
365+
<div class="wp-block-column" style="flex-basis:33%"><!-- wp:paragraph -->
366+
<p><strong>ABOUT US</strong></p>
367+
<!-- /wp:paragraph -->
368+
<!-- wp:paragraph -->
369+
<p>' . esc_html__( 'Shape & Form has been around since 2003. Its current iteration includes a photography blog, an art gallery dedicated to found geometric shapes, and a store that sells t-shirts.', 'default' ) . '</p>
370+
<!-- /wp:paragraph -->
371+
<!-- wp:spacer {"height":200} -->
372+
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
373+
<!-- /wp:spacer -->
374+
<!-- wp:paragraph {"fontSize":"extra-small"} -->
375+
<p class="has-extra-small-font-size">' . esc_html__( '© Shape & Form', 'default' ) . '</p>
376+
<!-- /wp:paragraph --></div>
377+
<!-- /wp:column -->
378+
<!-- wp:column {"width":"33.33%"} -->
379+
<div class="wp-block-column" style="flex-basis:33.33%"></div>
380+
<!-- /wp:column -->
381+
<!-- wp:column {"verticalAlignment":"bottom","width":"33.33%"} -->
382+
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:33.33%"><!-- wp:site-logo {"align":"right","width":40} /--></div>
383+
<!-- /wp:column --></div>
384+
<!-- /wp:columns -->',
385+
)
386+
);
387+
388+
// Initial block pattern to be used with block transformations with patterns.
389+
register_block_pattern(
390+
'social-links/shared-background-color',
391+
array(
392+
'title' => __( 'Social links with a shared background color', 'gutenberg' ),
393+
'categories' => array( 'buttons' ),
394+
'blockTypes' => array( 'core/social-links' ),
395+
'viewportWidth' => 500,
396+
'content' => '<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
397+
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
398+
<!-- wp:social-link {"url":"#","service":"chain"} /-->
399+
<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
400+
<!-- /wp:social-links -->',
401+
)
402+
);
185403
}
186404

187405
/**
@@ -235,7 +453,6 @@ function update_core_patterns() {
235453
}
236454
}
237455

238-
239456
add_action(
240457
'init',
241458
function() {

0 commit comments

Comments
 (0)