🎯 Point & Mask, Custom Selectors And Developer Hooks

Found something Smart Detection missed? Point & Mask lets you click it and choose what kind of data it is. It stays hidden from then on, on that screen and every other screen that shows it the same way. No code needed.

When you need it:

Smart Detection hides data that sits under a personal heading, next to a personal label, beside an avatar or next to an email. Something like a highlighted name in a box with a friendly title has none of those clues. On Maya's Customers screen, the Top referrer this month box shows Daniel Okafor in large text. He isn't a registered user and the heading doesn't say he is a person, so the name stays readable.

Using Point & Mask:

1. Make sure Privacy Recording Mode is ON. The picker only loads while masking is running.
2. Open the admin screen that still shows real data.
3. Add &wrp_pick=1 to the end of the address in your browser and press Enter (use ?wrp_pick=1 if the address has no ? in it yet). Or open ⚙️ Settings, click 🎯 Start Point & Mask, paste the full address of that screen (starting with http) and click OK. It opens in a new tab with the picker already running.
4. A purple Point & Mask bar appears at the bottom of the screen and the page dims. Move your mouse and the item underneath is outlined.
5. Click the item you want hidden. A What is this? menu appears with 🪪 Full name, 👤 First name, 👥 Last name, 📧 Email, 🆔 Username, 📞 Phone, 🌐 IP address, 🏠 Address, 💰 Price / revenue, 🏢 Company and 🚫 Anything else.
6. Choose one. A green message, Saved. This will stay hidden from now on., confirms it and the item is masked straight away.
7. Pick as many items as you like, then click Done or press Esc.

While the picker is running, clicks don't follow links or press buttons, so you can click anything safely.

What you see on screen:

The page dims and the item under your mouse gets a purple outline. Clicking it opens the What is this? menu right beside it, and after you choose, the green message appears above the bar and the item is masked at once.

Maya opens her Customers screen with &wrp_pick=1 on the end, clicks Daniel Okafor, chooses 🪪 Full name, and the name turns into D***** O***** at once. Next time she records, it is already hidden.

Good to know:

• The type you choose needs its filter switched on. Pick 📞 Phone and it hides while Phone Numbers is on. 🪪 Full name uses whichever name filter is on. 🚫 Anything else always hides, whatever your filters are.
• Pick the same item again with a different type to change it. You'll see Updated. The new type applies from the next page load.
• You can't pick the whole page or the admin frame. You'll see That selection is too broad. Pick a smaller element.
• A form field you pick looks masked on screen and still sends its real value when the form is saved.
• Items made only of numbers and symbols, such as a price in pounds or a phone number in another layout, can be picked and hidden like any other item.
• If you see Could not identify that element, try clicking the item's parent (the box around it).
• Up to 200 picks are kept. Picking more keeps the newest 200.

Managing your picks:

In ⚙️ Settings, 🎯 Point & Mask lists everything under Saved by Point & Mask, with a count, the selector and the type for each. Click the x button next to a pick to remove just that one; the list updates without a reload. The Clear all saved selections button asks Forget every selection saved with Point & Mask? and then removes them all.

Advanced. CSS selectors:

Under the Point & Mask section, the Advanced: CSS selectors box lets you type rules yourself, which is handy when you know the page code or want to copy rules between sites. Put one rule per line: the selector, a | character, then the type. For example:

td[data-col="email"] | email

.customer-phone | phone

# Notes column on the bookings screen

td.booking-notes | generic

• Types: full, first, last, email, username, phone, ip, address, price, company or generic. Leave the type out and generic is used.
• Lines starting with # are ignored, so you can leave yourself notes.
• The same filter rule applies: a phone rule works while Phone Numbers is on, and generic always works.
• A selector the browser can't understand is simply skipped.
• Up to 200 lines are kept, each up to 300 characters.

Click Save Settings to apply your rules.

For developers:

• Emergency off switch: add define( 'WRP_FORCE_OFF', true ); to wp-config.php and all masking stops, whatever the Dashboard says.
• wrp_extra_names_to_mask filter: receives an array of real value => data type (such as full, first, last, username or address), plus the first name and last name placeholder texts. Add names from your own tables. Values shorter than 3 characters, common WordPress words, and values containing slashes, angle brackets, quotes, an equals sign or @ are dropped for safety. Address lines need at least 5 characters.
• wrp_full_name_data_values filter: the data-col, data-field, data-column, data-key or data-name values that mark a cell as a full name. The defaults include fullname, full_name, customer_name, display_name, billing_name, name, customer and client.
• wrp_full_name_classes filter: the class names that mark an element as a full name, such as customer-name, full-name, user-name, display-name, billing-name and wc-customer-name.
• wrp_class_hints filter: class name hints for the browser layer, each an array with a cls and a type, for example subscriber-email as email.
• window.wrpRemask( element ): call this from your own script to run the browser masking again on an element, or on the whole page if you leave the element out.