Skip to content

Commit

Permalink
Global Footer: Switch multiple nav blocks to lists inside a nav wrapper.
Browse files Browse the repository at this point in the history 
Fixes #402
  • Loading branch information
@ryelle
ryelle committed Oct 2, 2023
1 parent 4072e6c commit 7417618
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 75 deletions.
28 changes: 1 addition & 27 deletions mu-plugins/blocks/global-header-footer/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -810,7 +810,6 @@ function render_global_footer( $attributes, $content, $block ) {

if ( is_rosetta_site() ) {
$locale_title = get_rosetta_name();
add_filter( 'render_block_data', __NAMESPACE__ . '\localize_nav_links' );
} else {
$locale_title = '';
}
Expand All @@ -832,8 +831,6 @@ function render_global_footer( $attributes, $content, $block ) {
$footer_markup = ob_get_clean();
}

remove_filter( 'render_block_data', __NAMESPACE__ . '\localize_nav_links' );

$wrapper_attributes = get_block_wrapper_attributes(
array( 'class' => 'global-footer wp-block-group' )
);
Expand Down Expand Up @@ -870,37 +867,14 @@ function update_block_style_colors( $block ) {
return $block;
}


/**
* Localise a `core/navigation-link` block link to point to the Rosetta site resource.
*
* Unfortunately WordPress doesn't have a block-specific pre- filter, only a block-specific post-filter.
* That's why we specifically check for the blockName here.
*
* @param array $block The parsed block data.
*
* @return array
*/
function localize_nav_links( $block ) {
if (
! empty( $block['blockName'] ) &&
'core/navigation-link' === $block['blockName'] &&
! empty( $block['attrs']['url'] )
) {
$block['attrs']['url'] = get_localized_footer_link( $block['attrs']['url'] );
}

return $block;
}

/**
* Get a localized variant of a link included in the global footer.
*
* @param string $url The URL as it is in the menu.
*
* @return string Replacement URL, which may be localised.
*/
function get_localized_footer_link( $url ) {
function get_localized_link( $url ) {
global $rosetta;
if ( empty( $rosetta->current_site_domain ) ) {
return $url;
Expand Down
135 changes: 95 additions & 40 deletions mu-plugins/blocks/global-header-footer/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

namespace WordPressdotorg\MU_Plugins\Global_Header_Footer\Footer;

use function WordPressdotorg\MU_Plugins\Global_Header_Footer\{ get_cip_text, get_home_url, get_container_classes, is_rosetta_site };
use function WordPressdotorg\MU_Plugins\Global_Header_Footer\{ get_cip_text, get_home_url, get_container_classes, is_rosetta_site, get_localized_link };

defined( 'WPINC' ) || die();

Expand All @@ -21,48 +21,103 @@

?>

<!-- wp:group {"className":"global-footer__navigation-container"} -->
<div class="wp-block-group global-footer__navigation-container">
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-important","overlayMenu":"never"} -->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'About', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'News', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/news/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Hosting', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Donate', 'Menu item title', 'wporg' ); ?>","url":"https://wordpressfoundation.org/donate/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Swag', 'Menu item title', 'wporg' ); ?>","url":"https://mercantile.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-information","overlayMenu":"never"} -->
<!-- wp:group {"tagName":"nav","align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"className":"global-footer__navigation-container","layout":{"type":"grid","minimumColumnWidth":"150px"}} -->
<nav class="wp-block-group alignfull global-footer__navigation-container">
<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/about/' ) ); ?>"><?php echo esc_html_x( 'About', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/news/' ) ); ?>"><?php echo esc_html_x( 'News', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/hosting/' ) ); ?>"><?php echo esc_html_x( 'Hosting', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://wordpressfoundation.org/donate/"><?php echo esc_html_x( 'Donate', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://mercantile.wordpress.org/"><?php echo esc_html_x( 'Swag', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul>
<?php if ( is_rosetta_site() ) { ?>
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Support', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/support/' ) ); ?>"><?php echo esc_html_x( 'Support', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<?php } else { ?>
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Documentation', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/documentation/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:list-item -->
<li><a href="https://wordpress.org/documentation/"><?php echo esc_html_x( 'Documentation', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<?php } ?>
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Developers', 'Menu item title', 'wporg' ); ?>","url":"https://developer.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Get Involved', 'Menu item title', 'wporg' ); ?>","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Learn', 'Menu item title', 'wporg' ); ?>","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-resources","overlayMenu":"never"} -->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Showcase', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Plugins', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Themes', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Patterns', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-community","overlayMenu":"never"} -->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'WordCamp', 'Menu item title', 'wporg' ); ?>","url":"https://central.wordcamp.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'WordPress.TV', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.tv/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'BuddyPress', 'Menu item title', 'wporg' ); ?>","url":"https://buddypress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'bbPress', 'Menu item title', 'wporg' ); ?>","url":"https://bbpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-external","overlayMenu":"never"} -->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'WordPress.com', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.com/?ref=wporg-footer","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Matt', 'Menu item title', 'wporg' ); ?>","url":"https://ma.tt/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Privacy', 'Menu item title', 'wporg' ); ?>","url":"https://wordpress.org/about/privacy/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"<?php echo esc_html_x( 'Public Code', 'Menu item title', 'wporg' ); ?>","url":"https://publiccode.eu/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->
</div> <!-- /wp:group -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://developer.wordpress.org/' ) ); ?>"><?php echo esc_html_x( 'Developers', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://make.wordpress.org/"><?php echo esc_html_x( 'Get Involved', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://learn.wordpress.org/' ) ); ?>"><?php echo esc_html_x( 'Learn', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/showcase/' ) ); ?>"><?php echo esc_html_x( 'Showcase', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/plugins/' ) ); ?>"><?php echo esc_html_x( 'Plugins', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/themes/' ) ); ?>"><?php echo esc_html_x( 'Themes', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/patterns/' ) ); ?>"><?php echo esc_html_x( 'Patterns', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://central.wordcamp.org/"><?php echo esc_html_x( 'WordCamp', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://wordpress.tv/"><?php echo esc_html_x( 'WordPress.TV', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://buddypress.org/"><?php echo esc_html_x( 'BuddyPress', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://bbpress.org/"><?php echo esc_html_x( 'bbPress', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li><a href="https://wordpress.com/?ref=wporg-footer"><?php echo esc_html_x( 'WordPress.com', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://ma.tt/"><?php echo esc_html_x( 'Matt', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="<?php echo esc_url( get_localized_link( 'https://wordpress.org/about/privacy/' ) ); ?>"><?php echo esc_html_x( 'Privacy', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="https://publiccode.eu/"><?php echo esc_html_x( 'Public Code', 'Menu item title', 'wporg' ); ?></a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</nav>
<!-- /wp:group -->

<!-- wp:group {"className":"global-footer__logos-container"} -->
<div class="wp-block-group global-footer__logos-container">
Expand Down
21 changes: 13 additions & 8 deletions mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,28 @@
}

& > .global-footer__navigation-container {
max-width: 100%;
display: grid;
align-items: start;
column-gap: 20px;
row-gap: 35px;

/* Create columns automatically, make them equal widths, wrap when needed. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

@media (--tablet) {
font-size: var(--wp--preset--font-size--small);
}

& ul {
list-style: none;
padding: 0;

& li + li {
margin-top: 5px;
}
}
}

& .wp-block-navigation__container {
flex-direction: column;
gap: 5px;
align-items: self-start;

@media (--tablet) {
font-size: var(--wp--preset--font-size--small);
}
}
}

0 comments on commit 7417618

Please sign in to comment.