diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index d245153a14..a48aeb5394 100644 --- a/blockbase/assets/ponyfill.css +++ b/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; } diff --git a/blockbase/block-template-parts/header.html b/blockbase/block-template-parts/header.html index d58e04010d..552ce2ff4f 100644 --- a/blockbase/block-template-parts/header.html +++ b/blockbase/block-template-parts/header.html @@ -2,7 +2,7 @@ diff --git a/blockbase/functions.php b/blockbase/functions.php index 9c3e2c2e33..e25d0eec45 100644 --- a/blockbase/functions.php +++ b/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 = ''; - - return do_blocks( $block_content ); - } - - return $block_content; -} diff --git a/blockbase/inc/social-navigation.php b/blockbase/inc/social-navigation.php new file mode 100644 index 0000000000..0cf6ed198e --- /dev/null +++ b/blockbase/inc/social-navigation.php @@ -0,0 +1,76 @@ +'; + 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 ); diff --git a/blockbase/sass/base/_header.scss b/blockbase/sass/base/_header.scss index e9bdd5eae9..e4bd7b8122 100644 --- a/blockbase/sass/base/_header.scss +++ b/blockbase/sass/base/_header.scss @@ -35,4 +35,10 @@ order: 10; } } -} \ No newline at end of file + + .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 ); + } +} diff --git a/geologist/block-template-parts/header.html b/geologist/block-template-parts/header.html index 5ba191f128..843594255c 100644 --- a/geologist/block-template-parts/header.html +++ b/geologist/block-template-parts/header.html @@ -3,6 +3,6 @@ - + diff --git a/mayland-blocks/block-template-parts/header.html b/mayland-blocks/block-template-parts/header.html index df620e50d1..9bb1a74446 100644 --- a/mayland-blocks/block-template-parts/header.html +++ b/mayland-blocks/block-template-parts/header.html @@ -2,8 +2,7 @@ diff --git a/mayland-blocks/functions.php b/mayland-blocks/functions.php index 53a0811cab..c95d6cc234 100644 --- a/mayland-blocks/functions.php +++ b/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; diff --git a/quadrat/block-template-parts/header.html b/quadrat/block-template-parts/header.html index 742b963f33..9a81946824 100644 --- a/quadrat/block-template-parts/header.html +++ b/quadrat/block-template-parts/header.html @@ -3,6 +3,6 @@ - + diff --git a/quadrat/functions.php b/quadrat/functions.php index b2fc4b5ba9..336028213b 100644 --- a/quadrat/functions.php +++ b/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; diff --git a/seedlet-blocks/assets/theme.css b/seedlet-blocks/assets/theme.css index a539f22504..2ad0171a52 100644 --- a/seedlet-blocks/assets/theme.css +++ b/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; diff --git a/seedlet-blocks/block-template-parts/header.html b/seedlet-blocks/block-template-parts/header.html index ca903a93c4..6e959f7f46 100644 --- a/seedlet-blocks/block-template-parts/header.html +++ b/seedlet-blocks/block-template-parts/header.html @@ -8,8 +8,7 @@ - - + diff --git a/seedlet-blocks/functions.php b/seedlet-blocks/functions.php index ea391ff237..caa759c9d8 100755 --- a/seedlet-blocks/functions.php +++ b/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' ); diff --git a/seedlet-blocks/sass/blocks/_navigation.scss b/seedlet-blocks/sass/blocks/_navigation.scss index cb4f598de7..518cc004df 100644 --- a/seedlet-blocks/sass/blocks/_navigation.scss +++ b/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; -} \ No newline at end of file +} diff --git a/skatepark/assets/theme.css b/skatepark/assets/theme.css index ee9112bc15..2151b4732e 100644 --- a/skatepark/assets/theme.css +++ b/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; } } diff --git a/skatepark/block-template-parts/header.html b/skatepark/block-template-parts/header.html index ef55d21dc6..e4865a3793 100644 --- a/skatepark/block-template-parts/header.html +++ b/skatepark/block-template-parts/header.html @@ -1,4 +1,4 @@ - +
@@ -8,12 +8,8 @@ - diff --git a/skatepark/functions.php b/skatepark/functions.php index 4fd18198f2..b52916524b 100644 --- a/skatepark/functions.php +++ b/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; diff --git a/skatepark/sass/templates/_header.scss b/skatepark/sass/templates/_header.scss index d2d61a8f0d..c2b74aa28e 100644 --- a/skatepark/sass/templates/_header.scss +++ b/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; } } } diff --git a/videomaker/block-template-parts/header.html b/videomaker/block-template-parts/header.html index 0ce759cfb9..aa3e42584f 100644 --- a/videomaker/block-template-parts/header.html +++ b/videomaker/block-template-parts/header.html @@ -3,6 +3,6 @@ - +