I have this widget code, which uses Sign In with Google button to get users credentials and eventually fetch their Google Reviews. Button works fine, and I'm able to get credentials and CSRF token. I'm trying to save them inside WordPress for later use, however this two values won't save, the other values do save.
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Google Maps Reviews', 'text_domain' );
$place_id = ! empty( $instance['place_id'] ) ? $instance['place_id'] : '';
$api_key = ! empty( $instance['api_key'] ) ? $instance['api_key'] : '';
if ( !empty( $_POST['credential'] ) ) {
$google_credential = $_POST['credential'];
} else {
$google_credential = $instace['google_credential'];
echo "instance credential: ";
}
if ( !empty( $_POST['g_csrf_token'] ) ) {
$google_csrf_token = $_POST['g_csrf_token'];
} else {
$google_csrf_token = $instace['google_csrf_token'];
}
?>
<?php if(empty($_POST['credential'])){ ?>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<?php } ?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:' ); ?></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>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'place_id' ) ); ?>"><?php _e( 'Place ID:' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'place_id' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'place_id' ) ); ?>" type="text" value="<?php echo esc_attr( $place_id ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'api_key' ) ); ?>"><?php _e( 'API Key:' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'api_key' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'api_key' ) ); ?>" type="text" value="<?php echo esc_attr( $api_key ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'google_credential' ) ); ?>"><?php _e( 'Google Credential:' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'google_credential' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'google_credential' ) ); ?>" type="text" value="<?php echo esc_attr( $google_credential ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'google_csrf_token' ) ); ?>"><?php _e( 'Google CSRF Token:' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'google_csrf_token' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'google_csrf_token' ) ); ?>" type="text" value="<?php echo esc_attr( $google_csrf_token ); ?>">
</p>
<?php if(empty($_POST['credential'])){ ?>
<div id="g_id_onload"
data-client_id="{removed for security}.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-login_uri="https://{removed for security}/wp-admin/widgets.php"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="signin_with"
data-size="large"
data-locale="es-419"
data-logo_alignment="left">
</div>
<?php } ?>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
$instance['place_id'] = ( ! empty( $new_instance['place_id'] ) ) ? sanitize_text_field( $new_instance['place_id'] ) : '';
$instance['api_key'] = ( ! empty( $new_instance['api_key'] ) ) ? sanitize_text_field( $new_instance['api_key'] ) : '';
$instance['google_credential'] = ( ! empty( $new_instance['google_credential'] ) ) ? sanitize_text_field( $new_instance['google_credential'] ) : '';
$instance['google_csrf_token'] = ( ! empty( $new_instance['google_csrf_token'] ) ) ? sanitize_text_field( $new_instance['google_csrf_token'] ) : '';
return $instance;
}
You have two small typos of instace
where you would expect instance
(with "N")
$google_credential = $instace['google_credential'];
echo "instance credential: ";
}
if ( !empty( $_POST['g_csrf_token'] ) ) {
$google_csrf_token = $_POST['g_csrf_token'];
} else {
$google_csrf_token = $instace['google_csrf_token'];
I can't be sure this will solve all your problems but for certain you should begin here :}