Open ghost opened 2 years ago
WIP: What i have done so far which works for "singleH1" Yoast assessment:
jQuery( document ).ready( function ( $ ) { //? INFO: YoastSEO global objects to explore: // yoast = classes factory // yoast.analysis // yoast.analysis.app // yoast.analysis.app.values.Mark // YoastSEO = instances to use // YoastSEO.analysis // YoastSEO.app.seoAssessor._assessments // YoastSEO.wp._tinyMCEHelper // Trigger Yoast highlights on yoast buttons $( document ).on( 'click', '#singleH1', apply_yoast_markers ); $( document ).on( 'click', '#singleH1 svg', apply_yoast_markers ); // Trigger Yoast highlight when flexible preview is reloaded $( window ).on( 'YoastSEO:ready', function () { if ( typeof acf === 'undefined' ) { return; } acf.addAction( 'acfe/fields/flexible_content/preview', function () { setTimeout( apply_yoast_markers, 100 ); } ); }, ); // Function to apply yoast markers function apply_yoast_markers() { let content = ''; const yoast_data = YoastSEO.analysis.collectData(); const analyze_data = YoastSEO.analysis.worker.analyze(yoast_data); analyze_data.then((data) => { const global_results = data.result; const seo_results = global_results.seo[''].results; if ( seo_results.length ) { $.each(seo_results, function(i, result) { const marks = result.getMarks(); if ( !marks.length ) { return true; } $.each(marks, function(i, mark) { const $previews = $('.-preview'); if ( !$previews.length ) { return content; } $previews.each(function() { const $preview = $(this), preview_content = $preview.html(), marked_preview_content = mark.applyWithReplace(preview_content); // Replace preview content $preview.html(marked_preview_content); // Edit / style yoastmarks const $yoastmarks = $preview.find('yoastmark'); $yoastmarks .attr('data-mce-bogus', '1') .css('background-color', '#e1bee7'); // Apply manually yoast style because it's only loaded in TinyMCE editor }); }); }); } return content; }); return content; } }, );
WIP: What i have done so far which works for "singleH1" Yoast assessment: