Blockbase + co: Universal Social menu (#4467)

* used render_callback to insert social menu from customizer

* return block content early

* change the condition under which we hijack the menu

* Remove extra navigation

* output block markup for the whole menu

* Render the menu at the social location, rather than the one called social

* map the right alignment from the nav block to the social icons block

* move the social nav to skatepark

* Replace any trailing numbers on menu items to better match them to service names

Co-authored-by: Ben Dwyer <[email protected]>

blockbase/functions.php

@@ -119,3 +119,57 @@ function blockbase_restore_customizer() {
 require get_template_directory() . '/inc/customizer/wp-customize-colors.php';
 require get_template_directory() . '/inc/customizer/wp-customize-color-palettes.php';
 require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
+
+/**
+ * Populate the social links block with the social menu content if it exists
+ *
+ */
+add_filter( 'render_block', 'blockbase_social_menu_render', 10, 2 );
+// We should only change the render of the navigtion block
+// to social links in the following conditions.
+function blockbase_condition_to_render_social_menu( $block ) {
+	// The block should be a navigation block.
+	if ( 'core/navigation' !== $block['blockName'] ) {
+		return false;
+	}
+
+	// The theme should have a menu defined at the social location.
+	if ( ! has_nav_menu( 'social' ) ) {
+		return false;
+	}
+
+	// The block should have a loction defined.
+	if ( empty( $block['attrs']['__unstableLocation'] ) ) {
+		return false;
+	}
+
+	// The block's location should be 'social'.
+	if ( $block['attrs']['__unstableLocation'] !== 'social' ) {
+		return false;
+	}
+
+	return true;
+}
+
+function blockbase_social_menu_render( $block_content, $block ) {
+	if ( blockbase_condition_to_render_social_menu( $block ) ) {
+		$nav_menu_locations = get_nav_menu_locations();
+		$social_menu_id = $nav_menu_locations['social'];
+		$class_name = 'is-style-logos-only';
+		if( !empty( $block['attrs']['itemsJustification'] ) && $block['attrs']['itemsJustification'] === 'right' ) {
+			$class_name .= ' items-justified-right';
+		}
+		$block_content = '<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"' . $class_name . '"} --><ul class="wp-block-social-links has-icon-color ' . $class_name . '">';
+		$menu = wp_get_nav_menu_items( $social_menu_id );
+		foreach ($menu as $menu_item) {
+			$service_name = preg_replace( '/(-[0-9]+)/', '', $menu_item->post_name );
+			$block_content .= '<!-- wp:social-link {"url":"' . $menu_item->url . '","service":"' . $service_name . '"} /-->';
+		}
+
+		$block_content .= '</ul>';
+
+		return do_blocks( $block_content );
+	}
+
+	return $block_content;
+}

skatepark/block-template-parts/header.html

@@ -11,13 +11,10 @@
 <div class="wp-block-group nav-links"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"fontSize":"small"} -->
 <!-- /wp:navigation -->
 
-<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"items-justified-right is-style-logos-only"} -->
-<ul class="wp-block-social-links has-icon-color items-justified-right is-style-logos-only"><!-- wp:social-link {"url":"twitter.com","service":"twitter"} /-->
+<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"social"} --><!-- /wp:navigation -->
 
-<!-- wp:social-link {"url":"facebook.com","service":"facebook"} /-->
 
-<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
-<!-- /wp:social-links --></div>
+</div>
 <!-- /wp:group -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

skatepark/functions.php

@@ -24,7 +24,8 @@ function skatepark_support() {
 		//Primary navigation is used on the header and the footer pattern
 		register_nav_menus(
 			array(
-				'primary' => __( 'Primary Navigation', 'skatepark' )
+				'primary' => __( 'Primary Navigation', 'skatepark' ),
+				'social' => __( 'Social Navigation', 'blockbase' )
 			)
 		);