Fix metabox and sidebar elements order

[pls78]

Context

• In Re-order menu items to be consistent throughout various editors. #20907 we introduced a bug which disrupts the order of the elements in the metabox and sidebar when Yoast SEO Premium is activated. This PR fixes it.

Summary

This PR can be summarized in the following changelog entry:

• Fixes a bug where the elements in the Yoast sidebar and metabox are displayed in an incorrect order if Yoast SEO Premium is activated.

Relevant technical choices:

• The error boundary enclosing the components if MetaboxFill, SidebarFill and ElementorFill has been removed and placed around the components in MetaboxSlot, SidebarSlotandElementorSlot`. This because the components inside each fill are accessed and ordered in the corresponding slots, and because they are all enclosed in the error boundary are seen as a single giant component. Once Premium adds its 3 components to the metabox/sidebar, these 4 components are then ordered.

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Preliminary step: install and activate Yoast SEO Premium

Testing the classic and block editor metabox error boundary

• Copy the following snippet right after the imports in assets/js/src/metabox.js (Yoast SEO Premium)

  const Bomb = () => {
    throw new Error("Kaboom!");
  }
  

• Find the Fill component with name="YoastMetabox"and copy the following snippet after a </SidebarItem> closing tag inside that component: <Bomb />

  • this will throw an exception inside the metabox

• Re-build Premium Javascript packages by issuing grunt build:js in the command line

• Edit a post and verify:

  • the metabox looks as follows
  
  • the metabox tabs are not active
  • the Refresh page button refreshes the page (the error would stay)

Testing the block editor sidebar error boundary

Testing the block editor sidebar

• Now find the Fill component with name="YoastSidebar" and add the same <Bomb /> snippet after a </SidebarItem> closing tag inside that component

• Build again the javascript packages

• Edit a post and verify:

  • the sidebar looks as follows:
    
  • the Refresh page button refreshes the page (the error would stay)

Testing the Elementor sidebar error boundary

• Copy the previous two snippets of code in assets/js/src/elementor/initializers/initializeSidebar.js

  • the first snippet right after the imports
  • the second snippet after a </SidebarItem> closing tag inside the Fill component with name="YoastElementor"

• Build the javascript packages again

• Edit a post and verify:

  • the sidebar looks as follows:
  

• the Refresh page button refreshes the page (the error would stay)

Verify the correct order of the elements

• Preliminary step: remove all the code you have added in the previous test steps

• Edit a post in the block editor and verify

  • the metabox looks as follows
  
  • the sidebar looks as follows
    

• Edit a post in the classic editor and verify the metabox looks as follows
  

• Edit a post with Elementor and verify the sidebar looks as follows

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.

Impact check

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

• N/A

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

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 #1530

[coveralls]

Pull Request Test Coverage Report for Build 7d5a6c3aa5387241a51a489954eb361d85a73497

Details

• 0 of 3 (0.0%) changed or added relevant lines in 3 files are covered.
• 1420 unchanged lines in 40 files lost coverage.
• Overall coverage decreased (-1.2%) to 51.464%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/components/slots/MetaboxSlot.js	0	1	0.0%
packages/js/src/components/slots/SidebarSlot.js	0	1	0.0%
packages/js/src/elementor/components/slots/ElementorSlot.js	0	1	0.0%

Files with Coverage Reduction	New Missed Lines	%
admin/class-option-tabs-formatter.php	1	0.0%
src/actions/configuration/first-time-configuration-action.php	1	91.84%
src/generated/assets/externals.php	1	0.0%
src/generated/assets/languages.php	1	0.0%
src/generators/breadcrumbs-generator.php	1	64.23%
src/integrations/blocks/structured-data-blocks.php	1	16.0%
src/integrations/settings-integration.php	1	28.49%
admin/class-admin-editor-specific-replace-vars.php	2	85.71%
admin/endpoints/class-endpoint-statistics.php	2	0.0%
admin/formatter/class-metabox-formatter.php	2	91.77%

Totals
Change from base Build 640f7b16b262419a0e6486e2ab44f5e94131d787:	-1.2%
Covered Lines:	28194
Relevant Lines:	55725

---

💛 - Coveralls

[igorschoester]

CR && AT ✅

Making me wonder why we thought we needed inside the Fill before 🤔