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/assets/ponyfill.css

@@ -194,6 +194,11 @@ pre {
 	}
 }
 
+.wp-site-blocks .site-header .wp-block-navigation__responsive-container-content {
+	display: flex;
+	gap: var(--wp--style--block-gap, 2em);
+}
+
 :root {
 	--wpadmin-bar--height: 46px;
 }

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 @@ if ( ! function_exists( '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 @@ if ( class_exists( 'WP_Theme_JSON_Resolver_Gutenberg' ) ) {
 	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 @@ add_action(
 		);
 	}
 );
-
-/**
- * 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 @@ if ( ! function_exists( '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 @@ if ( ! function_exists( '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/assets/theme.css

@@ -170,7 +170,11 @@
 	line-height: 30px;
 }
 
-/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation), 
+.wp-block-navigation__responsive-container: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),
 is passed all of the block attributes on the block definition in the template. */
 .wp-block-navigation__container {
 	justify-content: center;

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/assets/theme.css

@@ -524,21 +524,8 @@ header.wp-block-template-part > .wp-block-group > * > * {
 	}
 }
 
-header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
-	margin-right: -2px;
-}
-
-@media (min-width: 600px) {
-	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
-		margin-top: calc( -1 * ( 8px + 0.25em ));
-	}
-}
-
-@media (max-width: 599px) {
-	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
-		margin-left: -0.25em;
-		margin-right: 0;
-	}
+header.wp-block-template-part > .wp-block-group .wp-block-social-links {
+	margin: 0;
 }
 
 header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only > .wp-social-link {
@@ -556,6 +543,12 @@ header.wp-block-template-part .site-brand {
 	grid-template-columns: auto 1fr;
 }
 
+@media (min-width: 600px) {
+	header.wp-block-template-part .site-brand {
+		grid-template-rows: 35px auto;
+	}
+}
+
 @media (max-width: 599px) {
 	header.wp-block-template-part .site-brand {
 		grid-template-areas: "logo" "title" "tagline";
@@ -610,7 +603,6 @@ header.wp-block-template-part .site-brand .wp-block-site-tagline {
 	}
 	.nav-links .wp-block-social-links {
 		justify-content: flex-start;
-		grid-area: social;
 	}
 }
 

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 @@ if ( ! function_exists( '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;

skatepark/sass/templates/_header.scss

@@ -3,7 +3,7 @@ header.wp-block-template-part {
 	margin: 0 auto;
 	width: 100%;
 	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
-	
+
 	> .wp-block-group {
 		gap: 0;
 		justify-content: space-between; // Apply a cluster (flex?) layout
@@ -30,15 +30,9 @@ header.wp-block-template-part {
 		}
 
 		.wp-block-social-links {
+			margin: 0;
+
 			&.is-style-logos-only {
-				margin-right: -2px; // Visually align social links to the right
-				@include break-small(){
-					margin-top: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the tagline
-				}
-				@include break-small-only(){
-					margin-left: -0.25em;
-					margin-right: 0;
-				}
 				> .wp-social-link {
 					padding: 0; // Needed to override Gutenberg default padding on this block style variation
 
@@ -57,6 +51,11 @@ header.wp-block-template-part {
 			"logo title"
 			"logo tagline";
 		grid-template-columns: auto 1fr;
+
+		@include break-small(){
+			grid-template-rows: 35px auto;
+		}
+
 		@include break-small-only(){
 			grid-template-areas:
 				"logo"
@@ -101,7 +100,6 @@ header.wp-block-template-part {
 		}
 		.wp-block-social-links {
 			justify-content: flex-start;
-			grid-area: social;
 		}
 	}
 }

videomaker/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </header>
 <!-- /wp:group -->