namespace WPForms\Admin\Education\Pointers;
* Abstract class representing Pointers functionality.
* This abstract class provides a foundation for implementing pointers in WPForms.
* Child classes should extend this class and implement the necessary methods to set properties and allow loading.
* The class separates concerns by implementing methods for different functionalities such as initializing pointers,
* handling interactions, printing scripts, etc., which enhances code maintainability and security.
* Additionally, the class is designed to be abstract, allowing for customization and extension while enforcing certain security measures in child classes.
* Unique ID for the pointer.
* Selector for the pointer.
* Arguments for the pointer.
* Top-level menu selector.
private $top_level_menu = '#toplevel_page_wpforms-overview';
* Determines whether the pointer should be visible outside the "WPForms" primary menu.
* Note that setting this property to true will display the pointer on other dashboard pages as well.
protected $top_level_visible = false;
* Option name for storing interactions with pointers.
private const OPTION_NAME = 'wpforms_pointers';
* Initialize the pointer.
public function init(): void {
// If loading is not allowed, or if the pointer is already dismissed, return.
if ( ! $this->allow_display() || ! $this->allow_load() ) {
// Set initial arguments.
$this->set_initial_args();
* Check if the pointer is already dismissed or interacted with.
private function allow_display(): bool {
// If the pointer ID is empty, return.
// Check if announcements are allowed to be displayed.
if ( empty( $this->pointer_id ) || wpforms_setting( 'hide-announcements' ) ) {
$pointers = (array) get_option( self::OPTION_NAME, [] );
// Check if the pointer ID exists in the engagement list.
if ( isset( $pointers['engagement'] ) && in_array( $this->pointer_id, (array) $pointers['engagement'], true ) ) {
// Check if the pointer ID exists in the dismissed list.
if ( isset( $pointers['dismiss'] ) && in_array( $this->pointer_id, (array) $pointers['dismiss'], true ) ) {
* Register hooks for the pointer.
private function hooks(): void {
add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
// Print the pointer script.
add_action( 'admin_print_footer_scripts', [ $this, 'print_script' ] );
// Add Ajax callback for the engagement.
add_action( 'wp_ajax_wpforms_education_pointers_engagement', [ $this, 'engagement_callback' ] );
// Add Ajax callback for dismissing the pointer.
add_action( 'wp_ajax_wpforms_education_pointers_dismiss', [ $this, 'dismiss_callback' ] );
* Enqueue assets for the pointer.
public function enqueue_assets() {
// Enqueue the pointer CSS.
wp_enqueue_style( 'wp-pointer' );
// Enqueue the pointer script.
wp_enqueue_script( 'wp-pointer' );
* Print the pointer script.
public function print_script(): void {
// Encode the $args array into JSON format.
$encoded_args = $this->get_prepared_args();
if ( empty( $encoded_args ) ) {
// Sanitize pointer ID and selector.
$pointer_id = sanitize_text_field( $this->pointer_id );
$selector = sanitize_text_field( $this->get_selector() );
// Get the admin-ajax URL.
$ajaxurl = esc_url_raw( admin_url( 'admin-ajax.php' ) );
// Create nonce for the pointer.
$nonce = sanitize_text_field( $this->get_nonce_token() );
$menu_flyout = "{$this->top_level_menu}:not(.wp-menu-open)";
$inline_css_id = "wpforms-{$pointer_id}-inline-css";
// The type of echo being used in this PHP code is a HEREDOC syntax.
// HEREDOC allows you to create strings that span multiple lines without
// needing to concatenate them with dots (.) as you would with double quotes.
<script type="text/javascript">
let options = $encoded_args, setup;
options = $.extend( options, {
if ( ! $( '#$inline_css_id' ).length && $( '$menu_flyout' ).length ) {
$( '<style id="$inline_css_id">' ).text( '$menu_flyout:after, $menu_flyout .wp-submenu-wrap{ display: none }' ).appendTo( 'head' );
$( '#$inline_css_id' ).remove();
pointer_id: '$pointer_id',
action: 'wpforms_education_pointers_dismiss',
$( '$selector' ).first().pointer( options ).pointer( 'open' );
if ( options.position && options.position.defer_loading ) {
$( window ).on( 'load.wp-pointers', setup );
* Callback function for engaging with a pointer.
* This function is triggered via AJAX when a user interacts with a pointer, indicating engagement.
public function engagement_callback(): void {
check_ajax_referer( $this->pointer_id, '_ajax_nonce' );
if ( ! wpforms_current_user_can() ) {
[ $pointer_id, $pointers ] = $this->handle_pointer_interaction();
// Add the current pointer to the engagement list.
$pointers['engagement'][] = $pointer_id;
// Update the pointer state.
update_option( self::OPTION_NAME, $pointers );
// Indicate that the pointer was engaged.
* Ajax callback for dismissing the pointer.
public function dismiss_callback(): void {
check_ajax_referer( $this->pointer_id, '_ajax_nonce' );
if ( ! wpforms_current_user_can() ) {
[ $pointer_id, $pointers ] = $this->handle_pointer_interaction();
// Add the current pointer to the dismissed list.
$pointers['dismiss'][] = $pointer_id;
// Update the pointer state.
update_option( self::OPTION_NAME, $pointers );
// Indicate that the pointer was dismissed.
* Get nonce for the pointer.
protected function get_nonce_token(): string {
return wp_create_nonce( $this->pointer_id );
* Handle pointer interaction via AJAX.
* @return array Pointer ID and pointers state.
private function handle_pointer_interaction(): array {
// Check if the request is valid.
check_ajax_referer( $this->pointer_id );
// Get the pointer ID from the request.
$pointer_id = isset( $_POST['pointer_id'] ) ? sanitize_key( $_POST['pointer_id'] ) : '';
// If the pointer ID is empty, return an error response.
if ( empty( $pointer_id ) ) {
// Get the current pointers state.
$pointers = (array) get_option(
return [ $pointer_id, $pointers ];
* Set initial arguments to use in a pointer.
private function set_initial_args(): void {
// Set default arguments.
// Set additional arguments for the pointer.
* Retrieves the selector based on conditions.
private function get_selector(): string {
// If the sublevel menu is defined, and it's an admin page, return the combined selector.
if ( ! empty( $this->selector ) && wpforms_is_admin_page() ) {
return "{$this->top_level_menu} {$this->selector}";
// Default returns the top-level menu.
return $this->top_level_menu;
* Prepare and encode args for the pointer.
private function get_prepared_args(): string {
// Retrieve title and message from an argument array, fallback to empty strings if not set.
$title = $this->args['title'] ?? '';
$message = $this->args['message'] ?? '';
// Return early if both title and message are empty.
if ( empty( $message ) ) {
// Pointer markup uses <h3> tag for the title and <p> tag for the message.
$content = ! empty( $title ) ? sprintf( '<h3>%s</h3>', esc_html( $title ) ) : '';
$content .= sprintf( '<p style="font-size:14px">%s</p>', wp_kses( $message, $this->get_allowed_html() ) );
$this->args['content'] = $content;
// Unset title and message to clean up an argument array.
unset( $this->args['title'], $this->args['message'] );
// If RTL and position edge are 'left', switch it to 'right'.
if ( ! empty( $this->args['position']['edge'] ) && $this->args['position']['edge'] === 'left' && is_rtl() ) {
$this->args['position']['edge'] = 'right';
// Encode arguments array to JSON.
return wp_json_encode( $this->args );
* Get allowed HTML tags for wp_kses.
private function get_allowed_html(): array {
* Check if loading of the pointer is allowed.
abstract protected function allow_load(): bool;
* Set arguments for the pointer.
abstract protected function set_args();
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
