| 1 |
<?php |
| 2 |
/** |
| 3 |
* Block patterns registration for navigation overlays. |
| 4 |
* |
| 5 |
* @package gutenberg |
| 6 |
*/ |
| 7 |
|
| 8 |
/** |
| 9 |
* Registers block patterns for navigation overlays. |
| 10 |
* |
| 11 |
* This function adds patterns that are specific to navigation overlays. |
| 12 |
* It runs after core patterns are registered to ensure all patterns |
| 13 |
* are available. |
| 14 |
* |
| 15 |
* @since 6.0.0 |
| 16 |
*/ |
| 17 |
function gutenberg_register_overlay_block_patterns() { |
| 18 |
// Register category only if it doesn't exist in core. |
| 19 |
$category_registry = WP_Block_Pattern_Categories_Registry::get_instance(); |
| 20 |
if ( ! $category_registry->is_registered( 'navigation' ) ) { |
| 21 |
register_block_pattern_category( |
| 22 |
'navigation', |
| 23 |
array( |
| 24 |
'label' => _x( 'Navigation', 'Block pattern category', 'gutenberg' ), |
| 25 |
'description' => _x( 'Display your website navigation.', 'Block pattern category', 'gutenberg' ), |
| 26 |
) |
| 27 |
); |
| 28 |
} |
| 29 |
|
| 30 |
register_block_pattern( |
| 31 |
'core/navigation-overlay', |
| 32 |
array( |
| 33 |
'title' => __( 'Navigation Overlay', 'gutenberg' ), |
| 34 |
'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ), |
| 35 |
'content' => '<!-- wp:group {"metadata":{"name":"' . esc_attr( __( 'Navigation Overlay', 'gutenberg' ) ) . '"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"dimensions":{"minHeight":"100vh"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"backgroundColor":"white","textColor":"black","layout":{"type":"default"}} --> |
| 36 |
<div class="wp-block-group has-black-color has-white-background-color has-text-color has-background has-link-color" style="min-height:100vh;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} --> |
| 37 |
<div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close /--></div> |
| 38 |
<!-- /wp:group --> |
| 39 |
|
| 40 |
<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"},"showSubmenuIcon":false,"submenuVisibility":"always"} /--></div> |
| 41 |
<!-- /wp:group -->', |
| 42 |
'categories' => array( 'navigation' ), |
| 43 |
'blockTypes' => array( 'core/template-part/navigation-overlay' ), |
| 44 |
'source' => 'core', |
| 45 |
) |
| 46 |
); |
| 47 |
|
| 48 |
register_block_pattern( |
| 49 |
'core/navigation-overlay-black-bg', |
| 50 |
array( |
| 51 |
'title' => __( 'Overlay with black background', 'gutenberg' ), |
| 52 |
'description' => _x( 'A navigation overlay with black background and big white text', 'Block pattern description', 'gutenberg' ), |
| 53 |
'content' => '<!-- wp:group {"metadata":{"name":"' . esc_attr( __( 'Navigation Overlay', 'gutenberg' ) ) . '"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"dimensions":{"minHeight":"100vh"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"color":{"background":"#000000"}},"textColor":"white","layout":{"type":"default"}} --> |
| 54 |
<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="background-color:#000000;min-height:100vh;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} --> |
| 55 |
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:navigation {"style":{"typography":{"lineHeight":"1"}},"fontSize":"xx-large","layout":{"type":"flex","orientation":"vertical"}} /--> |
| 56 |
|
| 57 |
<!-- wp:navigation-overlay-close {"displayMode":"text","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"textColor":"white"} /--></div> |
| 58 |
<!-- /wp:group --></div> |
| 59 |
<!-- /wp:group -->', |
| 60 |
'categories' => array( 'navigation' ), |
| 61 |
'blockTypes' => array( 'core/template-part/navigation-overlay' ), |
| 62 |
'source' => 'core', |
| 63 |
) |
| 64 |
); |
| 65 |
register_block_pattern( |
| 66 |
'core/navigation-overlay-accent-bg', |
| 67 |
array( |
| 68 |
'title' => __( 'Overlay with orange background', 'gutenberg' ), |
| 69 |
'description' => _x( 'A navigation overlay with orange background site title and tagline', 'Block pattern description', 'gutenberg' ), |
| 70 |
'content' => '<!-- wp:group {"metadata":{"name":"' . esc_attr( __( 'Navigation Overlay', 'gutenberg' ) ) . '"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"color":{"background":"#f57600"},"dimensions":{"minHeight":"100vh"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"textColor":"black","layout":{"type":"grid","columnCount":2,"minimumColumnWidth":"600px","rowCount":2,"isManualPlacement":true}} --> |
| 71 |
<div class="wp-block-group has-black-color has-text-color has-background has-link-color" style="background-color:#f57600;min-height:100vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"style":{"layout":{"columnStart":1,"rowStart":1}},"layout":{"type":"default"}} --> |
| 72 |
<div class="wp-block-group"><!-- wp:navigation-overlay-close {"style":{"layout":{"columnStart":1,"rowStart":1}}} /--></div> |
| 73 |
<!-- /wp:group --> |
| 74 |
|
| 75 |
<!-- wp:group {"style":{"typography":{"lineHeight":"0.8"},"layout":{"columnStart":1,"rowStart":2}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"bottom"}} --> |
| 76 |
<div class="wp-block-group" style="line-height:0.8"><!-- wp:site-title {"fontSize":"large"} /--> |
| 77 |
|
| 78 |
<!-- wp:site-tagline {"style":{"typography":{"lineHeight":"1.2"},"elements":{"link":{"color":{"text":"#000000a6"}}},"color":{"text":"#000000a6"}},"fontSize":"large"} /--></div> |
| 79 |
<!-- /wp:group --> |
| 80 |
|
| 81 |
<!-- wp:spacer {"height":"10rem","style":{"layout":{"columnStart":2,"rowStart":2}}} --> |
| 82 |
<div style="height:10rem" aria-hidden="true" class="wp-block-spacer"></div> |
| 83 |
<!-- /wp:spacer --> |
| 84 |
|
| 85 |
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"lineHeight":"1"},"layout":{"columnStart":2,"rowStart":1}},"fontSize":"large","layout":{"type":"flex","orientation":"vertical"}} /--></div> |
| 86 |
<!-- /wp:group -->', |
| 87 |
'categories' => array( 'navigation' ), |
| 88 |
'blockTypes' => array( 'core/template-part/navigation-overlay' ), |
| 89 |
'source' => 'core', |
| 90 |
) |
| 91 |
); |
| 92 |
register_block_pattern( |
| 93 |
'core/navigation-overlay-centered-with-extras', |
| 94 |
array( |
| 95 |
'title' => __( 'Overlay with site info and CTA', 'gutenberg' ), |
| 96 |
'description' => _x( 'A navigation overlay with vertically and horizontally centered navigation, site info, and a CTA', 'Block pattern description', 'gutenberg' ), |
| 97 |
'content' => '<!-- wp:group {"metadata":{"name":"' . esc_attr( __( 'Navigation Overlay', 'gutenberg' ) ) . '"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"dimensions":{"minHeight":"100vh"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"backgroundColor":"white","textColor":"black","layout":{"type":"default"}} --> |
| 98 |
<div class="wp-block-group has-black-color has-white-background-color has-text-color has-background has-link-color" style="min-height:100vh;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} --> |
| 99 |
<div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close /--></div> |
| 100 |
<!-- /wp:group --> |
| 101 |
|
| 102 |
<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} --> |
| 103 |
<div class="wp-block-group alignwide"><!-- wp:site-logo {"width":80,"isLink":false,"align":"center","className":"is-style-rounded"} /--> |
| 104 |
|
| 105 |
<!-- wp:site-title {"textAlign":"center","fontSize":"large"} /--> |
| 106 |
|
| 107 |
<!-- wp:site-tagline {"textAlign":"center","fontSize":"medium"} /--> |
| 108 |
|
| 109 |
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} --> |
| 110 |
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"x-large","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} /--></div> |
| 111 |
<!-- /wp:group --> |
| 112 |
|
| 113 |
<!-- wp:group {"align":"full","style":{"border":{"top":{"color":"#eeeeee","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} --> |
| 114 |
<div class="wp-block-group alignfull" style="border-top-color:#eeeeee;border-top-width:1px;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} --> |
| 115 |
<p class="has-text-align-center">' . esc_html( __( 'Find out how we can help your business.', 'gutenberg' ) ) . ' <a href="#">' . esc_html( __( 'Learn more', 'gutenberg' ) ) . '</a></p> |
| 116 |
<!-- /wp:paragraph --> |
| 117 |
|
| 118 |
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> |
| 119 |
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"textTransform":"uppercase"}}} --> |
| 120 |
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="text-transform:uppercase">' . esc_html( __( 'Get started today!', 'gutenberg' ) ) . '</a></div> |
| 121 |
<!-- /wp:button --> |
| 122 |
|
| 123 |
<!-- wp:button --> |
| 124 |
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div> |
| 125 |
<!-- /wp:button --></div> |
| 126 |
<!-- /wp:buttons --></div> |
| 127 |
<!-- /wp:group --></div> |
| 128 |
<!-- /wp:group --></div> |
| 129 |
<!-- /wp:group -->', |
| 130 |
'categories' => array( 'navigation' ), |
| 131 |
'blockTypes' => array( 'core/template-part/navigation-overlay' ), |
| 132 |
'source' => 'core', |
| 133 |
) |
| 134 |
); |
| 135 |
register_block_pattern( |
| 136 |
'core/navigation-overlay-centered', |
| 137 |
array( |
| 138 |
'title' => __( 'Overlay with centered navigation', 'gutenberg' ), |
| 139 |
'description' => _x( 'A navigation overlay with vertically and horizontally centered navigation', 'Block pattern description', 'gutenberg' ), |
| 140 |
'content' => '<!-- wp:group {"metadata":{"name":"' . esc_attr( __( 'Navigation Overlay', 'gutenberg' ) ) . '"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"dimensions":{"minHeight":"100vh"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}},"color":{"background":"#eeeeee"}},"textColor":"black","layout":{"type":"default"}} --> |
| 141 |
<div class="wp-block-group has-black-color has-text-color has-background has-link-color" style="background-color:#eeeeee;min-height:100vh;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} --> |
| 142 |
<div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close /--></div> |
| 143 |
<!-- /wp:group --> |
| 144 |
|
| 145 |
<!-- wp:group {"align":"wide","style":{"dimensions":{"minHeight":"90vh"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","verticalAlignment":"center"}} --> |
| 146 |
<div class="wp-block-group alignwide" style="min-height:90vh"><!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} /--></div> |
| 147 |
<!-- /wp:group --></div> |
| 148 |
<!-- /wp:group -->', |
| 149 |
'categories' => array( 'navigation' ), |
| 150 |
'blockTypes' => array( 'core/template-part/navigation-overlay' ), |
| 151 |
'source' => 'core', |
| 152 |
) |
| 153 |
); |
| 154 |
} |
| 155 |
|
| 156 |
add_action( 'init', 'gutenberg_register_overlay_block_patterns', 20 ); |
| 157 |
|
