Eye markers in the readability analysis do not work with page builders

[CarolineGeven]

Currently the eye markers are not working with the following page builders:

• Divi
• OptimizePress
• Enfold Theme
• SiteOrigin
• Avada Theme
• Themify
• Visual Composer (WPBakery)

---

Divi

1.Install Divi
2.Add a text module
3.Add text to it
4.Click on the eye icon and see that nothing is highlighted.

Technical info

• WordPress version: 4.8
• Yoast SEO version: 4.9
• Divi: 3.0.29 (also happens with the newer versions)

---

OptimizePress

What did you expect to happen?

The Readability Eye Highlight Icon to display

What happened instead?

It did not

How can we reproduce this behavior?

1.Be in the WordPress Editor Tab

2.See that the Readability Eye Highlight Icon does not appear

3.Switch to a standard theme like 2013

4.See Readability Eye Highlight Icon appear

Can you provide a link to a page which shows this issue?

Technical info

• WordPress version: 4.7.3
• Yoast SEO version: 4.4
• OptimizePress: 2.5.9.2

---

Enfold Theme

What did you expect to happen?

That text would be highlighted when the readability eye icon was selection.

What happened instead?

They were not

How can we reproduce this behavior?

1.Add text modules

2.Click on eye icon

3.See that the readability eye icon fails to highlight the text

Can you provide a link to a page which shows this issue?

Technical info

• WordPress version: 4.7
• Yoast SEO version: 4.0.2
• Enfold: 3.8.4

---

##SiteOrigin

What did you expect to happen?

That the readability tool would highlight the text in SiteOrigin

What happened instead?

It did not

How can we reproduce this behavior?

1.Create a post using SiteOrigin Text Modules

2.See that the tool fails to highlight. Clicking on the eye fails to find the text.

Can you provide a link to a page which shows this issue?

Technical info

• WordPress version: 4.6.1
• Yoast SEO version: 3.7.2
• SiteOrigin: 2.4.16
• SiteOrigin Widgets Bundle: 1.7.1

Notes: No JavaScript errors appear

---

Avada Theme

What did you expect to happen?

The Preview "eye" icon would be able to scan and highlight the text

What happened instead?

It did not

How can we reproduce this behavior?

1.Avada Theme with Fusion Core
2.Create Post
3.Add enough text to trigger an "eye" icon
4.Click on "eye" icon in the Readability Section
5.See that nothing is scanned and that readability score is unaffected.

Some user's report that Avada Theme is highlighting the shortcodes

Can you provide a link to a page which shows this issue?
N/A

Technical info

• WordPress version: 4.5.3
• Yoast SEO version: 3.3.2
• Fusion Core: 2.0.2
• Avada Theme: 4.0.2

---

Themify

What did you expect to happen?

I expected our plugin to analyze the content correctly.

What happened instead?

Our plugin says that there are zero words in the content when content exists within the Themify (visual) Builder component of the theme.

(Our plugin correctly detects content if it's placed within the native content body for testing.)

How can we reproduce this behavior?

This is a premium theme so there was limited ability to reproduce this in our environment.

Can you provide a link to a page which shows this issue?

Customer ticket # 127307

Screenshot of problem:

Likely Correction

The Themify development team likely needs to implement our method to make their content available to our analysis engine for the benefit of their users: https://kb.yoast.com/kb/can-i-add-data-to-the-page-analysis/

Technical info

• WordPress version: WordPress 4.5.2 running Themify Corporate theme.
• Yoast SEO version: Yoast SEO Premium 3.3.1

Visual composer

Classic mode

Currently, the highlights are not working in Visual Composer's Backend Editor mode.

To reproduce

1. Install Visual Composer
2. Create a Page
3. Add blocks
4. Add Text. Be in Backend Editor Mode
5. Click an eye button. Nothing is marked.

Backend editor mode

To reproduce

1. Install Visual Composer
2. Create a Page
3. Add blocks
4. Add Text. Be in Classic Editor Mode
5. See that the preview icon picks-up text and Visual Composer Code

Current highlights

Expected highlights

Original issue

The original bug report can be found here: Yoast/wordpress-seo#5319. That issue shouldn't closed because of its large amount of please inform messages.

[CarolineGeven]

Please inform the customer of conversation # 206368 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 212749 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 240098 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 247084 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 184648 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 171855 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 202291 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 213571 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 150825 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 172329 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 214694 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 128628 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 158696 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 166746 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 195858 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 209036 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 236870 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 151231 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 132984 when this conversation has been closed.

[CarolineGeven]

Please inform the customer of conversation # 127307 when this conversation has been closed.

[mayada-ibrahim]

Please inform the customer of conversation # 362894 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 371815 when this conversation has been closed.

[michaelbriantina]

Please inform the customer of conversation # 386415 when this conversation has been closed.

[michaelbriantina]

Please inform the customer of conversation # 386994 when this conversation has been closed.

[michaelbriantina]

Please inform the customer of conversation # 387328 when this conversation has been closed.

[Pcosta88]

Issue happens with Elementor https://wordpress.org/plugins/elementor/

[Pcosta88]

Please inform the customer of conversation # 396221 when this conversation has been closed.

[suascat]

Please inform the customer of conversation # 401029 when this conversation has been closed.

[suascat]

Please inform the customer of conversation # 407185 when this conversation has been closed.

[maybellyne]

Please inform the customer of conversation # 407477 when this conversation has been closed.

[mmikhan]

Please inform the customer of conversation # 408083 when this conversation has been closed.

[michaelbriantina]

Please inform the customer of conversation # 408755 when this conversation has been closed.

[CarolineGeven]

Unfortunately we are unable to mark the content in the page builders. 'Under the hood' we are marking the content properly, but as page builders build their content on top of the editor, you cannot see the markers. Unfortunately we are unable to mark this in active page builders.

As we understand the confusion this may cause, we've decided to disable the markers for the page builders we as Yoast support. Those page builders are Visual Composer and Divi. This means that for Visual Composer and Divi the markers are either disabled or removed. The feedback of course will still be there. We understand this is not the desired option, but it's not something we on our end can fix with how page builders currently work.

This release is set for 7.9.x, which will be the next release.

[priscillamc]

Please inform the customer of conversation # 412265 when this conversation has been closed.

[XUBIUM]

Hello,
If you have issues with builders, then you should implement the readability test as part of the page test from the admin bar icon when the page is displayed... or at least provide information in the error or warning that will allow to find the issues in the content.
Best regards.

[HuxburyQuinn]

Hi,

I use Kriesi ENFOLD Advanced Layout Builder (ALB)

As XUBIUM has suggested. Rather than implementing the Yoast highlight markers in the WordPress Content Editor (Which you have advised you can't do). The recommend option to have test mode (like Googles Tag Manager) to highlight text on the visual page - would be highly advantageous. You could work with two browser windows, one with the page editor - the other page in preview mode.

I should also note - default behaviour of the Yoast highlight text is deactivated when you click on the highlighted text to begin editing. It would be GREAT if the highlighted text remained constant and ajax updated status of the text/sentence as you typed. If you have a very long post, scrolling all the way to the bottom to un-highlight / re-highlight text and scrolling all the way to the top to check your edit results, is very annoying, to say the least.

Even detaching the Yoast meta box to a modal window or moving the Yoast meta box to the sidebar (as Gutenberg) but in Classic Editor would be a major improvement.

Current Yoast workarounds, depending on how you created your post/page.
\1. Blog or write your Page content first in the Default WordPress Classic Content Editor. Do your Grammarly, SEO and Readability. Then activate the Theme Page Builder and break up your content accordingly.

Alternatively
\2. If you have already built your page with a Theme Page Builder. Open the page INCOGNITO and copy the page text content.
Back in your admin window Create and Page/Post (Visibility Private) and paste the content. In the default WordPress, Classic Content Editor use Yoast Highlight marker to complete your SEO and Readability. Copy the edit content into your Page Builder. You can then delete your temporary private post.

Ultimately a suggestive interface like Grammarly to prompt readability changes, for me would be at the top of the list, followed by a close second a Grammarly API Yoast extension.

I look forward to the Yoast team delivering an improving UI for highlighted text.