Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0) #132

ellm · 2025-02-20T14:53:56Z

Summary

Fixes #124. This pull request introduces a Gutenberg-native solution for managing Open Graph tags on individual posts and pages.

Description of Changes

Added a slotfill to the post editor sidebar for configuring Open Graph tags, allowing users to set the title, description, and image.
Saved the Open Graph data to postmeta and registered it with WordPress.
Included logic to add the Open Graph meta tags to the document head on single posts. Overrides are used when set; otherwise, the tags fall back to WordPress defaults:
- Title => post_title
- Description => excerpt
- Image => featured image
Wrote tests to validate that the overrides and fallback defaults function as expected.
Currently, the feature is enabled for all post types by default.

Additional Notes

This implementation is for the Gutenberg editor only. Support for the classic editor is out of scope for this PR.
Future development could include a settings panel for admins to enable/disable Open Graph tags per post type, as suggested in the issue discussion.

Testing Instructions

In the Gutenberg editor, check the sidebar for the Open Graph settings panel.
Configure the Open Graph title, description, and image for a post.
Verify that the meta tags are added to the document head when viewing the post on the frontend.
Ensure that the logic falls back to WordPress defaults when overrides are not provided.
Run automated tests to confirm functionality and regression coverage.

Related Issue

#124

mogmarsh

overall, this looks great! I flagged a couple little things. 👍

mogmarsh · 2025-02-28T15:40:07Z

src/features/class-open-graph.php

+			get_post_types_by_support( 'open-graph' ),
+			'wp_seo_open_graph_title',
+			[
+				'sanitize_callback' => 'wp_kses_post',


could probably use sanitize_text_field here. I don't think we allow/need any html, right?

Good call. Updated in 14ef3a6

mogmarsh · 2025-02-28T15:40:13Z

src/features/class-open-graph.php

+			get_post_types_by_support( 'open-graph' ),
+			'wp_seo_open_graph_description',
+			[
+				'sanitize_callback' => 'wp_kses_post',


Updated in 14ef3a6

mogmarsh · 2025-02-28T15:40:51Z

src/features/class-open-graph.php

+			get_post_types_by_support( 'open-graph' ),
+			'wp_seo_open_graph_image',
+			[
+				'sanitize_callback' => 'wp_kses_post',


could probably use intval since it should always be a number

Updated in 14ef3a6

I actually went with absint here instead to ensure positive integer and better fallback to 0. Updated in 14ef3a6

mogmarsh · 2025-02-28T15:43:07Z

src/features/class-open-graph.php

+		$open_graph_image = get_post_meta( $post_id, 'wp_seo_open_graph_image', true );
+
+		if ( ! empty( $open_graph_image ) && is_numeric( $open_graph_image ) ) {
+			return wp_get_attachment_image_url( (int) $open_graph_image, 'full' );


would probably be safest to get the url, then check if it's set and not a wp_error, then return it. The media could get deleted from the media library after being set in the meta.

Good call. I've made that update in 4d80003

Additional update in 4d9b484

mogmarsh · 2025-02-28T15:49:13Z

tests/Feature/OpenGraphTest.php

+			]
+		)
+		->create();
+		$this->assertEquals( 007, Open_Graph::get_image( $post_id ) );


this is failing because get_image returns the url of the image (or false in this case because the image doesn't exist), not the id. There should be a way to load an image into the media library, then get its url. #cc_testing should be able to help.

Thanks! It took me a bit to sort out this but I think I came to a pretty good solution here: d123964. Post meta source is not identical but I think it works. I also figured out how to run phpunit tests locally in the process (much better than pushing to the remote branch 🤕 )

…string

WIP: issue-124

478dbcd

ellm added enhancement New feature or request gutenberg Requires understanding Gutenberg php Requires understanding PHP labels Feb 20, 2025

ellm added 9 commits February 20, 2025 10:46

Scaffold out initial Open Graph feature

f8564e7

Scaffold Open Graph slotfill

ce41e41

Add Open Graph tags rendering functionality

de41dd1

Update Open Graph meta fields to support 'page' post type

57e1776

Refactor Open Graph asset enqueueing for block editor

2f54c8d

Rework for unit testing

decc954

Add unit tests

ebcd7ed

Conditionally load assets for Open Graph

a87480a

Update docs

e843882

ellm marked this pull request as ready for review February 20, 2025 22:59

ellm added 6 commits February 25, 2025 11:00

Sniff fix

287570f

Phpstan fixes

c396c1d

Sniff fix

ebe6b40

with_ methods do not exist

a5f95ed

Meta stores image ID not URL

ecc844b

Not stored as a string

fa660de

mogmarsh approved these changes Feb 28, 2025

View reviewed changes

ellm added 9 commits March 3, 2025 15:06

Use more appropriate sanitize cb functions

14ef3a6

Use absint callback for better sanitization

f51be6e

Account for media being deleted from ML after being set in meta

4d80003

Fix Phpstan

4d9b484

Error description update

3c18f87

Update OpenGraphTest to assert non-empty image retrieval

f776459

Update OpenGraph image retrieval to return false instead of an empty …

58f78db

…string

Update OpenGraphTest to retrieve and assert thumbnail image URL

d123964

Post meta returns string; Creates always false

9c4463d

ellm merged commit a08ee88 into v2.0 Mar 5, 2025
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0) #132

Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0) #132

ellm commented Feb 20, 2025

mogmarsh left a comment

mogmarsh Feb 28, 2025

ellm Mar 3, 2025

mogmarsh Feb 28, 2025

ellm Mar 3, 2025

mogmarsh Feb 28, 2025

ellm Mar 3, 2025

ellm Mar 5, 2025

mogmarsh Feb 28, 2025

ellm Mar 5, 2025

ellm Mar 5, 2025

mogmarsh Feb 28, 2025

ellm Mar 5, 2025

Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0) #132

Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0) #132

Conversation

ellm commented Feb 20, 2025

Summary

Description of Changes

Additional Notes

Testing Instructions

Related Issue

mogmarsh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment