-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Classic Theme Helper: Copy Social Menu code to Classic Theme Helper p…
…ackage (#38243)
- Loading branch information
1 parent
3ce744a
commit 4dc8e34
Showing
12 changed files
with
869 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
...s/packages/classic-theme-helper/changelog/add-social-menu-to-classic-theme-helper-package
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: patch | ||
Type: added | ||
|
||
Theme Tools: Adding Social Menu to Classic Theme Helper package |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
projects/packages/classic-theme-helper/src/social-menu.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
<?php | ||
/** | ||
* Social Menu. | ||
* | ||
* This feature will only be activated for themes that declare their support. | ||
* This can be done by adding code similar to the following during the | ||
* 'after_setup_theme' action: | ||
* | ||
* add_theme_support( 'jetpack-social-menu' ); | ||
* | ||
* @package automattic/jetpack-classic-theme-helper | ||
*/ | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_init' ) ) { | ||
/** | ||
* Activate the Social Menu plugin. | ||
* | ||
* @uses current_theme_supports() | ||
*/ | ||
function jetpack_social_menu_init() { | ||
// Only load our code if our theme declares support | ||
if ( ! current_theme_supports( 'jetpack-social-menu' ) ) { | ||
return; | ||
} | ||
|
||
/* | ||
* Social Menu description. | ||
* | ||
* Rename the social menu description. | ||
* | ||
* @module theme-tools | ||
* | ||
* @since 3.9.0 | ||
* | ||
* @param string $social_menu_description Social Menu description | ||
*/ | ||
$social_menu_description = apply_filters( 'jetpack_social_menu_description', __( 'Social Menu', 'jetpack-classic-theme-helper' ) ); | ||
|
||
// Register a new menu location | ||
register_nav_menus( | ||
array( | ||
'jetpack-social-menu' => esc_html( $social_menu_description ), | ||
) | ||
); | ||
|
||
// Enqueue CSS | ||
add_action( 'wp_enqueue_scripts', 'jetpack_social_menu_style' ); | ||
|
||
// Load SVG icons related functions and filters | ||
if ( 'svg' === jetpack_social_menu_get_type() ) { | ||
require __DIR__ . '/social-menu/icon-functions.php'; | ||
} | ||
} | ||
add_action( 'after_setup_theme', 'jetpack_social_menu_init', 99 ); | ||
add_action( 'restapi_theme_init', 'jetpack_social_menu_init' ); | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_get_type' ) ) { | ||
/** | ||
* Return the type of menu the theme is using. | ||
* | ||
* @uses get_theme_support() | ||
* @return null|string $menu_type | ||
*/ | ||
function jetpack_social_menu_get_type() { | ||
$options = get_theme_support( 'jetpack-social-menu' ); | ||
|
||
if ( ! $options ) { | ||
$menu_type = null; | ||
} else { | ||
$menu_type = 'genericons'; | ||
if ( is_array( $options ) && isset( $options[0] ) ) { | ||
$menu_type = ( in_array( $options[0], array( 'genericons', 'svg' ), true ) ) ? $options[0] : 'genericons'; | ||
} | ||
} | ||
|
||
return $menu_type; | ||
} | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_style' ) ) { | ||
/** | ||
* Function to enqueue the CSS. | ||
*/ | ||
function jetpack_social_menu_style() { | ||
$menu_type = jetpack_social_menu_get_type(); | ||
|
||
if ( ! $menu_type ) { | ||
return; | ||
} | ||
|
||
$deps = ( 'genericons' === $menu_type ) ? array( 'genericons' ) : null; | ||
|
||
if ( has_nav_menu( 'jetpack-social-menu' ) ) { | ||
wp_enqueue_style( 'jetpack-social-menu', plugins_url( 'social-menu/social-menu.css', __FILE__ ), $deps, '1.0' ); | ||
} | ||
} | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu' ) ) { | ||
/** | ||
* Create the function for the menu. | ||
*/ | ||
function jetpack_social_menu() { | ||
if ( has_nav_menu( 'jetpack-social-menu' ) ) : | ||
$menu_type = (string) jetpack_social_menu_get_type(); | ||
$link_after = '</span>'; | ||
|
||
if ( 'svg' === $menu_type ) { | ||
$link_after .= jetpack_social_menu_get_svg( array( 'icon' => 'chain' ) ); | ||
} ?> | ||
<nav class="jetpack-social-navigation jetpack-social-navigation-<?php echo esc_attr( $menu_type ); ?>" aria-label="<?php esc_html_e( 'Social Links Menu', 'jetpack-classic-theme-helper' ); ?>"> | ||
<?php | ||
wp_nav_menu( | ||
array( | ||
'theme_location' => 'jetpack-social-menu', | ||
'link_before' => '<span class="screen-reader-text">', | ||
'link_after' => $link_after, | ||
'depth' => 1, | ||
) | ||
); | ||
?> | ||
</nav><!-- .jetpack-social-navigation --> | ||
<?php | ||
endif; | ||
} | ||
} |
213 changes: 213 additions & 0 deletions
213
projects/packages/classic-theme-helper/src/social-menu/icon-functions.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,213 @@ | ||
<?php | ||
/** | ||
* SVG icons related functions and filters | ||
* | ||
* @package automattic/jetpack-classic-theme-helper | ||
*/ | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_include_svg_icons' ) ) { | ||
/** | ||
* Add SVG definitions to the footer. | ||
*/ | ||
function jetpack_social_menu_include_svg_icons() { | ||
// Return early if Social Menu doesn't exist. | ||
if ( ! has_nav_menu( 'jetpack-social-menu' ) ) { | ||
return; | ||
} | ||
// Define SVG sprite file. | ||
$svg_icons = __DIR__ . '/social-menu.svg'; | ||
// If it exists and we use the SVG menu type, include it. | ||
if ( file_exists( $svg_icons ) && 'svg' === jetpack_social_menu_get_type() ) { | ||
require_once $svg_icons; | ||
} | ||
} | ||
add_action( 'wp_footer', 'jetpack_social_menu_include_svg_icons', 9999 ); | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_get_svg' ) ) { | ||
/** | ||
* Return SVG markup. | ||
* | ||
* @param array $args { | ||
* Parameters needed to display an SVG. | ||
* | ||
* @type string $icon Required SVG icon filename. | ||
* } | ||
* @return string SVG markup. | ||
*/ | ||
function jetpack_social_menu_get_svg( $args = array() ) { | ||
// Make sure $args are an array. | ||
if ( empty( $args ) ) { | ||
return esc_html__( 'Please define default parameters in the form of an array.', 'jetpack-classic-theme-helper' ); | ||
} | ||
|
||
// Define an icon. | ||
if ( ! ( array_key_exists( 'icon', $args ) ) ) { | ||
return esc_html__( 'Please define an SVG icon filename.', 'jetpack-classic-theme-helper' ); | ||
} | ||
|
||
// Set defaults. | ||
$defaults = array( | ||
'icon' => '', | ||
'fallback' => false, | ||
); | ||
|
||
// Parse args. | ||
$args = wp_parse_args( $args, $defaults ); | ||
|
||
// Set aria hidden. | ||
$aria_hidden = ' aria-hidden="true"'; | ||
|
||
// Begin SVG markup. | ||
$svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . ' role="img">'; | ||
|
||
/* | ||
* Display the icon. | ||
* | ||
* The whitespace around `<use>` is intentional - it is a work around to a keyboard navigation bug in Safari 10. | ||
* | ||
* See https://core.trac.wordpress.org/ticket/38387. | ||
*/ | ||
$svg .= ' <use href="#icon-' . esc_html( $args['icon'] ) . '" xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> '; | ||
|
||
// Add some markup to use as a fallback for browsers that do not support SVGs. | ||
if ( $args['fallback'] ) { | ||
$svg .= '<span class="svg-fallback icon-' . esc_attr( $args['icon'] ) . '"></span>'; | ||
} | ||
|
||
$svg .= '</svg>'; | ||
|
||
return $svg; | ||
} | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_nav_menu_social_icons' ) ) { | ||
/** | ||
* Display SVG icons in social links menu. | ||
* | ||
* @param string $item_output The menu item output. | ||
* @param WP_Post $item Menu item object. | ||
* @param int $depth Depth of the menu. | ||
* @param object $args wp_nav_menu() arguments. | ||
* @return string $item_output The menu item output with social icon. | ||
*/ | ||
function jetpack_social_menu_nav_menu_social_icons( $item_output, $item, $depth, $args ) { | ||
// Get supported social icons. | ||
$social_icons = jetpack_social_menu_social_links_icons(); | ||
|
||
// Change SVG icon inside social links menu if there is supported URL. | ||
if ( 'jetpack-social-menu' === $args->theme_location ) { | ||
foreach ( $social_icons as $attr => $value ) { | ||
/* | ||
* attr can be a URL host, or a regex, starting with #. | ||
* Let's check for both scenarios. | ||
*/ | ||
if ( | ||
// First Regex. | ||
( | ||
str_starts_with( $attr, '#' ) && str_ends_with( $attr, '#' ) | ||
&& preg_match( $attr, $item_output ) | ||
) | ||
// Then, regular host name. | ||
|| str_contains( $item_output, $attr ) | ||
) { | ||
$item_output = str_replace( | ||
$args->link_after, | ||
'</span>' . jetpack_social_menu_get_svg( array( 'icon' => esc_attr( $value ) ) ), | ||
$item_output | ||
); | ||
} | ||
} | ||
} | ||
|
||
return $item_output; | ||
} | ||
add_filter( 'walker_nav_menu_start_el', 'jetpack_social_menu_nav_menu_social_icons', 10, 4 ); | ||
} | ||
|
||
if ( ! function_exists( 'jetpack_social_menu_social_links_icons' ) ) { | ||
/** | ||
* Returns an array of supported social links (URL / regex and icon name). | ||
* For regex, use the # delimiter. | ||
* | ||
* @return array $social_links_icons | ||
*/ | ||
function jetpack_social_menu_social_links_icons() { | ||
// Supported social links icons. | ||
$social_links_icons = array( | ||
'#https?:\/\/(www\.)?amazon\.(com|cn|in|fr|de|it|nl|es|co|ca)\/#' => 'amazon', | ||
'500px.com' => '500px', | ||
'apple.com' => 'apple', | ||
'itunes.com' => 'apple', | ||
'bandcamp.com' => 'bandcamp', | ||
'behance.net' => 'behance', | ||
'blogger.com' => 'blogger', | ||
'blogspot.com' => 'blogger', | ||
'bsky.app' => 'bluesky', | ||
'codepen.io' => 'codepen', | ||
'deviantart.com' => 'deviantart', | ||
'discord.gg' => 'discord', | ||
'discordapp.com' => 'discord', | ||
'digg.com' => 'digg', | ||
'dribbble.com' => 'dribbble', | ||
'dropbox.com' => 'dropbox', | ||
'etsy.com' => 'etsy', | ||
'eventbrite.com' => 'eventbrite', | ||
'facebook.com' => 'facebook', | ||
'/feed/' => 'feed', | ||
'flickr.com' => 'flickr', | ||
'foursquare.com' => 'foursquare', | ||
'ghost.org' => 'ghost', | ||
'goodreads.com' => 'goodreads', | ||
'google.com' => 'google', | ||
'github.com' => 'github', | ||
'instagram.com' => 'instagram', | ||
'linkedin.com' => 'linkedin', | ||
'mailto:' => 'mail', | ||
'meetup.com' => 'meetup', | ||
'medium.com' => 'medium', | ||
'nextdoor.com' => 'nextdoor', | ||
'patreon.com' => 'patreon', | ||
'pinterest.' => 'pinterest', | ||
'getpocket.com' => 'pocket', | ||
'ravelry.com' => 'ravelry', | ||
'reddit.com' => 'reddit', | ||
'skype.com' => 'skype', | ||
'skype:' => 'skype', | ||
'slideshare.net' => 'slideshare', | ||
'sms:' => 'sms', | ||
'snapchat.com' => 'snapchat', | ||
'soundcloud.com' => 'soundcloud', | ||
'spotify.com' => 'spotify', | ||
'stackoverflow.com' => 'stackoverflow', | ||
'strava.com' => 'strava', | ||
'stumbleupon.com' => 'stumbleupon', | ||
'telegram.me' => 'telegram', | ||
'threads.net' => 'threads', | ||
'tiktok.com' => 'tiktok', | ||
'tumblr.com' => 'tumblr', | ||
'twitch.tv' => 'twitch', | ||
'twitter.com' => 'twitter', | ||
'vimeo.com' => 'vimeo', | ||
'vk.com' => 'vk', | ||
'whatsapp.com' => 'whatsapp', | ||
'woocommerce.com' => 'woocommerce', | ||
'wordpress.org' => 'wordpress', | ||
'wordpress.com' => 'wordpress', | ||
'yelp.com' => 'yelp', | ||
'x.com' => 'x', | ||
'xanga.com' => 'xanga', | ||
'youtube.com' => 'youtube', | ||
); | ||
|
||
/* | ||
* Add Mastodon instances to this array. | ||
*/ | ||
$mastodon_instance_list = jetpack_mastodon_get_instance_list(); | ||
foreach ( $mastodon_instance_list as $instance ) { | ||
$social_links_icons[ $instance ] = 'mastodon'; | ||
} | ||
|
||
return $social_links_icons; | ||
} | ||
} |
Oops, something went wrong.