Add identifier to JSON-LD metadata

[acicovic]

Description

There are many plugins that generate JSON-LD. When our plugin's metadata is output as JSON-LD, it's often hard to distinguish if there are several other JSON-LD blocks in the page's source. This can be a hindrance when troubleshooting.

This PR adds a class="wp-parsely-metadata" identifier to our JSON-LD's <script> tag, so our own metadata can easily be spotted when trying to troubleshoot.

Motivation and context

Make troubleshooting easier.

How has this been tested?

Existing tests modified to pass.

Summary by CodeRabbit

• New Features

  • Enhanced JSON-LD script tags to include a new CSS class for improved styling and JavaScript targeting.

• Bug Fixes

  • Updated test cases to reflect the new class attribute in JSON-LD script tags, ensuring accurate validation across various tests.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes in this pull request primarily involve the addition of a CSS class attribute to the JSON-LD script tags outputted by the render_metadata method in the Metadata_Renderer class. Corresponding updates have been made to various test cases to ensure they verify the presence of this new class attribute in the expected output. The modifications do not alter the logic or control flow of the existing code or tests.

Changes

File Path	Change Summary
src/Metadata/class-metadata-renderer.php	Updated render_metadata method to include class="wp-parsely-metadata" in JSON-LD script tag.
tests/Integration/Endpoints/RestMetadataTest.php	Modified test_get_rendered_meta_json_ld to expect JSON-LD script tag with new class attribute.
tests/Integration/UI/MetadataRendererTest.php	Updated test_render_metadata_json_ld to check for class attribute in JSON-LD output.
tests/e2e/specs/front-end-metadata.spec.ts	Changed assertions in multiple test cases to expect JSON-LD script tags with new class attribute.

Possibly related PRs

• Remove repeated-metas.php and move class-meta-renderer.php #2849: This PR modifies the render_metadata method in the class-metadata-renderer.php file, which is directly related to the changes made in the main PR that also alters the render_metadata method to include a CSS class in the JSON-LD output.

Suggested labels

Changelog: Fixed, Type: Maintenance, Type: Refactoring

Suggested reviewers

• vaurdan

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between f82a774 and 74f3704.

📒 Files selected for processing (4)

• src/Metadata/class-metadata-renderer.php (1 hunks)
• tests/Integration/Endpoints/RestMetadataTest.php (1 hunks)
• tests/Integration/UI/MetadataRendererTest.php (1 hunks)
• tests/e2e/specs/front-end-metadata.spec.ts (6 hunks)

✅ Files skipped from review due to trivial changes (1)

• src/Metadata/class-metadata-renderer.php

🧰 Additional context used

📓 Path-based instructions (3)

tests/Integration/UI/MetadataRendererTest.php (1)

Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:

• Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
• Ensure the code follows WordPress coding standards and is well-documented.
• Confirm the code is secure and free from vulnerabilities.
• Optimize the code for performance, removing any unnecessary elements.
• Validate comments for accuracy, currency, and adherence to WordPress coding standards.
• Ensure each line comment concludes with a period.
• Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."

tests/Integration/Endpoints/RestMetadataTest.php (1)

Pattern **/*.{html,php}: "Perform a detailed review of the provided code with following key aspects in mind:

• Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
• Ensure the code follows WordPress coding standards and is well-documented.
• Confirm the code is secure and free from vulnerabilities.
• Optimize the code for performance, removing any unnecessary elements.
• Validate comments for accuracy, currency, and adherence to WordPress coding standards.
• Ensure each line comment concludes with a period.
• Verify code compatibility with the latest version of WordPress, avoiding deprecated functions or features."

tests/e2e/specs/front-end-metadata.spec.ts (1)

Pattern **/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:

• Review the code to ensure it is well-structured and adheres to best practices.
• Verify compliance with WordPress coding standards.
• Ensure the code is well-documented.
• Check for security vulnerabilities and confirm the code is secure.
• Optimize the code for performance, removing any unnecessary elements.
• Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
• Ensure each line comment concludes with a period.
• Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
• Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."

🔇 Additional comments (3)

tests/e2e/specs/front-end-metadata.spec.ts (1)

56-56: LGTM! Test assertions updated correctly.

The test assertions have been properly updated to verify the presence of the new class="wp-parsely-metadata" attribute in JSON-LD script tags. The changes maintain comprehensive test coverage across different contexts (homepage, posts, and pages).

Also applies to: 70-70, 85-85, 110-110, 129-129, 148-148

tests/Integration/UI/MetadataRendererTest.php (1)

126-126: LGTM! Integration test updated correctly.

The assertion has been properly updated to verify the presence of the new class="wp-parsely-metadata" attribute in the rendered JSON-LD metadata.

tests/Integration/Endpoints/RestMetadataTest.php (1)

406-406: LGTM! REST API test updated correctly.

The expected output has been properly updated to include the new class="wp-parsely-metadata" attribute in the JSON-LD metadata returned by the REST API endpoint.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Experiment)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[vaurdan]

This is a great idea, thank you!

I'm approving it as it looks good. My only suggestion is that we could use id instead of class, since it should be unique. But just a nitpick, class works just fine for this purpose as well, so feel free to do it either way :)

[acicovic]

@vaurdan, just for context, I did consider an ID when I thought of this PR, and then I looked on how Yoast and Rank Math do it.

Both of them identify their JSON-LD with class (<script type="application/ld+json" class="yoast-schema-graph"> and <script type="application/ld+json" class="rank-math-schema">) so I went with class instead.