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.

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

Widget: Google Translate #5386

Merged
merged 7 commits into from Oct 28, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
105 changes: 105 additions & 0 deletions modules/widgets/google-translate.php
@@ -0,0 +1,105 @@
<?php
/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The header could be removed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to bring back the header because it will be useful in wpcom codebase.

* Plugin Name: Google Translate Widget for WordPress.com
* Plugin URI: http://automattic.com
* Description: Add a widget for automatic translation
* Author: Artur Piszek
* Version: 0.1
* Author URI: http://automattic.com
* Text Domain: jetpack
*/

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add something like

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 57a5acf

class Google_Translate_Widget extends WP_Widget {
static $instance = null;

/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'google_translate_widget',
/** This filter is documented in modules/widgets/facebook-likebox.php */
apply_filters( 'jetpack_widget_name', __( 'Google Translate', 'jetpack' ) ),
array( 'description' => __( 'Automatic translation of your site content', 'jetpack' ) )
);
wp_register_script( 'google-translate-init', plugins_url( 'google-translate/google-translate.js', __FILE__ ) );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be added in a method hooked to wp_enqueue_scripts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done a425d19

wp_register_script( 'google-translate', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit', [ 'google-translate-init' ] );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The syntax [ 'google-translate-init' ] is PHP 5.4 and Jetpack supports 5.2 only.
This is an important change that must be addressed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see you already did it in #5440, thanks!

}

/**
* Display the Widget.
*
* @see WP_Widget::widget()
*
* @param array $args Display arguments.
* @param array $instance The settings for the particular instance of the widget.
*/
public function widget( $args, $instance ) {
// We never should show more than 1 instance of this.
if ( null === self::$instance ) {
/** This filter is documented in core/src/wp-includes/default-widgets.php */
$title = apply_filters( 'widget_title', $instance['title'] );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Customizer preview, this throws an warning

 Notice: Undefined index: title in /wp-content/plugins/jetpack/modules/widgets/google-translate.php on line 41

Please check if it's set before using it isset( $instance['title'] ) ? $instance['title'] : ''

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see you already did it in #5440, thanks!

echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
}
wp_localize_script( 'google-translate-init', '_wp_google_translate_widget', array( 'lang' => get_locale() ) );
wp_enqueue_script( 'google-translate-init' );
wp_enqueue_script( 'google-translate' );
echo '<div id="google_translate_element"></div>';
echo $args['after_widget'];
self::$instance = $instance;
// Admin bar is also displayed on top of the site which causes google translate bar to hide beneath.
// This is a hack to show google translate bar a bit lower.
if ( is_admin_bar_showing() ) {
echo '<style>.goog-te-banner-frame { top:32px !important } </style>';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be added using wp_add_inline_style checking if admin-bar style was enqueued. A user might have dequeued that style and still have the setting to show admin bar enabled.
Also, using wp_add_inline_style allows to move this to a wp_enqueue_scripts hook.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOne a425d19

}
}
}

/**
* Widget form in the dashboard.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = '';
}
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'jetpack' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}

/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array $instance Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could use sanitize_text_field instead of strip_tags. If strip_tags must be forcefully used, it's better to use wp_strip_all_tags.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done b2da69d

return $instance;
}

}

/**
* Register the widget for use in Appearance -> Widgets.
*/
function jetpack_google_translate_widget_init() {
register_widget( 'Google_Translate_Widget' );
}
add_action( 'widgets_init', 'jetpack_google_translate_widget_init' );
20 changes: 20 additions & 0 deletions modules/widgets/google-translate/google-translate.js
@@ -0,0 +1,20 @@
/*global google:true*/
/*global _wp_google_translate_widget:true*/
/*exported googleTranslateElementInit*/
function googleTranslateElementInit() {
var lang = 'en';
var langParam;
var langRegex = /[?&#]lang=([a-z]+)/;
if ( typeof _wp_google_translate_widget === 'object' && typeof _wp_google_translate_widget.lang === 'string' ) {
lang = _wp_google_translate_widget.lang;
}
langParam = window.location.href.match( langRegex );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Declarations can be written:

var langRegex = /[?&#]lang=([a-z]+)/,
    langParam = window.location.href.match( langRegex ),
    lang = 'object' === typeof _wp_google_translate_widget && 'string' === typeof _wp_google_translate_widget.lang ? _wp_google_translate_widget.lang : 'en';

to avoid redundancy.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it would be less redundant but also much less readable...

if ( langParam ) {
window.location.href = window.location.href.replace( langRegex, '' ).replace( /#googtrans\([a-zA-Z|]+\)/, '' ) + '#googtrans(' + lang + '|' + langParam[ 1 ] + ')';
}
new google.translate.TranslateElement( {
pageLanguage: lang,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
}, 'google_translate_element' );
}