Output largo specific photo credit metadata on image block

[joshdarby]

Changes

This pull request makes the following changes:

• Uses the new blocks API to insert media credits into images in the image block.

Why

For #1683.

Testing/Questions

Features that this PR affects:

• Image blocks in Gutenberg.

Questions that need to be answered before merging:

• What could we change to make this better?
• Is the current placement/styling of the media credit ok?

Steps to test this PR:

1. Edit Gutenberg post
2. Insert 2 image blocks into post
   a. One image with a media credit with no url
   b. One image with a media credit with a url
3. Once inserted, save the post , refresh/click around and then preview it.
4. Does the media credit show up correctly on the frontend?

[pullrequest]

✅ A review job has been created and sent to the PullRequest network.

---

Check the status or cancel PullRequest code review here.

[pullrequest]

PullRequest network review has been cancelled

You can reactivate the code review job from the PullRequest dashboard - or - by adding [pr] to the title of this code review.

[benlk]

Questions for review:

• does it work in:
  • current wp core
  • current gutenberg plugin
• could it be improved in any way that's achievable with little time input?
• does it have the possibility of messing with anything?

[benlk]

• Does Gutenberg content that already exists automatically have this added in the output, or will posts have to be resaved?
  • Should it? This is something that we'd want to poll users on.

[benlk]

An image inserted before this change, using WP 5.2.2 and with the Gutenberg plugin inactive, results in block validation failure for core/image blocks:

Content generated by save function:

The shadow shows the boundaries of Louisiana if intertidal lands and wetlands are not counted towards the state's territory. State correctional facilities are marked.

Content retrieved from post body:

The shadow shows the boundaries of Louisiana if intertidal lands and wetlands are not counted towards the state's territory. State correctional facilities are marked.

- <figure                       ><img src="https://largo.test/wp-content/uploads/2019/07/prisons-vs-intertidal-1.png" alt="A map of Louisiana overlaid with a shadow that brings the shorelines of Louisiana well inland. The boot is cut in twain."                     /><figcaption>The shadow shows the boundaries of Louisiana if intertidal lands and wetlands are not counted towards the state's territory. State correctional facilities are marked.</figcaption></figure>
+ <figure class="wp-block-image"><img src="https://largo.test/wp-content/uploads/2019/07/prisons-vs-intertidal-1.png" alt="A map of Louisiana overlaid with a shadow that brings the shorelines of Louisiana well inland. The boot is cut in twain." class="wp-image-629"/><figcaption>The shadow shows the boundaries of Louisiana if intertidal lands and wetlands are not counted towards the state's territory. State correctional facilities are marked.</figcaption></figure>

It looks like the change introduced in this PR is failing to save the .wp-block-image class on the containing <figure> element, and the image ID class on the <img>.

[benlk]

On the first save of a post containing a newly-inserted image block for an image that contains a media credit, the post_content does not contain the image credit. After that save, the image credit appears in the editor, but until the next post save, the editor shows something that doesn't exist in the post_content or on the front end.

The media credit doesn't capture the organization field from the media credit metadata, in my testing.

[benlk]

But all that criticism aside: This is a massive improvement over the status quo, and it proves that the thing we're trying to do is, in theory, possible. 🎉

[joshdarby]

@benlk Do you think it's worth hacking our way through this right now instead of using something like DOMDocument to render the caption in the post content in the interim while we wait for a future Gutenberg release to address this?

[benlk]

If there's no way to make it work on the blocks.getSaveElement hook/filter , then yes, I think it would be better to do the serverside frontend-only approach. There's a number of filters within the function render_block that might allow us to generate appropriate markup without using DOMDocument or regexes in HTML.

[benlk]

Coming in Gutenberg 6.1: https://developer.wordpress.org/block-editor/components/slot-fill/

[joshdarby]

@benlk Looking more into this here WordPress/gutenberg#10204 brings up a good point. If we continue down the path of manipulating the image block and then someone chooses to switch off of Largo, all of their image blocks (presumably) will go into the "Invalid" state since it won't match its expected output.

[benlk]

I'm not sure that we need to be worried about that, since we're not adding content that is invalid in the area that we're adding it.

The examples in WordPress/gutenberg#10204 show adding new data- attributes to elements. We're adding some <span> tags to the contents of the <figcaption> element.

I'm currently running the #1662 branch of Largo on a database where I had previously used this branch to test the addition of elements. This gives us the setup: where the code in this PR had been active, but is not.

Here's the big conflict:

Parts:

• Gutenberg thinks there should be a wp-block-image class on the <figure>, which was an issue with this PR that I raised in Output largo specific photo credit metadata on image block #1733 (comment)
• Gutenberg doesn't like the / in <br/> because that's XHTML, not HTML, but it's not a big worry. https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br

[joshdarby]

Thanks for looking at that so quickly.

[joshdarby]

@benlk I think this is ready for review again. I addressed all of your comments. I also switched from using blocks.getSaveContent to editor.BlockEdit so the credit gets added in real time.

It also seems to be backwards compatible now and doesn't break blocks when you switch to a different branch without this code.

[benlk]

Needs support for the media credit URL, but apart from that I think this is good to go. 👏

[benlk]

This section tests if it has a media credit org, not if it has a URL.

This PR does not, presently, include a function for including the URL in the media credit.

[joshdarby]

@benlk I wasn't sure about the URL since it was set as a variable but wasn't used in the classic editor way here:
https://github.com/INN/largo/blob/39a0fc4ca34a118ae6ae870dd591029f5a61fdb1/lib/navis-media-credit/navis-media-credit.php#L248-L250

Should the URL wrap the credit or organization name?

[benlk]

Odd that it isn't used in the main media credit instance.

It's used for the "hero" featured image on posts, where the link wraps the credit and org name together: https://github.com/INN/largo/blob/72cc8433a1be1de4f22789e1ec89496d54a653d9/partials/hero-featured-image.php#L5-L7

[benlk]

This PR doesn't modify the Gallery Block, but if we want to cover that I think it should be in a separate PR, for a separate issue.

[joshdarby]

@benlk 0660b38 updates the media credit to include the url if it exists.

So our test cases should be an image with:

• Credit + Org + URL
• Credit + URL
• Credit + Org
• Credit

[benlk]

has/doesn't of:

• credit
• org
• URL

But the case where an image has a URL alone makes little sense. So let's add:

• org + URL
• org alone
• no credit metadata at all

[joshdarby]

@benlk I'll have to rewrite part of this if we want these two to work:

• org + URL
• org alone

Right now the first conditional just checks if the credit exists and doesn't show anything if the credit doesn't exist.

if( media.media_credit && media.media_credit._media_credit ){

[joshdarby]

5ffccaf updates the conditional to allow the organization (+url if it exists) to display if the credit doesn't exist.

[benlk]

If that worked in your testing, let's merge it and be done.