Blockbase: Add social navigation to blockbase themes (#4482)

* Blockbase: Add social navigation to blockbase themes

* Add social navigation links to primary navigation

* move to a different file

* add missing file

* suppress warnings for HTML5 elements

* only append social links to a navigation block if the block opts in

* Fix fatal

* Removed requirement to have social parent container be primary menu (or even have content)

* Fix layout for social nav

* Update the structure of the social links when appended to match the way that the navigation block works

Co-authored-by: Jason Crist <jcrist@pbking.com>

blockbase/block-template-parts/header.html

@@ -2,7 +2,7 @@
 <div class="wp-block-group site-header" style="padding-bottom:80px">
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
-	<!-- wp:site-tagline {"fontSize":"tiny"} /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->

blockbase/functions.php

@@ -30,10 +30,11 @@ function blockbase_support() {
 			)
 		);
 
-		// This theme has one menu location.
+		// Register two nav menus
 		register_nav_menus(
 			array(
 				'primary' => __( 'Primary Navigation', 'blockbase' ),
+				'social' => __( 'Social Navigation', 'blockbase' )
 			)
 		);
 
@@ -143,6 +144,8 @@ function blockbase_restore_customizer() {
 	require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
 }
 
+require get_template_directory() . '/inc/social-navigation.php';
+
 // Force menus to reload
 add_action(
 	'customize_controls_enqueue_scripts',
@@ -156,57 +159,3 @@ static function () {
 		);
 	}
 );
-
-/**
- * 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;
-}

blockbase/inc/social-navigation.php

@@ -0,0 +1,76 @@
+<?php
+
+// 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_content, $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 social links attribute.
+	if ( empty( $block['attrs']['__unstableSocialLinks'] ) ) {
+		return false;
+	}
+
+	return true;
+}
+
+function get_social_menu_as_social_links_block( $block ) {
+	if ( empty( $block['attrs']['__unstableSocialLinks'] ) ) {
+		return false;
+	}
+
+	$social_links_location = $block['attrs']['__unstableSocialLinks'];
+	$nav_menu_locations = get_nav_menu_locations();
+	$social_menu_id = $nav_menu_locations[ $social_links_location ];
+	$class_name = 'is-style-logos-only';
+	if( ! empty( $block['attrs']['itemsJustification'] ) ) {
+		$class_name .= ' items-justified-' . $block['attrs']['itemsJustification'];
+	}
+	$social_links_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 );
+		$social_links_content .= '<!-- wp:social-link {"url":"' . $menu_item->url . '","service":"' . $service_name . '"} /-->';
+	}
+	$social_links_content .= '</ul><!-- /wp:social-links -->';
+	return do_blocks( $social_links_content );
+}
+
+function append_social_links_block( $parent_content, $social_links_block ) {
+	if ( empty( $parent_content ) ) {
+		return $social_links_block;
+	}
+	$dom = new domDocument;
+	$domXPath = new DomXPath( $dom );
+	// Since the nav block uses HTML5 element names, we need to suppress the warnings it sends when we loadHTML with HTML5 elements.
+	libxml_use_internal_errors( true );
+	$dom->loadHTML( $parent_content );
+	$wp_block_navigation__container = $dom->getElementsByTagName('ul')->item( 0 )->parentNode;
+	$social_links_node = $dom->createDocumentFragment();
+	$social_links_node->appendXML( $social_links_block );
+	$wp_block_navigation__container->appendChild( $social_links_node );
+	$navigation_block = $dom->getElementsByTagName('nav')->item( 0 );
+	return $dom->saveXML( $navigation_block );
+}
+
+function blockbase_social_menu_render( $block_content, $block ) {
+	if ( blockbase_condition_to_render_social_menu( $block_content, $block ) ) {
+		$social_links_block = get_social_menu_as_social_links_block( $block );
+
+		return append_social_links_block( $block_content, $social_links_block );
+	}
+
+	return $block_content;
+}
+
+/**
+ * Hijack the render of the menu block to inject a social menu.
+ */
+add_filter( 'render_block', 'blockbase_social_menu_render', 10, 2 );

blockbase/sass/base/_header.scss

@@ -35,4 +35,10 @@
 			order: 10;
 		}
 	}
-}
+
+	.wp-block-navigation__responsive-container-content {
+		// Needed until https://github.com/WordPress/gutenberg/issues/35549 is fixed.
+		display: flex;
+		gap: var( --wp--style--block-gap, 2em );
+	}
+}

geologist/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </header>
 <!-- /wp:group -->

mayland-blocks/block-template-parts/header.html

@@ -2,8 +2,7 @@
 <div class="wp-block-group site-header" style="padding-bottom:32px">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
-<!-- wp:site-tagline {"fontSize":"tiny"} /-->
-<!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small","isResponsive":true,"__unstableLocation":"primary"} -->
-<!-- /wp:navigation -->
+<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+<!-- wp:navigation {"textColor":"foreground-light","fontSize":"small","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->

mayland-blocks/functions.php

@@ -10,13 +10,6 @@ function mayland_blocks_support() {
 			)
 		);
 
-		// This theme has one menu location.
-		register_nav_menus(
-			array(
-				'primary' => __( 'Primary Navigation', 'mayland-blocks' ),
-			)
-		);
-
 	}
 	add_action( 'after_setup_theme', 'mayland_blocks_support' );
 endif;

quadrat/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </header>
 <!-- /wp:group -->

quadrat/functions.php

@@ -17,13 +17,6 @@ function quadrat_support() {
 			'starter-content',
 			$quadrat_starter_content
 		);
-
-		// This theme uses wp_nav_menu() in two locations.
-		register_nav_menus(
-			array(
-				'primary' => __( 'Primary Navigation', 'quadrat' ),
-			)
-		);
 	}
 	add_action( 'after_setup_theme', 'quadrat_support' );
 endif;

seedlet-blocks/block-template-parts/header.html

@@ -8,8 +8,7 @@
 
 <!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
 
-<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary"} -->
-<!-- /wp:navigation -->
+<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

seedlet-blocks/functions.php

@@ -12,13 +12,6 @@ function seedlet_blocks_support() {
 		)
 	);
 
-	// This theme has one menu location.
-	register_nav_menus(
-		array(
-			'primary' => __( 'Primary Navigation', 'seedlet-blocks' ),
-		)
-	);
-
 }
 add_action( 'after_setup_theme', 'seedlet_blocks_support' );
 

seedlet-blocks/sass/blocks/_navigation.scss

@@ -16,10 +16,14 @@
 			}
 		}
 	}
+
+	&:not(.has-modal-open) .wp-block-social-links {
+		flex-basis: 100%;
+	}
 }
 
-/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation), 
+/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation),
 is passed all of the block attributes on the block definition in the template. */
 .wp-block-navigation__container {
 	justify-content: center;
-}
+}

skatepark/block-template-parts/header.html

@@ -1,4 +1,4 @@
-<!-- wp:group { "layout":{"type":"flex"}} -->
+<!-- wp:group {"layout":{"type":"flex"}} -->
 <div class="wp-block-group">
 <!-- wp:group {"className":"site-brand"} -->
 <div class="wp-block-group site-brand">
@@ -8,12 +8,8 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"className":"nav-links"} -->
-<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:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"social"} --><!-- /wp:navigation -->
-
-
+<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","__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->
 </div>

skatepark/functions.php

@@ -9,14 +9,6 @@ function skatepark_support() {
 				'/assets/theme.css',
 			)
 		);
-
-		//Primary navigation is used on the header and the footer pattern
-		register_nav_menus(
-			array(
-				'primary' => __( 'Primary Navigation', 'skatepark' ),
-				'social' => __( 'Social Navigation', 'skatepark' )
-			)
-		);
 	}
 	add_action( 'after_setup_theme', 'skatepark_support' );
 endif;