P3-147 Fix refresh analysis

afercia commented 4 years ago

Summary

This PR can be summarized in the following changelog entry:

Fixes a bug where changes to the content of the ACF fields didn't trigger a live refresh ot the Yoast SEO analysis.

I'm using the new ACF JavaScript API introduced in ACF 5.7: https://www.advancedcustomfields.com/resources/javascript-api/
important: this means the new code is not compatible with previous ACF versions (the current version is 5.9.1)
I'm using the acf.Model API with an input event: this event fires for changes to any native form element including checkboxes, radio buttons, select elements. Changing the value of these form elements will trigger an analysis refresh even if, actually, there's no change in the post content. I opted to not filter out these form elements to keep things simple and because you never know (e.g. checking a checkbox could add some content in some edge cases?).
I disabled the ESLint no-unused-vars when creating the new acf.Model instance because I wouldn't know how to do it otherwise.
I made sure acf analysis works in Classic Editor: it stopped working after https://github.com/Yoast/wordpress-seo/pull/15842 because the post-edit script now uses two different handles: post-edit and post-edit-classic
Changed a add_filter() call to add_action(): although the former works, the latter is the correct one to use because admin_enqueue_scripts is an action
Removed the yoast-acf-analysis script dependency for post-edit to simplify (see point 5) and because there's already a conditional to check whether post-edit is enqueued

Preliminary steps:

This PR needs to be tested with various types of ACF fields. Some fields are only available on the PRO version so I'd recommend to test with the PRO version
Ask internally for a licensed version of latest Advanced Custom Fields PRO install it and activate it
Install and activate Yoast SEO
Clone this repository https://github.com/Yoast/yoast-acf-analysis in your WordPress plugins directory and activate ACF Content Analysis for Yoast SEO
Switch to this branch and build by running npm run build
Go to WordPress > Custom Fields and build a field group or, better, import the field group I used for testing by importing the attached json file. You can import it on the page: Custom Fields > Tools > Import Field Groups
After the import you should have a group field ready for testing purposes. Make sure it's set to be displayed both on Posts and Taxonomies: Edit the field group and check under the "Location" meta box:

Actual testing:

the main goal of testing is to check that changes to the ACF fields trigger a live refresh of the analysis
edit a post that contains little text
open the SEO analysis and use as a reference the Text length assessment (or other assessment if you prefer: text length is easier to check)
the assessment will initially report: "The text contains {nn} words". Take note of the number of words.
in all the ACF fields where you can enter text, check that:
- entering and deleting text triggers an analysis refresh: note the number of words in the text length assessment must change
- pasting and cutting text (with both mouse right click and keyboard) does the same
for the Wysiwyg field (which is powered by TinyMCE) check that any change to the text, including undo and redo actions, does the same
switch the Wysiwyg field to "Text" mode and check the same as above
for the "Repeater" and "Flexible content" fields:
- check that adding a row triggers the analysis refresh: luckily, acf-analysis already dumps in the browser's console some data when the analysis is refreshed: if you see that dump, it means it works
check that removing a row does the same
check that any change to the text within the "Repeater" and "Flexible content" triggers the analysis refresh and the text length assessment words number gets updated
test any other possible scenario I may have forgotten to mention
repeat the test with Classic Editor
repeat the test on the edit term page (edit a category or a tag)