Google Drive files preview in WordPress

[rahul286]

Whenever we share Google doc, sheet or slide in Slack, it automatically displays the file preview.

Maybe we need to create a Google console app and use some APIs that are not private.

Please note we will require to handle access control e.g. somebody who is currently viewing may not supposed to even look at the preview.

Overall, the first step is to understand how Slack displays Google Docs preview. I hope the Google API for this is public.

[thrijith]

Whenever we share Google doc, sheet or slide in Slack, it automatically displays the file preview.

The preview is only shown if the GDrive app isn't muted by the user in slack, else only the link will be pasted. The generated preview is visible to anyone, restriction is only applicable to the access of the document that is shared.

Following is screenshot shared in DM over slack, the preview was visible to a user who didn't have access.

I checked for existing plugins that provide this feature.

Here is a plugin that provides similar to what is described in this issue's description.

The plugin uses shortcode/block to embed a file url, please refer this video for more info, created 2 files one with limited access and other with full access.

Test post link: https://thrijith.dev1.rt.gw/2020/01/15/test-g-drive-embed/

@rahul286 is this what you expected to be achieved in WordPress?

cc: @maitreyie-chavan @DevikVekariya

[rahul286]

@thrijith thanks for recording video. :-)

The key difference is UX.

1. We don't need the user to pick a block or select a file. Just paste a link. Like you paste a link from YouTube or Twitter.
2. Next, we need to display a preview image rather than embedding the whole doc in maybe iframe. Please note image vs iframe doc.

I think the first point may be doable by using oEmbed hack.

For the second one, we may need to find out what Slack does? I am not sure if Google Drive API has an endpoint for that.

Let's try workflow for oEmbed + Slack-like-preview workflow for public Google Doc first. We can get into permission later.

[thrijith]

Next we need to display a preview image rather than embedding whole doc in maybe iframe. Please note image vs iframe doc.

Ok, for now we want to generate a preview similar to what is done in slack for a public doc.

We may need to find out what Slack does? I am not sure if Google Drive API has an endpoint for that.

Will look into this in detail.

@DevikVekariya @maitreyie-chavan I assuming above requirement to take 6-8 hours, which would include support for docs link in oEmbed along with search for an API from Google for image preview of the doc.

[thrijith]

Found https://developers.google.com/drive/api/v2/reference/files/get which is useful in getting info public docs, I tested out its API, it returns a response which contains thumbnail url.

We need OAuth access to get information.

Doc shared from my personal account.

"thumbnailLink": "https://lh3.googleusercontent.com/wDZSAI3jyY9FLWBJxM1NxBQWlzAY2GbJipjTUejmWhmwkVMqdk8IY262hUOf1JwRv0lJcWiQoAtDAC43oFwILh5vE6c=s220",

The URL is accessible directly and can be used for generating preview.

Doc shared from my rtCamp account.

"thumbnailLink": "https://docs.google.com/a/rtcamp.com/feeds/vt?gd=true&id=1uo7ST6hk6PsC9bxdm62HsbYfGZCD7HlvdQqJ5VjKdPk&v=1&s=AMedNnoAAAAAXiCfGVfP8v-W-cLYanEehevw6YS1oRww&sz=s220",

This requires for the user to be signed in, for the image to be visible.

[thrijith]

Found a usable "endpoint" which is working in both cases, I'll use this in ombed to get our desired result.

rtCamp A/c Doc :- https://drive.google.com/thumbnail?id=17UD5-q-chsslclOAf96muOozC0VNRAEzHm4OHlrm9yY

Personal A/c Doc :- https://drive.google.com/thumbnail?id=0B2J7FcMmVjBBWk5OMWRBMlFUWmo1OFNGd0NaNUZ3UXRDLWlj

[thrijith]

Created a sample plugin to handle the embeds right now it works for Google Docs, will add support for others as well.

The CSS isn't working in the backend, so need to check that as well.

https://drive.google.com/file/d/1CdcybBapUQ9recncb90PFXeetYqmfHPF/view?usp=sharing

[thrijith]

I am mainly testing the feature on Classic Editor, Block Editor has some issue with embeds more details here WordPress/gutenberg#12421

Once support for public Google Sheets, Google Slides preview is added, will work on preview in editor. Current status with support for Docs can be seen in previous comment's link.

[thrijith]

Added support for Open docs in Classic Editor.

Here is the current status : https://drive.google.com/drive/folders/1xvcK_bo3OGH3FiaZZVB116vDhedWPewM

Have pushed code to a new repo for now, can change later if required.

Repo: https://github.com/rtCamp/wp-google-drive/

cc: @rahul286

[thrijith]

• Tested with several URLs for open docs in Google Drive.
• Tested in Classic Editor and Classic Editor Block of Block Editor.

Doesn't support embedding in Block Editor at the moment, I have tested with patch in https://core.trac.wordpress.org/ticket/45447 which fixes the issue, once it lands in code the plugin should be able to embed URLs in Block Editor as well.

---

Alpha release for internal testing : Link.

Please test using this zip : Link.

---

Demo for Classic Editor : Link

Demo for Classic Editor Block : Link

cc: @rahul286

[deepaklalwani97]

I have tested the preview in both classic editor and classic editor block it works as expected for the public links. For a preview of private links to work the user should be logged in and as primary account if there are multiple google accounts logged in.

[thrijith]

I have added comment on the Trac ticket to get an idea on the status of merging it into core.

The class whose method is updated to add the patch is final, so it can't be overridden to modify according to our needs.

Calls to methods used in the said method which is part other classes have filters, and public methods which could be overridden ( need to check in detail for implementation ), even if that is possible, doing so for supporting embeds is not clean code.

As of now, any one hoping to use this in Block Editor would have to take help of the Classic Block to get it working.

[rahul286]

@thrijith I will need to get on a call to understand this better. The user experience is very important

[thrijith]

@rahul286 Sure, I'll ping you as soon as I am free from other tasks.

[thrijith]

@rahul286

Adding the support as a oEmbed Provider didn't work either, as we are not using any embed provider to achieve this, since we have custom requirement which adds just the preview of the document in an image tag.

Drive doesn't seem to have an oEmbed endpoint for thumbnail preview, we used wp_embed_register_handler

Should probably only be used for sites that do not support oEmbed.

☝️ from the function description, this is our use case, so we could add a Google Drive Embed block to support embeds in Block Editor.

Please let me know if I should proceed with custom Block to support URL embeds in Block Editor.

[rahul286]

Adding a custom block is fine but from a UX perspective.

If you notice with YouTube URLs, just pasting URL as well as adding YouTube block and then pasting URL in it works. The same seamless behavior we need for Google Drive.

For now, let's create a custom block for Google Drive "embed" (preview).

We will explore how we can trigger preview simply by pasting the URL later.

[thrijith]

If you notice with YouTube URLs, just pasting URL as well as adding YouTube block and then pasting URL in it works. The same seamless behavior we need for Google Drive.

Since Youtube is a whitelisted provider it works out of the box ( ref ) and embeds when a user pastes the URL.

If we were to add support for a service using oEmbed, whitelisting and adding provider would have worked as well.

The thumbnail preview is added using custom code but not an oEmbed URL, we use wp_embed_register_handler which should add support for custom requirements.

Since it does work on Classic Editor, but not on Block Editor due the issue mentioned earlier, I'll add Custom Block to handle this.

[rahul286]

@thrijith can we create a middleware like oEmbed-proxy.

We will put a domain such as drive.rtcamp.com which takes some arguments and return repsponse in oEmbed comptabile way.

I am not sure but dont code above for now. We need to do more research and dicussion for now.

We will jump to code once we have a blueprint.

[thrijith]

can we create a middleware like oEmbed-proxy.

Yes, I think this could be done. Should I add the custom block or check on the above possibility?

[thrijith]

Working on block for now, we can add middleware after research.

[thrijith]

Added block for preview of drive file in block editor.

cc: @rahul286

@deepaklalwani97 please test the block and let me know in case of any concerns.

Zip of the plugin with latest changes.

rt-google-embeds.zip

[deepaklalwani97]

@thrijith I have tested the latest zip with block. The preview for shared documents with the Gutenberg block works as expected.

[thrijith]

Current status of the plugin.

What happens if you paste a Google Drive file link which is shared publicly?

In Classic Editor - ✅

In Block Editor directly - Doesn't work due to core issue. - ❎

In Block Editor's Classic Block - Link is pasted in the block - ✅

In Block Editor, we have a new block to add file preview, which works when you paste the shared file URL. ✅

What is remaining?

The ability to directly paste the link and embed the URL in Block Editor directly without depending on any block.

To fix this we need to create an oEmbed handler which gives proper response, and have to whitelist our provider so that it works in Block Editor as well.

[SID177]

@rahul286 @thrijith
I have added the code to show preview in the Gutenberg editor itself.
It registers REST endpoint (rt-google-embed/v1/oembed) which works as an oEmbed provider for google drive URLs.

I've also removed no preview image in case of an invalid URL or private file. I've returned 404 instead, by doing this the default Embed block gives an option to convert the URL into a link.

In classic editor, it'll do nothing if the file is private or when URL is invalid, else it'll generate the preview.

Video - https://drive.google.com/file/d/1fzJHR6o7j9cpifYjBu1qqkopluacxYie/view?usp=sharing

[DevikVekariya]

@SID177
Can you please share the link of dev/labs site where this can be checked?

[SID177]

@DevikVekariya
You can test it here - https://sid-labs-test.dev1.rt.gw/
editor / !h5vHH8OTWaa8%%(VAnRjxg9
This code is inside custom-oembed-provider branch.

[juhi123]

@maitreyie-chavan I have started testing it but having an issue.
When we use such links which has /open https://drive.google.com/open?id=1MVE8ufd_52kR95AW4lV_j_5EubCQtWe9ECtRQCCVn6k, it works

When I copy the URL by copying the link, it generates such a URL https://docs.google.com/document/d/1MVE8ufd_52kR95AW4lV_j_5EubCQtWe9ECtRQCCVn6k/edit?usp=sharing and it doesn't work. It gives the error of invalid embed

@SID177 is looking into this.

[maitreyie-chavan]

@juhi123 Thank you for the update. Any PR reviews required for this task can be assigned to Thrijith.

[SID177]

@juhi123 I've fixed the issue. Now it'll extract ID from https://docs.google.com/document/d/1MVE8ufd_52kR95AW4lV_j_5EubCQtWe9ECtRQCCVn6k/edit type of URLs and show the preview.
I've added changes on the site mentioned here #4 (comment), please have a look.

The PR #3 is approved by Thrijith.

cc @maitreyie-chavan

[juhi123]

@SID177
I have tested all type of google drive files, Google presentation and Google drawings are not supported.
https://juhi.dev5.rt.gw/2020/04/20/google-doc-testing/
Please have a look

[juhi123]

BTW do we have any control over preview fonts and appearance, it's not quite visible

[juhi123]

@itowhid06 Can you please check this issue #4 (comment) and work on it?

[thrijith]

The ticket in the core has been set for 5.5 and seems to be working as expected in the 5.5-beta1 out of the box. If this plugin is planned for release post 5.5, the changes done for custom oEmbed provider can be removed with the required WordPress version set to 5.5 as a minimum.
cc: @SID177

[SID177]

Okay noted 📝 .
Thanks @thrijith

[rahul286]

Thanks @thrijith 🙏

I hope you are doing well and staying safe! 💪

[pdclark]

Any insight on Drawings & Sheets embeds — #7 @thrijith ?

[thrijith]

Hi @pdclark, I didn't get a chance to test / verify this, but I believe sheets should work based on

https://github.com/rtCamp/wp-google-drive/blob/fa952fa93dcc80eb1f4d3763f074dda0fee4baf0/includes/classes/class-rtcamp-google-embeds.php#L117-L123

don't see drawings support in the code, so that should be added.

[pdclark]

• Drawings & spreadsheets work.
• Readme updated.
• ❌ Presentations did not work for me in testing.
• ❌ Form "edit" view worked for embedding, but not "send" view.

The regexes look correct. Any ideas for a fix? Or do presentations work for others?
I'd like to add this to the readme and then possibly release:

The plugin supports embedding previews for the following Google Drive document types:

* Documents
* Spreadsheets
* Drawings
* Presentations 
* Forms (Shared edit view; not send view.)

@thrijith @SID177