Show yoast in elements tab in elementor by FAMarfuaty · Pull Request #22697 · Yoast/wordpress-seo

FAMarfuaty · 2025-11-06T12:26:04Z

Context

Previously, we rendered the Yoast SEO tab analysis under the Post Settings menu in Elementor, which made the feature not very visible for the users. We want to also show the Yoast SEO tab in the Elements side bar for better discoverability.
Additionally, the introduction notification was also pointed at the "Post settings" in the top bar. In this PR, the notification is also moved to now point to the new Yoast SEO tab under Elements panel

Summary

This PR can be summarized in the following changelog entry:

Integrates the Yoast SEO tab into the Elementor Editor's Elements panel sidebar to provide enhanced access to SEO settings.
[wordpress-seo other] Relocates the introduction notification to point to the Yoast SEO tab within the Elements panel sidebar of the Elementor Editor for better user guidance.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Install and activate Yoast SEO
Install and activate Yoast SEO Premium
Install and activate Elementor
Set the site language to English

The Yoast SEO tab should be rendered under Elements panel

Create a post in Elementor editor
Confirm that on page load you can see Yoast SEO tab under Elements in the sidebar. See screenshot:

Screenshot

The default activated tab should be on the Widgets
Click on the Yoast SEO tab
Confirm that the Yoast SEO is rendered correctly
- Exactly the same rendered components as the one under Post setting. See screenshot

Screenshot

Confirm that the analysis still works as expected. For example:
- the assessments should still be able to detect the content in the editor
- the assessment results should be updated accordingly when there is a change in the analysis result
- the highlighting buttons still work
- the edit buttons still work

Switching between tabs in Elements panel

Create a post in Elementor editor
Click on the Yoast SEO tab in Elements panel
Confirm that the Yoast SEO button tab is active and the other buttons (Widgets and Globals) are not active
- To check if the button is active you can see that the tab is underlined with a black (or white in dark mode) line, OR
- You can inspect the element, and confirm that the element has elementor-active class
Confirm that the Yoast SEO analysis page is rendered correctly
Click on the Widgets button tab
Confirm that the Widgets button tab is active
Confirm that the Yoast SEO analysis page is NOT shown anymore

Test the introduction notification

Clicking on "Got it" button should dismiss the notification

Reset the elementor_introduction value in your wp_usermeta database
Open a post in Elementor editor
Confirm that the notification is now rendered under Yoast SEO tab inside Elements panel
Click outside of the notification
Confirm that the notification is not dismissed
Click the "Got it" button and confirm that it is dismissed

Clicking on Yoast SEO tab should dismiss the notification

Reset the elementor_introduction value in your wp_usermeta database
Open a post in Elementor editor
Confirm that the notification is now rendered under Yoast SEO tab inside Elements panel
Click on the Yoast SEO tab itself
Confirm that the notification is dismissed

Collapsing/Hiding the Elements panel in the editor should dismiss the notification

Reset the elementor_introduction value in your wp_usermeta database
Open a post in Elementor editor
Confirm that the notification is now rendered under Yoast SEO tab inside Elements panel
Click the toggle to hide the Elements panel. See screenshot below:

Toggle

Confirm that the notification is dismissed

The notification should be dismissed when other panel is clicked

Reset the elementor_introduction value in your wp_usermeta database
Open a post in Elementor editor
Confirm that the notification is now rendered under Yoast SEO tab inside Elements panel
Click on other tabs inside Elements panel
Confirm that the notification is still shown
Click on the Post settings, Notes, or History panel
Confirm that the notification is dismissed

The notification should not be shown anymore once it's dismissed

Don't reset the elementor_introduction value in your wp_usermeta database
Create a new post in Elementor
Confirm that the notification is not shown anymore

Test in RTL language

Repeat the test scenarios above in a RTL language (e.g. Arabic), and confirm that you get the same results
The "Yoast SEO" should not be translated

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Smoke test the analysis functionality

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/814

…t-in-elements-tab-in-elementor

coveralls · 2025-11-12T10:57:38Z

Pull Request Test Coverage Report for Build f4eb7abaa7b8ccd4b1aa81addbe1c84e83f3b585

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

For more information on this, see Tracking coverage changes with pull request builds.
To avoid this issue with future PRs, see these Recommended CI Configurations.
For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

0 of 99 (0.0%) changed or added relevant lines in 6 files are covered.
5 unchanged lines in 2 files lost coverage.
Overall coverage decreased (-0.08%) to 53.262%

Changes Missing Coverage	Changed/Added Lines	%
packages/js/src/elementor/initialize.js	1	0.0%
packages/js/src/elementor/components/YoastPanelView.js	5	0.0%
admin/class-admin-asset-manager.php	14	0.0%
src/integrations/third-party/elementor.php	15	0.0%
packages/js/src/elementor/initializers/introduction-editor-v2.js	28	0.0%
packages/js/src/elementor/initializers/panel.js	36	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/elementor/initialize.js	1	0.0%
packages/js/src/elementor/initializers/introduction-editor-v2.js	4	0.0%

Totals
Change from base Build a27514f8e0b862c6290d808bd633e53641b366ef:	-0.08%
Covered Lines:	32208
Relevant Lines:	60659

💛 - Coveralls

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

…t-in-elements-tab-in-elementor

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

Copilot

Pull Request Overview

This PR enhances the discoverability of Yoast SEO's Elementor integration by adding the Yoast SEO tab to the Elements panel sidebar, in addition to the existing Post Settings location. The introduction notification has also been relocated to point to this new tab location.

Key Changes:

Added Yoast SEO tab to Elementor's Elements panel navigation alongside Widgets and Globals tabs
Updated introduction notification to target the new Elements panel tab location instead of Post Settings
Introduced DOM manipulation to inject the Yoast tab button and manage panel content display

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/integrations/third-party/elementor.php	Adds output buffering hooks to inject Yoast SEO tab button via regex replacement
packages/js/src/elementor/initializers/render-sidebar.js	Extends React root to support portal rendering in both tab and panel locations
packages/js/src/elementor/initializers/panel.js	Implements panel initialization logic, tab registration, and content display management
packages/js/src/elementor/initializers/introduction-editor-v2.js	Refactors introduction notification to target new Elements panel tab with improved positioning
packages/js/src/elementor/initialize.js	Integrates panel initialization into main initialization flow
packages/js/src/elementor/components/YoastPanelView.js	Defines Marionette view for Yoast panel content rendering
css/src/elementor.css	Adds styling for panel content container and icon display
config/webpack/webpack.config.base.js	Configures Marionette as external dependency mapped to Elementor's global
admin/class-admin-asset-manager.php	Extracts Elementor dependencies into reusable method including Marionette

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-14T12:47:47Z

+			} );
+
+			// Auto-dismiss when switching to preview mode, and the Elements panel is hidden.
+			window.elementor.channels.dataEditMode.on( "switch", function( activeMode ) {


[nitpick] Inconsistent arrow function usage: This callback uses a traditional function while other callbacks in the same file use arrow functions (e.g., line 60). Consider using an arrow function for consistency unless this binding is specifically needed.

Suggested change

window.elementor.channels.dataEditMode.on( "switch", function( activeMode ) {

window.elementor.channels.dataEditMode.on( "switch", ( activeMode ) => {

Copilot · 2025-11-14T12:47:48Z

+export const YoastPanelView = Marionette.ItemView.extend( {
+	template: false,
+	id: "yoast-elementor-react-panel",
+	className: "yoast yoast-elementor-panel__fills",
+	initialize() {
+		jQuery( "#elementor-panel-elements-search-area" ).hide();
+	},
+	onShow() {
+		showYoastPanelAnalysis();
+	},
+	onDestroy() {
+		jQuery( "#elementor-panel-elements-search-area" ).show();


Duplicated jQuery selectors: The selector #elementor-panel-elements-search-area is used in both initialize() and onDestroy(). Consider storing it as a constant at the module level (similar to other constants in panel.js) to avoid duplication and improve maintainability.

Suggested change

export const YoastPanelView = Marionette.ItemView.extend( {

template: false,

id: "yoast-elementor-react-panel",

className: "yoast yoast-elementor-panel__fills",

initialize() {

jQuery( "#elementor-panel-elements-search-area" ).hide();

},

onShow() {

showYoastPanelAnalysis();

},

onDestroy() {

jQuery( "#elementor-panel-elements-search-area" ).show();

const ELEMENTS_SEARCH_AREA_SELECTOR = "#elementor-panel-elements-search-area";

export const YoastPanelView = Marionette.ItemView.extend( {

template: false,

id: "yoast-elementor-react-panel",

className: "yoast yoast-elementor-panel__fills",

initialize() {

jQuery( ELEMENTS_SEARCH_AREA_SELECTOR ).hide();

},

onShow() {

showYoastPanelAnalysis();

},

onDestroy() {

jQuery( ELEMENTS_SEARCH_AREA_SELECTOR ).show();

Copilot · 2025-11-14T12:47:48Z

+	 * @return void
+	 */
+	public function inject_yoast_tab() {
+		$output  = \ob_get_clean();


Complex regex pattern is fragile and hard to maintain. The pattern relies on specific HTML structure and class ordering which could break if Elementor changes their markup. Consider adding a comment explaining why regex is necessary here instead of a more robust DOM manipulation approach, or document the Elementor version this pattern is tested against.

Suggested change

$output = \ob_get_clean();

$output = \ob_get_clean();

/**

* NOTE: We use a regex here to inject the Yoast SEO tab into the Elementor panel.

* This pattern relies on the specific HTML structure and class ordering output by Elementor.

* Using a DOM parser in PHP is not practical in this context due to performance and complexity.

* If Elementor changes their markup, this pattern may break and will need to be updated.

* Tested against Elementor version 3.13.0.

*/

Copilot · 2025-11-14T12:47:48Z

+		contentContainer.className = YOAST_PANEL_CONTENT_CLASS;
+
+		// Insert it after the navigation.
+		elementsNavigation.parentNode.insertBefore( contentContainer, elementsNavigation.nextSibling );


Missing null check for parentNode: While elementsNavigation is checked for existence, parentNode could theoretically be null. Consider adding a null check for elementsNavigation.parentNode before calling insertBefore().

Suggested change

elementsNavigation.parentNode.insertBefore( contentContainer, elementsNavigation.nextSibling );

if ( elementsNavigation.parentNode ) {

elementsNavigation.parentNode.insertBefore( contentContainer, elementsNavigation.nextSibling );

} else {

// If parentNode is null, do not attempt to insert. Optionally, log or handle this case.

return;

}

Unnecessary, we already verify that elementsNavigation element exists in the DOM in line 27.

Copilot · 2025-11-14T12:47:49Z

+	flex-direction: column;
+}
+
+


[nitpick] Extra blank line should be removed for consistency with the rest of the stylesheet.

Suggested change

JorPV · 2025-11-14T14:14:30Z

AT ✅ CR ✅

JorPV and others added 4 commits November 5, 2025 15:47

Adds the Yoast tab button to the elements navigation

24de12f

Listens to navigations changes in the elements panel

f332439

Makes the yoast menu available in the Elements panel

1c98c09

Create constants for element IDs and classes and improve comments

d800f2e

FAMarfuaty added the changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog label Nov 7, 2025

FAMarfuaty and others added 4 commits November 7, 2025 14:36

Remove the active class from the Yoast tab.

ba77700

Registers the route

0ba39c4

Also register region view

3d6624b

Merge branch 'trunk' of github.com:Yoast/wordpress-seo into show-yoas…

26ea67b

…t-in-elements-tab-in-elementor

FAMarfuaty and others added 12 commits November 12, 2025 12:12

Add Yoast SEO tab button

f501232

Merge branch 'show-yoast-in-elements-tab-in-elementor' of github.com:…

94d318e

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

Remove Marionette dependency

7686e19

Add Marionette as an external

ac8da68

Fix incorrect variable name

d79ee2f

Adapt the introduction

6be43ad

Fix lint errors

b9fe0db

Fixes the arrow position of the introduction

98ada30

Merge branch 'show-yoast-in-elements-tab-in-elementor' of github.com:…

98b3f65

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

Removes translations

330b304

Improve Function doc and fix linting errors

71fb380

Merge branch 'show-yoast-in-elements-tab-in-elementor' of github.com:…

2507c4a

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

FAMarfuaty marked this pull request as ready for review November 13, 2025 10:54

FAMarfuaty and others added 6 commits November 13, 2025 14:19

Dismiss introduction when Elements panel is hidden

52adfdc

Use explicit jQuery

a40312e

Dismiss the notification when a user exit panel/elements route

ff13be6

Merge branch 'trunk' of github.com:Yoast/wordpress-seo into show-yoas…

8096aa7

…t-in-elements-tab-in-elementor

Prevents hiding delay when not in the panel elements

cd568ab

Merge branch 'show-yoast-in-elements-tab-in-elementor' of github.com:…

efcc924

…Yoast/wordpress-seo into show-yoast-in-elements-tab-in-elementor

JorPV requested a review from Copilot November 14, 2025 12:46

Copilot AI reviewed Nov 14, 2025

View reviewed changes

Error handling

87f0c9a

JorPV added this to the 26.5 milestone Nov 14, 2025

Avoids repetition

51c7f70

Removes extra blank line

cfd9c48

JorPV merged commit 6200ed8 into trunk Nov 14, 2025
36 checks passed

JorPV deleted the show-yoast-in-elements-tab-in-elementor branch November 14, 2025 14:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show yoast in elements tab in elementor#22697

Show yoast in elements tab in elementor#22697
JorPV merged 29 commits intotrunkfrom
show-yoast-in-elements-tab-in-elementor

FAMarfuaty commented Nov 6, 2025 •

edited by JorPV

Loading

Uh oh!

coveralls commented Nov 12, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

JorPV Nov 14, 2025

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

JorPV commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	window.elementor.channels.dataEditMode.on( "switch", function( activeMode ) {
	window.elementor.channels.dataEditMode.on( "switch", ( activeMode ) => {

-		$output  = \ob_get_clean();
+		$output  = \ob_get_clean();
+		/**
+		 * NOTE: We use a regex here to inject the Yoast SEO tab into the Elementor panel.
+		 * This pattern relies on the specific HTML structure and class ordering output by Elementor.
+		 * Using a DOM parser in PHP is not practical in this context due to performance and complexity.
+		 * If Elementor changes their markup, this pattern may break and will need to be updated.
+		 * Tested against Elementor version 3.13.0.
+		 */

-		elementsNavigation.parentNode.insertBefore( contentContainer, elementsNavigation.nextSibling );
+		if ( elementsNavigation.parentNode ) {
+			elementsNavigation.parentNode.insertBefore( contentContainer, elementsNavigation.nextSibling );
+		} else {
+			// If parentNode is null, do not attempt to insert. Optionally, log or handle this case.
+			return;
+		}

Conversation

FAMarfuaty commented Nov 6, 2025 • edited by JorPV Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

The Yoast SEO tab should be rendered under Elements panel

Switching between tabs in Elements panel

Test the introduction notification

Clicking on "Got it" button should dismiss the notification

Clicking on Yoast SEO tab should dismiss the notification

Collapsing/Hiding the Elements panel in the editor should dismiss the notification

The notification should be dismissed when other panel is clicked

The notification should not be shown anymore once it's dismissed

Test in RTL language

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

Other environments

Documentation

Quality assurance

Innovation

Uh oh!

coveralls commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build f4eb7abaa7b8ccd4b1aa81addbe1c84e83f3b585

Warning: This coverage report may be inaccurate.

Details

💛 - Coveralls

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

JorPV Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

JorPV commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

FAMarfuaty commented Nov 6, 2025 •

edited by JorPV

Loading

coveralls commented Nov 12, 2025 •

edited

Loading