Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blockbase: A different approach to navigation #4575

Closed
wants to merge 6 commits into from
Closed

Blockbase: A different approach to navigation #4575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1ae4003
Blockbase: A different approach to navigation
scruffian Sep 10, 2021
cd7abd2
Move code to a new file
scruffian Sep 14, 2021
fe5b1d0
remove added code
scruffian Sep 14, 2021
3aadfc0
add missing include
scruffian Sep 14, 2021
4b456b0
add error checking
scruffian Sep 17, 2021
992f8be
check args is an object
scruffian Sep 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blockbase/block-template-parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
<div class="wp-block-group alignfull site-header" style="padding-top:40px;padding-bottom:40px">
<!-- wp:site-title /-->
<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
<!-- wp:template-part {"slug":"navigation"} /-->
</div>
<!-- /wp:group -->
1 change: 1 addition & 0 deletions blockbase/block-template-parts/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
63 changes: 7 additions & 56 deletions blockbase/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,17 @@ function blockbase_support() {
)
);

// This theme has one menu location.
// This theme has two menu locations.
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'blockbase' ),
'social' => __( 'Social Navigation', 'blockbase' ),
)
);

// Create navigation template from saved menus
blockbase_update_navigation_template();

}
add_action( 'after_setup_theme', 'blockbase_support', 9 );
endif;
Expand Down Expand Up @@ -98,7 +102,7 @@ function blockbase_fonts_url() {
}
}
}

if ( empty( $font_families ) ) {
return '';
}
Expand All @@ -121,57 +125,4 @@ 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;
}
require get_template_directory() . '/inc/navigation.php';
107 changes: 107 additions & 0 deletions blockbase/inc/navigation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<?php

class Nav_Menu_To_Nav_Block_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = null ) {
$output .= '';
}

function end_lvl( &$output, $depth = 0, $args = null ) {
$output .= '<!-- /wp:navigation-link -->';
}

function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
$is_top_level_link = $item->menu_item_parent == 0 ? 'true' : 'false';
if ( is_object( $args ) && property_exists( $args, 'walker' ) && property_exists( $args->walker, 'has_children' ) ) {
if ( $args->walker->has_children ) {
$output .= '<!-- wp:navigation-link {"label":"'. $item->title .'","type":"' . $item->type . '","url":"' . $item->url . '","kind":"' . $item->object . '","isTopLevelLink":"' . $is_top_level_link . '"} -->';
} else {
$output .= '<!-- wp:navigation-link {"label":"'. $item->title .'","type":"' . $item->type . '","url":"' . $item->url . '","kind":"' . $item->object . '","isTopLevelLink":"' . $is_top_level_link . '"} /-->';
}
}
}

function end_el( &$output, $item, $depth = 0, $args = null ) {
$output .= '';
}
}

class Nav_Menu_To_Social_Links_Block_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = null ) {
$output .= '';
}

function end_lvl( &$output, $depth = 0, $args = null ) {
$output .= '';
}

function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
$service_name = preg_replace( '/(-[0-9]+)/', '', $item->post_name );
$output .= '<!-- wp:social-link {"url":"' . $item->url . '","service":"' . $service_name . '"} /-->';
}

function end_el( &$output, $item, $depth = 0, $args = null ) {
$output .= '';
}
}

// This generates a navigation template from the saved nav menus.
// If the user has modified the template in the Site Editor it will be overwritten.
function blockbase_update_navigation_template() {
// Get primary nav block markup.
$primary_nav_block_markup = wp_nav_menu( [
'container'=> false,
'echo' => false,
'items_wrap' => '%3$s',
'theme_location' => 'primary',
'walker' => new Nav_Menu_To_Nav_Block_Walker(),
] );

// Get social nav block markup.
$social_nav_block_markup = wp_nav_menu( [
'container'=> false,
'echo' => false,
'items_wrap' => '<!-- wp:social-links --><ul class="wp-block-social-links">%3$s</ul><!-- /wp:social-links -->',
'theme_location' => 'social',
'walker' => new Nav_Menu_To_Social_Links_Block_Walker(),
] );

// Create the navigation block markup.
$navigation_block_markup = '<!-- wp:navigation {"isResponsive":true} -->' . $primary_nav_block_markup . $social_nav_block_markup . '<!-- /wp:navigation -->';

// Get template part.
$template = gutenberg_get_block_template( get_stylesheet() . '//navigation', 'wp_template_part' );

// This should probably use prepare_item_for_database from Gutenberg.
$navigation_template_object = array(
'post_title' => 'navigation',
'post_name' => 'navigation',
'post_status' => 'publish',
'post_content' => $navigation_block_markup,
'post_type' => 'wp_template_part',
'tax_input' => array(
'wp_theme' => isset( $template->theme ) ? $template->theme : wp_get_theme()->get_stylesheet(),
),
);

// If the template has an ID lets use it.
if ( $template->wp_id ) {
$navigation_template_object['ID'] = $template->wp_id;
}

if ( 'custom' === $template->source ) {
// Update nav from template part.
return wp_update_post( wp_slash( $navigation_template_object ), true );
} else {
// Save nav in template part.
return wp_insert_post( wp_slash( $navigation_template_object ), true );
}
}
add_action( 'wp_update_nav_menu_item', 'blockbase_update_navigation_template' );

function blockbase_wp_update_nav( $post_id, $post ) {
// If a menu item is being deleted then regenerate the navigation template.
if ( $post->post_type === "nav_menu_item" ) {
blockbase_update_navigation_template();
}
}
add_action( 'deleted_post', 'blockbase_wp_update_nav', 10, 2 );