<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName
* Plugin Name: Google Translate Widget for WordPress.com
* Plugin URI: https://automattic.com
* Description: Add a widget for automatic translation
* Author URI: https://automattic.com
// phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files.
use Automattic\Jetpack\Assets;
if ( ! defined( 'ABSPATH' ) ) {
* Jetpack_Google_Translate_Widget main class.
class Jetpack_Google_Translate_Widget extends WP_Widget {
* Singleton instance of the widget, not to show more than once.
public static $instance = null;
* @var string $default_title
* Register widget with WordPress.
public function __construct() {
'google_translate_widget',
/** This filter is documented in modules/widgets/facebook-likebox.php */
apply_filters( 'jetpack_widget_name', __( 'Google Translate', 'jetpack' ) ),
'description' => __( 'Provide your readers with the option to translate your site into their preferred language.', 'jetpack' ),
'customize_selective_refresh' => true,
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
$this->default_title = esc_html__( 'Translate', 'jetpack' );
* Enqueue frontend JS scripts.
public function enqueue_scripts() {
Assets::get_file_url_for_environment(
'_inc/build/widgets/google-translate/google-translate.min.js',
'modules/widgets/google-translate/google-translate.js'
'//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit',
array( 'google-translate-init' ),
// Admin bar is also displayed on top of the site which causes google translate bar to hide beneath.
// Overwrite position of body.admin-bar
// This is a hack to show google translate bar a bit lower.
position: inherit !important;
.admin-bar .goog-te-banner-frame {
@media screen and (max-width: 782px) {
.admin-bar .goog-te-banner-frame {
@media screen and (max-width: 480px) {
.admin-bar .goog-te-banner-frame {
wp_add_inline_style( 'admin-bar', $lower_translate_bar );
wp_add_inline_style( 'wpcom-admin-bar', $lower_translate_bar );
* @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 ) {
$instance = wp_parse_args(
'title' => $this->default_title,
* Filter the layout of the Google Translate Widget.
* 3 different integers are accepted.
* 0 for the vertical layout.
* 1 for the horizontal layout.
* 2 for the dropdown only.
* @see https://translate.google.com/manager/website/
* @param string $layout layout of the Google Translate Widget.
$button_layout = apply_filters( 'jetpack_google_translate_widget_layout', 0 );
! is_int( $button_layout )
'_wp_google_translate_widget',
'layout' => (int) $button_layout,
wp_enqueue_script( 'google-translate-init' );
wp_enqueue_script( 'google-translate' );
$title = $instance['title'];
if ( ! isset( $title ) ) {
$title = $this->default_title;
/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
$title = apply_filters( 'widget_title', $title );
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div id="google_translate_element"></div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
self::$instance = $instance;
/** This action is documented in modules/widgets/gravatar-profile.php */
do_action( 'jetpack_stats_extra', 'widget_view', 'google-translate' );
* Widget form in the dashboard.
* @param array $instance Previously saved values from database.
public function form( $instance ) {
$title = isset( $instance['title'] ) ? $instance['title'] : false;
if ( false === $title ) {
$title = $this->default_title;
<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 ); ?>" />
* 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 ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
$instance['title'] = wp_kses( $new_instance['title'], array() );
if ( $instance['title'] === $this->default_title ) {
$instance['title'] = false; // Store as false in case of language change.
* Register the widget for use in Appearance -> Widgets.
function jetpack_google_translate_widget_init() {
register_widget( 'Jetpack_Google_Translate_Widget' );
add_action( 'widgets_init', 'jetpack_google_translate_widget_init' );