Add RankMath for Posts block

[Soare-Robert-Daniel]

Closes #1871

Summary

Add RankMath integration for Posts Block

Some notes on development:

• At first I tried to add inside the Edit component on the idea that each Block when is created its adding its own hook. The process was pretty messing with reactivity so I decided add a simple script that initiate at loading and scan everything at once -- reliable solution decoupled from react component, much easier to maintain and possible crashes on the block.
• I wanted to initiate the hook after the rank-math-app.js is loaded in the page via script loading. My attempt was unsuccessful so I used a simple try system.

Screenshots

2023-09-20_17-04-35.mp4

---

Test instructions

ℹ️ You will need RankMath plugin

1. Insert a Posts Block
2. Check the RankMath of the page.
3. You should not see the error message with Add internal links in your content since Post block will add references to other posts.

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	274.81 KB	274.81 KB	0 B (0.00%)
Blocks	1.47 MB	1.47 MB	613 B (0.04%)
CSS	89.3 KB	89.3 KB	0 B (0.00%)
Dashboard	131.23 KB	131.23 KB	0 B (0.00%)
Export Import	87.19 KB	87.19 KB	0 B (0.00%)
Pro	346.75 KB	346.75 KB	0 B (0.00%)

[pirate-bot]

Plugin build for e14821a is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	88	17.87	88.25	0 (60ms)	36.84 (80ms)

Values above 60ms

"0 - 73.24, 1 - 76.08, 2 - 89.49, 3 - 100.07, 4 - 64.58, 5 - 88.25, 6 - 89.33, 7 - 70.50, 8 - 92.93, 9 - 83.35, 10 - 93.20, 11 - 77.86, 12 - 77.19, 13 - 91.31, 14 - 94.59, 15 - 110.15, 16 - 147.41, 17 - 81.65, 18 - 70.80"

[HardeepAsrani]

At first I tried to add inside the Edit component on the idea that each Block when is created its adding its own hook.

Any reason why we are using HTML selectors to implement it and adding all the checks if RankMath exists instead of just passing the content (like here) through the filter?

Even if RankMath isn't active, I think, the filter shouldn't do any harm.

Once the content changes, you can use:

• rankMathEditor.refresh( 'content' ) – To reload the Content tests.

[Soare-Robert-Daniel]

The advantage of the current technique is that it can be separated into individual scripts and used with other blocks that may need math rank support. Also, using the HTML that gets the entire final structure frees us from maintaining it when doing structural changes.

Also, the function that gets the content and adds it to the filter must be initialized once. As mentioned before, putting this inside the components was not working the way I liked -- too much management for such little value.

[HardeepAsrani]

@Soare-Robert-Daniel Okay, that is a way to go but I'm not much confident about this line

const rankMathScript = document.querySelector( 'script[src*="rank-math-app"]' );

Can't we at least have a better detection that to look for the script in DOM? They might change the name, or have a different name in Pro version and so on. If any of that happens, we won't be aware that the integration doesn't work.

[Soare-Robert-Daniel]

@HardeepAsrani, we can remove that and just use the interval checker for the global value.

[HardeepAsrani]

@Soare-Robert-Daniel That's fine too.

[rodica-andronache]

@Soare-Robert-Daniel tested and everything's working well 👍

[pirate-bot]

🎉 This PR is included in version 2.4.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀