Pilot-in / PiloPress

The most advanced WordPress Page Builder using Advanced Custom Fields & TailwindCSS
https://www.pilopress.com
62 stars 11 forks source link

Yoast SEO compatibility to apply yoastmarks in flexible preview #217

Open ghost opened 2 years ago

ghost commented 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;
        }

    },
);