Skip to content

File Block: Add support for embedding PDFs#30857

Merged
pento merged 12 commits intotrunkfrom
add/pdf-support-2-the-supportening
Apr 21, 2021
Merged

File Block: Add support for embedding PDFs#30857
pento merged 12 commits intotrunkfrom
add/pdf-support-2-the-supportening

Conversation

@pento
Copy link
Copy Markdown
Member

@pento pento commented Apr 15, 2021

Description

Replaces #24233.
See #19077.

This PR adds an option to the File block, when a PDF file is inserted, to show an embedded version of the PDF.

PDFs are a bit of a special case amongst files: they're the only document file type with native embed support in most major browsers (mobile devices excepted).

How has this been tested?

The following scenarios need to be tested:

  • Insert a file block and select a PDF from the media library.
  • Drag/drop a PDF to upload it.
  • Switch from a PDF, to a different file type, and back again.
  • Test in different browsers: Chrome, Firefox, Safari, Edge, IE11.
  • Test on different OSes: MacOS, Windows 10, Android, iOS on iPhone, iOS on iPad.
  • Test on IE11 with and without Acrobat Reader installed.

Screenshots

Screen.Recording.2021-04-15.at.4.10.34.pm.mov

Types of changes

New feature.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR

@pento pento added Needs Testing Needs further testing to be confirmed. [Block] File Affects the File Block [Type] Feature New feature to highlight in changelogs. labels Apr 15, 2021
@pento pento requested a review from ajitbohra as a code owner April 15, 2021 05:26
@pento pento self-assigned this Apr 15, 2021
@pento pento changed the title Re-implement #24233. File Block: Add support for embedding PDFs Apr 15, 2021
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 15, 2021

Size Change: +1.05 kB (0%)

Total Size: 1.47 MB

Filename Size Change
build/annotations/index.js 3.78 kB +3 B (0%)
build/api-fetch/index.js 3.41 kB -1 B (0%)
build/autop/index.js 2.83 kB +1 B (0%)
build/block-editor/index.js 130 kB +1 B (0%)
build/block-library/blocks/file/editor-rtl.css 301 B +126 B (+72%) 🆘
build/block-library/blocks/file/editor.css 300 B +126 B (+72%) 🆘
build/block-library/blocks/file/style-rtl.css 255 B +7 B (+3%)
build/block-library/blocks/file/style.css 255 B +7 B (+3%)
build/block-library/editor-rtl.css 9.83 kB +35 B (0%)
build/block-library/editor.css 9.82 kB +36 B (0%)
build/block-library/index.js 154 kB +691 B (0%)
build/block-library/style-rtl.css 9.44 kB +6 B (0%)
build/block-library/style.css 9.44 kB +6 B (0%)
build/block-serialization-default-parser/index.js 1.87 kB -2 B (0%)
build/blocks/index.js 48.6 kB +5 B (0%)
build/components/index.js 285 kB -6 B (0%)
build/compose/index.js 11.6 kB -3 B (0%)
build/core-data/index.js 17.2 kB +2 B (0%)
build/customize-widgets/index.js 8.25 kB +1 B (0%)
build/data/index.js 8.87 kB +1 B (0%)
build/date/index.js 31.9 kB -1 B (0%)
build/dom-ready/index.js 577 B +1 B (0%)
build/dom/index.js 5.12 kB -1 B (0%)
build/edit-navigation/index.js 17 kB +3 B (0%)
build/edit-post/index.js 339 kB -4 B (0%)
build/edit-site/index.js 28.7 kB +3 B (0%)
build/edit-widgets/index.js 16.7 kB +1 B (0%)
build/editor/index.js 42.7 kB +2 B (0%)
build/element/index.js 4.62 kB +1 B (0%)
build/format-library/index.js 6.77 kB +2 B (0%)
build/html-entities/index.js 622 B -1 B (0%)
build/i18n/index.js 4.04 kB +1 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB -1 B (0%)
build/media-utils/index.js 5.39 kB +1 B (0%)
build/nux/index.js 3.42 kB +1 B (0%)
build/primitives/index.js 1.42 kB -1 B (0%)
build/react-i18n/index.js 1.45 kB +1 B (0%)
build/rich-text/index.js 13.5 kB +2 B (0%)
build/server-side-render/index.js 2.6 kB -1 B (0%)
build/token-list/index.js 1.27 kB -1 B (0%)
build/wordcount/index.js 1.22 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.62 kB 0 B
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 12.6 kB 0 B
build/block-editor/style.css 12.6 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 503 B 0 B
build/block-library/blocks/button/style.css 503 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 368 B 0 B
build/block-library/blocks/buttons/style.css 368 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 436 B 0 B
build/block-library/blocks/columns/style.css 435 B 0 B
build/block-library/blocks/cover/editor-rtl.css 605 B 0 B
build/block-library/blocks/cover/editor.css 605 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB 0 B
build/block-library/blocks/cover/style.css 1.23 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/frontend.js 765 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB 0 B
build/block-library/blocks/freeform/editor.css 2.44 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.09 kB 0 B
build/block-library/blocks/gallery/style.css 1.09 kB 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 398 B 0 B
build/block-library/blocks/legacy-widget/editor.css 399 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 597 B 0 B
build/block-library/blocks/navigation-link/editor.css 597 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/navigation-link/style.css 1.07 kB 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.24 kB 0 B
build/block-library/blocks/navigation/editor.css 1.24 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 272 B 0 B
build/block-library/blocks/navigation/style.css 271 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 239 B 0 B
build/block-library/blocks/page-list/editor.css 240 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/post-title/style-rtl.css 60 B 0 B
build/block-library/blocks/post-title/style.css 60 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 810 B 0 B
build/block-library/blocks/query/editor.css 809 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 440 B 0 B
build/block-library/blocks/site-logo/editor.css 441 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 154 B 0 B
build/block-library/blocks/site-logo/style.css 154 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 796 B 0 B
build/block-library/blocks/social-links/editor.css 795 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 402 B 0 B
build/block-library/blocks/table/style.css 402 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 552 B 0 B
build/block-library/blocks/template-part/editor.css 551 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 568 B 0 B
build/block-library/blocks/video/editor.css 569 B 0 B
build/block-library/blocks/video/style-rtl.css 173 B 0 B
build/block-library/blocks/video/style.css 173 B 0 B
build/block-library/common-rtl.css 1.31 kB 0 B
build/block-library/common.css 1.31 kB 0 B
build/block-library/reset-rtl.css 502 B 0 B
build/block-library/reset.css 503 B 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.2 kB 0 B
build/customize-widgets/style-rtl.css 630 B 0 B
build/customize-widgets/style.css 631 B 0 B
build/data-controls/index.js 836 B 0 B
build/deprecated/index.js 787 B 0 B
build/edit-navigation/style-rtl.css 2.86 kB 0 B
build/edit-navigation/style.css 2.86 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-post/style-rtl.css 6.99 kB 0 B
build/edit-post/style.css 6.98 kB 0 B
build/edit-site/style-rtl.css 4.9 kB 0 B
build/edit-site/style.css 4.89 kB 0 B
build/edit-widgets/style-rtl.css 2.97 kB 0 B
build/edit-widgets/style.css 2.98 kB 0 B
build/editor/style-rtl.css 3.92 kB 0 B
build/editor/style.css 3.92 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 2.28 kB 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/keycodes/index.js 1.95 kB 0 B
build/list-reusable-blocks/index.js 3.19 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/notices/index.js 1.85 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/plugins/index.js 2.95 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.83 kB 0 B
build/reusable-blocks/index.js 3.8 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/url/index.js 3.01 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@pento
Copy link
Copy Markdown
Member Author

pento commented Apr 15, 2021

I think this linting failure is incorrect: it's presumably meant to check for IE11 compatibility, but the JS runs correctly in IE11 when I test the functionality.

@pento pento removed the Needs Testing Needs further testing to be confirmed. label Apr 15, 2021
@pento
Copy link
Copy Markdown
Member Author

pento commented Apr 16, 2021

I think this linting failure is incorrect: it's presumably meant to check for IE11 compatibility, but the JS runs correctly in IE11 when I test the functionality.

On further investigation, the linting failure was actually a build failure. It took about a day of diving down infinite rabbit holes to fix it in f57ef25. 🙃

@pento pento requested review from gziolo and vcanales April 16, 2021 05:03
@gziolo
Copy link
Copy Markdown
Member

gziolo commented Apr 16, 2021

This is a really cool feature! Nice investigation on the newly added capability to build frontend files for blocks. It needs some more work and first-class support in WordPress core as the next step. We need a few more use cases in Gutenberg to ensure the API is useful because there might be interesting use cases for the frontend.

Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool work here @pento! I've left some comment but nothing major.

@paaljoachim
Copy link
Copy Markdown
Contributor

It looks really nice!

I am noticing that I can hide the button with a toggle, but can I also hide the text link under the PDF file?

Removing/hiding this text link:
Screen Shot 2021-04-16 at 23 33 26

@paaljoachim
Copy link
Copy Markdown
Contributor

I added a few comments to the issue, and received feedback from a few people. Here is the newest design suggestion. That multiple people would find helpful. #19077 (comment)

@gziolo
Copy link
Copy Markdown
Member

gziolo commented Apr 20, 2021

I'm marking this PR as needing some follow-up work in WordPress core because of the introduction of the PHP file for the block. We will have to add a note in https://core.trac.wordpress.org/ticket/52991 once it lands. I assume it goes in WordPress 5.8 😄

Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is going good @pento ! I retested and I've left just a comment. Thanks!

@pento pento force-pushed the add/pdf-support-2-the-supportening branch from 4c49af7 to 7bee495 Compare April 21, 2021 04:18
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! 💯 - let's 🚢

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
@pento pento merged commit 79707b4 into trunk Apr 21, 2021
@pento pento deleted the add/pdf-support-2-the-supportening branch April 21, 2021 08:50
@github-actions github-actions bot added this to the Gutenberg 10.5 milestone Apr 21, 2021
"source": "html",
"selector": "a[download]"
},
"displayPreview": {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this option and I believe we should probably extend it to various file types. Like QuickView for Gutenberg.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it looks like previews for different file types are being discussed 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] File Affects the File Block [Type] Feature New feature to highlight in changelogs.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants